Switch between the rendered Visual preview and the Raw DESIGN.md.
Fireblocks embodies a premium, enterprise-focused design language that conveys trust, security, and technological sophistication. The visual atmosphere balances a deep, authoritative navy foundation with vibrant electric blue accents, creating a modern fintech aesthetic. Subtle gradient overlays and smooth transitions communicate motion and forward momentum, while generous whitespace reinforces clarity and professionalism. The design system prioritizes accessibility and legibility without sacrificing visual elegance, employing geometric precision and refined typography to establish authority in the digital asset infrastructure space.
Key Characteristics
#212647) as the authoritative primary foundation#4568F3) as the energetic accent for CTAs and highlights#212647): Primary text, headings, and dominant UI elements; conveys trust and stability#415080): Secondary text and subtle backgrounds; creates visual hierarchy without distraction#4568F3): Primary CTA buttons and feature highlights; draws attention to key interactions#4F83FF): Hover states and interactive overlays; lighter variant for depth variation#3182CE): Link text and supplementary accent states; accessible complement to primary blue#678BFF): Tertiary accents and decorative elements; softer blue for gentle emphasis#4568F3): Primary button backgrounds and active states#4F83FF): Hover states and secondary interactive elements#3182CE): Focused states and link emphasis#FFFFFF): Primary background and card surfaces; ensures content legibility#F9FAFC): Secondary background and subtle surface differentiation#F4F5F7): Tertiary surface and disabled states#718096): Placeholder text and secondary UI elements#777777): Supporting text and de-emphasized content#AAAAAA): Input borders and subtle dividers#D9D9D9): Form field borders and light dividers#E7E9EF): Hairline borders and fine dividers#000000): Input text and high-contrast content#F9FAFC): Default card and container backgrounds#F4F5F7): Elevated card backgrounds and secondary surfaces#D9D9D9): Standard input and component borders#E7E9EF): Subtle dividers and hairline separators#CF2E2E): Error messages, validation failures, and destructive actions#FCB900): Warning states, alerts, and cautionary noticesPrimary: Ufficio Fireblocks (custom Fireblocks font, supports enterprise aesthetic)
Fallback Stack: 'Ufficio Fireblocks', 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
Secondary: Figtree (modern, geometric sans-serif for body and UI labels)
Fallback Stack: 'Figtree', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif
Code/Monospace: Monospace family for input values and technical content
Fallback Stack: 'Courier New', monospace
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | Ufficio Fireblocks | 64px | 600 | 70.4px | 0px | Hero headlines, main page title |
| Heading / H3 | Ufficio Fireblocks | 48px | 600 | 52.8px | 0px | Section headings, major titles |
| Subheading / H5 | Ufficio Fireblocks | 28px | 600 | 30.24px | 0px | Secondary section titles |
| Label / H2 | Ufficio Fireblocks | 18px | 600 | 17.28px | 0px | Feature labels and callouts |
| Caption / H6 | Figtree | 13px | 700 | 17.29px | 0px | Small labels, category headers |
| Body | Figtree | 16px | 400 | 20.8px | 0px | Primary content paragraphs |
| Body Emphasis | Figtree | 16px | 700 | 20.8px | 0px | Bold text within paragraphs |
| Label Form | Figtree | 16px | 600 | normal | 0px | Form field labels |
| Input Text | Figtree | 13.33px | 400 | normal | 0px | Input field content |
| List Item | Figtree | 13px | 400 | 16.25px | 0px | Bulleted and ordered lists |
| Button | Arial | 16px | 400 | normal | 0px | Button text and CTA labels |
#4568F3#FFFFFF12px 24px12pxnonenone#3182CE, cursor pointer#415080#D9D9D9, cursor not-allowed, opacity 0.6#FFFFFF#21264712px 24px1px solid #21264712pxnone#F9FAFC, border-color #415080#F4F5F7, border-color #212647#4568F312px 24px1px solid #4568F312pxnonergba(69, 104, 243, 0.08), text-color #3182CErgba(69, 104, 243, 0.15)#FFFFFF or rgba(0, 0, 0, 0) for glass morphism1px solid #E7E9EF20px24px0px 4px 12px rgba(33, 38, 71, 0.08)#212647#F4F5F71px solid #E7E9EF20px24pxnone#212647#FFFFFF20px24px1px solid #E7E9EF0px 2px 8px rgba(33, 38, 71, 0.06)#212647#718096#FFFFFF#0000000px (rely on height)40px1px solid #C1C1C19pxnone#4568F3, box-shadow 0px 0px 0px 3px rgba(69, 104, 243, 0.1)#718096, font-style italic#FFFFFF#0000006px 35px 6px 15px31px1px solid #70707050pxnone#4568F3, outline none#2126478px20px × 20px4px1px solid #D9D9D9#FFFFFF#4568F3#4568F3, box-shadow 0px 0px 0px 3px rgba(69, 104, 243, 0.1)#FFFFFF or transparent overlay#21264716px 24px60pxnone or 1px solid #E7E9EF (bottom)#4568F3#4568F3, border-bottom 2px solid #4568F3#FFFFFF1px solid #E7E9EF12px8px 0px0px 8px 24px rgba(33, 38, 71, 0.12)#21264712px 16px#F9FAFC#F9FAFC#212647#4568F3, text-decoration underline#2126479.6px 33.6px 9.6px 8px#4568F3::after pseudo-element, color inheritBase Unit: 8px
Scale:
8px — gap between tight elements, small internal padding12px — padding for compact components, tight spacing16px — standard padding and gaps; default breathing room24px — medium spacing between sections, card padding32px — generous gaps between major content blocks40px — large section separators48px — padding for full-width containers64px — major section spacing, hero-to-content transitions80px — top-level margin between page sectionsUsage Context:
12px vertical, 24px horizontal24px on all sides64px top and bottom48px sides, 64px vertical1440px (desktop full-width viewport)24px between columns48px left/right (desktop), 24px (tablet), 16px (mobile)Fireblocks emphasizes generous whitespace to convey premium quality and reduce cognitive load. Minimum 24px spacing separates logical content groupings; 64px or greater separates major sections. This "breathing room" approach reinforces the enterprise aesthetic and supports accessibility through visual clarity.
4px — checkbox and small utility elements9px — input fields and smaller form components12px — buttons, small cards, and rounded containers20px — feature cards and medium containers50px — fully rounded search inputs and pill-shaped components50% — circular avatar and icon containers| Level | Treatment | Use |
|---|---|---|
| Flat (L0) | No shadow, box-shadow: none | Backgrounds, text elements, disabled states |
| Raised (L1) | box-shadow: 0px 2px 8px rgba(33, 38, 71, 0.06) | Light cards, subtle elevation |
| Elevated (L2) | box-shadow: 0px 4px 12px rgba(33, 38, 71, 0.08) | Standard cards, medium elevation |
| Floating (L3) | box-shadow: 0px 8px 24px rgba(33, 38, 71, 0.12) | Dropdowns, modals, overlays |
| Highest (L4) | box-shadow: 0px 12px 32px rgba(33, 38, 71, 0.15) | Full-screen modals, popovers |
Shadow Philosophy:
Shadows employ a consistent dark navy tint (rgba(33, 38, 71, ...)) to maintain brand cohesion. Elevation increases both blur radius and spread progressively, creating distinct visual layers. Subtle shadow intensities (6–15% opacity) avoid visual heaviness while maintaining clear depth hierarchy. Shadows are reserved for interactive and floating elements; flat surfaces use border lines or background color shifts for definition.
rgba(69, 104, 243, 0.1) for accessibility| Breakpoint Name | Width | Primary Changes |
|---|---|---|
| Mobile | < 640px | Single column, 16px padding, stacked navigation, 40px sections |
| Tablet | 640px – 1024px | 2-column grid possible, 24px padding, 48px sections |
| Desktop | 1024px – 1440px | Full 12-column grid, 48px padding, 64px sections |
| Large Desktop | > 1440px | Max-width container (1440px), centered layout |
44px × 44px for all interactive elements (buttons, links, form controls)48px × 48px for frequently used actions8px between adjacent touch targets40px standard (exceeds 44px minimum)40px – 44px (with padding, reaches minimum)20px interactive area, increase to 44px with spacing for touch#4568F3)#212647)#415080)#FFFFFF)#F4F5F7)#212647)#F9FAFC)#3182CE)#E7E9EF)#CF2E2E)#FCB900)rgba(69, 104, 243, 0.1) (light blue tint)All primary buttons must use #4568F3 background with #FFFFFF text, 12px vertical/24px horizontal padding, and 12px border radius.
Body text and form content must use Figtree at 16px weight 400 with #212647 color; headings must use Ufficio Fireblocks 600+ weight.
Every interactive element (button, input, link) requires a focus state with box-shadow: 0px 0px 0px 3px rgba(69, 104, 243, 0.1) and border-color #4568F3.
Cards and containers must use 20px border radius, 24px padding, and L2 elevation shadow (0px 4px 12px rgba(33, 38, 71, 0.08)) unless explicitly flat.
Form inputs require 40px height, 9px border radius, 1px solid #C1C1C1 border, and monospace font for technical content (e.g., addresses, hashes).
All section spacing uses 64px vertical gaps (desktop), 48px (tablet), 32px (mobile); never deviate without explicit design approval.
Navigation links must be Figtree 13px weight 400, change to #4568F3 on hover, and display a 2px underline on active state.
Disabled states must reduce opacity to 0.6, change background to #D9D9D9, and update cursor to not-allowed.
Modals and overlays use L4 elevation (0px 12px 32px rgba(33, 38, 71, 0.15)), 20px border radius, and #FFFFFF background with 24px padding.
On mobile (< 640px), hide horizontal navigation, reduce font sizes by 2–4px for headings, and shift container padding to 16px; maintain 44px minimum touch targets for all interactive elements.