Skip to main content

Style guide

A little off kilter, never hard to read.

How Bramen sets type and shapes its components, and the few rules that keep every page consistent. The logo is hand-drawn, round, and slightly tilted; the type follows it with one expressive serif for headings and one quiet sans for everything people read.

Principles

Three ideas behind every page

  1. 1

    Contrast does the work

    Heavy against hairline, serif against sans. No decoration needed when the type itself has range.

  2. 2

    Off kilter, not chaotic

    One wonky typeface, used for headings only. Everything around it stays calm and regular.

  3. 3

    Reading comes first

    Long text is always in the plain sans, at a comfortable size and line length.

Type roles

Six roles, three typefaces

Display

Page titles and section headings. Weight steps down with the level, so hierarchy reads at a glance.

Fraunces · SOFT 100, WONK 1 · h1 800, h2 750, h3 650

Docs that hold up

What I help with

Docs modernization & migrations

Accent

One phrase inside a heading, set hairline italic in raspberry: the contrast that makes a heading memorable.

Fraunces italic · weight 250 · --accent · written as <em>

Modern documentation, built end to end and ready for AI.

Strapline

The one-line description of the business, next to the logo. Nowhere else.

Fraunces italic · weight 400 · muted · 1.05rem

Documentation engineering and technical writing services

Text

Everything people read: paragraphs, lists, tables, buttons, navigation, forms.

Instrument Sans · 400, 600 for emphasis · lead text 1.125rem, body 1rem

I design and build complete docs solutions, from API references and content pipelines to analytics.

Every page answers one reader's question. If a reader can't find the answer, the page is in the wrong place or missing something.

Label

Small headings above headings (eyebrows), footer column titles, metadata. A few words at most.

Instrument Sans · condensed (width 75%) · 700 · capitals · tracked 0.18em · .eyebrow

Docs engineering & AI-ready content

Code

Code, identifiers, file paths, commands, and API paths. Never for decoration.

JetBrains Mono · 400

Run npm run build after changing src/data/site.ts.

Rules

Do and don't

Do

  • Let contrast do the work: heavy against hairline, serif against sans.
  • Use at most one accent per heading, and only on a phrase that carries the meaning.
  • Set every heading in Fraunces and every paragraph in Instrument Sans.
  • Use the weights above, and only those. The steps are what make the hierarchy.
  • Keep labels to a few words, in capitals, above the heading they introduce.

Don't

  • No accents in running text, buttons, navigation, or labels.
  • No Fraunces for paragraphs: its wonky shapes are for short, large text.
  • No bold or italic made by the browser: both fonts have real ones.
  • No tilted text or extra typefaces. The logo's slant belongs to the logo.
  • No underlined headings, all-caps headings, or colour on headings other than the accent.

Writing pages

Accents in Markdown

Docs pages and case studies get the type roles automatically. To add an accent, wrap the phrase in single asterisks inside the heading:

## Step 1: *Competency questions*

Becomes:

Step 1: Competency questions

Components

Frosted glass, slowly

Surfaces are translucent and blurred, with a fine highlight along the top edge, over soft berry, navy, and leaf light. On hover they lift, turn more solid, and their shadow deepens into a glow. Hover over everything below.

Primary action →Secondary action →Outward link ↗Text link

.glass

A card that informs

Turns more solid on hover, but stays put: it isn't a link.

.glass .glass-link

A card that goes somewhere

Lifts, deepens its shadow, and nudges its arrow forward.

Easing
One curve for everything: quick to start, long and soft to settle.
--ease-soft
Duration
Half a second for hovers and focus, a little longer for cards. Nothing snaps.
--duration
Rounding
Fields 12px, buttons 14px, cards 20px: the bigger the surface, the softer the corner.
--radius-*
Buttons
Navy for the main action, glass for the next step, and raspberry for one outward link worth noticing (LinkedIn), at most one of each in a group. Every button has a soft shadow, rises a touch on hover, and ends in an arrow that nudges the way it points: → another page, ↗ another site, ↓ a download, ← back.
.btn-primary .btn-outline .btn-accent .arrow
Lift
Only things you can click lift on hover. Static cards stay put and shade instead: more solid, a navy-tinted edge, a deeper shadow.
.glass-link
Entrance
Sections fade up gently into place as they scroll into view. No blur: glass is the only blur on the page.
.reveal
Depth
When a section slides over another, the one underneath recedes: it fades, shrinks a little, and rounds its corners. Once per page, at most.
.overlap-up
Restraint
Visitors who prefer reduced motion keep the colour changes; nothing moves.
prefers-reduced-motion

Colour

Sampled from the berries

  • Navy--primaryPrimary actions, links, the wordmark
  • Raspberry--accentHeading accents, bullets, DOCS
  • Leaf--leafSparingly: success states, small highlights
  • Ink--inkHeadings and body text
  • Muted--mutedSecondary text, labels, the strapline
  • Surface--surfacePage background
  • Surface alt--surface-altBands, cards, code blocks

Every colour has a light and a dark value; use the token, never the hex code.