# Umferðarlög Brand Code 1.0.0

How Umferðarlög looks and speaks across the iPhone and iPad app and the web: the name, the U-beygja logo, the Basalt palette, type, components and road signs. Every value on this page is also served as data, so services read it from here instead of keeping a copy. Updated 2026-11-12. Human page: https://brand.umferdarlog.com/

## Brand

- Name in text: Umferðarlög (ASCII only in domains/IDs: Umferdarlog). Logo mark name: U-beygja.
- Umferðarlög is the Icelandic word for the Traffic Act (umferð = traffic, lög = law). Keep the Icelandic letters ð and ö everywhere text is shown; use the ASCII form Umferdarlog only in domains, bundle identifiers and file paths.
- Tagline: "Practice for the Icelandic driving theory test" / "Подготовка к теоретическому экзамену на права в Исландии"
- What it is: An iPhone and iPad study app and web guide for the Icelandic B driving theory test: 600 questions, a 45-minute mock exam, road signs, traffic law and fines in Icelandic and English. Act: Umferðarlög nr. 77/2019 (Reykjavík, Iceland).
- Voice: honest readiness (Show the real pass mark (45 of 50 in 45 minutes) and real results, never encouragement in place of facts.); calm over excitement (No badges, confetti, streak pressure, countdowns or mascots.); second-language clear (Short sentences and plain words that read cleanly in English, Icelandic, Polish and Russian.); cited to the law (Every rule, sign and fine names its source on island.is or althingi.is.)
- Links: https://umferdarlog.com, https://apps.apple.com/app/id6747301237, info@umferdarlog.com, https://apps.apple.com/app/id6747301237, https://github.com/brotunity/umferdalog-web, https://github.com/brotunity/umferdarlog-ios, https://island.is/okunam

## Colour

The Basalt palette pairs cool volcanic greys and snow-white cards with near-black Ink and one Glacier Blue. Moss, Lava and Ochre report study states; Sign Yellow and Sign Red belong strictly to road signs.

### Core

- Ink `#182024` (`--ul-ink`): Primary text, the logo on light grounds, the app icon ground and the dark-mode card surface.
- Road Line `#F1F4F4` (`--ul-road-line`): The U inside the app icon, dashed road centre lines and instrument cluster figures.
- Card White `#FFFFFF` (`--ul-paper`): Cards, menus and the quiz surface in light mode; text on Glacier Blue, Moss and Lava fills.
- Glacier Blue `#1D5F94` (`--ul-glacier`): Primary buttons, current stage markers, route-number plates and mandatory sign plates.

### Accent & road

- Glacier Blue Dark `#246BA3` (`--ul-glacier-bright`): Primary button and plate fill in dark appearance.
- Glacier Sky `#8CCBEA` (`--ul-glacier-sky`): Links, interactive text labels and the instrument cluster dial in dark appearance.
- Road Asphalt `#3A464C` (`--ul-asphalt`): The road strip down the page and neutral progress bars (same in light and dark).
- Marker Done `#1F2A2F` (`--ul-marker-done`): Passed stage markers along the road.

### Basalt neutrals

- Basalt Ground `#EEF1F0` (`--ul-basalt`): Page and screen background in light appearance.
- Open Stone `#DADEDD` (`--ul-stone`): Unanswered progress squares, language toggle pill and hairlines.
- Ink Soft `#56636A` (`--ul-slate`): Secondary text and leads in light appearance.
- Stone Text `#4A565C` (`--ul-stone-ink`): Numbers inside unanswered stone squares.

### Night & instrument cluster

- Night Basalt `#0F1416` (`--ul-night`)
- Cluster Ground `#10161A` (`--ul-night-cluster`)
- Night Stone `#2A3439` (`--ul-night-stone`)
- Night Ink `#E9EEEF` (`--ul-night-ink`)
- Night Ink Soft `#9AA8AE` (`--ul-night-slate`)
- Night Stone Text `#C9D2D6` (`--ul-night-stone-ink`)
- Footer Night `#0A0E10` (`--ul-night-deep`)

### Study & quiz states

- Moss `#2E7550` (`--ul-moss`): Correct answer and passed exam fill (paired with a tick).
- Moss Text `#2E6B45` (`--ul-moss-deep`): Text on Moss Tint result panels in light mode.
- Moss Light `#8FD0AA` (`--ul-moss-light`): Correct state text in dark mode.
- Moss Tint `#E2EFE6` (`--ul-moss-tint`): Tinted result card background for a right answer.
- Lava `#B83A2E` (`--ul-lava`): Wrong answer and failed exam fill (paired with a cross).
- Lava Text `#A8342A` (`--ul-lava-deep`): Text on Lava Tint result panels in light mode.
- Lava Light `#F2A097` (`--ul-lava-light`): Wrong state text in dark mode.
- Lava Tint `#F7E2DF` (`--ul-lava-tint`): Tinted result card background for a wrong answer.
- Ochre `#D99A3D` (`--ul-ochre`): Needs work indicator (e.g. a topic below 70% accuracy); never means wrong.
- Ochre Text `#8F5310` (`--ul-ochre-deep`): Needs work label text in light mode.
- Ochre Light `#E8AD5A` (`--ul-ochre-light`): Needs work label text in dark mode.

### Road sign art only

- Sign Yellow `#F8C800` (`--ul-sign-yellow`): Icelandic warning and prohibitory sign background and the small road car. Never UI chrome.
- Sign Red `#D20000` (`--ul-sign-red`): Icelandic warning and prohibitory sign rim. Never buttons or alerts.

### Interface roles (light / dark)

- `--ul-bg`: basalt / night
- `--ul-surface`: paper / ink
- `--ul-surface-alt`: stone / night-stone
- `--ul-border`: stone / night-stone
- `--ul-heading`: ink / night-ink
- `--ul-text`: ink / night-ink
- `--ul-text-soft`: slate / night-slate
- `--ul-text-muted`: stone-ink / night-slate
- `--ul-brand`: glacier / glacier-bright
- `--ul-brand-strong`: glacier / glacier-sky
- `--ul-action`: glacier / glacier-bright
- `--ul-on-brand`: paper / paper
- `--ul-danger`: lava / lava
- `--ul-danger-strong`: lava-deep / lava-light
- `--ul-ok`: moss / moss
- `--ul-ok-strong`: moss-deep / moss-light
- `--ul-warn`: ochre / ochre
- `--ul-warn-strong`: ochre-deep / ochre-light

## Type

Medeo Sans carries the wordmark, section headings, numbers and web road plates. Barlow Semi Condensed sets gauge figures and sign plates in the iOS app. Running text uses the native system UI face (SF Pro Text on Apple devices) so second-language readers get familiar letterforms.

- Medeo Sans (OFL-1.1, https://github.com/DNFDEVS/medeo-font), based on Geist & Inter by DNF Studio, Vercel, Rasmus Andersson (https://github.com/DNFDEVS/medeo-font): `"Medeo Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif`, weights 400, 500, 600, 700
- Barlow Semi Condensed (OFL-1.1, https://github.com/jpt/barlow), based on Barlow by Jeremy Tribby (https://github.com/jpt/barlow): `"Barlow Semi Condensed", -apple-system, system-ui, sans-serif`, weights 700
- System UI body text (`--ul-font-text`): `-apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", "Roboto", sans-serif`
- Medeo Sans is a variable font (wght 100–900, opsz 14–32). The brand uses weights 500, 600 and 700, while body copy stays in the system UI font.
- display: plate, 700, 76px (phone 34px), line height 0.98
- h1: plate, 700, 52px (phone 32px), line height 1.02
- h2: plate, 700, 40px (phone 28px), line height 1.08
- h3: plate, 700, 24px (phone 20px), line height 1.15
- gauge: cluster, 700, 56px (phone 44px), line height 1, capitals
- lead: text, 400, 19px (phone 17px), line height 1.5
- body: text, 400, 17px (phone 17px), line height 1.5
- button: text, 600, 17px (phone 17px), line height 1
- label: text, 600, 15px (phone 15px), line height 1.3
- caption: text, 400, 13px (phone 13px), line height 1.4

## Logo

The "U-beygja" (U-turn) mark draws the U of Umferðarlög as a road with lane markings. The centre dashes are real SVG mask cut-outs, so whatever ground sits behind the mark shows through.

- URL pattern: https://brand.umferdarlog.com/logos/{lockup}-{colourway}.svg (PNG: https://brand.umferdarlog.com/logos/png/{lockup}-{colourway}.png)
- lockup: lockup, stacked, wordmark; colourway: ink, line, white
- Marks: https://brand.umferdarlog.com/logos/mark-ink.svg, https://brand.umferdarlog.com/logos/mark-line.svg, https://brand.umferdarlog.com/logos/mark-white.svg
- Icons: https://brand.umferdarlog.com/logos/icon.svg, https://brand.umferdarlog.com/logos/icon-square.svg, https://brand.umferdarlog.com/logos/icon-small.svg, https://brand.umferdarlog.com/logos/icon-tiny.svg, https://brand.umferdarlog.com/logos/icon-maskable.svg, https://brand.umferdarlog.com/logos/appicon-dark.svg, https://brand.umferdarlog.com/logos/appicon-tinted.svg
- Full ZIP bundle: https://brand.umferdarlog.com/logos/umferdarlog-logo.zip
- Ink: Primary dark mark (#182024) on Card White and Basalt Ground.
- Road Line: Off-white road marking (#F1F4F4) inside the app icon and on Ink.
- White: Pure white (#FFFFFF) on Glacier Blue, Road Asphalt and dark photos.
- Road dashes close up at small sizes, so the icon is cut in three optical grades: 11 thin dashes from 48 px up, 6 thick dashes at 20–32 px (including the favicon), and a solid U at 16 px and below.
- Keep a margin of at least 0.5 W around the logo on every side, where W is the width of the U mark. Text, edges and other marks stay outside it.
- Do not: stretch or squash the u or wordmark; fill or recolour the centre dashes; rotate or tilt the u-beygja mark; add outlines, drop shadows or gradients; put the ink logo on a dark ground; retype umferðarlög in another font.

## Files

- https://brand.umferdarlog.com/brand.json: Complete manifest: identity, contacts, colours with HEX/RGB/HSL/CMYK, light/dark roles, fonts, type scale and logo URLs.
- https://brand.umferdarlog.com/tokens.json: W3C Design Tokens (DTCG 2025.10) for Figma, Style Dictionary and Tokens Studio.
- https://brand.umferdarlog.com/tokens.css: CSS custom properties (--ul-*) with automatic light and dark theme roles. Pin light with data-theme="light".
- https://brand.umferdarlog.com/fonts.css: @font-face rules for Medeo Sans Variable and Barlow Semi Condensed Bold.
- https://brand.umferdarlog.com/logos/umferdarlog-logo.zip: Every SVG and PNG logo, plus web/ and ios/ bundles and umferdarlog-logo.zip.
- Both fonts are SIL Open Font License 1.1 and served with cross-origin headers. Link /fonts.css and /tokens.css from any *.umferdarlog.com service.