Card Shadow
--shadow-card 0 1px 3px + 0 1px 2px
Design System
Every component, token, and variant in one place.
Design Tokens
Color Palette
All semantic color tokens defined in OKLCH. Light mode shown; dark mode inverts backgrounds and foregrounds.
--background oklch(100% 0 0) --foreground oklch(14.5% 0 0) --primary Ingot Red --primary-foreground white on red --card Card bg --secondary oklch(97% 0 0) --muted Muted bg --border oklch(92.2% 0 0) --ring
Focus ring --surface-invert Dark section --success Green --warning Amber --destructive Red/Error Design Tokens
Typography Scale
Fluid clamp()-based type scale. Resize the browser to see responsive scaling. Headings use Outfit, body uses Manrope, code uses JetBrains Mono.
--text-xs (12–14px)
The quick brown fox jumps over the lazy dog.
--text-sm (14–16px)
The quick brown fox jumps over the lazy dog.
--text-base (16–18px)
The quick brown fox jumps over the lazy dog.
--text-lg (18–20px)
The quick brown fox jumps over the lazy dog.
--text-xl (20–24px)
The quick brown fox jumps over the lazy dog.
--text-2xl (24–32px) — Heading
The quick brown fox
--text-3xl (30–40px) — Heading
The quick brown fox
--text-4xl (36–48px) — Heading
The quick brown fox
--text-5xl (48–64px) — Heading
The quick brown fox
Font Weights
Thin (100) — The quick brown fox
ExtraLight (200) — The quick brown fox
Light (300) — The quick brown fox
Normal (400) — The quick brown fox
Medium (500) — The quick brown fox
Semibold (600) — The quick brown fox
Bold (700) — The quick brown fox
ExtraBold (800) — The quick brown fox
Black (900) — The quick brown fox
Code font (JetBrains Mono)
const greeting: string = "Hello, Ingot!"; Design Tokens
Spacing Scale
rem-based spacing tokens from 0 to 12rem.
--spacing-0 0rem --spacing-1 0.25rem --spacing-2 0.5rem --spacing-3 0.75rem --spacing-4 1rem --spacing-5 1.3125rem --spacing-6 1.625rem --spacing-7 2rem --spacing-8 2.625rem --spacing-9 3.25rem --spacing-10 4rem --spacing-11 12rem Design Tokens
Border Radius
From sharp corners to fully rounded pills.
--radius-xs 0.125rem --radius-sm 0.25rem --radius-md 0.375rem --radius-lg 0.5rem --radius-xl 0.75rem --radius-2xl 1rem --radius-full 9999px Design Tokens
Shadows
Layered shadow tokens for cards, dropdowns, and elevated elements.
Dropdown Shadow
--shadow-dropdown 0 4px 6px + 0 2px 4px
Large Shadow
--shadow-lg 0 10px 15px -3px + 0 4px 6px -4px
UI Primitive
Cards
Default and glass variants. Hover for lift effect.
Default Card
Bordered card with background, subtle shadow, and hover lift. Perfect for content containers.
Glass Card
Semi-transparent frosted glass effect. Works well on gradient or image backgrounds.
UI Primitive
Badges
Pill-shaped labels for categories, statuses, or eyebrow text.
Default Outline Feature New Coming Soon
UI Primitive
Form Inputs
Text, email, tel, textarea, and checkbox inputs.
This is an error message using --destructive color.
Component
SectionHead Variations
Try with and without the eyebrow. This shows the full eyebrow + title + description.
Title-Only Variant
This SectionHead has no eyebrow. Just a title and description.
Credibility Stats
Large stat counters with hover lift effect. Grid of 4.
99.9%
Uptime
24/7
Support
100+
Integrations
10yr+
Experience
FAQ
Frequently Asked Questions
What is this component?
This is the FAQ accordion component using native <details> and <summary> elements. No JavaScript required — it works with HTML alone.
Is this accessible?
Yes. All interactive elements have visible focus rings using --ring. The FAQ uses semantic HTML. Form errors use aria-describedby. Reduced motion preferences are respected.
“This design system makes building consistent pages incredibly fast. Every component just works together.”
Developer
Building the Style Guide
Icon Grid
Ocean Freight
Air Freight
Road Haulage
Customs
Invoicing
Checkmark
Partner Logos
Grid of partner logos with hover states. Links to carrier websites.
Ready to build something?
This CTA banner uses the inverted section pattern with a narrow container and outline button.