Design System
Our design system is built on Geist typography, Swiss poster aesthetics, and geometric precision.
Typography
Headings
text-heading-72
Heading 72
text-heading-64
Heading 64
text-heading-48
Heading 48
text-heading-40
Heading 40
text-heading-32
Heading 32
text-heading-24
Heading 24
Body Text
text-copy-24
Copy 24 - For large body text with high line-height
text-copy-20
Copy 20 - For prominent body text with high line-height
text-copy-18
Copy 18 - For standard body text with high line-height
text-copy-16
Copy 16 - For default body text with high line-height
text-label-14
Label 14 - For single-line text with ample line-height
text-label-13
Label 13 - For compact single-line text
Web Fonts
Our design system uses the Geist font family, developed by Vercel. Geist is a modern typeface specifically designed for developers and designers, emphasizing readability, clarity, and functionality. It embodies principles of simplicity, minimalism, and speed, drawing inspiration from the Swiss design movement.
Geist Sans
A versatile sans-serif typeface used for all body text, headings, and UI elements. Geist Sans provides excellent readability across all sizes and weights, from Thin (100) to Black (900).
Light (300)
The quick brown fox jumps over the lazy dog
Regular (400)
The quick brown fox jumps over the lazy dog
Medium (500)
The quick brown fox jumps over the lazy dog
Bold (700)
The quick brown fox jumps over the lazy dog
Geist Mono
A monospace variant designed for code and technical content. Geist Mono prioritizes readability and seamlessly integrates into coding environments while maintaining the same design principles as Geist Sans.
Regular (400)
const greeting = "Hello, World!";
Medium (500)
function calculateTotal(items) {
Bold (700)
return items.reduce((sum, item) => sum + item.price, 0);
Code block example
// TypeScript example
interface User {
id: number;
name: string;
email: string;
}
const users: User[] = [];Resources
Complete font documentation, interactive playground, and download options
Quick web integration via Google Fonts CDN
Colors
Brand Colors
Semantic Tokens
Semantic tokens are design system variables that represent meaning rather than specific values. Instead of using direct colors like 'black' or 'white', we use tokens like 'foreground' and 'background'. This abstraction makes theming easier and ensures consistency across the application.
Foreground
Ink
#231f20
Background
White
#ffffff
Primary
Forest
#23602b
Accent
Pale
#e7eee8
Muted
Neutral
#f3f3f3
Muted Foreground
Muted ink
#535653
Border
Rule
#ced3cf
Mint
Action on forest
#8fd999
Spacing Scale
Based on 4px base unit
Borders
We use borders as lines and dividers, not boxes. Focus on directional rules (top and bottom) for structure.
2px ink rules (structure)
Top rule on open columns and cards (border-t-2 border-ink)
Bottom rule where sections and bands meet (border-b-2 border-ink)
1px rules (lighter dividers)
Divider between list rows (border-t border-rule)
Divider below a group (border-b border-rule)
Grid System
12-column grid with responsive gaps
Common layouts
Principle Cards
Used throughout company pages to display principles, values, and guidelines in a consistent, scannable format.
Standard Principle Card
Compact card with info dialog for additional context. Best for 4+ items in a grid. Used on: Engineering principles.
Example Principle
Short description that appears on the card itself. Keep it concise and scannable.
No Info Icon
This card has no info icon when showInfo is set to false.
With Icon
Cards can include an optional icon image above the title.
Expanded Principle Card
Larger card that displays all content upfront without hiding anything. Best for 2-5 items where full context is important. Used on: Values (Tenets, Voice).
Example Expanded Card
Description text that provides context for the principle or value being explained.
- All content is visible immediately
- No hidden information behind dialogs
- Better for detailed explanations
Rich Content Example
Expanded cards work great in a 2-column grid on desktop, single column on mobile.
You can use rich content: Include bold text, paragraphs, and structured information.
More breathing room: The 2-column layout gives each card substantial space.
Usage Guidelines
Standard Principle Card
- Use for 4+ items where space is limited
- Set showInfo=false to hide the info icon
- Optional icon prop for visual identity (48x48px)
- Best in 4-column grid (lg:grid-cols-4)
- Keep descriptions brief and scannable
Expanded Principle Card
- Use for 2-5 items where full context matters
- All information visible upfront
- Best in 2-column grid (md:grid-cols-2)
- Supports rich content like lists and formatted text
Open Column Grid Layout
- Each card carries its own 2px ink top rule
- Lay cards out as open columns with a gap, not boxes
- Stays inside the page column; no edge-to-edge grid
- Maintains consistent spacing with other content
Company Page Patterns
Reusable building blocks we use across company pages like Values, Engineering, Talent, Remote, and Slack.
Metric Tiles
- Points
- 0
- Less than ½ day
- Point
- 1
- 1 day
- Points
- 2
- 2 days
- Points
- 3
- 3 days
- Points
- 5
- 5 days
- Points
- 8
- Split bigger work
Stat Grid
- Founded
- 2024
- Model
- Services
- Headquarters
- NYC
Process Stepper
- 01
Kickoff
Align on goals and scope.
- 02
Explore
Rapid discovery and options.
- 03
Build
Ship incremental value weekly.
- 04
Evolve
Iterate with real feedback.
Timeline
- 2024
Company founded
- 2025
First public launch
Data Table
| Points | Effort |
|---|---|
| 0 | < ½ day |
| 1 | 1 day |
| 2 | 2 days |
Quote Block
“Write clearly. Ship often. Prefer proof over theory.”
Logo Wall
CTA Band
Prev/Next Navigation
Generic previous/next navigation for sequential content. Used on company pages (via CompanyPageNav) and events (via EventsPageNav).
Example (automatically generated based on current page):
Usage: Use CompanyPageNav for company pages (auto-derives order), or PrevNextNav directly with custom prev/next items.