w3-kit

Design System

The visual language for w3-kit. Monochrome foundations with Solidity purple as a structural accent. Built on Geist Sans, a 10-step gray scale, and GSAP-driven motion.

Colors

10-step semantic gray scale. Values swap automatically between light and dark themes via CSS custom properties.

TokenVariableLightDarkUsage
100Page background
200Surface background
300Borders, dividers
400Subtle borders
500Disabled text
600Placeholder text
700Secondary text
800Muted text
900Primary text
Accent

Typography

Geist Sans for UI text, Geist Mono for code. Tight letter-spacing on headings, relaxed line-height on body.

Headings
Heading 4848px / 600
Heading 3232px / 600
Heading 2424px / 600
Heading 2020px / 500
Body
Body text at 16px16px / 400
Body text at 14px14px / 400
Caption at 13px13px / 400
Small at 12px12px / 400
Mono — Geist Mono
const wallet = await connect();
console.log(wallet.address);

Spacing

Base unit: 4px. All values are multiples of 4 or 8.

4
4px
8
8px
16
16px
24
24px
32
32px
48
48px
64
64px

Buttons

Sizes

Badges

DefaultSecondaryOutlineDestructive

Inputs

Cards

Card Title

A basic card component with header and content slots.

Glass Card

Inner glass surface for nested content.