# SterlingCraft Co. — Design System A small, opinionated design system for **SterlingCraft Co.**, a hand-built furniture maker in Lagos, Nigeria. The brand voice is *vintage, earthy and enduring* — honest materials, square corners, and craft that wears in rather than out. Its signature is a **geodesic-sphere mark** (a frame of many small parts carrying one another) paired with a serif **wordmark**. > **Primary engagement:** the original brand wordmark read `STERLING-CRAFT`. The hyphen has > been removed across every logo and icon — the mark now reads `STERLINGCRAFT` as one > closed word. See **Brand → Hyphen removed** and the *Logo & hyphen removal* note below. --- ## Sources provided - **`brand/`** — the existing brand kit (mounted locally, read-only). Contains: - `brand/logo/{svg,png,pdf,eps}/logo-{color,black,white,no-background}.*` — logo lockups - `brand/fonts/sterling-craft-montaga-regular.ttf` — the Montaga brand face - `brand/favicon/*` — favicon set (the sphere + "S" monogram) - `brand/BrandBoard.pdf` — palette + type spec (parsed into tokens; see below) - `brand/Letterhead - Sterling-Craft Co..pdf` — contact details (used in the UI kit footer) - `brand/sterling-craft banner.png` — kraft-paper banner - Originals are preserved in **`assets/logo/original/`** and **`assets/reference/`** for diffing. **Contact on file** (from the letterhead): 9 I.K. Peters Street, Ajao Estate, Oshodi, Lagos · +234 906 570 5346 · hello@sterlingcraft.co · sterlingcraft.co --- ## Logo & hyphen removal The wordmark is a single flattened vector path. The hyphen was an isolated sub-path (`M273.15-13.7v2.4h-19.9v-2.4z`). The de-hyphenation: 1. Deletes that sub-path. 2. Closes the gap by **30 path-units** — pulling `STERLING` right and `CRAFT` left by 15 each, so the wordmark stays centred under the sphere and the G→C gap matches the other inter-letter spacing. Applied to all four SVGs (`assets/logo/*.svg`) and re-rasterised to PNG (`assets/logo/png/*`). A wordmark-only before/after pair lives at `assets/logo/wordmark-with-hyphen.svg` and `assets/logo/wordmark.svg`. The **icon/favicon** never contained the hyphen, so it is unchanged. --- ## CONTENT FUNDAMENTALS — how SterlingCraft writes - **Voice:** plain, declarative, confident. Short sentences. The brand states facts about the work rather than selling — *"One piece, made once, made right."* - **Person:** speaks as **we** (the workshop) to **you** (the owner). Warm but unfussy. - **Tone:** earthy and a little austere; pride without hype. Craft language — *joint, tenon, board, grain, linseed, frame* — over marketing language. - **Casing:** sentence case for everything except **EYEBROWS** (small-caps labels) and the all-caps wordmark. Headlines often end on a full stop — *"Built to endure."*, *"The frame holds."* - **Numbers:** sparing and concrete (*"25yr structural guarantee"*, *"1:1 maker to piece"*). No invented statistics or data-slop. - **Emoji:** never. **Exclamation marks:** avoid. Let the noun do the work. - **Examples:** eyebrow *"Commissions open"*; headline *"A geometry of patience."*; body *"Wedged through-tenons and drawbored mortises — joints you could read like a frame."* --- ## VISUAL FOUNDATIONS - **Colour.** Two brand hues do most of the work: **rust `#883D1A`** (primary, used for actions, links, eyebrows, accents) and **bark `#4D331F`** (dark surfaces, footers, ink). Everything else is a **warm earth-neutral scale** (parchment → sand → clay → stone → umber) plus muted earthy status colours (forest / ochre / brick / slate). There is **no pure grey** anywhere — neutrals and shadows are brown-tinted. Surfaces default to warm parchment, not white. - **Type.** **Montaga** (a calm old-style serif, the brand face) for the wordmark and all display headings; **Hanken Grotesk** for body and UI. Headings are tight (`line-height ~1.08`, slightly negative tracking); eyebrows are uppercase with wide tracking (`0.12em`); the wordmark uses very wide tracking (`0.22em`). - **Backgrounds.** Warm parchment fields, occasional **dark bark sections** for contrast. A subtle procedural **paper grain** utility (`.sc-paper`) adds texture without an image. The geodesic mark is used large and faint as a **watermark** in hero/craft/footer areas. No photographic full-bleeds are shipped (none were provided) — product imagery is left as warm placeholder tiles. - **Shape & corners.** Restrained, architectural. Radii are tight (2–10px; cards 10px) echoing the straight-line geometry of the mark. Pills are reserved for small chips. - **Borders.** Hairline `1px` sand borders on light; `1.5px` on inputs/buttons. Dividers are `--border-soft`. Dark sections divide with low-opacity parchment lines. - **Shadows.** Warm and low. Brown-tinted rgba (`rgba(38,26,15,…)`), small blur, used sparingly — cards sit on a hairline border with at most a soft `--shadow-sm`, lifting to `--shadow-md` on hover. A `--shadow-inset` gives a letterpress feel for pressed states. - **Motion.** Unhurried and functional. `120–360ms`, standard ease (`cubic-bezier(.22,.61,.36,1)`). Buttons nudge down `1px` on press; interactive cards lift `2px`. No bounce, no decorative loops. - **Hover / press.** Primary buttons lighten to `rust-400` on hover, darken to `rust-600` on press. Secondary (bark outline) **fills** with bark on hover. Ghost tints with parchment. Links go darker, not lighter. - **Transparency / blur.** Used only for the sticky header (parchment at 88% + `blur(8px)`) and the save-chip over media. Otherwise surfaces are solid. - **Imagery vibe (when added).** Warm, slightly desaturated, natural light — timber, workshop, kraft paper. Cool or high-key imagery is off-brand. --- ## ICONOGRAPHY - The brand ships **no icon font**. The only proprietary glyphs are the **geodesic sphere mark** and the **"S" monogram** (favicon). Both live in `assets/`. - For UI icons the system standardises on **Lucide** (`https://lucide.dev`, MIT) — stroke-based linework at **~1.75–2px**, round caps/joins. The thin, geometric stroke deliberately echoes the wireframe sphere. Render in `currentColor` (bark on light, parchment on dark, rust for emphasis). The UI kit inlines a small Lucide subset in `ui_kits/marketing/icons.jsx`; component demo cards inline a few matching glyphs. **Substitution flag:** Lucide is a chosen complement, not part of the original brand kit. - **No emoji.** Unicode is not used as iconography. Never hand-draw bespoke illustration — use the geodesic mark or real photography. --- ## Index / manifest **Root** - `styles.css` — the single entry point consumers link (imports only). - `tokens/` — `fonts.css`, `colors.css`, `typography.css`, `spacing.css`, `base.css`. - `fonts/montaga-regular.ttf` — the brand display face. - `readme.md` (this file) · `SKILL.md` — portable Agent-Skill manifest. **Assets** (`assets/`) - `logo/` — de-hyphenated `*.svg` + `png/*`; `wordmark.svg` / `wordmark-with-hyphen.svg`; `original/` (untouched source SVGs). - `icon/` — **high-resolution favicon/app-icon as scalable SVG** (`favicon-color.svg`, `favicon-bark.svg`, `favicon-rust.svg`, `favicon-white.svg`) + `favicon-color-1024.png`. The monogram is the exact Montaga "S" inside the geodesic sphere. - `favicon/` — original raster favicon set (kept for reference). - `reference/` — original PNGs, banner, BrandBoard.pdf, Letterhead.pdf (for diffing only). **Foundation cards** (`guidelines/`) — render in the Design System tab: - Colours: brand core · warm neutrals · status - Type: display (Montaga) · text & UI (Hanken Grotesk) - Spacing: scale · radii & shadows - Brand: logo lockups · hyphen removed · icon & monogram · manifesto · **animated icon & favicon** **Components** (`components/`) — `window.DesignSystem_41256e.` - `buttons/` — **Button**, **IconButton** - `data-display/` — **Badge**, **Card** - `forms/` — **Input** **UI kits** (`ui_kits/`) - `website/index.html` — **the current site (v1)**: SterlingCraft as a *digital studio & product lab* on **sterlingcraft.co**. Header, hero, two-track (Studio / Product Lab), capabilities, selected-work grid (filterable), approach, contact, footer. - `marketing/index.html` — **v0**, the first furniture-maker concept. Kept for reference. - Both compose the components via **`sc-runtime.js`** (root) — a precompiled, dependency-free build of the component sources, regenerated whenever the components change. > **`sc-runtime.js`** also powers the component demo cards, so they render on the review page > without the virtual bundle. Regenerate it (Babel `react` preset, one IIFE per component) > after editing any component. --- ## Using the system Link the stylesheet and read components off the namespace: ```html ``` Reference **semantic tokens** (`--brand-primary`, `--surface-card`, `--text-body`, `--border`) rather than raw scale values where possible.