Brand Code

The name

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.

In the logo the wordmark is set in Medeo Sans (wght 600, opsz 32, −2% tracking) and outlined. Always use the SVG or PNG files from the Logo chapter.

Tagline

Voice & principles

We speak to two groups equally: Icelandic 16- and 17-year-olds in driving school, and adults new to Iceland reading in a second language.

• Honest readinessShow the real pass mark (45 of 50 in 45 minutes) and real results, never encouragement in place of facts.
• Calm over excitementNo badges, confetti, streak pressure, countdowns or mascots.
• Second-language clearShort sentences and plain words that read cleanly in English, Icelandic, Polish and Russian.
• Cited to the lawEvery rule, sign and fine names its source on island.is or althingi.is.

Links & contacts

Website

umferdarlog.com

Support email

info@umferdarlog.com

App Store

App Store (id6747301237)

Web GitHub

brotunity/umferdalog-web

iOS GitHub

brotunity/umferdarlog-ios

Ísland.is

island.is/okunam

Lockups

Three levels of detail

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.

Colourways

On grounds

Clear space

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.

Minimum size

Below these sizes the wordmark or road dashes stop reading cleanly.

App icons & web kit

The app icon places the Road Line U (#F1F4F4) on an Ink tile (#182024) with an iOS corner radius (22.5%). Full-bleed square, maskable, and iOS 18 dark and tinted appearances ship alongside the complete ZIP kit.

SVGPNGURL

SVGPNGURL

SVGPNGURL

SVGPNGURL

SVGPNGURL

SVGPNGURL

SVGPNGURL

Umferðarlög

ICOSVGZIP

Download umferdarlog-logo.zip for the full bundle: master SVGs, 16–1024 px PNGs, web manifest and favicon.ico, and Xcode's AppIcon.appiconset.

All files

Every lockup and mark in every colourway, served as SVG and high-resolution PNG.

Do not

Proportion

Balance of surfaces on a screen or page.

• Basalt Ground & Card White62%
• Ink & Road Asphalt24%
• Glacier Blue accent10%
• State & sign accents4%

Core

The four foundational colours of the logo, cards and primary actions.

Accent & road

Dark-mode blue adjustments, the road strip and passed stage markers.

• Glacier Blue Dark

  Primary button and plate fill in dark appearance.

  #246BA3--ul-glacier-bright
• Glacier Sky

  Links, interactive text labels and the instrument cluster dial in dark appearance.

  #8CCBEA--ul-glacier-sky
• Road Asphalt

  The road strip down the page and neutral progress bars (same in light and dark).

  #3A464C--ul-asphalt
• Marker Done

  Passed stage markers along the road.

  #1F2A2F--ul-marker-done

Basalt neutrals

Daylight screen ground, secondary text and unanswered question squares.

• Basalt Ground

  Page and screen background in light appearance.

  #EEF1F0--ul-basalt
• Open Stone

  Unanswered progress squares, language toggle pill and hairlines.

  #DADEDD--ul-stone
• Ink Soft

  Secondary text and leads in light appearance.

  #56636A--ul-slate
• Stone Text

  Numbers inside unanswered stone squares.

  #4A565C--ul-stone-ink

Night & instrument cluster

Dark appearance surfaces and the always-dark car instrument cluster on Home.

• 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

Right answers (Moss), wrong answers (Lava) and weak topics (Ochre) — never used as decoration.

• Moss

  Correct answer and passed exam fill (paired with a tick).

  #2E7550--ul-moss
• Moss Text

  Text on Moss Tint result panels in light mode.

  #2E6B45--ul-moss-deep
• Moss Light

  Correct state text in dark mode.

  #8FD0AA--ul-moss-light
• Moss Tint

  Tinted result card background for a right answer.

  #E2EFE6--ul-moss-tint
• Lava

  Wrong answer and failed exam fill (paired with a cross).

  #B83A2E--ul-lava
• Lava Text

  Text on Lava Tint result panels in light mode.

  #A8342A--ul-lava-deep
• Lava Light

  Wrong state text in dark mode.

  #F2A097--ul-lava-light
• Lava Tint

  Tinted result card background for a wrong answer.

  #F7E2DF--ul-lava-tint
• Ochre

  Needs work indicator (e.g. a topic below 70% accuracy); never means wrong.

  #D99A3D--ul-ochre
• Ochre Text

  Needs work label text in light mode.

  #8F5310--ul-ochre-deep
• Ochre Light

  Needs work label text in dark mode.

  #E8AD5A--ul-ochre-light

Road sign art only

Reserved for Icelandic road sign drawings and the yellow road car. Never used for UI chrome.

• Sign Yellow

  Icelandic warning and prohibitory sign background and the small road car. Never UI chrome.

  #F8C800--ul-sign-yellow
• Sign Red

  Icelandic warning and prohibitory sign rim. Never buttons or alerts.

  #D20000--ul-sign-red

Light and dark roles

Interfaces reference semantic roles (--ul-*), which switch automatically between light and dark appearances.

Contrast

Computed WCAG 2 contrast ratios for the pairs used across the site and iOS app (4.5:1 AA minimum for body text).

Named colour rules

1. The Real Sign Rule: Sign Yellow and Sign Red belong to road signs and the car, never buttons or alerts. 2. The Tick Rule: Colour never carries a right or wrong answer alone — always pair Moss with a tick and Lava with a cross. 3. The Dark Text Rule: Dark mode keeps Moss and Lava fills for white text contrast (5.6:1+) and shifts coloured text to lighter tints.

Scale

Type styles from umferdarlog.com and the iOS design system. The second size is for phones.

Rules

• The Plate Rule: Headings, numbers and anything drawn as a sign plate use the plate face. Running body text never does.
• The Balance Rule: Headings use text-wrap: balance and paragraphs use text-wrap: pretty so four languages never leave one-word last lines.
• Tabular figures (font-variant-numeric: tabular-nums) are required on scores, timers, króna fines and question squares.

Icelandic, Polish and Cyrillic

Medeo Sans covers Latin with Icelandic letters (Á Ð É Í Ó Ú Ý Þ Æ Ö), Polish and Russian Cyrillic in a single variable file.

Umferðarlög · Ökunám · Þjóðvegur 1 · 30.000 kr.

Licence

Both Medeo Sans and Barlow Semi Condensed are free under the SIL Open Font License 1.1. They are served with CORS headers from this domain alongside their OFL.txt licences.

Corners

Spacing

Eight steps on a 4 px grid. Tight inside a component, generous between road stages.

• --ul-space-14 px
• --ul-space-28 px
• --ul-space-312 px
• --ul-space-416 px
• --ul-space-524 px
• --ul-space-632 px
• --ul-space-748 px
• --ul-space-864 px

Elevation

The One Shadow Rule: cards sit on Basalt Ground by colour alone, or use Raise — the only card shadow. Sign glyphs use a tight drop shadow.

Components

Interactive specimens from the site and app

Motion

Transitions use cubic-bezier(0.23, 1, 0.32, 1): 160 ms for colour and menus, 120 ms press scale(0.97) on buttons. Every animation has a prefers-reduced-motion fallback.

Instrument cluster & road stage

The iOS Home dashboard is an always-dark instrument cluster (#10161A) showing mistakes from the last mock exam against the 5-mistake pass mark.

Mock exam · 45 min

48 / 50

Social preview card (OG image)

1200 × 630, the U-beygja horizontal lockup in Road Line (#F1F4F4) on Ink (#182024) with the subtitle in Night Ink Soft (#9AA8AE).

Use it

<link rel="stylesheet" href="https://brand.umferdarlog.com/fonts.css">
<link rel="stylesheet" href="https://brand.umferdarlog.com/tokens.css">

.button {
  background: var(--ul-action);
  color: var(--ul-on-brand);
  font: var(--ul-type-button);
  border-radius: var(--ul-radius-pill);
}

const brand = await fetch("https://brand.umferdarlog.com/brand.json").then((r) => r.json());

brand.colors.glacier.hex;            // "#1D5F94"
brand.logos["lockup-ink"].svg;       // "https://brand.umferdarlog.com/logos/lockup-ink.svg"

<img src="https://brand.umferdarlog.com/logos/lockup-ink.svg"
     alt="Umferðarlög" height="36">

Logo paths

Logos follow a flat predictable naming scheme under /logos/, with full platform bundles alongside them.

https://brand.umferdarlog.com/logos/{lockup}-{colourway}.svg

lockup

lockup, stacked, wordmark, mark

colourway

ink, line, white

icons

icon, icon-square, icon-small, icon-tiny, icon-maskable, appicon-dark, appicon-tinted

bundles

umferdarlog-logo.zip, web/*, ios/AppIcon.appiconset/*

Versions

Token names and asset URLs stay stable within a major version. Breaking changes increment the major version.

1.0.0, 12 November 2026: Initial release of Umferðarlög Brand Code at brand.umferdarlog.com with the U-beygja logo kit, Basalt palette, Medeo Sans and Barlow Semi Condensed.

Fonts & CORS

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.