Skip to content

Boursorama Design System

Boursorama's banking UI: brand blue #009de0 on CTAs, navy ink #1a2e45 text, Proxima Nova and hairline borders. Tokens for React, Next.js and AI tools.

Get ProDownload DESIGN.md
Primary color
#009de0
Typeface
ProximaNova
Shape
Sharp
Base radius
3px
Colors
19
Type tokens
12
Components
18
Spacing values
8

About Boursorama DESIGN.md

Curated by Dov Azencot, updated May 14, 2026. Source boursorama.com (opens in a new tab).

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

5 highlights

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

Live at boursorama.com

Boursorama in production, as captured. Scroll the window to see the whole page.

Visit boursorama.com (opens in a new tab)
Boursorama's website at boursorama.com

19 colors

Boursorama's system runs on #009de0 as its primary voltage, used in 2 of 18 components. Type is set in ProximaNova across 12 tokens from 12px to 16px, weights 500–700. Shape language is sharp — components average 0px corner radius, favoring crisp rectangles.

Brand & Accent

Sparing, CTA-only voltage · 1

Surface

Page and card backgrounds · 2

Text

Headlines, body, captions · 13

Borders & Hairlines

Dividers, outlines, rules · 3

12 type tokens

Set in ProximaNova across 12 tokens, from 12px to 16px, weights 500–700. Shown in its own stack: where the font isn't installed, the fallback the file names stands in.

  • body-1212px · weight 500 · lh 15pxThe quick brown fox jumps over the lazy dog
  • body-1414px · weight 500 · lh 17.5pxThe quick brown fox jumps over the lazy dog
  • body-1313px · weight 500 · lh 16.25pxThe quick brown fox jumps over the lazy dog
  • heading-14-bold14px · weight 700 · lh 17.5pxThe quick brown fox jumps over the lazy dog
  • heading-16-bold16px · weight 700 · lh 20.8pxThe quick brown fox jumps over the lazy dog
  • heading-12-bold12px · weight 700 · lh 15pxThe quick brown fox jumps over the lazy dog
  • heading-16-bold-compact16px · weight 700 · lh 16px · tracking 0.8pxThe quick brown fox jumps over the lazy dog
  • body-12-2012px · weight 500 · lh 20pxThe quick brown fox jumps over the lazy dog
  • body-12-60012px · weight 600 · lh 15pxThe quick brown fox jumps over the lazy dog
  • body-13-500-2313px · weight 500 · lh 23.4pxThe quick brown fox jumps over the lazy dog
  • body-12-0.312px · weight 500 · lh 15px · tracking 0.3pxThe quick brown fox jumps over the lazy dog
  • heading-16-700-2016px · weight 700 · lh 20pxThe quick brown fox jumps over the lazy dog

Radii and spacing

2 corner radii and 8 spacing values. Shape language: sharp, on a 3px base radius.

Radii2

  • small3px
  • medium10px

Spacing8

  • spacing-xxs8px
  • spacing-xs10px
  • spacing-sm20px
  • spacing-md20px
  • spacing-lg10px
  • spacing-xl8px
  • spacing-xxl20px
  • spacing-38px

18 components

Each rendered from its tokens (color, type, radius, padding) on Boursorama's own canvas.

  • Primary Button
    Primary Buttonprimary-button
  • Secondary Button
    Secondary Buttonsecondary-button
  • Hero Heading
    Hero Headinghero-heading
  • Section Title
    Section Titlesection-title
  • Body Text
    Body Textbody-text
  • Nav Link
    Nav Linknav-link
  • Input Field
    Input Fieldinput-field
  • Card
    Cardcard
  • Modal
    Modalmodal
  • Badge
    Badgebadge
  • Tooltip
    Tooltiptooltip
  • Table Header
    Table Headertable-header
  • Table Row
    Table Rowtable-row
  • Dropdown
    Dropdowndropdown
  • Pagination
    Paginationpagination
  • Alert Success
    Alert Successalert-success
  • Alert Error
    Alert Erroralert-error
  • Footer Link
    Footer Linkfooter-link

The system, in use

Boursorama's tokens on the kind of product it builds.

Marketing heroThe homepage: its nav, a headline and the main call to action.
Boursorama
Get started

Plan, build and ship in one place

Bring your team's work together, from the first idea to the final release.

Get startedBook a demo
BoursoramaA
Active users12,489
Projects342
Tasks done8,921
Avg. response1.8h
ActivityLast 30 days

Boursorama design system FAQ

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

What are the color tokens in the Boursorama DESIGN.md?

Boursorama's DESIGN.md has 19 color tokens: primary (#009de0), ink (#1a2e45), canvas (#000000), hairline (#d8e1ee), muted (#869db8), surface-1 (#f0f6ff) and 13 more. Every value is a quoted hex you can copy.

What is Boursorama's primary color hex code?

The color token `primary` is #009de0, used by 2 components. The surface behind it is `canvas` (#000000).

How do I use Boursorama's colors in Tailwind CSS?

Map the tokens to your CSS variables: `primary` (#009de0) to `--primary`, `canvas` (#000000) to `--background`, `ink` (#1a2e45) to `--foreground`. shadcn/ui's Tailwind setup maps them to classes such as `bg-primary` and `text-foreground`, so they then use Boursorama's palette.

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.

Related reading

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

Use Boursorama in your project

One machine-readable file. Drop it into Claude Code, Cursor, VS Code or any AI tool that reads DESIGN.md.

Download DESIGN.md

  1. Download the DESIGN.md

    One machine-readable file: every color, type, radius, spacing, and component token of Boursorama.

  2. Feed it to your AI tool

    Drop it into Claude, Cursor, or GitHub Copilot. The agent writes React components and Tailwind classes that match Boursorama's visual language.

  3. Reference the tokens directly

    Or paste the values into your Tailwind config, CSS variables, or component library: every color, size and radius is a quoted, ready-to-copy value.

Read the full DESIGN.md overview, rationale, do’s and don’ts

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.

More systems like this

Adobe, Bun, Canva and 23 more in Design & Creative Tools: each brand's colors, type and components in one file your AI agent builds from.

All 27 in Design & Creative Tools

Build it with Pro

The DESIGN.md files are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds in your system for you.

See full pricing

4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.

Billed once a year in USD. Cancel anytime.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

  • How many people can use the license.Seats: 1 seat
  • Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
  • Page sections in 56 categories, from heroes and pricing tables to dashboards and settings, on every framework and UI library, in your theme.Blocks: All 6,181 blocks
  • Complete Next.js sites for startups, SaaS, agencies and portfolios, every page designed, ready to ship.Templates: All 14 templates
  • Your AI agent searches, previews and installs any component, block, icon or DESIGN.md from a prompt: 22 tools in Claude Code, Cursor, VS Code and 35 more clients.MCP server: 38 AI clients
  • Buttons with motion and states of their own, from an arrow that slides in to a burst of confetti.Animated buttons: All 35 buttons
  • Typewriters, scrambles, counters and more, for headlines, labels and numbers.Text effects: All 97 effects
  • Animated backgrounds for heroes, sections and cards, from a soft aurora to a flock that flees the cursor. Most are pure CSS.Backgrounds: All 100 backgrounds
  • WebGPU shaders, from a slow aurora to a black hole, each drawing only while it's on screen.Shaders: All 100 shaders
  • One design and one theme on all four: the components, blocks and effects are built for each framework.Frameworks: React, Vue, Svelte, Solid
  • React on Base UI, Radix UI, React Aria or Ark UI: install the version for the library your project already uses. Vue, Svelte and Solid run on Ark UI.UI libraries: Base UI, Radix, Aria, Ark
  • From a button to a date picker, a color picker or a guided tour: accessible, typed in TypeScript, each with live demos.Components: All 174 components
  • Real-world patterns built from the components, in 53 galleries: forms, tables, menus, dialogs and more.Examples: All 1,103 examples
  • Area, bar, line, pie, radar and radial charts on TanStack Charts, on every framework. React also gets the Recharts originals.Charts: All 70 charts
  • Debounce, local storage, media queries and more: each hook is one typed file you own.React hooks: All 35 hooks
  • From 222 libraries, Lucide, Heroicons, Tabler and Material Symbols among them, as SVG or a React component in one command.Icons: 294k+ icons
  • Stripe, Linear, Apple and 497 more: a brand's colors, typography and components in one file your AI agent builds from.DESIGN.md files: All 500 brands
  • Restyle every component and block at once: 8 styles, 7 grays, 18 colors and 5 radii, shared as a shadcn preset code.Theme builder: 8 styles × 18 colors
  • Priority requests are answered first.Support: Standard

Team

Most popular

For freelancers, agencies & startups

$66instead of $99/mo

$789 billed yearly · ≈ $13/dev/mo

Everything in Individual, plus

  • How many people can use the license.Seats: Up to 5 seats
  • Client work, SaaS products and anything you charge for.Commercial use: Included
  • Priority requests are answered first.Support: Priority

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Everything in Team, plus

  • How many people can use the license.Seats: Unlimited seats
  • Secure checkout via Stripe
  • Code lives in your repo
  • Keep what you've shipped if you cancel
  • License terms

4.9 out of 5 from 150+ developers

Your system, built for you

Every block, template and icon, installed by your AI agent in your design system. The DESIGN.md files stay free.

Get Pro
  • Cancel anytime
  • Keep what you've shipped