BifrOSt-Web

public

Latest change 8b5a51097379d15dc68e16af1191984c81970a6d - feat: finalize bilingual changelog and site docs by Ólafur Búi Ólafsson

---
name: BifrOSt Web
description: A northern field guide for an Icelandic-first Arch Linux distribution.
colors:
basalt-deep: "#050b14"
basalt-field: "#07111f"
basalt-raised: "#0a1827"
basalt-edge: "#18344b"
ice-white: "#f4fbfc"
ice-soft: "#e3f4f6"
ice-muted: "#b7d0d6"
glacial-cyan: "#56ddda"
bridge-mint: "#35f2c1"
route-blue: "#7ad7ff"
aurora-violet: "#a48cff"
warning-amber: "#f6ce87"
dark-ink: "#071522"
typography:
display:
fontFamily: "Afacad Flux, sans-serif"
fontSize: "clamp(3.25rem, 8vw, 8.5rem)"
fontWeight: 800
lineHeight: 0.86
letterSpacing: "-0.04em"
body:
fontFamily: "Atkinson Hyperlegible Next, sans-serif"
fontSize: "1rem"
fontWeight: 400
lineHeight: 1.6
letterSpacing: "normal"
label:
fontFamily: "Atkinson Hyperlegible Next, sans-serif"
fontSize: "0.74rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.16em"
rounded:
control: "14px"
pill: "999px"
spacing:
page-gutter: "clamp(1.25rem, 4vw, 4.5rem)"
section-block: "clamp(5.4rem, 10vw, 10rem)"
control-inline: "1.15rem"
components:
button-primary:
backgroundColor: "{colors.bridge-mint}"
textColor: "{colors.dark-ink}"
rounded: "{rounded.pill}"
padding: "0.75rem 1.15rem 0.75rem 1.35rem"
height: "3.3rem"
button-light:
backgroundColor: "{colors.ice-white}"
textColor: "{colors.dark-ink}"
rounded: "{rounded.pill}"
padding: "0.75rem 1.15rem 0.75rem 1.35rem"
height: "3.3rem"
language-active:
backgroundColor: "{colors.ice-soft}"
textColor: "{colors.dark-ink}"
rounded: "{rounded.pill}"
padding: "0.3rem 0.45rem"
---

# Design System: BifrOSt Web

## Overview

**Creative North Star: "The Northern Field Guide"**

BifrOSt Web presents the distribution as a clear field guide rather than a generic software landing page. Basalt-dark fields establish the northern setting; ice-white type, glacial route lines, and restrained aurora accents lead visitors through real product imagery, system provenance, installation risk, and release status.

The system is editorial and spatial. Large offset headlines carry hierarchy, full-width tonal sections establish chapters, and ruled ledgers organize factual material. Product screenshots remain evidence rather than decoration. Safety information abandons metaphor and switches to an amber field with direct, literal copy.

**Key Characteristics:**

- Basalt and ice provide the dominant dark/light contrast.
- Mint, cyan, violet, blue, and amber appear as route markers and state accents, not background gradients behind text.
- Oversized display type is balanced by highly legible body copy and compact factual labels.
- Full-width bands, clipped imagery, and ruled ledgers replace generic card grids.
- Real BifrOSt screenshots and the original geometric mark anchor the identity.

## Colors

The palette moves between dark basalt surfaces and ice-white editorial fields, with aurora colors reserved for navigation, state, and route accents.

### Primary

- **Basalt Field:** The default page and hero surface; it makes screenshots and ice-colored text feel integrated with the operating-system artwork.
- **Bridge Mint:** Primary actions, active scene rules, and the most important directional accent.

### Secondary

- **Glacial Cyan:** Route markers, numeric accents, and the download band.
- **Route Blue:** Link underlines and cool supporting paths.
- **Aurora Violet:** A sparse secondary route color; never a generic purple gradient.

### Tertiary

- **Warning Amber:** Whole-disk safety surfaces and unpublished-development status. It signals attention without borrowing destructive red.

### Neutral

- **Ice White:** Primary text and light controls.
- **Ice Soft:** Secondary light controls and active language state.
- **Ice Muted:** Body text on dark surfaces.
- **Dark Ink:** Text on mint, cyan, amber, and ice surfaces.
- **Basalt Raised / Edge:** Tonal separation, alternating repository bands, and subtle boundaries.

**The Solid Field Rule.** Text sits on solid tonal fields. Aurora colors may draw routes or state markers but do not become gradients behind copy.

**The Amber Means Consequence Rule.** Amber is reserved for destructive-installation truth and release-state caution; do not spend it on routine decoration.

## Typography

**Display Font:** Afacad Flux (sans-serif fallback)
**Body Font:** Atkinson Hyperlegible Next (sans-serif fallback)

**Character:** Afacad Flux supplies compact, forceful Icelandic headlines with generous lowercase forms. Atkinson Hyperlegible Next keeps dense technical and safety copy readable across screen sizes.

### Hierarchy

- **Display** (800, fluid from 3.25rem to 8.5rem, 0.82–0.88 line-height): Hero and major section statements; keep line lengths near 8–12 characters where the composition allows.
- **Headline** (800, fluid from 3.1rem to 7rem, about 0.86 line-height): Section introductions and repository names.
- **Title** (800, roughly 1.8rem to 2.8rem): Ledger item titles and scene captions.
- **Body** (400, 1rem base, 1.6 line-height): Explanations, release boundaries, and installation guidance; constrain long text to about 60–68 characters.
- **Label** (600, about 0.7–0.78rem, 0.08–0.18em tracking): Coordinates, status labels, and compact navigation metadata.

**The Icelandic First Rule.** Typography must preserve Icelandic diacritics and natural Icelandic line breaks. Never compress or anglicize copy to rescue a layout.

## Layout

The page uses a maximum content width of 1440px and a fluid outer gutter. Major sections are full-width tonal bands with internal two-column editorial grids. Headings and explanations are deliberately offset rather than centered.

Desktop navigation collapses progressively: secondary links disappear below 1180px and the native details-based mobile menu takes over below 820px. Hero, section-intro, ledger, and repository grids collapse to one column between 900px and 560px. Mobile pages retain generous vertical rhythm and must never exceed the viewport width.

Homepage imagery uses clipped horizon geometry. The changelog uses numbered horizontal ledgers and a vertical repository route instead of a card collection. The download and safety bands are intentionally flat, broad, and unmistakable.

**The Full-Width Chapter Rule.** New major content areas should join the existing sequence of tonal chapters; do not introduce floating dashboard panels as the default container.

## Elevation & Depth

The system is flat by default. Depth comes from tonal changes, borders, clipping, and overlapping route lines. Shadows are limited to the brand mark and the opened mobile navigation, where they communicate actual layering.

- **Brand mark depth:** A soft downward drop shadow separates the geometric mark from basalt.
- **Mobile menu depth:** A soft, offset dark shadow identifies the open menu as an overlay.

**The Structural Depth Rule.** Use shadows only for true overlays or small identity assets. Section hierarchy must come from color fields, rules, and spatial overlap.

## Shapes

Pill shapes belong to actions, source links, and the language switch. Mobile menu surfaces use restrained 14px rounding. Editorial sections remain square and full-width.

Clipped polygons echo glaciers, bridges, and route diagrams in the hero image and system-layer stack. Thin rules, circular route nodes, and angled lines may carry the navigation metaphor, but they must not compete with content.

## Components

### Primary buttons

- **Shape:** Full pill with at least a 3.3rem touch height.
- **Color:** Bridge Mint with Dark Ink; hover shifts to Ice White.
- **Behavior:** A short 180ms lift and color transition. Focus uses a visible amber outline.

### Text links

- **Style:** Ice text with a Route Blue underline on dark surfaces; preserve conventional link semantics.
- **Use:** Secondary actions and documentation paths, never as a substitute for the primary download action.

### Navigation

- **Desktop:** Ice-muted labels with a mint underline on hover. The final source or route action may use the outlined capsule.
- **Mobile:** A native `details`/`summary` disclosure with a dark raised panel and full-width targets.
- **Language switch:** Two pill segments with Ice Soft marking the active locale; `aria-pressed` must reflect state.

### Screenshot selector

- **Style:** A vertical ruled list on desktop and horizontally scrollable row on narrow screens.
- **State:** The active item shifts slightly, turns Ice White, and changes its lower rule to Bridge Mint.

### Repository ledger

- **Style:** Full-width ruled bands joined by a vertical route. Repository status is separated from the summary and must remain visible without card chrome.
- **Use:** Verified changes and publication boundaries across related repositories.

## Do's and Don'ts

### Do:

- **Do** use real BifrOSt screenshots as product evidence.
- **Do** keep installation and release-state language literal, prominent, and high contrast.
- **Do** use solid tonal bands, thin rules, and route lines to create hierarchy.
- **Do** verify both 1440px desktop and 390px mobile layouts after changing copy or type.
- **Do** preserve keyboard navigation, visible focus, reduced-motion behavior, and a 320px minimum viewport.

### Don't:

- **Don't** replace the editorial bands with a generic feature-card grid.
- **Don't** place body text on decorative gradients or low-contrast imagery.
- **Don't** use amber for routine decoration or imply that unpublished 0.2.1 work is downloadable.
- **Don't** add decorative uppercase labels when a heading or status value already supplies the information.
- **Don't** invent testimonials, benchmarks, hardware qualifications, or upstream ownership claims.