Styleguide

Type, icons, imagery and motion, and how they carry into print, social media, email and presentations. Then the rules every screen in the app follows. For how we sound, see the Voice page.

Typography

One superfamily, three cuts. Serif for headings, sans for everything people read and work in, mono for anything that must line up.

Typefaces

All three are open source (SIL Open Font Licence) and free from Google Fonts, so print, slides and social templates use the same faces as the app. In the product they load through next/font in the root layout.

Noto Serif
Headings, titles and the wordmark
font-heading
Noto Sans
Everything else: body, labels, controls
font-sans (default)
Noto Sans Mono
Code, tokens, IDs and figures that must align
font-mono

Headings

Serif, semibold, sentence case. Display to Heading 2 use text-balance, so a title never leaves one word alone on its last line.

Every project, one place

Display<Heading level="display">
Classestext-balance font-heading font-semibold text-4xl tracking-tight md:text-5xl

Contacts and deals

Heading 1<Heading level={1}>
Classestext-balance font-heading font-semibold text-3xl tracking-tight

Brand refresh for Northwind

Heading 2<Heading level={2}>
Classestext-balance font-heading font-semibold text-2xl

Upcoming tasks

Heading 3<Heading level={3}>
Classesfont-heading font-semibold text-xl

Invoices due this month

Heading 4<Heading level={4}>
Classesfont-heading font-semibold text-lg
Contact details
Heading 5<Heading level={5}>
Classesfont-heading font-semibold text-base
Billing address
Heading 6<Heading level={6}>
Classesfont-heading font-semibold text-sm
Pipeline value
Card title<CardTitle>
Classesfont-heading font-medium text-base

This week

Eyebrow<Eyebrow>
Classesfont-bold text-primary text-xs uppercase tracking-widest

Body text

Noto Sans, text-sm by default. Make text muted before you make it smaller.

Everything a project needs, from the first enquiry to the final invoice.

Lead<Lead>
Classestext-balance text-lg text-muted-foreground

The app's base size is text-sm. It fits a lot on a working screen, and every control is sized around it.

Body<Text>
Classestext-sm leading-relaxed

Descriptions, helper text and anything secondary.

Muted<Muted>
Classestext-muted-foreground text-sm

Timestamps, counts and captions.

Small<Small>
Classestext-muted-foreground text-xs
£12,480.00
Figuresfont-medium text-2xl tabular-nums

Elements

Inline pieces that sit inside running text.

Run bun run docs:check before committing.

Inline coderounded-md bg-muted px-1.5 py-0.5 font-mono text-sm
⌘K
Shortcut<KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup>
View the proposal
Linktext-primary underline-offset-4 hover:underline
Quoted in full, then signed the same day.
Quoteborder-primary border-l-2 pl-4 text-muted-foreground italic

Prose

Text someone wrote, such as docs, notes, proposals and chat messages, renders inside Prose. It wraps shadcn's Typeset stylesheet, which styles the plain elements inside it with our fonts and colour tokens. The layout around it sets the width. The rich-text editor and viewer both use it.

Kick-off notes

Northwind want the new site live before their spring launch. Sign-off sits with the marketing lead, and finance approve anything over budget.

Next steps

  • Share the discovery findings by Friday.
  • Book the launch review. Their team needs 2 weeks notice.

Keep the tone warm. Their customers are loyal.

MilestoneOwnerDue
DiscoverySarah14 March
Launch reviewTom2 April
Docs<Prose preset="docs">{content}</Prose>
Classestypeset typeset-docs

Draft proposal is in the Northwind folder.

Can you check the pricing table before Friday?

Chat<Prose preset="chat">{message}</Prose>
Classestypeset typeset-chat
Do
  • Use preset="docs" for documents, notes, proposals and help, and preset="chat" for messages and comments.
  • Keep the content to plain elements. Typeset styles headings, lists, quotes, tables and code by position.
  • Add not-typeset to an embedded card or code frame so it keeps its own layout.
Don't
  • Style the elements inside Prose one by one. Change typeset.css instead, so every surface follows.
  • Wrap interface text, such as labels, buttons and settings, in Prose.

Code blocks

Code in docs, notes and proposals renders in the editor's frame, with the language in a header bar. Highlighting uses one muted palette, with light and dark versions.

TypeScript
import { Button } from "@workspace/ui/components/button"

// One primary action per view: the orange button.
export function CreateProject({ onCreate }: { onCreate: () => void }) {
	return <Button onClick={onCreate}>Create project</Button>
}
Code block<StaticCodeBlock code={source} language="typescript" />

Iconography

Hugeicons, stroke style, at stroke width 2. The mark is not an icon and never appears in the set.

Navigation
Search
Settings
Info
Success
Warning

Icons come from @hugeicons/core-free-icons, rendered with @hugeicons/react.

Buttons size their own icons. Set a size only outside a button.

Usage<HugeiconsIcon icon={Search01Icon} strokeWidth={2} className="size-4" />
Do
  • Use Hugeicons at strokeWidth={2}, size-4 by default (size-3.5 in tight rows, size-5 for emphasis).
  • Give icon-only buttons an aria-label and, where it isn't obvious, a tooltip.
  • Let the icon take currentColor, so it follows the text around it.
Don't
  • Mix in another icon library, or filled with stroke icons.
  • Colour icons orange for decoration. Orange is for the one thing that matters.
  • Use emoji as UI icons.

Imagery

Photography and screenshots for the website, social, print and decks. Documentary, not staged. The brand is about the work, so show the work.

Real work
Photograph the people and places the work is for. Use real screenshots of the product, never mock-ups with placeholder text.
Warm light
Natural or warm light, soft shadows, stone and timber tones. A photo should sit next to the stone palette without clashing.
Room to breathe
Simple compositions with empty space for a headline. If text has to sit on a photo, keep the area behind it plain.
Do
  • Show real clients, teams and places, with their permission.
  • Crop product screenshots to the part that makes the point, in either theme.
Don't
  • Generic stock: handshakes, pointing at screens, staged office scenes.
  • Heavy filters, neon or cold blue grading, HDR.
  • AI-generated people or places presented as real.

Motion

Motion explains a change. It never decorates one. Most transitions are 150–300ms, and background motion is measured in tens of seconds.

Interface
Hovers, menus and dialogs: 150–200ms, ease-out. The shadcn components already do this.
Character
One overshoot spring, cubic-bezier(0.34, 1.56, 0.64, 1), 300ms. Only for the degree mark and the rare moment worth celebrating.
Arrival
On the public site, a section's heading and content fade up a short way as they are scrolled to, a row of cards one after another. Tied to the scroll itself, 1rem of travel: how far in it is decides how far through, so only what is just showing at the bottom edge is still arriving when a page opens. Use the reveal and reveal-stagger classes; nothing in the app arrives this way.
Atmosphere
Blobs, stars, drift and the testimonial marquee, on 4–70s loops. Slow enough to ignore. A marquee pauses under the pointer or focus, and stands still for anyone who prefers reduced motion.
Do
  • Add motion-reduce:transition-none or motion-reduce:animate-none to anything that moves.
  • Move with transforms (translate, scale) so nothing shifts layout.
Don't
  • Animate to get attention: pulsing badges, shaking fields.
  • Chain animations that make the user wait to continue.

Channels

The same wordmark, four colours and two typefaces, applied to each place the brand shows up. Values for each colour are under Colour on the brand guidelines page.

Print

Cards, letterheads, signage and anything else we print. Use warm white, uncoated stock, never lighter than 250gsm. Thinner stock feels cheap in the hand.

Business cards
85 × 55mm, 350gsm uncoated in a warm white. Wordmark on the front. Name, role and contact details in Noto Sans on the back.
Letterhead and documents
A4, 250gsm uncoated. Wordmark top left, contact details in the footer in Stone, body text in Noto Sans at 10–11pt.
File preparation
3mm bleed, 300dpi images, fonts embedded or outlined, exported as PDF/X-4. Proof the orange before a run. It shifts on coated stock.

Social media

LinkedIn first, then Instagram and X. A post should look like it came from the same place as the product: dark and warm, with one orange accent and little else.

Profile image
The full-colour wordmark centred on Ink, with enough padding that a circular crop never clips the degree sign.
Posts
Square 1080 × 1080 or portrait 1080 × 1350, and stories at 1080 × 1920. A Noto Serif headline, one orange accent, the wordmark small in a corner.
Covers and link previews
Link previews at 1200 × 630, LinkedIn covers at 1128 × 191, X headers at 1500 × 500. Keep text inside the middle so every crop works.

Email

Product emails and marketing email share one kit, so a customer can't tell which system sent them.

Product emails
Built from @workspace/emails, with the EmailLogo header, the brand orange and the Noto pairing, so an invitation looks like the app. They follow the reader's device: light by default, dark where the mail client asks for it.
Newsletters and campaigns
The same kit: wordmark header, one column, one orange call to action. Web fonts fall back to the serif and sans stacks.
Signatures
Plain text in Noto Sans or the client's default: name, role, 53°, one link. No logo images. They break, and mail clients flag them as attachments.

Presentations and documents

Decks, one-pagers and reports.

Slides
16:9, Ink or Paper grounds. Titles in Noto Serif, everything else in Noto Sans, one idea and one orange accent per slide.
Proposals and documents
Proposals built in the product carry each organisation's own branding. Our own documents use this palette, sentence-case headings and the wordmark on the cover only.
Charts
Use the chart colours in order, orange first. Where you can, label the data directly instead of using a legend.
Do
  • Start from a shared template for each channel, so the details are right by default.
  • Follow the Voice page: British English, sentence case, plain words.
Don't
  • Introduce new colours or typefaces for a campaign.
  • Put more than one message, or more than one orange accent, in a single post or slide.

Screen rules

The conventions every screen in the app follows. The full reasoning is in ARCHITECTURE.md, under Presentation.

Loading
Skeletons shaped like the content for anything that loads a view or section. Spinners only inside a button or inline, for an action in progress.
Forms
An error shows under its field as soon as the person leaves it. A message at the bottom of the form is only for a failure that belongs to no field.
Feedback
Changes apply at once, before the server confirms. A toast confirms them only when the result isn't on screen. Failures always get a toast that says what didn't happen.
Components first
Build from @workspace/ui. A raw <button> or <input> skips focus, theming and accessibility work that's already been done.
Both themes
Every screen works in light and dark. Press D to toggle and check before shipping.
Page titles
Titles read "Page | Section | 53°", as these pages do. Most specific first, so you can still tell narrow browser tabs apart.

Copyright 2026 53 Degrees App LTD. Company number: 16727854. All rights reserved. Made with ♥ in Yorkshire 53.8008°N, 1.5491°W