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 / 1.6Body text uses Geist at 16px with a comfortable 1.6 line height. Designed for readability in both warm and cool contexts.
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!@#$%^&*()
Primary
#FE4E18
Secondary
#34474E
Cream
#E8E4DD
Neutral
#6B7280
Dark
#0D1E24
Lightest
#FFFDF6
Lighter
#F7F5F1
Light
#F2EFE9
Base
#E8E4DD
Dark
#0D1E24
Dark-2
#132A32
Dark-3
#1A3540
Card
#0F2229
Warm and inviting
Cream backgrounds create a natural, organic feel — the default surface for most content.
Sharp and precise
Cool dark teal for contrast sections, code blocks, and feature showcases.
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. No borders, no SVGs — just the grid showing through.
Radial-gradient at 17px intervals for the technical blueprint aesthetic.
CSS custom properties as the portable foundation.
Buttons, cards, inputs — built on the token layer.
CSS custom properties that work everywhere — static HTML, Tailwind, React.
Asymmetric line grids with dot overlays for that technical precision feel.
Lenis smooth scroll, GSAP text reveals, and parallax — all opt-in.
Lenis-powered with configurable lerp and duration.
Per-character staggered opacity via GSAP ScrollTrigger.
2px
4px
8px
12px
16px
24px
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
Parallax layers move at different speeds as you scroll, creating a sense of depth. Each element gets a data-speed attribute that controls its scroll multiplier.
Get updates when new modules and patterns drop.
"This design system saved us weeks of back-and-forth. The tokens just work everywhere."
"Clean tokens, beautiful defaults, and the grid system is unlike anything I've used before."
"We rebuilt our entire marketing site in a week using these patterns. The warm palette is gorgeous."
"The isometric illustrations and the line grid give our site a distinctive technical feel."
Perfect for personal projects and experiments.
For teams shipping production websites.
Bespoke design systems for organizations.