Cobalt Signal
#1c53bdGradient origin — small icon accents, arrow markers, chromatic punctuation on otherwise monochrome controls
Eco
eco.comWebsite preview
The design language
Eco operates as a financial cathedral rendered in near-total monochrome: a white-and-bone canvas interrupted by near-black voids, with the entire brand voice carried by type rather than color. Display sizes stretch to 90–96px with aggressive negative tracking, making headlines feel architectural and authoritative without chromatic support. Surfaces transition sharply between light (#ffffff/#efefef) and deep ink (#0f111a/#141414/#000000), creating a vault-like rhythm where every dark band reads as a chamber of gravity. A single blue gradient (deep cobalt to electric sky) surfaces sparingly on small UI marks, never as a CTA fill — actions are ghost-bordered on dark, ghost-bordered on light, or monochrome text links. Components are flat, minimal-elevation, and rely on hairline contrast and generous whitespace rather than shadow or color to separate. The system feels less like a product UI and more like a bank lobby translated into the screen — restrained, confident, almost ceremonial in its avoidance of decoration.
Color palette
brand
Electric Sky
#53adfeGradient terminus — the bright terminal of the blue mark, always paired with Cobalt Signal as a gradient pair
neutral
Bone
#ffffffPrimary canvas, card surfaces, button text on dark bands — the dominant air of the system
Ash Mist
#efefefLight supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color
Vault Ink
#0f111aPrimary heading text, dark band backgrounds, footer surface — the near-black that carries all authority and seals dark chambers
Absolute
#000000Deepest dark band background, high-contrast text on light surfaces — used where absolute weight is required
Carbon
#141414Secondary dark surface, border on dark sections — one shade lighter than Absolute for layered darkness
Charcoal
#2a2a2aSupporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color
Graphite
#222222Dark border, secondary text on dark surfaces, image overlay tones
Silver Veil
#aeaeaeMuted card text, disabled states, secondary metadata — the quietest readable neutral
Frost
#a6b8d1Decorative border, link accent on dark, subtle cool-tinted hairline — the only chromatic whisper in the neutral stack
Typography
Type scale
Minor Third (1.2) · 16px basetext-96
96px · 400 · 0.95The quick brown fox jumps
text-90
90px · 400 · 0.9The quick brown fox jumps
display
84px · 400 · 0.95 · -3.36px trackingThe quick brown fox jumps
heading-lg
48px · 400 · 1.06 · -1.44px trackingThe quick brown fox jumps
heading
40px · 400 · 1.06 · -1.2px trackingThe quick brown fox jumps
heading-sm
24px · 400 · 1.2 · -0.48px trackingThe quick brown fox jumps
subheading
22px · 400 · 1.2 · -0.44px trackingThe quick brown fox jumps
body
16px · 400 · 1.5 · -0.16px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Interdisplay
- Weights
- 400
- Sizes
- 14px, 16px, 24px, 40px, 84px, 90px, 96px
- Line height
- 0.90, 0.95, 1.06, 1.20, 1.43, 1.50
- Letter spacing
- -0.04em at 84–96px display, -0.03em at 40–48px, -0.01em at 14–16px body
- Fallback
- Inter
Primary workhorse — body copy, UI controls, nav, and most headings. Carries the system's voice at 400 weight only; variation comes from size and tracking, not weight. Single-weight usage is a signature choice: the system never bolds, only scales.
Additional typeface
Roobert
- Weights
- 400
- Sizes
- 16px, 48px, 84px, 96px
- Line height
- 0.95, 1.06, 1.20, 1.33
- Letter spacing
- -0.0400em, -0.0300em, -0.0200em, -0.0100em
- Fallback
- Manrope or Plus Jakarta Sans
Display and feature headings, hero typography, emphasis text. Used at the top of the hierarchy where 90–96px sizes demand a typeface with more open counters and personality. Also appears in nav and inputs for tactile warmth against Interdisplay's neutrality.
Additional typeface
Inter 24 Pt
- Weights
- 400
- Sizes
- 14px, 16px, 22px
- Line height
- 1.00, 1.20, 1.50
- Letter spacing
- -0.0200em, -0.0100em
- Fallback
- Inter
Secondary body, card copy, link text, image captions — a quieter Inter variant for less prominent content areas where Interdisplay would feel too dominant
Additional typeface
Fragmentmono
- Weights
- 400
- Sizes
- 14px, 16px
- Line height
- 1.00, 1.50, 1.71
- Letter spacing
- -0.01em
- Fallback
- JetBrains Mono or IBM Plex Mono
Monospaced accent for nav labels, link IDs, technical metadata, heading eyebrows — a typewriter whisper that signals precision and protocol
Additional typeface
Aeonik Mono
- Weights
- 400
- Sizes
- 14px
- Line height
- 1.10
- Letter spacing
- -0.04em
- Fallback
- Space Mono
Rare monospaced flourish for signature inline moments — used as the tiniest typographic exclamation in the system
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1280px
- Section gap
- 40-80px
- Card padding
- 40px
- Element gap
- 20px
Border radius
nav
8pxtags
12pxcards
8pxpills
128pxinputs
8pxbuttons
8pxSpacing scale
4px5px8px10px12px16px20px24px32px40px48px56px60px80px96px172px182pxGuidelines
Do
- Use only #ffffff, #efefef, and the 5-step dark scale (#0f111a → #141414 → #2a2a2a → #222222 → #000000) for all surface and text work — never introduce a chromatic UI color.
- Render display headlines at 84–96px with tracking between -0.03em and -0.04em; the aggressive negative spacing is what makes the type feel architectural.
- Alternate light and dark full-bleed sections as the primary page rhythm; a page that stays entirely on white or entirely on dark breaks the vault cadence.
- Use the blue gradient (linear-gradient(90deg, #1c53bd, #53adfe)) only on small 8–16px accent marks inside or beside controls — never as a fill, never as a background.
- Set Interdisplay and Roobert at weight 400 only; the system signals emphasis by scaling up, never by going bold.
- Use 8px radius for cards, buttons, inputs, and nav — 128px only for pill-shaped elements like tags or the rare full-pill control.
- Place Fragmentmono eyebrows 16–24px above every display heading in uppercase with 0.018em tracking.
Don’t
- Do not use color to indicate state or hierarchy — the system relies on luminance, scale, and hairline borders for all differentiation.
- Do not use drop shadows, glow effects, or colored box-shadows for elevation; depth is tonal, not diffused.
- Do not introduce a second typeface family beyond the five listed; even minor additions dilute the vault's typographic discipline.
- Do not render body or UI text below 14px or above 22px — the type scale jumps directly from subheading (24px) to heading-sm territory.
- Do not apply the blue gradient to a button background, hero overlay, or section fill — it is a mark-scale accent only.
- Do not mix light-mode and dark-mode elements within the same band; a single section commits to one luminance.
- Do not use filled icons, colored icons, or iconography with gradients; all icons are 1.5px stroke monochrome.
Components
Hero Display Headline
Primary above-the-fold headlineRendered at 84–96px, Roobert or Interdisplay weight 400, white on dark cityscape imagery. Tracking -0.04em compresses the line into an architectural mass. No drop shadow, no color, no gradient — the imagery behind does all the atmospheric work.
Section Display Heading
Mid-page feature headlines48–96px Interdisplay or Roobert, used on dark (#0f111a / #141414) bands. Always white (#ffffff). Tracking tightens proportionally: -0.04em at display sizes, loosening to -0.01em by 24px subheadings.
Ghost Nav Button
Primary navigation actionTransparent background, 1px white border at #ffffff, 8px radius, padding 8px 16px. Text in Interdisplay 14px, uppercase, letter-spacing 0.018em. Used in header for 'Bridge with Eco' — outlined, never filled.
Inline Arrow Button
Compact action trigger on dark sectionsDark transparent background (#2a2a2a at ~60% opacity), 8px radius, text in Interdisplay 14px, trailing blue gradient square (8×8px) using #1c53bd → #53adfe gradient. The blue square is the only chromatic punctuation in the button. Padding 12px 16px.
Light Ghost Link
Inline text link on light backgroundsNo background, no border, Interdisplay 14px in #0f111a, with optional Frost (#a6b8d1) underline on hover. Underline 1px, offset 4px.
Eyebrow Label
Section pre-heading / category tagFragmentmono 14px, uppercase, letter-spacing 0.018em, color #aeaeae on light or #aeaeae on dark. Always sits 16–24px above the main heading it qualifies.
Feature Card
Content card on light sections#ffffff background, no border, no shadow, 8px radius, 40px padding all sides. Heading at 24px Interdisplay, body at 16px Inter 24 Pt, #2a2a2a text. Rests on #efefef canvas for ambient separation.
Input Field
Form inputTransparent or #efefef background, 1px bottom border in #aeaeae (or #ffffff on dark), no side/top borders. Text in Roobert 16px, placeholder in #aeaeae. 8px radius only on bordered variants. Focus state: border becomes #0f111a, no glow ring.
Monochrome Icon
UI iconographyStroke-based icons at 1.5px weight, #0f111a on light, #ffffff on dark, #a6b8d1 as decorative accent variant. No filled icons. 16px and 20px sizes only.
Dark Band Section
Full-bleed content section on near-blackBackground #0f111a or #141414, full viewport width, 80–120px vertical padding. Contains white display headings, inline arrow buttons, and Frost (#a6b8d1) hairline dividers. Functions as the system's visual punctuation between light sections.
Footer Surface
Page footer#000000 background, Fragmentmono 14px labels in #aeaeae, white link text, generous 40–56px padding. Minimal link columns, no social icon noise.
Surfaces & elevation
Level 1
Bone Canvas
#ffffffPrimary page surface, card backgrounds, default content field
Level 2
Ash Mist
#efefefSubtle elevation on light sections, input field fill, button hover on light
Level 3
Charcoal Lift
#2a2a2aDark-mode button surfaces, subtle lift on dark bands
Level 4
Carbon
#141414Dark band background, footer-adjacent surfaces
Level 5
Vault Ink
#0f111aPrimary dark section background, maximum contrast against white text
Level 6
Absolute
#000000Deepest dark, footer, full-bleed void sections
Elevation is expressed through tonal layering and hairline contrast, never through drop shadows. Dark sections are placed beside light sections to create depth through luminance jumps rather than shadow diffusion. Cards sit flush on the #efefef canvas with a 1-unit luminance gap, not a shadow.
Layout & imagery
Layout
Full-bleed sections with no centered max-width container; the page breaks into alternating horizontal bands that span the full viewport. Hero is a full-bleed photographic band with centered display headline floating over the image. Subsequent sections alternate between white/light gray content bands and full-bleed dark bands (#0f111a / #141414), creating a vault-rhythm of light → dark → light → dark. Content within bands is centered with a ~1280px max-width for text blocks and 2-column feature layouts. Navigation is a minimal sticky top bar with logo left, three text links right, and one ghost-bordered action. No sidebar, no mega-menu, no breadcrumbs. Vertical rhythm is generous: 80–120px section padding, 40–56px between content blocks within a section.
Imagery
Full-bleed photographic cityscapes at twilight/dusk carry the hero and section transitions — muted, high-altitude aerials of skylines in slate and steel tones that mirror the monochrome palette. Product UI is shown via small, tight device crops. No illustration, no 3D, no abstract graphics. Social proof and decorative imagery are suppressed entirely; the cityscape is the only atmospheric asset and it functions as architectural wallpaper for the typography. Icons are stroke-based monochrome line work at 1.5px — no filled, no multicolor.
Design notes
Agent Guide
Quick Color Reference: • text primary: #0f111a • text on dark: #ffffff • page background: #ffffff or #efefef • dark band background: #0f111a • border / hairline: #aeaeae on light, #ffffff on dark • accent mark: linear-gradient(90deg, #1c53bd, #53adfe) • primary action: no distinct CTA color 3-5 Example Component Prompts: 1. Create a dark band section: background #0f111a, full-bleed, 100px vertical padding. Fragmentmono eyebrow in uppercase at 14px, #aeaeae, letter-spacing 0.018em. Display heading below at 84px Roobert weight 400, white, letter-spacing -3.36px, line-height 0.95. Two inline arrow buttons below: transparent dark background (#2a2a2a at 60%), 8px radius, 12px 16px padding, Interdisplay 14px white text, trailing 8×8px blue gradient square using linear-gradient(90deg, #1c53bd, #53adfe). 2. Create a ghost nav button: transparent background, 1px solid #ffffff border, 8px radius, 8px 16px padding. Text in Interdisplay 14px uppercase, white, letter-spacing 0.018em. No fill on hover, only border opacity shift to 0.7. 3. Create a feature card on light section: #ffffff background, no border, no shadow, 8px radius, 40px padding. Heading at 24px Interdisplay weight 400, #0f111a. Body at 16px Inter 24 Pt, #2a2a2a. Sits on a #efefef parent canvas for ambient separation. Optional 1px #aeaeae hairline divider 24px above the heading. 4. Create a hero band: full-bleed photographic cityscape at dusk (desaturated slate/steel tones) covering the entire viewport. Centered white display headline at 96px Interdisplay weight 400, letter-spacing -3.84px, line-height 0.90, max-width 900px. No button on the hero. 5. Create a footer: #000000 background, 56px padding all sides. Fragmentmono 14px section labels in #aeaeae uppercase. Link text in white, Interdisplay 14px. No icons, no social blocks, no newsletter field.
Gradient System
Only one gradient exists in the system: linear-gradient(90deg, #1c53bd, #53adfe). It is used exclusively as a chromatic punctuation mark at icon scale (8–16px squares inside or beside controls). It is never used as a background fill, a hero overlay, a button surface, or a text gradient. The gradient's role is to be the system's single moment of color — a tiny electric-blue key in an otherwise locked monochrome vault. If more than one gradient appears on a single page, the system is being violated.
Similar brands
Stripe
Same restrained near-monochrome palette with full-bleed dark section transitions, oversized display type, and a single gradient accent (Stripe's aurora) used sparingly for emphasis
Linear
Same architectural display typography at 80–96px with aggressive negative tracking, and the same vault-like alternation between white canvases and deep ink sections
Vercel
Same commitment to a single-weight typeface, a near-zero colorfulness ratio, and dark-band page rhythm where typography alone carries the brand
Bridge (Stripe's stablecoin API)
Same crypto-financial gravity, same ghost-bordered primary actions, and the same near-monochrome vault aesthetic that lets a single accent color read as a signal rather than decoration
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
