C
DESIGN.md for citrea.xyz
Extracted design system — colors, typography, components, and more.
Generated May 13, 2026
28Views
1Link copies
Extracted design system — colors, typography, components, and more.
Citrea's design system embodies bold technological confidence with a vibrant, forward-thinking energy. The visual language combines a striking primary orange with deep navy and black neutrals, creating high contrast and visual hierarchy that demands attention. The system feels modern and crypto-native, with clean geometric forms, generous whitespace, and an emphasis on clarity and trustworthiness. The design balances approachability with technical sophistication, using smooth rounded corners and carefully measured spacing to soften the intensity of the bold color palette. It conveys innovation in Bitcoin infrastructure with a palette that feels energetic yet grounded.
Key Characteristics
#FF890A): Primary call-to-action buttons, links, accent elements, and key interactive states. Used 46 times across the system as the dominant brand color.#FFA500): Hover and active states for orange elements, providing visual feedback.#44DEAB): Positive states, confirmations, and secondary action elements. Used sparingly for "Reject" or alternative CTAs.#D4FF00): Warning and alert states requiring user attention without error severity.#CCFF00): Alternative warning palette variant for accessibility options.#020817): Primary text, headings, and interactive element backgrounds. High contrast neutral for readability.#1E293B): Secondary text hierarchy and muted interactive states.#0F172A): Deep background layers and elevated contrast scenarios.#000000): Primary body text, borders, and structural elements. Used 220 times as the workhorse neutral.#333333): Secondary text, muted copy, and subtle borders.#7F7F7F): Disabled states, tertiary text, and placeholder content.#94A3B8): Border colors and very subtle dividers.#64748B): Form labels and caption text.#FFFFFF): Card backgrounds, modal overlays, and highest-contrast surfaces.#F8FAFC): Subtle background surfaces and alternate section containers.#F1F5F9): Secondary surface backgrounds and hover states on light backgrounds.#E2E8F0): Border color for low-contrast dividers and subtle separators.#F4F6F8): Alternative light surface for form inputs and field backgrounds.#EF4444): Error states, validation failures, and destructive warnings.#7F1D1D): Deep error states and high-contrast danger indicators.Primary: NHaasGrotesk, system sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif
Secondary: NHaasGrotesk (monospace fallback for code: Courier New, monospace)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | NHaasGrotesk | 60px | 650 | 60px | -0.02em | Hero headlines, page titles |
| Heading H2 | NHaasGrotesk | 16px | 400 | 20px | 0px | Secondary section headings, subheadings |
| Heading H3 | NHaasGrotesk | 20px | 650 | 28px | 0px | Card titles, section headers |
| Heading H4 | NHaasGrotesk | 16px | 650 | 24px | 0px | Component titles, modal headers |
| Button Label | NHaasGrotesk | 12px | 550 | 16px | 0px | All button text, action labels |
| Body / Span | NHaasGrotesk | 14px | 650 | 20px | 0px | Primary body text, prominent copy |
| Link / Navigation | NHaasGrotesk | 14px | 450 | 20px | 0px | Navigation links, inline links |
| Caption / Label | NHaasGrotesk | 12px | 650 | 16px | 0px | Form labels, metadata, captions |
| Small Text / List Item | NHaasGrotesk | 12px | 400 | 16px | 0px | Secondary body text, list items |
Primary Button (Solid Orange)
#FF890A#FFFFFF12px55012px 20px39px0px solid transparentnone40px16px#E67E00, cursor pointer#CC6F00#D4D4D4, Text Color #A0A0A0, cursor not-allowedSecondary Button (Ghost with Green Accent)
transparent#44DEAB12px55012px 20px39px1px solid #44DEABnone42px16pxrgba(68, 222, 171, 0.1), Border Color #44DEABrgba(68, 222, 171, 0.2)#D4D4D4, Text Color #D4D4D4Ghost Button (Text Only)
transparent#00000014px4500px0px0px solid transparentnone20px#FF890A, Text Decoration underline#E67E00#A0A0A0, cursor not-allowedIcon Button (Circular)
transparent#00000040px40px39px0px solid transparent0pxnonergba(0, 0, 0, 0.05), Text Color #FF890Argba(0, 0, 0, 0.1)Standard Card
#FFFFFF#02081716px40024px8px0px solid transparentrgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px24pxrgba(0, 0, 0, 0.15) 0px 25px 30px -5pxContent Section
#F8FAFC#02081740px 48px0px0px solid transparentnone0pxHero Container
linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%)#02081760px 48px0px0px solid transparentnoneText Input (Default)
#FFFFFF#0000001px solid #E2E8F08px12px 16px14px40040pxnone#94A3B8#FF890A, Box Shadow 0px 0px 0px 3px rgba(255, 137, 10, 0.1)#EF4444, Placeholder Color #7F1D1DForm Label
12px650#0208178pxuppercase0.05emCheckbox / Radio
20px × 20px2px solid #E2E8F04px (checkbox), 50% (radio)#FFFFFF#FF890A#FFFFFF0px 0px 0px 3px rgba(255, 137, 10, 0.1)Top Navigation Bar
rgba(255, 255, 255, 0.4) (backdrop blur at 10px)#00000016px45020px 32px30px1px solid rgba(255, 255, 255, 0.3)rgba(21, 53, 63, 0.2) 0px 4px 35px -1px82px24px#FF890A#FF890A, Font Weight 550Navigation Link
transparent#00000014px4508px 12px4px0px solid transparentnonergba(255, 137, 10, 0.1), Text Color #FF890AStatus Badge (Orange)
#FF890A#FFFFFF12px6506px 12px20px0px solid transparentnoneStatus Badge (Green)
#44DEAB#02081712px6506px 12px20px0px solid transparentBase Unit: 4px
Scale:
4px – Micro spacing between inline elements8px – Tight spacing, form field gaps12px – Component internal gaps, small margins16px – Standard gap between components, list items20px – Navigation padding, button padding vertical24px – Card padding, section spacing32px – Section margins, component grouping40px – Large section gaps, hero spacing48px – Side padding on full-width containers52px – Large vertical spacing between sections60px – Hero section padding, page-level spacing64px – Maximum section gap for dramatic breathing roomUsage Context:
Max Width: 1400px (16px margin on each side = 1360px content width)
Column Strategy: Flexible 12-column system on desktop, 6 columns on tablet, 4 columns on mobile. Containers use full width with internal padding at breakpoints.
Section Patterns:
Padding Standards:
48px horizontal, 60px vertical on hero/section containers32px horizontal, 40px vertical20px horizontal, 32px verticalCitrea employs generous whitespace to create breathing room and focus user attention on key elements. Large vertical gaps (40px–60px) separate major content sections, while smaller gaps (12px–24px) organize components within sections. White card surfaces float on light neutral backgrounds, emphasizing depth and visual hierarchy. Whitespace is used strategically around primary CTAs to draw engagement.
| Level | Treatment | Use |
|---|---|---|
| Flat (0) | No shadow, box-shadow: none | Buttons, links, flat text elements, backgrounds |
| Base (1) | rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px | Subtle input field focus, minimal elevation |
| Medium (2) | rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px | Standard cards, floating containers |
| Navigation (3) | rgba(21, 53, 63, 0.2) 0px 4px 35px -1px | Top navigation bar, sticky headers |
| Deep (4) | rgba(0, 0, 0, 0.2) 0px 25px 50px -12px, rgba(0, 0, 0, 0.1) 0px 25px 30px -5px | Modals, deep overlays, stacked cards (hover) |
Shadow Philosophy: Citrea uses restrained, soft shadows to create minimal depth separation without visual heaviness. Shadows are warm-toned (incorporating subtle navy undertones in rgba calculations) to maintain the brand's sophisticated aesthetic. Elevation is reserved for distinct interactive surfaces—cards, modals, and navigation—rather than decorative depth. Hover states introduce minimal shadow increase to signal interactivity without jarring transitions.
| Breakpoint | Width | Key Changes |
|---|---|---|
| Mobile | 320px–639px | Single column, full-width containers, 20px horizontal padding, font sizes reduced 10–15%, button widths 100%, nav collapses to icon menu |
| Tablet | 640px–1023px | Two columns, 32px horizontal padding, H1 reduces to 48px, card grids 2 across, nav tablet menu, spacing reduced to 32px gaps |
| Desktop | 1024px+ | Full 12-column grid, 48px side padding, max-width 1400px container, all component sizes full scale, nav expanded horizontal menu |
| Large Desktop | 1400px+ | Content width capped at 1360px, max padding enforcement |
44px × 44px (WCAG 2.5.5 Level AAA)#FF890A)#44DEAB)#000000)#020817)#FFFFFF)#F8FAFC)#E2E8F0)#EF4444)#D4FF00)#7F7F7F)Always use #FF890A (Primary Action Orange) for primary buttons, CTAs, and active navigation states. This is the hero brand color.
Apply #020817 (Dark Navy Primary) for all body text, headings, and high-contrast interactive elements. Never use pure black (#000000) for large text blocks; reserve black for borders and structural elements.
Button specifications: Primary buttons are 40px height, 12px–14px font size, 12px weight 550, border-radius 39px, padding 12px 20px. Secondary buttons are 42px height, border 1px solid #44DEAB, transparent background, matching text color.
Card elevation: All cards receive box-shadow rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px and 8px border-radius. Card padding is 24px minimum.
Typography scale: H1 = 60px weight 650, H3 = 20px weight 650, body = 14px weight 650, labels = 12px weight 650. All caps labels use 0.05em letter-spacing.
Spacing grid: Use multiples of 4px. Common values are 12px (form gaps), 16px (component spacing), 24px (card padding), 32px (section gaps), 48px (container padding), 60px (hero padding).
Focus states: Inputs focus with border-color #FF890A and box-shadow 0px 0px 0px 3px rgba(255, 137, 10, 0.1). Buttons show hover by darkening to #E67E00.
Navigation: Top nav is 82px height, backdrop blur, semi-transparent white background rgba(255, 255, 255, 0.4), 1px border rgba(255, 255, 255, 0.3), border-radius 30px, box-shadow rgba(21, 53, 63, 0.2) 0px 4px 35px -1px.
Responsive collapse: H1 scales 60px → 48px → 36px across breakpoints. Side padding: 48px (desktop) → 32px (tablet) → 20px (mobile). Cards: 4 columns → 2 columns → 1 column.
Never override: Do not mix accent colors in single sections; do not reduce border-radius below 4px; do not apply shadows to static text; do not omit focus states on interactive elements. These are non-negotiable design system constraints.