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
4px8
8px16
16px24
24px32
32px48
48px64
64pxBadges
DefaultSecondaryOutlineDestructive