--- name: STELLFORM Identity System version: 1.7.0 decided: 2026-08-18 provenance: 'Name: STELLFORM (renamed from Stellwerk 2026-08-18, stellform.com) · Type: direction 04 KARBON · Color: direction 01 ORIGIN · Mark: Macula Line impossible-S (L-05) · Chrome wordmark: Chakra Petch 600 (reinstated 2026-08-18; W-03 outline retired to display use) · Headlines: Chakra Petch 600 — see /brand-kit' colors: background: '#f5f5f5' foreground: '#1a1a1a' primary: '#1a1a1a' on-primary: '#f5f5f5' accent: '#ff6b35' on-accent: '#1a1a1a' success: '#2ecc71' on-success: '#1a1a1a' destructive: '#ff6b35' border: '#e0e0e0' input: '#e0e0e0' ring: '#ff6b35' card: '#ffffff' on-card: '#1a1a1a' secondary-surface: '#eeeeee' muted-foreground: '#8c8c8c' charcoal: '#1a1a1a' tactical-orange: '#ff6b35' technical-grey: '#8c8c8c' typography: display-lg: fontFamily: Chakra Petch fontSize: 48px fontWeight: '600' lineHeight: '1.1' letterSpacing: '-0.02em' textTransform: uppercase headline-lg: fontFamily: Chakra Petch fontSize: 32px fontWeight: '600' lineHeight: '1.2' letterSpacing: '-0.01em' textTransform: uppercase headline-lg-mobile: fontFamily: Chakra Petch fontSize: 24px fontWeight: '600' lineHeight: '1.2' textTransform: uppercase body-md: fontFamily: Barlow fontSize: 15px fontWeight: '400' lineHeight: '1.625' tech-label: fontFamily: IBM Plex Mono fontSize: 12px fontWeight: '500' lineHeight: '1.4' letterSpacing: 0.06em textTransform: uppercase button-text: fontFamily: IBM Plex Mono fontSize: 12px fontWeight: '700' lineHeight: '1' letterSpacing: 0.04em textTransform: uppercase spec-data: fontFamily: IBM Plex Mono fontSize: 13px fontWeight: '400' lineHeight: '1.5' spacing: unit: 4px gutter: 24px margin-desktop: 64px margin-mobile: 20px stack-sm: 8px stack-md: 16px stack-lg: 32px container-max: 1440px shape: corner-radius: 0px corner-radius-xs: 2px corner-radius-sm: 4px elevation: shadow-hard: '4px 4px 0px rgba(0,0,0,0.10)' shadow-hard-sm: '2px 2px 0px rgba(0,0,0,0.10)' shadow-hard-lg: '8px 8px 0px rgba(0,0,0,0.12)' shadow-product: '0 12px 24px rgba(0,0,0,0.15)' assets: logo-mark: 'Live type — Macula Line over Macula Solid "S" (L-05, see /brand-kit)' logo-mark-favicon: /images/brand/macula-s.png wordmark-chrome: 'Live type — Chakra Petch 600, uppercase, left-aligned in nav' wordmark-lockup: 'Live type — Chakra Petch 600, uppercase (standalone lockups)' display-logotype: 'Filled L-05 mark + Macula Line outline name (W-03); campaign: Line over Solid orange (W-02) — see /brand-kit' --- ## Brand & Style The design system is rooted in German engineering principles: precision, durability, and functional clarity. It merges a **Technical Minimalist** foundation ("Information as Interface") with a **Performance-Tech** voice borrowed from pro-peloton componentry. Every line, margin, and type choice serves a functional purpose, mimicking the clarity of a blueprint or a high-end calibration tool; the chamfered display face adds race-day aggression without decoration. The emotional response should be absolute reliability and mechanical confidence. ## Logo & Wordmark - **Mark**: the impossible "S" set live in Macula (Bold Monday) — Macula Line in charcoal layered over Macula Solid in tactical orange (candidate L-05, chosen 2026-08-17; alternates retired 2026-08-17). Vector type, self-hosted subset (`/fonts/macula-*.woff2`). On dark surfaces the Line layer flips to surface white; the Solid layer stays orange. At 16-24 px use Macula Solid alone. Never recolor beyond these rules, rotate, outline or stretch. Exploration retired; /brand-kit is the reference. - **On printed parts**: Macula Solid is the physical mark — emboss 0.6 mm relief / deboss 0.4 mm depth, minimum 6 mm logo, counters ≥0.5 mm. The layered mark reproduces exactly only via dual-extrusion; Shaded is cosmetic-only (laser-marked plates ≥20 mm, packaging). - **Wordmark (chrome)**: full STELLFORM in Chakra Petch 600, uppercase, left-aligned in the single-bar navigation (reinstated 2026-08-18). The Macula Line outline wordmark (W-03) is retired from chrome and reserved for display logotypes. - **Display logotype (primary)**: filled L-05 mark + full STELLFORM in pure Macula Line (outline, no fill) — the S carries the color, the name carries the structure. Inverted (surface-white linework on charcoal) is the definitive dark/packaging treatment. Minimum 64 px (inverted 48 px). - **Display logotype (campaign)**: full STELLFORM in Macula Line over Solid orange for one-off loud moments. Same minimums. Never in navigation or body UI: one impossible object per viewport, unless it is the hero. - **Placement (chrome)**: navigation is a single bar — Chakra Petch 600 wordmark left, links inline, utilities right. The footer is a condensed multi-column grid anchored by the large mark, left-aligned, in the brand column. Mark and wordmark never share a bar. The full lockup (mark + wordmark, gap one `stack-sm`, cap-height aligned) is reserved for standalone contexts: documents, packaging, social avatars + name. Sub-line "PRECISION MOUNTING SYSTEMS" in `tech-label` when space allows. - **Clearspace**: keep one beam-width free on all sides of the lockup. ## Colors The palette is restricted to a high-contrast, functional range. - **Surface (#f5f5f5)**: industrial off-white; laboratory-grade canvas. - **Charcoal (#1a1a1a)**: all primary text and structural boundaries. - **Tactical Orange (#ff6b35)**: reserved exclusively for interactive mounting points, critical technical data, and primary calls to action. - **Technical Grey (#8c8c8c)**: secondary annotations, grid lines, non-critical metadata. - **Confirm Green (#2ecc71)**: success confirmations only. - Approximate distribution: 60% surface / 30% charcoal / 8% grey / 2% orange. Orange loses meaning above that. ## Typography Triple-font strategy separating voice, narrative and data: - **Chakra Petch (600)** — the display voice. Headlines, page titles and the wordmark. Chamfered 45° terminals echo machined edges. Always uppercase, never bolded further, never negative-tracked beyond tokens. - **Barlow** — the narrative face. Body copy, descriptions, UI prose at 400/500/700. - **IBM Plex Mono** — the data face. All buttons, technical specifications, dimensions, navigational labels, SKUs. Uppercase to mimic stamped metal parts. - Maintain strict vertical rhythm on the 4 px unit. ## Layout & Spacing Fixed-grid system mirroring technical documentation. - **Grid**: 12-column, 1440 px max container, 24 px gutters, 64 px desktop margins (20 px mobile). - **Blueprint backdrop**: 24 px engineering grid (1 px #e6e6e6 lines) on documentation and commerce surfaces. - **Rules**: 1 px charcoal for primary section boundaries, 1 px border grey for secondary dividers; always full container width. ## Elevation & Depth Depth via **hard-edge shadows** and tonal layering — never soft blurs. Surfaces do not float; they are mounted. 1 px borders on primary containers, #eeeeee fills distinguish secondary panels. Product renders receive strong directional light with long, sharp 45° shadows. ## Shapes Strictly geometric. 0 px corner radius on all buttons, inputs and containers. Stroke-based icons at 2 px weight with square terminals. ## Components - **Buttons**: primary = solid charcoal / white mono text; action = tactical orange / charcoal text + hard shadow (reserved for Add-to-Cart-class actions); ghost = 1 px charcoal outline. Labels in `button-text`, uppercase. - **Inputs**: 1 px charcoal frame, label inside the top border line in 10 px mono uppercase; focus thickens border to 2 px — no glow. - **Spec tables**: alternating #f5f5f5/#eeeeee rows, right-aligned mono values, units in technical grey. - **Selection controls**: square boxes; selected = tactical orange fill with X-mark. - **Cards**: 1 px border, hard shadow, render on #efefef with multiply-blend.