Brand guidelines

How 53° looks in the product, in print, on social and in anything we send. This page covers the wordmark, the brand orange and the warm neutrals, with values for each medium.

Overview

Four ideas the rest of these guidelines follow from.

Warm, not clinical

Warm stone neutrals instead of cold greys, and one orange. A screen, a business card or a social post should look like a well-lit studio, not a spreadsheet.

One accent, used sparingly

The brand orange marks what matters: the primary action on a screen, the headline figure on a slide, the degree mark everywhere. If everything is orange, nothing is.

Serif voice, sans work

Noto Serif sets the titles. Noto Sans sets everything people read and work in, whether in the app, in print or on slides. Change either face and it stops looking like us. The same goes for the orange.

Calm motion, always optional

In the product, blobs take tens of seconds to drift and the degree mark dips on hover. Video and social move at the same slow pace. Nothing moves to get attention.

Mark

The mark is a wordmark set in type. In the product it's live text in the theme's colours. Everywhere else it's an exported file of the same letters.

Wordmark

"53" in extra-bold serif, then the degree sign in the brand orange. Use the Logo component from @workspace/ui. Emails use EmailLogo, which matches it.

53°

Default: sign-in, onboarding and status screens

53°

Medium (size="md"): public page headers

53°

Small (size="sm"): sidebars and footers

Use the Logo component, so the mark follows the theme.
Leave clear space of at least the height of the "5" on every side.
Set it on background, card or the brand background.

Don't

Screenshot it, or redraw it in another typeface.
Recolour the degree sign, or set the mark on an orange fill. The sign disappears into it.
Stretch, rotate, outline or add effects to it.

Beyond the product

Print, social avatars, slides, signage and merchandise use the wordmark files below. Use SVG or PDF for print and anything you scale, and PNG for social and documents. The letters are outlines of Noto Serif ExtraBold and Noto Sans SemiBold, so you don't need the fonts installed.

Full colour

SVG PDF PNG

Full colour, reversed

SVG PDF PNG

One colour, ink

SVG PDF PNG

One colour, paper

SVG PDF PNG

Full colour

Ink "53" with the orange sign on paper or white, or paper "53" with the orange sign on ink. It's the default everywhere.

One colour

All ink or all paper, sign included. For single-colour print, embossing, engraving and merchandise.

Degree sign alone

The orange ° on its own is an accent, like a bullet or a detail in the favicon. It never stands in for the name.

Reproduce the construction exactly: "53" in Noto Serif ExtraBold, "°" in Noto Sans SemiBold, the sign in orange.
Use the one-colour version (ink, or paper on dark) where orange can't print: embossing, engraving, single-colour merchandise.
Keep it at least 6mm tall in print and 20px tall on screen. Any smaller and the degree sign is hard to read.

Don't

Use the wordmark as a pattern, watermark or background texture.
Pair it with another logo in the same lock-up without a clear space between them.
Set it on a photo, unless the area behind it is plain and clearly dark or light.

Atmosphere

The blurred orange that drifts behind sign-in and status screens, and the frosted glass on top of it.

Brand background

Four blurred orange blobs drift over 24–30 seconds and fade into the page colour. Background fills the viewport behind a page. Blobs fit="container" fills a panel like the one below.

53°

Use it behind focused, single-task screens: sign-in, onboarding, errors.
Put content above it at z-10, on a card or directly on the fade.

Don't

Use it behind dense working screens like lists and boards.
Stack two animated backgrounds, or speed the drift up.

Glass and grain

Cards are frosted glass (bg-card/75 with backdrop-blur-sm) with a 3px orange top rule. A global rule in globals.css adds a faint film grain to anything with a backdrop-blur-* utility.

Card

Glass, grain and the orange top rule. Every card ships like this.

The blobs show through, blurred.

Without the rule

topBorder={false} for cards nested in other cards, or in dense grids.

Make the blurred element a positioning context (relative) so the grain covers it.
Opt an element out with the no-noise class, but only where the grain gets in the way of its content.

Don't

Hand-roll another grain or noise texture.
Nest orange-ruled cards inside each other.

Colour

Semantic tokens, drawn from two Tailwind ramps: orange for the brand, stone for everything else. Use the token, never the raw value, so both themes follow.

Brand and state

The colours that carry meaning. Where light and dark differ, both are shown.

--primary

The brand orange. Primary actions, focus of attention, the degree mark.

Both: #F54900oklch(64.6% 0.222 41.116)

--primary-foreground

Text and icons on a primary fill.

Both: #FFF7EDoklch(98% 0.016 73.684)

Light

Dark

--secondary

Secondary buttons and quiet fills.

Light: #F4F4F5oklch(0.967 0.001 286.375)
Dark: #27272Aoklch(0.274 0.006 286.033)

Light

Dark

--accent

Hover and selected rows, menu highlights.

Light: #F5F5F4oklch(0.97 0.001 106.424)
Dark: #292524oklch(0.268 0.007 34.298)

Light

Dark

--destructive

Deleting, errors and irreversible actions. Never decoration.

Light: #E7000Boklch(0.577 0.245 27.325)
Dark: #FF6467oklch(0.704 0.191 22.216)

Surfaces and text

The warm stone neutrals that make up most of every screen.

Light

Dark

--background

The page.

Light: #FFFFFFoklch(1 0 0)
Dark: #0C0A09oklch(0.147 0.004 49.25)

Light

Dark

--foreground

Body text and headings.

Light: #0C0A09oklch(0.147 0.004 49.25)
Dark: #FAFAF9oklch(0.985 0.001 106.423)

Light

Dark

--card

Cards, and (as `popover`) menus and popovers.

Light: #FFFFFFoklch(1 0 0)
Dark: #1C1917oklch(0.216 0.006 56.043)

Light

Dark

--muted

Wells, skeletons, inline code.

Light: #F5F5F4oklch(0.97 0.001 106.424)
Dark: #292524oklch(0.268 0.007 34.298)

Light

Dark

--muted-foreground

Secondary text, descriptions, placeholders.

Light: #79716Boklch(0.553 0.013 58.071)
Dark: #A6A09Boklch(0.709 0.01 56.259)

Light

Dark

--border

Hairlines between and around surfaces.

Light: #E7E5E4oklch(0.923 0.003 48.717)
Dark: #FFFFFF @ 10%oklch(1 0 0 / 10%)

Light

Dark

--input

Form control borders.

Light: #E7E5E4oklch(0.923 0.003 48.717)
Dark: #FFFFFF @ 15%oklch(1 0 0 / 15%)

Light

Dark

--ring

Focus rings.

Light: #A6A09Boklch(0.709 0.01 56.259)
Dark: #79716Boklch(0.553 0.013 58.071)

Light

Dark

--sidebar

The app sidebar, a step off the page.

Light: #FAFAF9oklch(0.985 0.001 106.423)
Dark: #1C1917oklch(0.216 0.006 56.043)

Charts

Series colours in draw order, the same in both themes. The brand orange leads.

--chart-1

First series — the one the eye goes to.

Both: #FF6900oklch(0.705 0.213 47.604)

--chart-2

Second series.

Both: #FFB86Aoklch(0.837 0.128 66.29)

--chart-3

Third series.

Both: #F54900oklch(0.646 0.222 41.116)

--chart-4

Fourth series.

Both: #CA3500oklch(0.553 0.195 38.402)

--chart-5

Fifth series.

Both: #9F2D00oklch(0.47 0.157 37.304)

Ramps

Every token above is one step on these two ramps, and its tag says which. Use a step directly only for illustration, never for UI state.

Orange

50#FFF7EDprimary-foreground
100#FFEDD4
200#FFD6A7
300#FFB86Achart-2
400#FF8904
500#FF6900chart-1sidebar-primary (dark)
600#F54900primarychart-3
700#CA3500chart-4
800#9F2D00chart-5
900#7E2A0C
950#441306

Stone

50#FAFAF9sidebarforeground (dark)
100#F5F5F4mutedaccent
200#E7E5E4borderinput
300#D6D3D1
400#A6A09Bringmuted-foreground (dark)
500#79716Bmuted-foregroundring (dark)
600#57534D
700#44403B
800#292524muted (dark)accent (dark)
900#1C1917card (dark)sidebar (dark)
950#0C0A09foregroundbackground (dark)

Use one primary (orange) action per view, and one orange accent per page, slide or post.
Use destructive only for deleting, errors and what can't be undone.
Check every pairing in both themes. Body text needs 4.5:1 contrast.
Use emerald (600 light, 400 dark) for good news, like a rising figure. It's the one colour outside the two ramps.

Don't

Use orange for large backgrounds or long runs of text.
Hard-code hex or oklch() values in components.
Signal state with colour alone. Pair it with an icon or label.

Print and media

Outside the product, the palette narrows to four colours. Use RGB for video, slides and social tools. CMYK is only a starting point for the printer, who should proof against the hex before a run.

OrangeThe degree sign, and one accent per piece.

hex: #F54900
rgb: 245 73 0
cmyk: 0 70 100 4

InkText, and dark grounds (the default for social).

hex: #0C0A09
rgb: 12 10 9
cmyk: 0 17 25 95

StoneSecondary text, captions, rules.

hex: #79716B
rgb: 121 113 107
cmyk: 0 7 12 53

PaperLight grounds; warm white stock in print.

hex: #FAFAF9
rgb: 250 250 249
cmyk: 0 0 0 2