Colors
Our palette is intentionally restrained. We use neutrals as our foundation, with color reserved for meaning and emphasis.
- Background: #FAFAFA (warm off-white) for pages, #FFFFFF for cards and elevated surfaces.
- Text: #0A0A0A for primary text, #71717A for secondary, #A1A1AA for disabled.
- Accent: Blue for engineering, Violet for design, Orange for marketing, Emerald for success.
- Semantic: Green for positive, Yellow for warning, Red for error—used sparingly.
- Data visualization: Blue intensity scale for visitor value, traffic source colors for attribution charts.
Typography
Two typefaces cover all our needs. We don't introduce new fonts without strong justification.
- Inter: Our workhorse. Body text, UI elements, buttons, labels. Weights 400-700.
- Instrument Serif: For drama. Hero headlines, decorative numbers, pull quotes. Used sparingly.
Type scale follows a modular ratio: 12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 72px. Line heights are 1.5 for body, 1.2 for headings.
Spacing
We use an 8px base grid. Common spacing values: 8, 16, 24, 32, 48, 64, 96. Consistency in spacing creates visual rhythm.
Vertical rhythm matters more than horizontal. Sections have generous padding (64-96px). Components have tighter internal spacing (16-24px).
Components
Our component library is minimal by design. We have buttons, cards, inputs, and a few specialized components. When you need something new, first ask if an existing component can work.
- Buttons: Primary (solid blue), Secondary (outlined), Ghost (text only). Three sizes: sm, md, lg.
- Cards: White background, subtle shadow, rounded corners (8px). Hover states lift slightly.
- Inputs: Clean borders, generous padding, clear focus states with blue ring.
- Modals: Centered with backdrop blur. Used sparingly for confirmations and focused tasks.
Motion
Animations serve function, not decoration:
- Duration: 150ms for micro-interactions, 300ms for transitions, 500ms for page changes.
- Easing: ease-out for entrances, ease-in for exits, ease-in-out for loops.
- Reduced motion: All animations respect user preferences via prefers-reduced-motion.
Icons
We use Lucide Icons exclusively. They're consistent, well-designed, and have excellent coverage. Default size is 20px, stroke width 1.5.