← All styles
Live preview Open site ↗
A page rendered in Bright Atrium

Bright Atrium

a bright office atrium at ten in the morning

White page, pale tint blocks and one working blue. Cards are softly rounded and lifted by a single diffuse shadow, chips stay square at 4px, and a friendly display face carries the headline with a light negative tracking.

lightbrightsaasproductfriendlypastelmarketing v1.0.0 CC-BY-4.0

Install

npx styles-md add bright-atrium

Palette

bg #ffffff
surface #f6f7f8
fg #14161a
muted #55585f
accent #1a63d8
accent-fg #ffffff
border #d0d3d8
success #2f7d32
danger #c0362c

Type

Body & headings Plus Jakarta Sans

Aa Bb Cc 0123 The quick brown fox

"Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif
Code IBM Plex Mono

const total = 1 + lI0O;

"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace

16px base · 1.2 ratio · body 400 / heading 700 · heading tracking -0.03em. Fonts are not bundled. Install the first family in each stack, or the specimens below fall back to the next one your device has.

4xl · 39.81px

The quick brown fox jumps

3xl · 33.18px

The quick brown fox jumps

2xl · 27.65px

The quick brown fox jumps

xl · 23.04px

The quick brown fox jumps

lg · 19.2px

The quick brown fox jumps

base · 16px

The quick brown fox jumps

sm · 13.33px

The quick brown fox jumps

xs · 11.11px

The quick brown fox jumps

Licensing

No font files are redistributed here. Every family this style asks for by name is free for commercial use, and CI rejects a style that names one which is not.

Fallbacks: Helvetica Neue, Arial, sans-serif, ui-monospace, SFMono-Regular, Menlo, monospace. These are CSS generics and fonts the reader's OS already ships, referenced by name only, so nothing is licensed or downloaded.

The spec itself, and everything generated from it, is CC-BY-4.0. Attribution is the comment at the top of each generated file; keep it and you have complied.

Shape, space & motion

stroke
1px
radius
4px · 20px · 32px
spacing unit
4px
gutter
24px
section gap
96px
max width
1280px
motion
250ms cubic-bezier(0.4, 0, 0, 1)
Download

Bright Atrium

A product page with the lights on. The ground is white, colour arrives as whole blocks of pale tint, and one blue does every action on the screen. Cards are round and lifted just enough to look picked up, and the writing is plain, because the page is selling a tool rather than a mood.

Principles

  • White is the page. Colour arrives as a tinted block that runs the width of a section.
  • One blue does actions. Every filled button, link and active state uses it and nothing else does.
  • Cards are radius-md with shadow-md and no border. Chips and inputs stay square at radius-sm.
  • Two roundnesses only: soft on cards and panels, tight on the small things inside them.
  • Headings run at -0.03em. Body copy is left at normal tracking and never goes above 20px.
  • Illustration is flat, built from the tint cast, and drawn with no outline and no gradient.

Typography

One humanist sans does the whole page. Headings are weight 700 with tracking pulled to -0.03em, so a 96px line holds together while a 24px subhead still reads as a sentence. Body sits at weight 400 between 14 and 20px, which is the working range of the style: anything above 20px is a heading and should be marked up as one. Mono is small and appears in three places only, on plan codes, counts and keyboard shortcuts.

Colour

White ground, ink #14161a at 18.11:1, and muted grey for supporting copy at 7.12:1. accent blue clears AA both ways: white on it at 5.5:1 and as link text on white at the same ratio. surface is the neutral card ground. The tint cast is mint #e6f6e4, sky #e2eefe, butter #fdf3d2, lilac #f0e6fb and blush #fde6e6, and every one of them takes ink text above 15:1, which is what lets a whole section change colour without a single contrast check failing.

Components

  • Button (primary): accent fill, accentFg label, radius-full, 12px/24px, weight 600.
  • Button (subtle): surface fill, fg label, radius-full, same metrics, no border.
  • Card: surface or white, radius-md, 24px padding, shadow-md, no border.
  • Tint block: a full width section in one cast colour, radius-lg when it floats inside the page.
  • Chip: radius-sm, tint fill, 4px/10px, mono or 12px sans, used for status and category.
  • Nav: white, 1px border underneath, links at 14px, one primary button on the right.
  • Input: white, 1px border, radius-sm, accent ring on focus.
  • Spot illustration: flat tint shapes, no outline, sitting inside a card or a tint block.
  • Focus ring: 2px accent at 2px offset.

Do / Don’t

  • Do keep the page white and let the tint blocks carry the colour.
  • Do give a section one tint. Two tints in one band turns the page into a swatch sheet.
  • Do lift cards with the one soft shadow rather than with a border.
  • Do keep body copy between 14 and 20px, and mark anything larger as a heading.
  • Do use mono sparingly, on codes and counts, never on a sentence.
  • Don’t use a second action colour. Green and red are for status text, not for buttons.
  • Don’t outline an illustration or fill it with a gradient. The shapes are flat.
  • Don’t put a card inside a card. One level of lift is all this style has.
  • Don’t round a chip or an input. The tight radius is what keeps the page from going soft.
  • Don’t set a heading without pulling the tracking in. At weight 700 it opens up and looks unset.

When to use

Team tools, project and issue tracking, internal platforms, and the marketing pages that sell them. A poor fit for luxury, nightlife and editorial fashion, where a white page with pastel blocks reads as a product tour rather than as a point of view.