Design System

This page migrates the root DESIGN.md into the Docusaurus site. It defines the UltimateUI documentation theme: a developer-platform surface inspired by Vercel, with stark ink on near-white canvas, crisp hairlines, geometric sans typography, mono technical labels, and a hero-scale multi-color mesh gradient as the only decorative system.

Design Voice

The default surface is near-white. Text is #171717 ink, with secondary body copy at #4d4d4d. The only large decorative element is the mesh gradient made from cyan, blue, violet, magenta, coral, and amber stops. It should not be miniaturized into icons, cropped into swatches, or reduced to a single-color gradient.

Key characteristics:

• Primary CTAs are black ink pills; secondary CTAs are white pills with a hairline border.
• Section eyebrows, code blocks, commands, and technical labels use mono.
• Headlines use sentence case and cap at weight 600.
• Cards rely on inset hairlines and subtle stacked shadows, never heavy drops.
• Page rhythm alternates between canvas-soft, canvas, and polarity-flipped dark bands.

Colors

Token	Value	Use
primary / ink	#171717	Primary CTAs, headings, dark section background
on-primary	#ffffff	Text on dark surfaces
body	#4d4d4d	Secondary copy, nav links, footer links
mute	#888888	Lowest-priority copy and placeholders
hairline	#ebebeb	1px dividers, card borders, input borders
canvas	#ffffff	Cards, dialogs, nav
canvas-soft	#fafafa	Default page background
canvas-soft-2	#f5f5f5	Inset regions and code-panel interiors
link	#0070f3	Body links and informational states
error	#ee0000	Destructive / validation states
warning	#f5a623	Pending / caution states
violet	#7928ca	Preview gradient start
cyan	#50e3c2	Brand gradient cyan stop
highlight-pink	#ff0080	Preview gradient highlight stop

Brand Gradient

Pair	Start	End	Use
Develop	#007cf0	#00dfd8	Blue -> teal
Preview	#7928ca	#ff0080	Violet -> pink
Ship	#ff4d4d	#f9cb28	Coral -> amber

The three pairs collapse into one mesh gradient for hero use. Treat it as one unified object and reserve it for large atmospheric sections.

Typography

Font strategy:

• Geometric sans: Geist, Inter, system-ui for display, body, buttons, and nav.
• Mono: Geist Mono, JetBrains Mono, ui-monospace for code, commands, and eyebrows.
• Display weight caps at 600; buttons use 500; body uses 400.
• Body paragraphs should not use mono.

Token	Size	Weight	Line Height	Letter Spacing	Use
display-xl	48px	600	48px	-2.4px	Hero headline
display-lg	32px	600	40px	-1.28px	Section headline
display-md	24px	600	32px	-0.96px	Card headings, pricing tiers
display-sm	20px	600	28px	-0.6px	Small display headings
body-lg	18px	400	28px	0	Lead paragraph
body-md	16px	400	24px	0	Default body
body-sm	14px	400	20px	-0.28px	Secondary copy, nav
caption	12px	400	16px	0	Badges and fine print
caption-mono	12px	400	16px	0	Mono eyebrows
code	13px	400	20px	0	Code and terminal text
button-lg	16px	500	24px	0	Marketing CTAs
button-md	14px	500	20px	0	Nav and small buttons

Principles:

• Display sizes may use negative tracking; body copy stays neutral.
• Headlines are sentence case and may use a final period for product voice.
• Mono is only for the technical layer.

Layout

The base spacing unit is 4px.

Token	Value
xxs	4px
xs	8px
sm	12px
md	16px
lg	24px
xl	32px
2xl	40px
3xl	48px
4xl	64px
5xl	96px
6xl	128px
section	192px

The content container maxes at about 1400px. Desktop gutters are 24px; mobile gutters are 16px. Three-column features, three-column pricing, and five-column template grids collapse down to one column on mobile.

Responsive strategy:

Range	Behavior
< 600px	Hero stacks, nav collapses, feature/pricing grids become one column
600-959px	Three-column grids become two columns
960-1199px	Full three-column grids
1200-1399px	Centered content near max width
>= 1400px	Full-bleed backgrounds with 1400px content cap

Elevation

Level	Treatment	Use
0 Flat	No shadow, no border	Hero bands and dark full-width sections
1 Inset Hairline	0 0 0 1px #00000014 inset	Default card edge
2 Subtle Drop	Two weak shadows + inset hairline	Template card
3 Soft Stack	Medium weak stack + inset hairline	Feature card
4 Float Stack	Wider weak stack + inset hairline	Pricing and callout panels
5 Modal	Three-layer modal stack + inset hairline	Dialogs and dropdowns

Do not use one heavy shadow. Card edges stay crisp through inset hairlines.

Radius

Token	Value	Use
none	0px	Full-width bands
xs	4px	Tight inline controls
sm	6px	Nav buttons, inputs
md	8px	Feature/template cards
lg	12px	Pricing and large cards
xl	16px	Large media cards
pill-sm	64px	Ghost tabs
pill	100px	Marketing CTAs
full	9999px	Icon buttons and ghost nav links

Components

Buttons

• button-primary: black 100px pill, white text, marketing primary CTA.
• button-secondary: white pill, black text, hairline border.
• button-primary-sm: smaller black button for nav/card contexts.
• button-secondary-sm: smaller white secondary button.
• tab-ghost: white pill for centered tab rows.
• icon-button-circular: circular white icon button with a hairline border.

Cards

• card-marketing: white, 24px padding, 8px radius, Level 3 shadow.
• card-marketing-large: white, 32px padding, 12px radius, Level 4 shadow.
• card-soft: soft-canvas card.
• template-card: white, 16px padding, 8px radius, 16:9 thumbnail cap.
• code-editor-mockup: black mono code panel, 24px padding, 8px radius.
• pricing-card: default white pricing tier.
• pricing-card-featured: polarity-flipped black featured tier.

Forms

• form-input: white, hairline border, 40px tall, 6px radius.
• form-input-sm: 32px tall.
• form-input-lg: 48px tall for hero CTAs.

Navigation

• nav-bar: white, 64px tall, sticky top, 24px desktop padding.
• nav-link: 14px secondary text with ghost-pill hover.
• footer: white four-column nav; column titles use mono captions.

Signature Sections

• hero-band: white hero with mesh gradient backdrop, mono badge, display-xl headline, body-lg lead, and CTA row.
• feature-mesh-band: secondary feature band with atmospheric mesh backdrop.
• showcase-band-light: canvas-soft section.
• showcase-band-dark: black polarity-flipped section, often with a code panel.
• logo-strip: monochrome SVG logo row at 24px height.
• badge-secondary: soft-gray small pill.
• banner-marketing: top announcement pill.
• link-inline: #0070f3 body link with hover underline.

Do

• Use #171717 as the primary CTA color.
• Use 100px pills for marketing CTAs and 6px radius for nav controls.
• Keep headlines at weight 600 and sentence case.
• Reserve mesh gradients for hero-scale surfaces.
• Use stacked shadows and inset hairlines.
• Build rhythm through light canvas, white cards, and black polarity-flipped bands.
• Use mono for technical labels and code.

Don't

• Do not add a sixth accent color.
• Do not render headlines in all caps.
• Do not use one heavy shadow.
• Do not miniaturize the mesh gradient into icons or small swatches.
• Do not raise display weight to 700/800.
• Do not set body copy in mono.