David/jeisaimporters-WEBSITE
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
jeisaimporters-WEBSITE/brand-spec.md

3.1 KiB
Raw Permalink Blame History

name: JEI South Africa — brand-spec description: Locked brand values for JEI South Africa (angular cutters and magbase machines). Source: brand-colors image + JEI UK product taxonomy.

JEI South Africa — brand spec

Source provenance

  • Brand colours: mqchaqen-image.png (213×160, RGBA). Sampled directly with PIL; primary pixels reported below.
  • Product taxonomy: https://www.jeiuk.com/ (used for what we sell, not the visual language — user explicitly said "I don't want to copy their site").

Colour tokens (locked, OKLch + sRGB)

  • --bg (navy): oklch(28% 0.025 235) ↔ #2C3A45 — dominant background, hero, dark sections. Sampled: rgb(44, 58, 69).
  • --surface (white): oklch(99% 0 0) ↔ #FFFFFF — page surface, cards, datasheet tables.
  • --fg (ink): oklch(20% 0.02 240) ↔ #1B2A33 — body copy on white, slightly darker than the navy to keep contrast clean.
  • --muted: oklch(50% 0.012 235) ↔ #5A6770 — metadata, captions, supporting copy.
  • --border: oklch(88% 0.008 235) ↔ #D7DCE0 — hairlines, table rules, card outlines.
  • --accent (gold): oklch(90% 0.155 100) ↔ #FBE35B — the "i" in JEI, "Built for Industry" tagline, key callouts. Sampled: rgb(251, 227, 91). Used at most twice per screen.

Typography

  • Display + body: system sans stack — -apple-system, "Segoe UI", "Helvetica Neue", system-ui, sans-serif. Industrial / engineering tone; no decorative serif.
  • Mono (specs, codes, model numbers): ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace. Used in datasheet tables and in product code chips.
  • Scale: clamp-driven. Display headings 56–96px, section H2 32–44px, body 16–18px, captions 12–13px, mono spec lines 13–14px.

Voice

  • Plain, technical, B2B. "Engineered for South African fabrication." No emoji, no superlatives without a source, no "revolutionary / unleash / unleash the power" copy.
  • South African spelling and context: ZAR pricing on request, +27 phone, Johannesburg / Cape Town / Durban / Gqeberha / eThekwini as service nodes, ISO 9001, SARS customs-friendly documentation.

Logo posture

  • Wordmark: white JE + yellow i + white Solutions (Instrument-Serif-style slab optional, but the lockup reads fine in system sans for engineering context).
  • Tagline: Built for Industry in yellow on navy, mono uppercase tracking 0.22em.
  • No shadow, no rounded card, no gradient frame.

Layout posture (industrial / engineering)

  • Hairline borders (1px solid var(--border)), no shadows except dropdowns.
  • Tabular-nums everywhere numerics appear.
  • Tables for specs, no row striping, dense.
  • Inline status pills (In stock / On order / Bespoke) with restrained tint, not colour floods.
  • One decisive flourish: the gold accent on the JEI "i" + the "Built for Industry" tagline. Don't echo it on every section.

What we are NOT doing

  • No purple, no gradient wash, no warm beige, no emoji icons.
  • No invented specs. Real values where we have them; honest — or "Datasheet on request" where we don't.
  • No copying of jeiuk.com visual language. The UK site is a reference for what we sell, not how it looks.