Neural &
Native.
IRIS
#5b5bd6
GRASS
#203c25
LIME
#bdee63
SAGE
#eef1f0
SLATE
#1c2024
PINK
#d6409f
12-Step Scales
Each color is defined as a 12-step scale, designed for specific use cases from backgrounds to high-contrast text.
Border System
border-black/20- Sections: Never add border-b to section components
- Dividers: Only full-width dividers between sections
- Wrappers: Use border-l and border-r on section wrappers
- Internal: Use borders freely inside sections
Methodology
Shadows, highlights, and overlays
Design
Principles
Our system leverages Radix UI's accessible color methodology to ensure consistency, clarity, and beauty.
Accessibility
Text colors are guaranteed to pass target contrast ratios against backgrounds.
Automatic Dark Mode
Switching scales is as simple as applying a class. It just works.
Transparent Variants
Matching alpha variants for UI components that need to blend.
APCA Contrast
Contrast targets based on modern algorithms for human perception.
P3 Gamut
Support for wide gamut spaces enabling the brightest yellows and reds.
User Interfaces
Each step designed for specific use cases: backgrounds, hover, text.
Instrument Sans
A variable sans-serif built for high-legibility interfaces and dense information displays.
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz
0123456789
Instrument Serif
A contemporary serif for editorial moments, headlines, and establishing visual hierarchy.
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz
Hero Headers, Blockquotes, Editorial Sections
Swiss Style &
Structure.
Our layout philosophy sits at the intersection of Swiss International Style and Digital Brutalism. We prioritize content density, visible structure, and mathematical precision.
- 01Visible GridStructure is not hidden; it is celebrated. We use 1px borders to delineate content areas, creating a "bento box" effect that organizes complex data.
- 02Density & WhitespaceWe embrace high information density for tools (Brutalist) while maintaining airy whitespace for reading (Swiss). The tension between these two creates our signature look.
- 03The 4px BaselineEvery dimension—margin, padding, height, font-size—is a multiple of 4. This creates a subconscious sense of rhythm and trust.
Alignment
Lucide
React.
A consistent, clean, and flexible icon set that aligns perfectly with our 4px baseline grid.
Bespoke loading sequences designed for our 'Neural & Native' paradigm. Built on the 4px baseline grid.