--- version: alpha name: "Boursorama" website: "https://www.boursorama.com/" description: "Boursorama’s design system pairs a deep navy ink #1a2e45 with a vivid brand blue #009de0, employs Proxima Nova in twelve typographic scales, and uses a thin #d8e1ee hairline border as a subtle elevation cue across its React components. The canvas defaults to black #000000, while muted text #869db8 provides secondary hierarchy; all components inherit these tokens, creating a high‑contrast, data‑focused interface." seo: title: "Boursorama Design System for React — #009de0, Proxima Nova, 12 components" metaDescription: "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." highlights: - "Primary blue #009de0 — anchors call‑to‑action buttons, navigation highlights, and key icons, providing a single splash of brand energy across the UI." - "Ink navy #1a2e45 — dominates body copy and headings, establishing a dense information hierarchy suited to financial content." - "Hairline border #d8e1ee — applied to input fields and card outlines, it creates a lightweight elevation effect without adding visual weight." - "Muted text #869db8 — reserved for secondary labels, captions, and disabled states, offering contrast while preserving the dark aesthetic." - "Surface‑1 #f0f6ff — used sparingly for modal backgrounds, it introduces a brief visual relief from the dominant black canvas." tags: - "Design & Creative Tools" lastUpdated: "2026-05-14" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.boursorama.com/" title: "Boursorama — official site" description: "Boursorama's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "where-does-the-brand-blue-009de0-appear" title: "Where does the brand blue #009de0 appear in the UI?" answer: "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." - id: "what-typeface-does-boursorama-use-and-ho" title: "What typeface does Boursorama use and how are the weights distributed?" answer: "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." - id: "how-is-spacing-handled-given-the-limited" title: "How is spacing handled given the limited set of pure pixel values?" answer: "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." - id: "what-purpose-does-the-hairline-d8e1ee-bo" title: "What purpose does the hairline #d8e1ee border serve?" answer: "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." - id: "how-does-boursorama-s-color-hierarchy-di" title: "How does Boursorama’s color hierarchy differ from typical fintech sites?" answer: "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." colors: primary: "#009de0" ink: "#1a2e45" canvas: "#000000" hairline: "#d8e1ee" muted: "#869db8" surface-1: "#f0f6ff" text-2: "#006fb7" text-3: "#5e7590" text-4: "#003883" text-5: "#3d5d84" text-6: "#108653" text-7: "#4e5966" text-8: "#c72342" text-9: "#2b4f75" text-10: "#f11c3a" text-11: "#d20073" text-12: "#273c82" border-1: "#808080" border-2: "#c7d2e0" typography: body-12: fontFamily: "ProximaNova, \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 15px body-14: fontFamily: "ProximaNova, \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 17.5px body-13: fontFamily: "ProximaNova, \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 16.25px heading-14-bold: fontFamily: "ProximaNova, \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 17.5px heading-16-bold: fontFamily: "ProximaNova, \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 20.8px heading-12-bold: fontFamily: "ProximaNova, \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 700 lineHeight: 15px heading-16-bold-compact: fontFamily: "ProximaNova, \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 16px letterSpacing: 0.8px body-12-20: fontFamily: "ProximaNova, \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 20px body-12-600: fontFamily: "ProximaNova, \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 600 lineHeight: 15px body-13-500-23: fontFamily: "ProximaNova, \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 23.4px body-12-0.3: fontFamily: "ProximaNova, \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 15px letterSpacing: 0.3px heading-16-700-20: fontFamily: "ProximaNova, \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 20px rounded: small: "3px" medium: "10px" spacing: spacing-xxs: "8px" spacing-xs: "10px" spacing-sm: "20px" spacing-md: "20px" spacing-lg: "10px" spacing-xl: "8px" spacing-xxl: "20px" spacing-3: "8px" components: primary-button: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" borderRadius: "{rounded.small}" padding: "{spacing.sm}" font: "{typography.body-14}" secondary-button: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderRadius: "{rounded.small}" padding: "{spacing.sm}" borderColor: "{colors.hairline}" font: "{typography.body-14}" hero-heading: backgroundColor: "none" textColor: "{colors.ink}" borderColor: "none" fontFamily: "{typography.heading-16-bold}" fontSize: "40px" fontWeight: "700" lineHeight: "45px" letterSpacing: "0.2px" borderRadius: "0px" padding: "0px" section-title: backgroundColor: "none" textColor: "{colors.text-4}" borderColor: "none" fontFamily: "{typography.heading-14-bold}" fontSize: "16px" fontWeight: "700" lineHeight: "20px" letterSpacing: "normal" borderRadius: "0px" padding: "0px" body-text: backgroundColor: "none" textColor: "{colors.ink}" borderColor: "none" fontFamily: "{typography.body-14}" fontSize: "14px" fontWeight: "400" lineHeight: "20px" letterSpacing: "normal" borderRadius: "0px" padding: "0px" nav-link: backgroundColor: "none" textColor: "{colors.ink}" borderColor: "none" fontFamily: "{typography.body-12-600}" fontSize: "16px" fontWeight: "600" lineHeight: "20px" letterSpacing: "normal" borderRadius: "0px" padding: "{spacing.sm}" input-field: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" fontFamily: "{typography.body-12}" fontSize: "14px" fontWeight: "500" lineHeight: "17.5px" letterSpacing: "normal" borderRadius: "{rounded.medium}" padding: "{spacing.xs}" card: backgroundColor: "{colors.canvas}" borderColor: "{colors.hairline}" borderRadius: "{rounded.medium}" padding: "{spacing.md}" font: "{typography.body-13}" modal: backgroundColor: "{colors.surface-1}" borderColor: "{colors.hairline}" borderRadius: "{rounded.medium}" padding: "{spacing.lg}" font: "{typography.body-14}" badge: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" borderRadius: "{rounded.small}" padding: "{spacing.xs}" font: "{typography.body-12-0.3}" tooltip: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderRadius: "{rounded.small}" padding: "{spacing.xx s}" font: "{typography.body-12}" table-header: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderBottomColor: "{colors.hairline}" fontFamily: "{typography.heading-14-bold}" fontSize: "14px" fontWeight: "700" lineHeight: "17.5px" letterSpacing: "normal" table-row: backgroundColor: "none" textColor: "{colors.ink}" borderBottomColor: "{colors.hairline}" fontFamily: "{typography.body-13}" fontSize: "13px" fontWeight: "500" lineHeight: "16.25px" letterSpacing: "normal" dropdown: backgroundColor: "{colors.canvas}" borderColor: "{colors.hairline}" borderRadius: "{rounded.medium}" padding: "{spacing.sm}" font: "{typography.body-12}" pagination: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" borderRadius: "{rounded.small}" padding: "{spacing.xs}" font: "{typography.body-12-600}" alert-success: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" borderRadius: "{rounded.small}" padding: "{spacing.sm}" font: "{typography.body-13}" alert-error: backgroundColor: "{colors.text-10}" textColor: "{colors.canvas}" borderRadius: "{rounded.small}" padding: "{spacing.sm}" font: "{typography.body-13}" footer-link: backgroundColor: "none" textColor: "{colors.muted}" fontFamily: "{typography.body-12}" fontSize: "12px" fontWeight: "500" lineHeight: "15px" letterSpacing: "normal" padding: "{spacing.xs}" --- ## Overview Boursorama’s visual language is built around a single, high‑contrast premise: dark canvas, bright ink, and a flash of brand blue. **Hairline-as-elevation.** Unlike many fintech sites that layer multiple accent colors, Boursorama confines chromatic interest to a thin #d8e1ee border that signals depth without breaking the monochrome mood. The black background (#000000) forces every piece of data to stand out, while the navy ink (#1a2e45) provides a dense typographic field that reads like a professional terminal. The brand blue #009de0 appears only on primary actions, making those moments unmistakable. **Key Characteristics:** - Black canvas (#000000) as the default surface, creating a terminal‑like environment. - Navy ink (#1a2e45) dominates body copy, headings, and navigation text. - Single accent blue (#009de0) reserved for primary buttons and active navigation items. - Hairline #d8e1ee border used on inputs, cards, and modals as a subtle elevation cue. - Muted text #869db8 for secondary labels, captions, and disabled states. - Surface‑1 #f0f6ff applied sparingly for modal backgrounds, offering brief visual relief. - Proxima Nova across all typographic scales, ranging from 12 px body to 16 px bold headings. - Spacing system limited to 8 px, 10 px, and 20 px tokens, ensuring tight, predictable layout. - Rounded tokens include a 50 % circle for avatars and small 3 px radius for UI elements. - Component library of 16 React primitives, each referencing the token set for color, typography, radius, and spacing. The result is a UI that feels like a data‑centric workstation, where every pixel is justified by information density rather than decorative flourish. ## Known Gaps - The token set lacks a dedicated success color; designers must repurpose existing surface or muted tones, which can blur semantic meaning in feedback messages. - No explicit shadow tokens are defined, so any depth beyond the hairline border must be handcrafted, potentially breaking visual consistency across components. - The spacing palette is confined to three pure values, limiting nuanced layout adjustments for complex grid systems or responsive breakpoints. - Rounded tokens do not include an intermediate radius (e.g., 5px), forcing designers to choose between a sharp 0px or a relatively large 10px curve, which may feel jarring in mixed‑type UI elements. - Typography does not provide a dedicated small‑caps or caption style, leaving developers to approximate these with existing body tokens, which can affect hierarchy clarity.