F. Logo: exact extraction and in-product use
F.1 Current master exports
Section titled “F.1 Current master exports”Use logo/: ten SVG masters and ten matching transparent 4× PNGs exported directly from Figma.
The app tile includes its cream field. Wordmarks are outlined, so logo rendering does not require font files.
Source component IDs and bounds are in brand/figma-styles.json.
| Variant | Full color | Deep Ink | Reversed cream |
|---|---|---|---|
| Primary / stacked wordmark | lockup-stacked |
lockup-stacked-one-colour-ink |
lockup-stacked-reversed |
| Horizontal | lockup-horizontal |
lockup-horizontal-one-colour-ink |
lockup-horizontal-reversed |
| Symbol | symbol |
symbol-one-colour-ink |
symbol-reversed |
Each basename has .svg and .png. The tenth variant is app-icon.
F.2 Usage
Section titled “F.2 Usage”Current rule (v2.0.1, 2026-11-13): SW-389 (2026-11-13) corrects the animated closed state: all four flaps stay visible, top-left/bottom-right green and top-right/bottom-left orange, in light and dark. Explicit mono keeps four separate regions. Static-rest fidelity and no-hole/depth-order rules remain. (1A-N10) — supersedes the line above; see docs/current-rules.md#cr-logo-01.
Full-color artwork uses Deep Ink, Maker Teal and Workshop Orange. Reversed artwork is Warm Cream.
The monochrome marks have a hollow opening and transparent fold gaps so all four flaps remain visible.
Use the dedicated variants; recoloring the full-color symbol is not equivalent.
Keep the supplied proportions. Clear space is one quarter of the symbol height on every side.
PNG app icons and the social card are derived from these masters. The editable component source remains in Figma;
brand/logo-masters.svg and .png are portable reference sheets, not a native .fig backup.
F.3 In-product sizes (rules: symbol ≥48 px; primary lockup ≥180 px wide; clear space H÷4)
Section titled “F.3 In-product sizes (rules: symbol ≥48 px; primary lockup ≥180 px wide; clear space H÷4)”| Placement | Artwork | Size | Clear space | Compliance |
|---|---|---|---|---|
| Staff/member sidebar (≥1024) | lockup-stacked.svg (dark: lockup-stacked-reversed.svg) |
180 px wide → H 63.7 | 16 → logo block 96 px tall | meets both minimums. The horizontal lockup cannot fit: at H 48 it is 288 px, wider than the 256 sidebar. |
| Mobile top bar (<1024) | symbol.svg (dark: symbol-reversed.svg) |
48 px | 12 → bar 72 px | the brand symbol variant “recognition at a glance” |
| Public header ≥ 768 | lockup-horizontal.svg (dark: lockup-horizontal-reversed.svg) |
symbol 48 → 300 × 48 | 12 → header 72 | |
| Public header < 768 | symbol.svg |
48 | 12 | |
| Auth brand panel | lockup-stacked.svg on Cream |
240–320 px wide | ≥ H÷4 | |
| Favicon 16 / 32 | below 48 → p.6 “test a dedicated small-size asset”: owner to supply. Interim: app-icon.svg rasterised and proofed. |
16, 32 | open item | |
favicon.svg |
app-icon.svg |
— | ||
| apple-touch-icon | app-icon.svg → PNG |
180 | ||
| PWA member + kiosk | app-icon.svg → PNG, purpose: "any maskable" |
192, 512 | maskable-safe (F.2) | |
| OG / Twitter | Cream 1200×630, lockup-stacked.svg 600 px wide centred |
H÷4 | ||
Django /control/ (Unfold) |
SITE_LOGO = lockup-horizontal.svg at symbol 48 (288 px, fits Unfold’s 288 px sidebar) with the dark variant for dark mode; SITE_ICON = symbol.svg; SITE_TITLE “Space Works” |
replaces the violet COLORS with the A.3 brand-mix ramp |
||
| Email header (if templates show one) | lockup-stacked.svg PNG @2x, 180 px wide |
SpaceWorksLogo takes variant: "symbol" | "stacked" | "horizontal" and ground: "light" | "dark", and maps
to the extracted files only. It has role="img" and aria-label="Space Works", and its size props are
clamped to the minimums (TS types plus a runtime Math.max). It never takes className colour
overrides and never applies CSS transform.
Part of Space Works brand → SpaceWorks UI: design-system spec, published from docs/ui-brand-spec.md. Edit it there.