Where does the brand blue #009de0 appear in the UI?

The brand blue #009de0 is reserved for high‑priority interactive elements. It colors the primary call‑to‑action button background, the active state of the top navigation links, and the accent icon next to headline news cards. Outside these three contexts the system stays within the navy and black palette, making the blue instantly signal importance and clickability for users scanning the page.

What typeface does Boursorama use and how are the weights distributed?

Boursorama relies exclusively on Proxima Nova, a humanist sans‑serif that appears in every component. Light‑to‑medium weight (500) drives body copy at 12‑14 px, while bold weight (700) is used for headings, navigation items, and key data labels at 14‑16 px. A handful of 16 px bold styles with tighter line‑height support headline cards, and a 12 px bold variant appears on button labels, ensuring visual hierarchy without introducing additional families.

How is spacing handled given the limited set of pure pixel values?

The system normalises spacing to three core tokens: 8 px, 10 px, and 20 px. These values are reused across padding, margin, and gap properties. For example, button padding uses the 10 px token, card gutters adopt 20 px, and form field vertical spacing leans on 8 px. By reusing the same three numbers, the layout stays tight and predictable, which aligns with the dense information display expected on a financial portal.

What purpose does the hairline #d8e1ee border serve?

The hairline #d8e1ee border functions as a minimal elevation cue. It outlines input fields, card containers, and dropdown menus, giving a visual hint that these surfaces sit above the black canvas without adding a heavy shadow. Because the border is only one pixel wide and uses a very light blue‑grey, it preserves the overall high‑contrast aesthetic while still providing a tactile sense of depth for interactive zones.

How does Boursorama’s color hierarchy differ from typical fintech sites?

Most fintech brands blend multiple brand colors—think of Stripe’s indigo gradient or Revolut’s teal‑orange duo—to create a vibrant identity. Boursorama, by contrast, collapses its hierarchy to a single accent blue, a dominant navy ink, and a black canvas. This reduction forces attention onto data rather than decorative hue, and the muted greys act only as secondary support. The result is a UI that feels more like a professional trading terminal than a consumer‑focused app.

Boursorama Design System

The Boursorama design system uses brand blue #009de0, navy ink #1a2e45, and Proxima Nova typeface across a palette of 18 colors, delivering a focused UI for React components.

About Boursorama DESIGN.md

Curated by Dov AzencotUpdated May 14, 2026Source boursorama.com

Design & Creative Tools

Boursorama’s homepage reads like a terminal: a black canvas (#000000) drenched in navy ink #1a2e45, with a single flash of brand blue #009de0 that punctuates navigation and primary actions. The layout shuns decorative illustrations, instead letting dense tables, ticker‑style headlines, and crisp typographic hierarchy speak for the brand. This stark, data‑first visual language makes the site instantly recognizable to traders and investors who expect information over ornament.

The palette follows a single‑accent philosophy: the deep navy provides legibility, the black canvas reinforces focus, and the brand blue offers the only chromatic cue. Where peers like Bloomberg splash gradients of teal and orange, or where Yahoo Finance leans on a bright orange spectrum, Boursorama isolates its color to a single brand hue, reinforcing a sense of seriousness and trust. The hairline #d8e1ee border adds a subtle layer cue without breaking the monochrome mood, and muted greys such as #869db8 give depth to secondary text.

For a designer feeding this spec into an AI‑assisted tool, the payoff is a UI that feels like a professional trading desk rather than a generic SaaS dashboard. The most reusable idea is the hairline‑as‑elevation pattern: a barely‑visible border that signals interactivity and hierarchy without adding bulk. Replicating this approach yields interfaces that stay dense yet readable, perfect for data‑heavy applications where every pixel must earn its place.

What makes it distinct

Primary blue #009de0anchors call‑to‑action buttons, navigation highlights, and key icons, providing a single splash of brand energy across the UI.
Ink navy #1a2e45dominates body copy and headings, establishing a dense information hierarchy suited to financial content.
Hairline border #d8e1eeapplied to input fields and card outlines, it creates a lightweight elevation effect without adding visual weight.
Muted text #869db8reserved for secondary labels, captions, and disabled states, offering contrast while preserving the dark aesthetic.
Surface‑1 #f0f6ffused sparingly for modal backgrounds, it introduces a brief visual relief from the dominant black canvas.

Live at boursorama.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

boursorama.com

Explore Boursorama

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Boursorama design system FAQ

Common questions about Boursorama's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Boursorama — official site

Boursorama's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.