Brand Identity
Dark Mode (Primary)
Light Mode (Secondary)
Typography
Usage Rules
- • "to.co" is always lowercase.
- • Headings use tight tracking (-0.025em).
- • Body text uses relaxed line-height (1.6).
Heading 1
Bold / Tracking Tight / Gray-100
Heading 2
Bold / Tracking Tight / Gray-100
Heading 3
Semibold / Tracking Tight / Gray-100
Body Text (Regular). The quick brown fox jumps over the lazy dog. Design is not just what it looks like and feels like. Design is how it works. Good design is obvious. Great design is transparent.
Regular / Leading Relaxed / Gray-300
Small Text. Often used for captions, metadata, or secondary information. It should remain legible even at smaller sizes.
Regular / Gray-400
Color System
Brand Anchors
#14b8a6
Teal 500
Primary Action
#0d9488
Teal 600
Hover State
#111827
Gray 900
Obsidian (Bg)
#1f2937
Gray 800
Surface (Card)
Gradients
Primary Gradient
Buttons, Highlights
Hover Gradient
Interactive States
Functional Palette
Components
Form Elements
Interactive
Buttons
Badges
Feedback & Status
Alerts
Success
Your changes have been saved successfully.
Error
There was a problem processing your request.
Progress
Navigation & Layout
Tabs
Card
John Doe
Product Designer
Passionate about building accessible and inclusive user interfaces.