--- version: alpha name: FREITAG description: A stark black-on-white Swiss industrial canvas set entirely in lineto Akkurat, where uppercase grotesk labels read like shipping stencils, the only chromatic moment is FREITAG's hazard-signal yellow, and the product photography of one-of-a-kind recycled-tarp bags does all the color the type refuses to. colors: # Surface / canvas background: "#ffffff" # pure white page canvas surface: "#f1f1f1" # pill-tag fills, muted UI chips surface-sage: "#bec8af" # soft sage band, recycled/natural cue # Ink / text ink: "#000000" # headings, body, the workhorse black ink-warm: "#1d1d1b" # warm near-black, small caps labels ink-slate: "#2b333f" # dark slate UI text ink-secondary: "#616161" # supporting copy, metadata ink-muted: "#cacaca" # faint dividers, disabled on-dark: "#ffffff" # text on black surfaces # Brand accent — FREITAG hazard-signal yellow primary: "#ffdd00" # the singular brand signal — flags, highlights, accents on-primary: "#000000" # black text/icons on yellow link: "#2563eb" # functional link blue (forms, utility) # Borders border: "#e2e2e2" # hairline dividers, card edges border-strong: "#1d1d1b" # the structural black rule # Shadow tints (opaque approximations for the elevation table) shadow-soft: "#999999" # was rgb(153,153,153) 0px 2px 10px -3px — Google format requires hex shadow-ambient: "#0e150e" # was rgba(14,21,14,0.4) — Google format requires hex typography: display-hero: fontFamily: "Akkurat, AkkStdRg, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 48px fontWeight: 400 lineHeight: 0.97 letterSpacing: -0.48px display: fontFamily: "Akkurat, AkkStdRg, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 32px fontWeight: 400 lineHeight: 1.0 letterSpacing: -0.32px heading: fontFamily: "Akkurat, AkkStdRg, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 24px fontWeight: 400 lineHeight: 0.97 letterSpacing: -0.12px body-large: fontFamily: "Akkurat, AkkStdRg, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body: fontFamily: "Akkurat, AkkStdRg, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body-small: fontFamily: "Akkurat, AkkStdRg, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0px label-mono: fontFamily: "Akkurat Mono, AkkStdMn, Helvetica Neue, Arial, sans-serif" fontSize: 11px fontWeight: 700 lineHeight: 1.18 letterSpacing: 0.22px eyebrow: fontFamily: "Akkurat Mono, AkkStdMn, Helvetica Neue, Arial, sans-serif" fontSize: 11px fontWeight: 400 lineHeight: 1.15 letterSpacing: 0.5px caption: fontFamily: "Akkurat, AkkStdRg, Helvetica Neue, Arial, sans-serif" fontSize: 10px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 24px 2xl: 32px 3xl: 48px 4xl: 64px 5xl: 96px rounded: none: 0px sm: 2px md: 4px lg: 16px pill: 9999px components: button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" typography: "{typography.label-mono}" rounded: "{rounded.none}" padding: 14px 24px button-primary-hover: backgroundColor: "{colors.ink-warm}" textColor: "{colors.on-dark}" button-accent: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label-mono}" rounded: "{rounded.none}" padding: 14px 24px button-accent-hover: backgroundColor: "{colors.ink}" textColor: "{colors.primary}" button-pill: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.eyebrow}" rounded: "{rounded.lg}" padding: 12px 14px card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 24px card-product: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 0px input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 12px 0px input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.eyebrow}" padding: 16px 24px link: textColor: "{colors.ink}" typography: "{typography.eyebrow}" padding: 0px eyebrow: textColor: "{colors.ink-warm}" typography: "{typography.eyebrow}" padding: 0px badge: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label-mono}" rounded: "{rounded.none}" padding: 4px 8px --- # FREITAG Design System ## Overview FREITAG's site is the visual equivalent of a Swiss freight yard: black ink on pure white (`{colors.background}`), set almost entirely in **lineto Akkurat** (`AkkStdRg` / `AkkStdMn`), with type laid out like stencils on a shipping crate. There is no flourish here, no gradient, no soft shadow doing decorative work. The single most distinctive move is the refusal of color in the chrome — the interface is monochrome black-and-white, and the only thing that carries hue is the product itself. Each bag is cut from a used truck tarp, so every photograph is one-of-a-kind, weathered, and full of accidental color. The design system steps back deliberately so the recycled material can be the palette. The typography is the system's backbone. Akkurat is a neo-grotesque with no warmth and no apology — it was drawn to be neutral, and FREITAG uses it at its most utilitarian. Headlines run uppercase, tightly tracked, often in the monospaced-feeling `AkkStdMn` cut (`{typography.label-mono}`) so that "BAGS AND ACCESSORIES MADE FROM USED AND CIRCULAR MATERIALS" reads like a printed manifest rather than a marketing line. Display sizes (`{typography.display-hero}`) pull leading down below 1.0, so the words stack dense and structural. It is type as engineering, not as expression. Then there's the hazard-signal yellow (`{colors.primary}`). It is FREITAG's brand-DNA accent — the safety yellow of road signs and shipping flags — and it is rationed. It flags a sale, marks a category, or fills a single attention button, never washing across the page. The rest is black rules, hard square corners (`{rounded.none}` everywhere structural), and flat surfaces. Where most retail sites soften everything into rounded cards and drop shadows, FREITAG keeps its edges sharp and its corners square, the way a folded tarp or a stamped crate would be. The result reads honest, industrial, and Swiss to the bone. **Key Characteristics:** - Pure white canvas (`{colors.background}`) with black ink (`{colors.ink}`) doing all the work — zero gradients, zero decorative color in the chrome - Set almost entirely in **lineto Akkurat** — `AkkStdRg` for display/body, `AkkStdMn` for labels (`{typography.label-mono}`) - Uppercase, tightly-tracked headlines that read like printed shipping manifests - Negative line-height on display type (`{typography.display-hero}` at 0.97) — words stack dense and structural - Single brand accent: hazard-signal yellow (`{colors.primary}`), rationed for flags and one attention button - Square corners everywhere structural (`{rounded.none}`) — the only roundness is the occasional filter pill (`{rounded.lg}`) - Hard black hairline rules (`{colors.border-strong}`) separate content instead of cards or shadows - The product photography is the palette — the chrome goes monochrome so the recycled tarps carry all the color - Form inputs are bottom-rule only (`{rounded.none}`, no box), industrial and bare - Tiny utility captions in Arial (`{typography.caption}`) — the system isn't precious about secondary microcopy ## Colors ### Surface & Canvas - **White** (`{colors.background}`): The dominant canvas. Almost the entire site sits on pure white. - **Light Gray** (`{colors.surface}`): Fills for filter pills, muted UI chips, and product-tile backdrops. - **Sage** (`{colors.surface-sage}`): A soft natural-green band used sparingly as a recycled/circular cue. ### Ink / Text - **Black** (`{colors.ink}`): Headings, body, rules, and the primary button. The relentless workhorse. - **Warm Black** (`{colors.ink-warm}`): Small-caps labels and eyebrows — a hair off pure black. - **Slate** (`{colors.ink-slate}`): Darker UI text on chrome and dialogs. - **Gray** (`{colors.ink-secondary}`): Supporting copy and metadata. - **Faint Gray** (`{colors.ink-muted}`): Disabled states and the lightest dividers. ### Brand Accent - **Signal Yellow** (`{colors.primary}`): FREITAG's brand-DNA hazard yellow. Flags, highlights, and the single accent button. Always paired with black text (`{colors.on-primary}`). - **Link Blue** (`{colors.link}`): A purely functional link/utility blue surfaced in form fields — not a brand color, the system's one concession to convention. ### Borders & Shadow Tints - **Hairline** (`{colors.border}`): Light card edges and dividers. - **Structural Black** (`{colors.border-strong}`): The hard black rule that does most of the dividing. - **Soft / Ambient** (`{colors.shadow-soft}`, `{colors.shadow-ambient}`): Opaque stand-ins for the rare drop shadow (originals were rgb/rgba — flattened for the Google spec). ## Typography ### Font Family - **Primary**: **lineto Akkurat** (`AkkStdRg`, fallbacks `Helvetica Neue, Helvetica, Arial, sans-serif`) — a Swiss neo-grotesque carrying display and body alike. - **Mono / Caps**: `AkkStdMn` (the medium/caps cut), used uppercased for labels and eyebrows (`{typography.label-mono}`). - **Tracking**: positive on uppercase labels (0.22–0.5px); negative on display sizes (-0.48px at 48px); line-height pulled below 1.0 on hero type. ### Hierarchy The full type scale lives in the `typography:` token block. Reference tokens directly. | Token | Use | |---|---| | `display-hero` | 48px / 400 / -0.48px / lh 0.97 — the marquee headline | | `display` | 32px / 400 — section titles | | `heading` | 24px / 400 — feature headings | | `body-large` | 18px / 400 — lead paragraphs | | `body` | 16px / 400 — standard body and inputs | | `body-small` | 14px / 400 — dense supporting copy | | `label-mono` | 11px / 700 / uppercase / 0.22px — **AkkStdMn** category labels | | `eyebrow` | 11px / 400 / 0.5px — uppercase nav and section markers | | `caption` | 10px / 400 — tiny utility microcopy | ### Principles - **Akkurat as identity**: the typeface choice is the brand. Don't substitute a humanist or geometric sans. - **Uppercase the structure**: navigation, labels, and headlines run uppercase and tracked — the shipping-manifest voice. - **Tighten the big**: display type pulls leading below 1.0 and tracking negative; body stays neutral. - **Weight does almost nothing**: the system lives at 400, stepping to 700 only for small caps labels. ## Layout ### Spacing System The full scale is in the `spacing:` token block. Base unit: 8px. The rhythm is dense and grid-locked; generous vertical air (`{spacing.5xl}` = 96px) opens between major sections while component internals stay tight. ### Grid & Container - Wide, near-edge-to-edge product grids — FREITAG fills the viewport with tarp bags - Common pattern: large product photography tile paired with an uppercase Akkurat caption beneath - Black hairline rules (`{colors.border-strong}`) divide rows instead of gaps or cards ### Whitespace Philosophy - **White as the backdrop, not the subject**: the canvas exists to let the photography pop - **Grid-locked density**: tight, aligned, engineered — nothing floats freely - **Rules over boxes**: separation comes from black lines, not shadowed containers ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow; black hairline `{colors.border-strong}` only | The default — nearly the entire site | | Hairline (Level 1) | `1px` rule at `{colors.border}` | Card edges, row dividers | | Soft (Level 2) | `0 2px 10px -3px` at `{colors.shadow-soft}` | The rare lifted dialog or floating control | | Ambient (Level 3) | `3px 3px 32px -10px` at `{colors.shadow-ambient}` | Modal / overlay cast — used sparingly | **Shadow Philosophy**: FREITAG is almost entirely flat. Depth comes from hard black rules and the photographic weight of the products, not from soft shadows. The only shadows are pragmatic — a faint cast under a cookie dialog or a floating control — and they are low-opacity and unfussy. The system would rather draw a line than blur an edge. ## Shapes The full radius scale is in the `rounded:` token block. | Token | Value | Use | |---|---|---| | `none` | 0px | Buttons, cards, inputs, product tiles — the structural default | | `sm` | 2px | Tiny UI controls, checkboxes | | `md` | 4px | Minor utility controls | | `lg` | 16px | Filter / tag pills — the one rounded gesture | | `pill` | 9999px | Fully-round toggles and avatars (rare) | The system is essentially binary: square (`{rounded.none}`) for everything structural, with a single rounded `{rounded.lg}` reserved for filter pills. Sharp corners are the brand's posture — folded, stamped, industrial. ## Components The complete component spec lives in the `components:` token block. ### Buttons - **`button-primary`** — Black (`{colors.ink}`) fill, white uppercase Akkurat-Mono label, square corners. The main CTA. Hover lifts to `{colors.ink-warm}`. - **`button-accent`** — Signal-yellow (`{colors.primary}`) fill, black text. The single attention button — sale flags, key actions. Hover inverts to black fill with yellow text. - **`button-pill`** — Light-gray (`{colors.surface}`) fill, `{rounded.lg}` rounded — the lone soft control, used for filters and tags. ### Cards - **`card`** / **`card-product`** — Square corners, no shadow, hairline edge. Product cards are zero-padding so the tarp photograph runs to the edge. ### Inputs - **`input`** — Bottom-rule only: no box, no fill, square. **`input-focus`** keeps it bare — the rule darkens, no glow ring. ### Navigation - **`nav-bar`** — White, uppercase Akkurat eyebrow labels, hairline bottom rule. Flat and flush. ### Accent & Labels - **`link`** — Uppercase Akkurat eyebrow, black, underline on hover. - **`eyebrow`** — Warm-black uppercase Akkurat-Mono — the section-marker voice. - **`badge`** — Signal-yellow fill, black Akkurat-Mono caps, square — the flag. ## Do's and Don'ts ### Do - Keep the canvas pure white (`{colors.background}`) with black ink (`{colors.ink}`) — let the product photography carry all the color - Set everything in **lineto Akkurat** — `AkkStdRg` for body/display, `AkkStdMn` for labels - Run navigation, labels, and headlines uppercase and tracked — the shipping-manifest voice - Ration the signal yellow (`{colors.primary}`) — one flag or one button, never a wash - Keep corners square (`{rounded.none}`) on buttons, cards, and inputs - Divide content with hard black hairline rules (`{colors.border-strong}`), not shadowed cards - Pull display leading below 1.0 (`{typography.display-hero}`) so headlines stack dense - Build inputs as bottom-rule-only, no box ### Don't - Don't introduce gradients or soft decorative shadows — the system is flat and rule-divided - Don't round buttons or cards — square corners are the brand posture; rounding is reserved for filter pills (`{rounded.lg}`) - Don't let the signal yellow spread into backgrounds or large fills — it's a flag, not a field - Don't swap Akkurat for a warmer or geometric sans — the typeface is the identity - Don't set headlines in sentence case or loose tracking — they go uppercase and tight - Don't add brand color to the chrome — color belongs to the recycled tarps in the photography - Don't soften the navigation into a shadowed bar — it stays flat with a hairline rule --- ## Responsive Behavior ### Breakpoints *(No explicit breakpoints surfaced in extraction; the values below are the standard stops the site behaves to.)* | Name | Width | Key Changes | |---|---|---| | Mobile | <640px | Single-column product stack; hero type scales 48px → ~28px; nav collapses to a menu; uppercase labels persist | | Tablet | 640–1023px | Two-column product grid; captions stay beneath tiles | | Desktop | 1024–1279px | Three-to-four-column near-edge product grid | | Large | ≥1280px | Wide edge-to-edge grid; generous section padding (`{spacing.5xl}`) | ### Touch Targets - Buttons run ~44px tall with `14px 24px` padding - Filter pills carry comfortable `12px 14px` padding; uppercase labels stay legible at 11px ### Collapsing Strategy - **Navigation**: full uppercase horizontal nav → menu toggle on mobile - **Hero**: large product photo and caption stack; type scales down proportionally - **Grid**: product columns reduce from four to one; black row rules persist - **Spacing**: section padding compresses from 96px toward ~48px ### Image Behavior - Product photography is the hero — tiles run to the edge with zero radius and reflow as grid children; each tarp bag image is unique --- ## Agent Prompt Guide ### Quick Color Reference - Background: White (`{colors.background}`) - Text: Black (`{colors.ink}`) - Brand accent: Signal Yellow (`{colors.primary}`) - Secondary text: Gray (`{colors.ink-secondary}`) - Border: Structural Black rule (`{colors.border-strong}`) - Primary CTA: **Black** (`{colors.ink}`); accent flag: **Signal Yellow** (`{colors.primary}`) ### Example Component Prompts - "Create a hero on white (`{colors.background}`) with a 48px uppercase black (`{colors.ink}`) headline in lineto Akkurat, letter-spacing -0.48px, line-height 0.97, with an uppercase Akkurat-Mono eyebrow above it (`{typography.eyebrow}`) and a square black primary button (`{colors.ink}` fill, white uppercase Akkurat-Mono label, `{rounded.none}`)" - "Build a product tile: square (`{rounded.none}`), zero padding so the tarp photograph runs edge-to-edge, with an uppercase Akkurat-Mono caption beneath (`{typography.label-mono}`)" - "Render a sale flag badge: signal-yellow (`{colors.primary}`) fill, black uppercase Akkurat-Mono text (`{colors.on-primary}`), square corners (`{rounded.none}`), 4px 8px padding" - "Create a filter pill: light-gray (`{colors.surface}`) fill, uppercase Akkurat eyebrow text, `{rounded.lg}` rounded, 12px 14px padding — the one soft control" - "Design a bottom-rule-only input: no box, no fill, square (`{rounded.none}`), black Akkurat body text, separated from the next field by a black hairline rule (`{colors.border-strong}`)" ### Iteration Guide 1. Start on pure white (`{colors.background}`) with black ink (`{colors.ink}`). If you reached for a tinted background, stop — FREITAG is monochrome chrome. 2. Set everything in lineto Akkurat. If you typed a different sans, swap it — the typeface is the brand. 3. Uppercase the structure: nav, labels, headlines. Track them positive; track display negative. 4. Signal yellow (`{colors.primary}`) is a flag only — one button or one badge, never a field. 5. Keep corners square (`{rounded.none}`). The only rounded thing is a filter pill (`{rounded.lg}`). 6. Divide with black hairline rules (`{colors.border-strong}`) before reaching for any shadow. 7. Let the product photography carry the color — the chrome stays black and white. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by FREITAG. Brand names and trademarks belong to their respective owners.