Fagtur Aberdeen 2026 · Hackathon

Design manual

A shared starting point for all teams. Use the colours, fonts and spacing from here, and feel free to build on them. Show any changes you make in the demo.

Preliminary brand. The values are placeholders until the final brand is ready. This page reads everything directly from brand.css, so it updates itself. The variable names will stay the same.

Usage

The stylesheet is in your repository as public/brand.css. Link it, or copy the variables into your own setup. In your own repository this page lives at /design-manual.html.

<link rel="stylesheet" href="brand.css">

.my-card {
  background: var(--color-background);
  color: var(--color-text);
  padding: var(--space-4);
  border-radius: var(--radius);
}

Download brand.css

Colours

Contrast is calculated against white and against the text colour. WCAG requires at least 4.5 for normal text and 3 for large text.

Typography

Heading 1 var(--font-heading)

Heading 2

Heading 3

Body text in var(--font-body). This paragraph is long enough to wrap across several lines, so you can judge the rhythm of running text. A line height of 1.5 keeps longer text easy to read.

Muted text for help text and metadata.

Spacing and corners

Components

Card

White surface, rounded corners and a light shadow. Good for lists and results.

Use the variables instead of hard-coding colours and spacing.
Everything clickable must be reachable by keyboard and have a visible focus state.
Text needs a contrast of at least 4.5 against its background. Check the colours above.
One primary button per screen. The rest are secondary.
Spacing follows the steps above. Avoid arbitrary values.

Usage

Colours

Typography

Heading 1 var(--font-heading)

Heading 2

Heading 3

Spacing and corners

Components

Card

Ground rules