Design system

Everything that defines how fabianmebus.com looks: colours, type, grid, components and their rules. The examples on this page use the same stylesheet as every other page, so they always show the current state.

At a glance

Font styles

4

Text styles

8

Colour tokens

17

Button types

3

Grid

12 px

Main breakpoint

1024 px

Principles

• One dark colour scheme: There is no light variant. Things only turn light on paper.
• Mobile first: The base rules describe the narrow view from 320 px. One media query from 1024 px turns the stacked card into the landscape one.
• Square: no rounded corners, no decorative gradients. Gradients only appear as masks that fade out the photo and the grid.
• Copper, used sparingly: as a surface only in the primary button, otherwise as an accent in text, in the tagline’s full stop and in the grid.
• Tokens instead of fixed values: Every colour appears exactly once in the stylesheet. The values on this page are read from it too.
• No JavaScript needed: Design and interaction come entirely from HTML and CSS.

Colours

17 colour tokens, all in :root. For text and controls, the contrast with the background they sit on is shown.

Surfaces

• --color-page #141311 Page background
• --color-card #1C1A17 Card and text pages
• --color-card-border #2E2A25 1.3:1 on the page Card border, lines in tables and tiles (decorative)
• --color-control-bg-hover #24211D Outline button surface on hover
• --color-shadow rgba(0, 0, 0, 0.45) Card shadow on the home page
• --color-photo-print #141311 Area behind the photo in print

Text

• --color-text-strong #FFFFFF 17.3:1 on the card Tagline and headings
• --color-text #F3F1ED 15.3:1 on the card Button text and links
• --color-text-body #D6D2CB 11.5:1 on the card Body text on text pages
• --color-text-muted #A9A49C 7.0:1 on the card Card text, introductions, footer
• --color-accent-text #E07A45 5.8:1 on the card Copper as text: roles, subheadings, focus ring
• --color-success #5FBF7A 7.6:1 on the card Test results on “About this site”

Copper and controls

• --color-accent #C2531A 3.7:1 on the card Primary button, full stop in the tagline, grid
• --color-accent-hover #A8441A Primary button on hover
• --color-on-accent #FFFFFF 4.6:1 on copper Text on copper
• --color-control-border #746E65 3.4:1 on the card Outline button border, link underline
• --color-control-border-hover #A9A49C 7.0:1 on the card Border on hover

In print, these tokens get different values; everything else stays the same:

Typography

Two typefaces: FM Sans for text, FM Mono for everything that organises and labels. They are IBM Plex Sans and IBM Plex Mono, subset to the characters the website needs. The font licence, SIL OFL, allows this but forbids the name “Plex” for modified versions.

• FM Sans 300: only the name in the logo
• FM Sans 400: body text and introductions
• FM Sans 600: tagline, headings and buttons
• FM Mono 500: roles, subheadings, back link, captions and footer

Together the four files weigh around 50 KB. Only Sans 400 and 600 are preloaded. Until the fonts arrive, text is set in Arial and Courier New, with metrics adjusted so that nothing jumps when they swap.

Type sizes

• To me, leadership is a responsibility, not a title.

  Tagline · FM Sans 600 · 40 px / 1.14 · tracking −0.01 em · narrower 32, 28 or 25 px

• Design system

  Page title · FM Sans 600 · 40 px / 1.14 · narrower 30 px

• Engineering Manager · Head of Frontend Engineering

  Roles · FM Mono 500 · 15.5 px · narrower 13 or 12 px

• Subheading

  Subheading · FM Mono 500 · 14 px · narrower 13 px · tracking 0.02 em

• Note, slightly smaller and quieter than body text: as an introduction below the page title or for the date at the very bottom.

  Note · FM Sans 400 · 15 px / 1.6

• Body text on text pages, with generous line spacing so that even long legal texts are easy to read.

  Body text · FM Sans 400 · 16 px / 1.65

• Short text on the home page card.

  Card text · FM Sans 400 · 15 px / 1.6 · narrower 14.5 or 13.5 px

• Captions and footer

  Label · FM Mono 500 · 13 px · tracking 0.02 em

Logo

• Mark: the FM mark as SVG directly in the HTML, in the text colour, aspect ratio 389 : 200.
• Name: real text in FM Sans 300, capitals via CSS, tracking 0.42 em. A negative margin offsets the tracking on the right so the name sits visually centred.
• Dimensions: Everything depends on one value, --logo-width. The mark’s height is width × 200 / 389; the gap and the name’s font size are 10 % of the width each.
• Role: On the home page the logo is the only top-level heading; on all other pages it links to the home page.

Grid and surfaces

• Grid: a 12 × 12 px tile with a 3 × 3 px copper square, shown on the right at eight times its size. Repeated across the whole page at 85 % opacity.
• Fade: A mask fades the grid out diagonally, between 90 and 600 px from 1024 px, between 30 and 300 px below that.
• Pure decoration: The grid is a pseudo-element without HTML of its own. It disappears in contrast mode and in print.
• Card: surface --color-card, 1 px border, and on the home page a soft shadow (0 40px 80px). A mask fades the photo into the card.

Layout and breakpoints

One main breakpoint at 1024 px, plus three finer steps for the stacked card:

There are no fixed heights anywhere, only minimum heights. So neither 400 % zoom nor larger line spacing cuts anything off.

Components

Buttons

• Three kinds: primary in copper for the most important action, outline for the second, text link for the third. Each shown above as normal, hover and keyboard focus.
• Shape: at least 44 px tall, square, FM Sans 600 at 14 px, never wrapping. The border is always there, transparent if need be, so every button gets a frame in contrast mode.
• Depending on width: “Save contact” is an outline button below 1024 px and a text link above.

Text pages

About this site, the legal notice, the privacy policy, the 404 page and this page share one template and the same components:

Footer

Visible at the very bottom of this page: FM Mono at 13 px, links with a click area at least 24 px tall. The separators come from the CSS and are not read out by screen readers. The language switch sits behind a bar as “DE / EN”: the current language is bright and not a link, the other leads to the same page in that language. Screen readers hear only that link, spelled out and read in its own language.

States and accessibility

• Hover: only a change of colour, over 150 ms.
• Focus: always visible, as a 2 px outline in --color-accent-text with a 3 px offset. A focus outline is never removed without an equivalent replacement.
• Contrast: body text at least 7:1, all other text at least 4.5:1, control borders at least 3:1.
• Click areas: buttons 44 px tall, all other links at least 24 px.
• Reduced motion: If the system asks for less motion, all transitions are switched off.
• Contrast mode: The grid disappears, the browser applies system colours, and the focus outline takes the highlight colour.

Print

• Black on white: The print colours from the colours section replace the screen colours. Grid, surfaces, borders and shadows disappear; the page margin is 20 mm.
• Home page as a business card: It fits on one page. Email and LinkedIn become text, the website and the contact file become QR codes generated at build time.
• Design system exception: Swatches, grid and buttons on this page keep their screen colours, even with background graphics turned off in the print dialog. They show what the website looks like.
• Text pages: back link, navigation and screenshots disappear. The footer shows only the website address.
• CSS only: Anything that appears only in print lives in the stylesheet, not in the HTML.

In the code

• One stylesheet: site.css in numbered sections, from tokens to print. Astro writes it as a separate file, never inline, because the Content Security Policy only allows stylesheets from the site’s own server.
• BEM class names: block, element and modifier, for example btn--primary or article__heading.
• No inline styles: That is why each colour swatch above has its own class.
• Astro components: logo, footer and the text page template each exist once and serve both languages.