A design system that fuses the warmth of artisanal craft with the precision of engineered grids. Every token, every line, every transition — intentional.
Aa Bb Cc
Heading — 96px / -0.031em / 0.92Headlines
Subheading — 48px / -0.02em / 1.0Feature titles
Title — 32px / -0.01em / 1.1Card headings and smaller sections
Body — 16px / -0.01em / 1.6Body text uses Geist at 16px with a comfortable 1.6 line height. Designed for readability in both light and dark contexts, with subtle negative tracking.
Label — Fragment Mono / 10px / uppercaseFIG_01 — Section labels and captions
monospace for code, tokens, and technical content
Light 300
Regular 400
Medium 500
SemiBold 600
Bold 700
Light 300
Regular 400
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()
Dark
#1f1915
Light
#fffdf6
Accent
#d4fd80
Red
#fa4149
Coral
#fa725a
BG-1
#f7f5f1
BG-2
#f2efe9
BG-3
#e6e3dd
Surface
#0d0d0d
Surface-2
#141414
Surface-3
#1a1a1a
Card
#111111
Warm and inviting
Warm neutral backgrounds create a natural, organic feel.
Sharp and precise
Dark surfaces maintain warmth even in dark mode.
A design system crafted for developers and designers who value intentional choices.
Every color, space, and radius — defined as a portable CSS custom property.
CSS Grid with 1px gaps creates structural lines. No borders, no SVGs.
Radial-gradient at 17px intervals creates the technical blueprint aesthetic.
CSS custom properties as the portable foundation.
Buttons, cards, inputs — built on the token layer.
Lenis-powered smooth scrolling with configurable lerp and duration.
Per-character staggered opacity via GSAP ScrollTrigger.
Data-driven parallax transforms with configurable speed.
CSS custom properties that work everywhere.
Asymmetric line grids with dot overlays.
2px
4px
8px
12px
16px
24px
32px
100vw
Every character fades in as you scroll, creating a reading-paced reveal that draws the eye through the content.
Elements fade up with a staggered delay
Each child offsets by 100ms
Using the bounce easing curve