HubSpot
A CRM and marketing platform built around a warm, energetic orange (#FF7A59) paired with HubSpot's deep navy ink (#2D3748) and generous white surfaces. The system feels sales-optimized: bright, confident, action-oriented, and always pointing toward a conversion moment. Display typography uses Lexend Deca or similar legibility-optimized grotesque at bold weights with generous tracking. Cards, dashboards, and pipeline views are data-dense with clear visual hierarchy. The orange communicates urgency and warmth simultaneously — perfect for a tool where every interaction is potentially a revenue moment.
Color Tokens
1. Visual Theme & Atmosphere
HubSpot's design serves a fundamentally commercial purpose: making revenue teams feel confident and in control. The orange brand color appears on every primary CTA, creating a consistent visual guide toward action. Dashboards are colorful and data-rich — pipeline stages use the full spectrum, chart colors are bright, and KPI cards use large numerics that managers can read from across the room. The system is optimistic and energetic.
2. Color System
- Brand orange: #FF7A59 — primary CTAs, logo sprocket, active navigation
- Teal secondary: #0091AE — links, secondary actions, info states
- Success teal: #00BDA5 — deal won, positive metrics
- Navy ink: #2D3748 — primary text, dense and authoritative
- Warning amber: #F5C26B — pipeline at-risk indicators
- Canvas: Pure white with very light gray surfaces for dashboard panels
3. Typography
Lexend Deca is designed for reading legibility — HubSpot's choice reflects that their users are reading lots of data. Bold at headings, regular at body, with tight numerical displays at 700+ weight for KPI cards. The system avoids thin weights entirely.
4. Components & Patterns
- Pipeline Kanban: Horizontal scrollable columns, deal cards with contact avatar, amount, stage
- CRM table: Dense rows with inline editing, status pills, sortable columns
- Dashboard cards: White panels with colored chart headers, large KPI numbers
- Contact records: Full-page view with timeline on right, properties panel on left
- Email composer: WYSIWYG with block-based drag layout
- Primary buttons: Orange fill, white text, 8px radius — consistently dominant
5. Spacing & Layout
CRM views are dense: 8px padding in table cells, 16px card padding. Dashboard uses 24px grid gap. Marketing pages use 96px section padding. Sidebar navigation is 220px fixed. The product prioritizes density because users work in it all day.
6. Motion & Interaction
Confident and purposeful. Pipeline card drag has smooth reorder animation. Deal stage changes trigger a subtle celebration (confetti on won). Form submissions show progress. Nothing decorative — everything serves task completion.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for