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.
2,847
Active users this week
Last checked 2m ago
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.
Three illustration types create a cohesive visual system. Each type serves a different purpose — from abstract concepts to concrete UI references.
Architecture flows, decision trees, and system maps. Nodes connected by solid and dashed lines, with the primary accent highlighting the active path. Used for explaining processes, workflows, and technical concepts.
Simplified app interfaces — dashboards, widget cards, and data views. Flat construction with minimal fills, window chrome with traffic lights, and bar charts or sparklines to suggest data. Used for product features and SaaS contexts.
Stacked platforms, layered cubes, and abstract 3D forms at 30-degree angles. Grid lines on surfaces for technical precision. Used for abstract concepts like infrastructure, architecture layers, and platform capabilities.
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.