Menu
BifrOSt-Web
publicLatest change 7c2cb56e0351160e3b6c17af94380b79b538c130 - Publish 0.2.2 changelog and refresh release facts by Ólafur Búi Ólafsson
{
"schemaVersion": 2,
"generatedAt": "2026-08-07T11:50:22Z",
"title": "Design System: BifrOSt Web",
"extensions": {
"colorMeta": {
"basalt-deep": {
"role": "neutral",
"displayName": "Basalt Deep",
"canonical": "#050b14",
"tonalRamp": ["#050b14", "#0b1726", "#15283c", "#2d4054", "#526477", "#81909f", "#b8c1ca", "#edf1f4"]
},
"basalt-field": {
"role": "neutral",
"displayName": "Basalt Field",
"canonical": "#07111f",
"tonalRamp": ["#07111f", "#0e1e30", "#193149", "#304b63", "#536d83", "#8195a7", "#bac5ce", "#eef2f5"]
},
"basalt-raised": {
"role": "neutral",
"displayName": "Basalt Raised",
"canonical": "#0a1827",
"tonalRamp": ["#0a1827", "#11273a", "#1e3b53", "#36566e", "#58768b", "#859dac", "#bbc9d1", "#eef3f5"]
},
"basalt-edge": {
"role": "neutral",
"displayName": "Basalt Edge",
"canonical": "#18344b",
"tonalRamp": ["#102433", "#18344b", "#28506b", "#426d87", "#668ca1", "#91adbc", "#c1d0d7", "#eff4f6"]
},
"ice-white": {
"role": "neutral",
"displayName": "Ice White",
"canonical": "#f4fbfc",
"tonalRamp": ["#1d3033", "#334c50", "#527076", "#76969b", "#9dbbc0", "#c2dadd", "#e3f1f3", "#f4fbfc"]
},
"ice-soft": {
"role": "neutral",
"displayName": "Ice Soft",
"canonical": "#e3f4f6",
"tonalRamp": ["#1a3033", "#304c50", "#4e7075", "#72959a", "#99babe", "#bdd9dc", "#d8ebed", "#eaf7f8"]
},
"ice-muted": {
"role": "neutral",
"displayName": "Ice Muted",
"canonical": "#b7d0d6",
"tonalRamp": ["#182b2f", "#2d464b", "#49676d", "#69898f", "#8cabb1", "#b7d0d6", "#d6e4e7", "#f0f6f7"]
},
"glacial-cyan": {
"role": "secondary",
"displayName": "Glacial Cyan",
"canonical": "#56ddda",
"tonalRamp": ["#073331", "#0b514e", "#11716d", "#1d938f", "#32b6b2", "#56ddda", "#9cebea", "#e4fafa"]
},
"bridge-mint": {
"role": "primary",
"displayName": "Bridge Mint",
"canonical": "#35f2c1",
"tonalRamp": ["#05372b", "#075743", "#0b7a5e", "#109e79", "#1bc798", "#35f2c1", "#91f8df", "#e2fdf6"]
},
"route-blue": {
"role": "secondary",
"displayName": "Route Blue",
"canonical": "#7ad7ff",
"tonalRamp": ["#092e40", "#0e4965", "#17668a", "#2786b1", "#45a9d7", "#7ad7ff", "#b6e8ff", "#e8f8ff"]
},
"aurora-violet": {
"role": "tertiary",
"displayName": "Aurora Violet",
"canonical": "#a48cff",
"tonalRamp": ["#201941", "#342767", "#4b398f", "#6752b8", "#836de0", "#a48cff", "#cbbdff", "#f0ecff"]
},
"warning-amber": {
"role": "tertiary",
"displayName": "Warning Amber",
"canonical": "#f6ce87",
"tonalRamp": ["#3b2b0d", "#5d4416", "#806021", "#a77e32", "#ce9f4d", "#f6ce87", "#f9e1b5", "#fdf5e5"]
},
"dark-ink": {
"role": "neutral",
"displayName": "Dark Ink",
"canonical": "#071522",
"tonalRamp": ["#071522", "#102638", "#1f3c50", "#38566a", "#5b7687", "#879ba8", "#bdc9d0", "#eff3f5"]
}
},
"typographyMeta": {
"display": {
"displayName": "Northern Display",
"purpose": "Large editorial hero, section, and repository headings."
},
"body": {
"displayName": "Hyperlegible Body",
"purpose": "Technical explanations, release boundaries, navigation, and safety copy."
},
"label": {
"displayName": "Route Label",
"purpose": "Compact coordinates and state labels where the content adds information."
}
},
"shadows": [
{
"name": "brand-mark-depth",
"value": "drop-shadow(0 8px 14px rgba(0, 0, 0, 0.32))",
"purpose": "Separates the geometric mark from dark basalt surfaces."
},
{
"name": "mobile-menu-overlay",
"value": "0 18px 40px rgba(0, 0, 0, 0.42)",
"purpose": "Identifies the opened mobile navigation as an overlay."
}
],
"motion": [
{
"name": "control-standard",
"value": "180ms ease-out",
"purpose": "Hover underlines, button lift, language controls, and scene-tab state changes."
},
{
"name": "reduced-motion",
"value": "0.01ms",
"purpose": "Effectively disables animation and smooth scrolling under prefers-reduced-motion."
}
],
"breakpoints": [
{
"name": "navigation-reduction",
"value": "1180px"
},
{
"name": "mobile-navigation",
"value": "820px"
},
{
"name": "compact-mobile",
"value": "560px"
}
]
},
"components": [
{
"name": "Primary Button",
"kind": "button",
"refersTo": "button-primary",
"description": "The mint pill used for the primary download or release action.",
"html": "<a class=\"ds-button-primary\" href=\"#\">Sækja v0.2.0 <span aria-hidden=\"true\">→</span></a>",
"css": ".ds-button-primary { display:inline-flex; min-height:3rem; padding:.65rem 1rem .65rem 1.2rem; border:0; border-radius:999px; align-items:center; justify-content:center; gap:.8rem; background:var(--mint, #35f2c1); color:var(--ink, #071522); font:600 1rem/1 'Atkinson Hyperlegible Next',sans-serif; text-decoration:none; transition:transform 180ms ease-out,background-color 180ms ease-out; } .ds-button-primary:hover { transform:translateY(-2px); background:var(--ice-50, #f4fbfc); } .ds-button-primary:focus-visible { outline:3px solid var(--amber, #f4b85e); outline-offset:4px; }"
},
{
"name": "Source Capsule",
"kind": "button",
"refersTo": "navigation-source",
"description": "The outlined pill reserved for the final source or route action in desktop navigation.",
"html": "<a class=\"ds-source-capsule\" href=\"#\">Kóðageymsla <span aria-hidden=\"true\">→</span></a>",
"css": ".ds-source-capsule { display:inline-flex; min-height:2.6rem; padding:.45rem .85rem .45rem 1rem; border:1px solid rgba(227,244,246,.3); border-radius:999px; align-items:center; gap:.72rem; background:transparent; color:#e3f4f6; font:400 .92rem/1.4 'Atkinson Hyperlegible Next',sans-serif; text-decoration:none; transition:background-color 180ms ease-out,border-color 180ms ease-out; } .ds-source-capsule:hover { border-color:#e3f4f6; background:rgba(227,244,246,.08); } .ds-source-capsule:focus-visible { outline:3px solid #f4b85e; outline-offset:4px; }"
},
{
"name": "Language Switch",
"kind": "custom",
"refersTo": "language-active",
"description": "A compact two-segment locale control with the active language rendered in ice.",
"html": "<div class=\"ds-language\" role=\"group\" aria-label=\"Velja tungumál\"><button class=\"ds-active\" aria-pressed=\"true\">IS</button><button aria-pressed=\"false\">EN</button></div>",
"css": ".ds-language { display:inline-flex; padding:.2rem; border:1px solid rgba(227,244,246,.28); border-radius:999px; background:rgba(5,11,20,.32); } .ds-language button { min-width:2.75rem; min-height:2.75rem; padding:.3rem .45rem; border:0; border-radius:999px; background:transparent; color:#9fd7df; font:600 .68rem/1 'Atkinson Hyperlegible Next',sans-serif; letter-spacing:.08em; cursor:pointer; } .ds-language button.ds-active { background:#e3f4f6; color:#071522; } .ds-language button:focus-visible { outline:3px solid #f4b85e; outline-offset:4px; }"
},
{
"name": "Screenshot Tab",
"kind": "custom",
"refersTo": "scene-tab",
"description": "A ruled screenshot selector that reveals state through text, offset, and a mint border.",
"html": "<button class=\"ds-scene-tab ds-active\"><span>02</span><span>Uppsetningarforrit</span></button>",
"css": ".ds-scene-tab { display:grid; width:100%; padding:1rem 0; border:0; border-bottom:1px solid rgba(190,231,237,.2); align-items:center; grid-template-columns:2.4rem 1fr; background:transparent; color:#91adb5; font:400 .95rem/1.4 'Atkinson Hyperlegible Next',sans-serif; text-align:left; cursor:pointer; transition:color 180ms ease-out,padding-left 180ms ease-out; } .ds-scene-tab span:first-child { color:#56ddda; } .ds-scene-tab:hover,.ds-scene-tab.ds-active { padding-left:.35rem; color:#f4fbfc; } .ds-scene-tab.ds-active { border-bottom-color:#35f2c1; } .ds-scene-tab:focus-visible { outline:3px solid #f4b85e; outline-offset:4px; }"
},
{
"name": "Repository Ledger Row",
"kind": "custom",
"refersTo": "repository-ledger",
"description": "A full-width ruled record joined to the changelog route instead of enclosed in card chrome.",
"html": "<article class=\"ds-repository\"><div class=\"ds-rail\"><strong>01</strong><span>STÝRIKERFI</span></div><div class=\"ds-copy\"><h3>BifrOSt</h3><p>0.2.1 í þróun</p><ul><li>Öruggari uppsetning á allan diskinn</li><li>Undirritaðir BifrOSt-kerfispakkar</li></ul></div></article>",
"css": ".ds-repository { display:grid; grid-template-columns:8rem minmax(0,1fr); border-top:1px solid rgba(190,231,237,.2); border-bottom:1px solid rgba(190,231,237,.2); background:#07111f; color:#edf9fb; font-family:'Atkinson Hyperlegible Next',sans-serif; } .ds-rail { display:flex; padding:2rem 1.5rem 2rem 0; border-right:1px solid rgba(190,231,237,.2); flex-direction:column; gap:.8rem; } .ds-rail strong { font:800 2.5rem/1 'Afacad Flux',sans-serif; } .ds-rail span { color:#9fd7df; font-size:.7rem; font-weight:600; letter-spacing:.15em; } .ds-copy { padding:2rem 0 2rem 2.5rem; } .ds-copy h3 { margin:0; font:800 3rem/.9 'Afacad Flux',sans-serif; } .ds-copy p { color:#f6ce87; } .ds-copy ul { margin:1.5rem 0 0; padding:0; border-top:1px solid rgba(190,231,237,.2); list-style:none; } .ds-copy li { padding:.8rem 0; border-bottom:1px solid rgba(190,231,237,.2); color:#e3f4f6; }"
}
],
"narrative": {
"northStar": "The Northern Field Guide",
"overview": "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. Bounded 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.",
"keyCharacteristics": [
"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.",
"Bold, bounded 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."
],
"rules": [
{
"name": "The Solid Field Rule",
"body": "Text sits on solid tonal fields. Aurora colors may draw routes or state markers but do not become gradients behind copy.",
"section": "colors"
},
{
"name": "The Amber Means Consequence Rule",
"body": "Amber is reserved for destructive-installation truth and release-state caution; do not spend it on routine decoration.",
"section": "colors"
},
{
"name": "The Icelandic First Rule",
"body": "Typography must preserve Icelandic diacritics and natural Icelandic line breaks. Never compress or anglicize copy to rescue a layout.",
"section": "typography"
},
{
"name": "The Full-Width Chapter Rule",
"body": "New major content areas should join the existing sequence of tonal chapters; do not introduce floating dashboard panels as the default container.",
"section": "layout"
},
{
"name": "The Structural Depth Rule",
"body": "Use shadows only for true overlays or small identity assets. Section hierarchy must come from color fields, rules, and spatial overlap.",
"section": "elevation"
}
],
"dos": [
"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."
],
"donts": [
"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."
]
}
}