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.

TokenVariableUsage

100--w3-gray-100Page background

200--w3-gray-200Surface background

300--w3-gray-300Borders, dividers

400--w3-gray-400Subtle borders

500--w3-gray-500Disabled text

600--w3-gray-600Placeholder text

700--w3-gray-700Secondary text

800--w3-gray-800Muted text

900--w3-gray-900Primary text

Accent

#5554D9

Accent Subtle

Backgrounds

Typography

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

Heading

Designed for short, impactful text with tight line height and negative letter-spacing.

Aa Example~ Class nameUsage

Heading 48text-heading-48Hero sections and landing pages.

Heading 32text-heading-32Page titles and major sections.

Heading 24text-heading-24Section headings within pages.

Heading 20text-heading-20Sub-section headings.

Copy

Designed for multiple lines of text, having a higher line height than headings.

Aa Example~ Class nameUsage

Copy 16 with Strongtext-copy-16Default body text for content.

Copy 14 with Strongtext-copy-14Most commonly used text style.

Copy 13text-copy-13Secondary text and descriptions.

Copy 13 Monotext-copy-13-monoUsed for inline code mentions.

Copy 12text-copy-12Captions and metadata.

Geist Mono

const kit = new W3Kit({ chain: 'ethereum' });

Spacing

4px base unit. All spacing is a multiple of 4 or 8.

4px

1x base

8px

2x base

16px

4x base

24px

6x base

32px

8x base

48px

12x base

64px

16x base

Buttons

Button variants following the monochrome design system.

Badges

Status indicators and labels.

DefaultAccentMuted

Inputs

Form input states.

Cards

Container components with surface background.

Card Title

Card content with secondary text styling.

Animations

GSAP-driven abstract structural SVG animations. Each subdomain has a unique animation that hints at its content.

Landing — Grid Assembly

UI — Component Outlines

Docs — Text Lines

Registry — Data Table