Art direction dossier · v2 · October 2026

A single light warm,
everything else in the background.

The complete reference of Brunel's visual identity: the logo and its exact geometry, the colors, the typography, the components, the movement and the rules of use. Each value in this dossier is the one that runs in production.

Brunel

Download the SVG pack View the logos

01 · Brand essence

An engineer, not a decorator.

Brunel transforms a GitHub repository into encrypted and validated cloud architecture. The identity must say the same thing: precision, solidity, sobriety. Nothing is decorative; everything is constructed.

The name

Tribute to Isambard Kingdom Brunel, the Victorian engineer of bridges, tunnels and the Great Western Railway: someone who designed infrastructures, quantified them and made them stand. This is exactly the job of the product.

The sign

A diamond cut into four layers, the lightest at the top, like geological layers seen in cross-section. Four layers, like the four levels of architecture that Brunel proposes; from the visible surface down to the foundation, the densest.

The light

A dark mark only, illuminated by a single color: ember orange #EC6F10. No photo, no generated illustration: each effect (gradients, grids, rails) is drawn in code.

1accent color, never two

4layers in the sign

3font families

0photo or generated image

02 · The logo

The diamond stratified.

The sign is the centerpiece of the identity. It exists alone (favicon, avatar, bullets), or accompanied by the name (logotype). Its reference version: ember orange on ink #161616.

Reference version · orange #EC6F10 on #161616

Reading the sign

Diamond : a square placed on the tip, edges at exactly 45°. Stable, precise, oriented downwards like a foundation.
Four layers : triangle, trapezoid, trapezoid, triangle. Perfect symmetry top / bottom and left / right.
Opacity gradient : 45%, 70%, 88%, 100%. The light descends and densifies; this is what gives depth without any gradient.
Empty cuts : three identical horizontal slits. They are the sign as much as the solids; they never fill up.

A single color, four intensities

The logo uses only one hue. The layers are the same color at different opacities, never four distinct hues. This is what makes it reproducible everywhere, from the favicon to embroidery.

03 · Construction

Geometry exact.

The sign is drawn on a grid of 24 × 24 units (that of the interface icons). All the dimensions below are the actual coordinates of the source file src/components/shell/logo-mark.ts.

24 × 24drawing grid

20 uheight and width of the diamond (tip 2 → 22)

1.2 uslit between layers (6% of the height)

45°all oblique edges

Layer	Shape	Points (x,y on 24)	Height	Opacity	Flat on #161616	Flat on white
1 · surface	Triangle	`12,2 16.6,6.6 7.4,6.6`	4.6 u	45 %	`#763E13`	`#F6BE93`
2	Trapeze	`6.2,7.8 17.8,7.8 21.4,11.4 2.6,11.4`	3.6 u	70 %	`#AC5412`	`#F29A58`
3	Trapeze	`2.6,12.6 21.4,12.6 17.8,16.2 6.2,16.2`	3.6 u	88 %	`#D26411`	`#EE802D`
4 · foundation	Triangle	`7.4,17.4 16.6,17.4 12,22`	4.6 u	100 %	`#EC6F10`	`#EC6F10`

The 'flats' are the colors obtained through transparency. Use them only where transparency does not exist (Pantone or CMYK printing, embroidery, engraving, certain software). Everywhere else, keep the single color and opacities.

Construction rule

Start with a 20 u square placed on its tip, centered at (12,12). Cut it with three horizontal bands of 1.2 u centered on y = 7.2, 12, and 16.8. This results in two triangles of 4.6 u and two trapezes of 3.6 u.

Internal margins

2 u of space around the diamond in the 24 u square (8.3%). The two lateral points fall into the central slit: the diamond therefore has no visible left or right vertex, which lightens it.

Optical center

The sign is perfectly symmetrical: its geometric center is its optical center. It is aligned with the vertical middle of the text or container, never with the baseline.

04 · Logotype

The sign and the name.

The name is always written 'Brunel': one capital, then lowercase. Never 'BRUNEL', 'brunel', or 'Brunel.cloud' in the logotype.

Horizontal logotype · sign S = 88 px, name 92 px, space 24 px (sharing image)

Proportions

Character of the name	Inter, weight 600
Approach	`-0.025em` in interface, `-0.033em` beyond 48 px
Height of the S sign	≈ the size of the name body (0.95 to 1.25 ×)
Sign / name space	0.27 S (large formats) to 0.4 S (interface: 20 px + 8 px)
Alignment	Center of the sign on the center of the lowercase letters
Color of the name	White `#FFFFFF` on dark background, `#161616` on light background; never orange

Horizontal

Brunel

By default. Headers, footer, documents, invoices, email signatures.

Sign alone

When the name is already written next to it or when space is lacking: favicon, avatar, collapsed sidebar, 'Eyebrow' bullet.

Stacked

Brunel

Square formats only (poster, loading screen, goodies). Sign = 1.8 × the height of the name, space 0.25 S.

05 · Uses

Protection zone, sizes, backgrounds.

Protection zone

Around the sign, a space equal to half its size S (the 24 u square). Around the logotype, a space equal to ½ S on all four sides. No text, border, or image enters it.

Minimum sizes

Sign alone on screen: 16 px. Below, use the favicon version.
Logotype on screen: sign of 20 px (name in 15–17 px).
Impression : sign of 6 mm, logotype of 25 mm wide.

Scale

20 · UI

88 · OG

144

Authorized backgrounds

Reference. Orange on ink #161616 or any dark surface of the palette.

On warm light. White on the ember gradient (covers, sharing cards).

On orange. Ink #161616, same opacities. Rare usage: goodies, event banner.

On white paper. Orange, only for printed documents (contracts, invoices). Never in the product.

06 · Forbidden

What we never do never.

Rotate or flip the sign.

Stretch or deform it.

Flatten the opacities (except for one-color engraving/embroidery).

Fill the gaps or redraw a solid diamond.

Color each layer differently.

Draw it as an outline.

Drop shadow, glow, bevel, 3D, gradient.

Place it on a medium gray, a photo, or a busy background.

No inversion of the order

The lightest layer is always on top. Inverting the opacities reverses the meaning (the foundation must be the densest).

No name in orange

Orange belongs to the sign and actions. The name remains white (or ink on a light background).

No other typography

The name is only composed in Inter 600. No serif, no italics, no capitals.

07 · Variations

The sign in its contexts.

All these supports are generated by the code from the same source (MARK_LAYERS_24, BRAND). To change the logo, only one file is modified.

Favicon · `app/icon.svg`

Grid 32, ink square with 8 corners (25 %). The diamond grows (22 u high by 32, points at 5 and 27) and its slots go to 1.6 u. Opacities raised to 55 / 75 / 90 / 100% to remain legible at 16 px.

Sharing image · 1200 × 630

Brunel

From a GitHub repository to a priced, validated cloud architecture.

Margin 20 px, card with 32 corners, 8 px dot grid at 7%, sign 88 px + name 92 px bold 600, tagline 48 px, secondary line 26 px at 72% white.

Stripe Payment

Brunel

On the payment pages (light background imposed by Stripe), each layer is raised by +10% opacity (55 / 80 / 98 / 100%) to maintain contrast. Stripe brand color: #EC6F10, accent #161616.

Bullet “Eyebrow”

The small sign opens the subtitles, separated from the text by a line.

Validated architecture

Footer

The sign and the name in very large, in orange at 22% opacity which fades towards the bottom to 0%. The only place where the name takes orange: it is a texture, not a logotype.

Social media avatar

Reuse the favicon: ink square #161616, orange sign occupying 70% of the height, centered. The platforms crop in a circle: the diamond fits without touching the edge.

08 · Colors

Ink, lines, and a ember.

The components use the tokens (src/styles/tokens.css), never the hexadecimal values. Orange is rare: main button, links, focus, active states, the sign. Everything else is in warm levels of black.

Role	Token	Value	Usage
Page	`--background`	`#161616`	All pages: site, app, console, docs
Card	`--card`	`#1B1A19`	Cards, panels, footer
Menu	`--popover`	`#1F1E1D`	Menus, tooltips
Calm surfaces	`--muted` · `--secondary` · `--accent`	`#211F1E #232120 #262422`	Bullets, fields, hover
Nets	`--border` · `--input`	`#2F2B2A #3A3533`	Borders, rails, fields
Text	`--foreground`	`#FFFFFF`	Headings and body text
Secondary text	`--muted-foreground`	`#B3ACA7`	Hats, legends (contrast 8.4:1 on #161616)
Accent	`--primary` · `--ring`	`#EC6F10`	Main button, links, focus, active, the sign
Amber	`BRAND.amber`	`#F2A15E`	Reflections, character strings in code
Warm light	`--brand-ember · rust · brown · ink`	`#DC7723 #8A4A1C #2B2019 #111111`	Coverage gradients, hatched panels, bullet hue
States	`--success · --warning · --destructive`	`#3FBF7F #F2B544 #FF5F57`	Always with an icon or a word

Domain colors (charts and graphs)

Validated on the card surface: luminance band, minimal chroma, color blindness separation, 3:1 contrast. Always in this order, never reassigned.

Compute #DA6600

Data #12A195

Network #2769B7

Security #C92F33

Observability #B98A00

CI/CD #8559B2

Resilience #479C4D

Environments #BC4B87

The two brand textures

Warm coverage (.hero-warm) · 1 px dot pattern every 6 px at 6% white, on vertical gradient #1e1d1c 0% → #221c17 30% → #4a2c16 72% → #8a4f22 100%. 32 px corners, 8 to 16 px inset from the window edge.

Hot panel (.panel-warm) · same pattern on #2b211a → #231c17. For the highlighted cell of a grid, the recommended offer, the name block in the footer.

09 · Typography

A grotesque, a word in italic.

The architect that your repository deserves.

Title: Inter Display 500, approach -0.02 em, line spacing 1.11. Only one word in Instrument Serif italic, preferably at the end of the title.

Titles and text

Inter Display

Titles in bold 500. Regular text in 400, 16 px, line spacing 1.6. The name 'Brunel' in 600.

font-sans.font-display

Accent

Instrument Serif

Italic only, one word per title, via <em>. Never a whole sentence, never in regular text nor in buttons.

<em>

Data

Geist Mono

Figures, prices, code, small labels in capitals (11–12 px, spacing +0.08 em).

font-mono.font-label

Level	Size	Weight	Approach	Line spacing
Page title (h1)	`clamp(2.6rem, 1.4rem + 4.4vw, 4.5rem)` → 72 px	500	-0.02 em	1,11
Section title (h2)	`clamp(2rem, 1.3rem + 2.4vw, 3rem)` → 48 px	500	-0.02 em	1,11
Lead	18 px	400	0	1.55 · color #B3ACA7
Text	16 px (14 px in the app)	400	0	1,6
Label	11–12 px mono, capitals	400–500	+0.08 em	1,2

10 · Components

Buttons, cards, rails.

Showcase site

Start View demo

GlowButton : orange button, thin border, and hover animation, without glow. The historical reference #unopaq. LineButton : line and label that roll on hover. The components displayed here are those of the landing page.

src/components/ui/glow-button.tsx

Application and console

Button : primary orange without glow, secondary rounded, ghost and destructive variants. These are the application components, in their default size.

src/components/ui/button.tsx

Card (.lift)

Hover: it rises by 4 px, the line warms up, and the background remains solid, without glow.

Rails

The sections are placed between two vertical lines, with a line at the top.

Hot panel

For the only thing to highlight in a grid. One per grid.

11 · Movement

Entries, never spectacle.

Only the position and opacity move. All movement disappears when the user requests fewer animations.

Token	Value
`--ease-out`	`cubic-bezier(.25,.46,.45,.94)`
`--ease-out-strong`	`cubic-bezier(.215,.61,.355,1)`
`--ease-in-out`	`cubic-bezier(.645,.045,.355,1)`
`--ease-soft`	`cubic-bezier(.2,.7,.2,1)`
`--dur-quick · base · slow · reveal`	300 · 400 · 600 · 800 ms

Headings: characters rise from a mask, 0.3 s each, 25 ms apart.
Text: lines rise from a mask, 250 ms apart.
Blocks and cards: rise of 32 px + fade, 0.8 s; 70 ms between cards in a grid.
Secondary links and buttons: the label rolls towards a copy of itself, 400 ms.
The sign itself does not animate in the interface. For a video or loading: the layers appear from top to bottom, 80 ms apart, rise of 2 u, ease-out-strong.

12 · Tone and visual content

Sober, factual, quantified.

Yes

Short sentences that say what the product does, with real numbers.
Screenshots of the real interface, 1440 × 900, updated with each visible change.
Diagrams drawn in code with domain colors.
One word in serif italics to give the voice, no more.

No

Illustration photos, generated images, characters, 3D icons.
Empty superlatives ('revolutionary','magical'), emojis in the interface.
A second accent color (blue, purple…) outside diagrams.
Light mode for the product: Brunel is dark only.

13 · Master files

The logos in SVG.

The official logos, ready for the web, a presentation or printing. Each SVG contains vector paths, including letters: no embedded PNG images and no fonts to install.

The signs and logotypes have a transparent background; the backgrounds below are for preview only. The icon has its own dark background.

Download the 9 SVG logosZIP · SVG + usage guide

Logo · dark background

Orange sign and white name.

Download the SVG

Logo · light background

Orange sign and dark name.

Download the SVG

Logo · white

Monochrome for dark backgrounds.

Download the SVG

Logo · black

Monochrome for light backgrounds.

Download the SVG

Sign · orange

Four strata at reference opacities.

Download the SVG

Sign · white

Monochrome for dark backgrounds.

Download the SVG

Sign · black

Monochrome for light backgrounds.

Download the SVG

Sign · flat colors

Flat colors designed for a #161616 background.

Download the SVG

Icon · avatar

Rounded dark square, ready for an avatar.

Download the SVG

Sources and geometry

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <g fill="#EC6F10">
    <polygon points="12,2 16.6,6.6 7.4,6.6" fill-opacity=".45"/>
    <polygon points="6.2,7.8 17.8,7.8 21.4,11.4 2.6,11.4" fill-opacity=".7"/>
    <polygon points="2.6,12.6 21.4,12.6 17.8,16.2 6.2,16.2" fill-opacity=".88"/>
    <polygon points="7.4,17.4 16.6,17.4 12,22"/>
  </g>
</svg>

Sign · reference (transparent background)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <polygon points="12,2 16.6,6.6 7.4,6.6" fill="#763E13"/>
  <polygon points="6.2,7.8 17.8,7.8 21.4,11.4 2.6,11.4" fill="#AC5412"/>
  <polygon points="2.6,12.6 21.4,12.6 17.8,16.2 6.2,16.2" fill="#D26411"/>
  <polygon points="7.4,17.4 16.6,17.4 12,22" fill="#EC6F10"/>
</svg>

Sign · flat colors for background #161616 (print, no transparency)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <rect width="32" height="32" rx="8" fill="#161616"/>
  <g fill="#EC6F10">
    <polygon points="16,5 20.8,9.8 11.2,9.8" fill-opacity=".55"/>
    <polygon points="9.6,11.4 22.4,11.4 26.2,15.2 5.8,15.2" fill-opacity=".75"/>
    <polygon points="5.8,16.8 26.2,16.8 22.4,20.6 9.6,20.6" fill-opacity=".9"/>
    <polygon points="11.2,22.2 20.8,22.2 16,27"/>
  </g>
</svg>

Favicon / avatar (src/app/icon.svg)

Where each element lives

src/components/shell/logo-mark.ts : geometry and colors of the sign
src/components/shell/logo.tsx : sign and logotype of the interface
src/app/icon.svg, apple-icon.tsx : icons
src/app/opengraph-image.tsx : sharing image
src/app/brand/checkout-art.tsx : payment visuals
src/styles/tokens.css, src/app/globals.css : tokens, textures, movement
docs/art-direction.md : the short version of this folder

Pre-publication checklist

The sign has its four layers, the lightest on top, empty slots, edges at 45°.
Only one hue in the sign; orange on dark, or white on warm cover.
Protection zone of ½ S respected; size ≥ 16 px on screen, ≥ 6 mm in print.
The name is in Inter 600, 'Brunel', in white (or ink on paper).
Only one serif italic word per title, only one bright button per screen.
Orange appears only on the main action, links, focus, and the sign.
No photo, no generated image, no shadow or glow added to the logo.

An engineer, not a decorator.

The name

The sign

The light

The diamond stratified.

Reading the sign

A single color, four intensities

Geometry exact.

Construction rule

Internal margins

Optical center

The sign and the name.

Proportions

Horizontal

Sign alone

Stacked

Protection zone, sizes, backgrounds.

Protection zone

Minimum sizes

Scale

Authorized backgrounds

What we never do never.

No inversion of the order

No name in orange

No other typography

The sign in its contexts.

Favicon · app/icon.svg

Sharing image · 1200 × 630

Stripe Payment

Bullet “Eyebrow”

Footer

Social media avatar

Ink, lines, and a ember.

Domain colors (charts and graphs)

The two brand textures

A grotesque, a word in italic.

Buttons, cards, rails.

Showcase site

Application and console

Card (.lift)

Rails

Hot panel

Entries, never spectacle.

Sober, factual, quantified.

Yes

No

The logos in SVG.

Logo · dark background

Logo · light background

Logo · white

Logo · black

Sign · orange

Sign · white

Sign · black

Sign · flat colors

Icon · avatar

Sources and geometry

Where each element lives

Pre-publication checklist

The Brunel ecosystem

Infrastructure and programs

Works with

Favicon · `app/icon.svg`