# Notom — design.md

> **The living source of truth for the Notom brand.**
> Everything that carries the Notom name — a website, a deck, a social post, a UI, an asset generated by a teammate or an AI tool — should be derivable from this file.
> Built by [Those Guys Studio](https://thoseguys.studio). v0.2 — living document.

---

## How to use this file

**Humans:** read §0 first. It's the *why*. Every rule below exists to serve it. When a decision isn't covered here, resolve it toward §0, not away from it.

**Machines / AI tools:** paste the block below at the top of your prompt, then attach this file. It is enough to keep any generation on-brand.

```
You are producing an asset for Notom. Notom makes the industrial world legible
and desirable — luminous, calm, in motion. Obey these non-negotiables:
- Cream (#F2F0EB) is 70–80% of every surface. Light by default.
- Brown (#322A2E) is INK ONLY — text, marks, strokes. Never a large dark fill.
- Violet (#B796FF) and Orange (#F0803A) are accents that ALWAYS appear together,
  never one without the other.
- The gradient is an EVENT, not a background. One gradient moment per view.
- Type is STK Bureau Sans. Titles in Light. Labels in caps, tracked 15%.
- Motion is calm — it breathes, it never flashes or blinks.
When in doubt, choose the lighter, calmer, more legible option.
```

---

## 0. The idea — *Le Flow Lucide*

Industry used to be opaque, technical, anxiety-inducing. Notom makes it legible — and legibility unlocks flow. The brand embodies a **desirable industrial future**: luminous, positive, in motion.

Three rules govern every visual decision:

1. **Luminous by default.** The base is light (Cream). Dark (Brown) is only ink and accent — **never a large fill.** We celebrate what Notom makes possible, not the complexity it removes.
2. **The gradient is an event, not a background.** It appears as a high point — the hero, a card accent, one keyword. Its rarity is its power.
3. **Motion is soft.** Nothing stresses. The brand breathes, it does not blink.

> The north star for any judgement call: *the future is calm and self-assured.*

---

## 1. Color

Grays are always **warm** (derived from Brown), never cool.

| Role | Name | Hex | Token |
|---|---|---|---|
| Primary surface | **Cream** | `#F2F0EB` | `--notom-cream` |
| Pure white | White | `#FAFAFA` | `--notom-white` |
| Ink / text | **Brown** | `#322A2E` | `--notom-brown` |
| Deep black | Black | `#13100E` | `--notom-black` |
| Warm accent | **Orange** | `#F0803A` | `--notom-orange` |
| Warm accent, light | Orange light | `#FFB579` | `--notom-orange-light` |
| Cool accent | **Violet** | `#B796FF` | `--notom-violet` |
| Cool accent, light | Violet light | `#D1CCFF` | `--notom-violet-light` |

**Rules**
- ✅ **Always** keep Cream at 70–80% of any surface. It is the air, the space, the breath.
- ✅ **Always** use Violet + Orange together. Their cohabitation is the signature (the pink lives in their meeting, and is never named).
- ✅ **Temperature logic:** violet (cool) in shadows, orange (warm) in lights. This is the gradient-map logic (§3).
- ⛔ **Never** use Brown/Black as a large fill — ink only.
- ⛔ **Never** ship Violet without Orange, or Orange without Violet.
- ⛔ **Never** use a cool gray.

### Approved combinations (legibility)

These pairings meet AA contrast for text, titles and UI.

| Text / element | On background | Verdict |
|---|---|---|
| Brown `#322A2E` | Cream `#F2F0EB` / White | ✅ Body, titles, UI |
| Cream / White | Brown `#322A2E` / Black | ✅ Body, titles, UI |
| Brown `#322A2E` | Orange `#F0803A` | ✅ Text on accent |
| Orange `#F0803A` | Cream | ⛔ Fails AA — decorative only |
| Violet / Violet light | Cream | ⛔ Fails AA — decorative only |
| Light accent | Light accent (tone-on-tone) | ⛔ Decorative only |

**The rule:** the moment content must be *read*, it is Brown on light or light on Brown. Accents never carry small copy. Tone-on-tone (accent on accent, light on light) is allowed **only** as pure decoration where there is nothing to read.

---

## 2. Typography

**STK Bureau Sans** — neo-grotesque, the brand's only family. Weights: **Light** (titles), **Book** (body), **SemiBold** (emphasis). Webfonts: `.woff2` Light / Book / SemiBold.

| Style | Weight | Size / Line | Tracking | Use |
|---|---|---|---|---|
| H1 | Light | 48 / 110% | 0 | Hero titles |
| H2 | Light | 32 / 120% | 0 | Section titles |
| H3 | Light | 24 / 125% | 0 | Sub-titles |
| Large | Book | 24 / 150% | 1% | Lede, intro |
| Main | Book | 16 / 150% | 1% | Body |
| Main-bold | SemiBold | 16 / 120% | 1% | Body emphasis |
| Small | Book | 14 / 150% | 1% | Captions, notes |
| Label | Book | 14 / 100% | **15%** | Labels, tags, kickers (usually caps) |
| Tiny | Book | 12 / 150% | 1% | Fine print |

**Signature:** titles in **Light** (editorial lightness, the opposite of industrial bold) + labels **tracked 15%** (controlled technical precision).

- ✅ **Always** set section titles in Light. ✅ **Always** track labels at 15%, usually in caps.
- ⛔ **Never** use a bold, heavy title — it reads as old industry.

**Fallback.** Where STK Bureau Sans can't be embedded (email tools, third-party platforms), fall back to a neo-grotesque with similar proportions — `Inter`, then `system-ui, sans-serif`. Keep the same weight logic (Light titles, Regular body).

**Minimum legible size.** Body text never below **14px**. Reserve 12px (Tiny) for genuine fine print only.

---

## 3. The gradient language

The visual core of Notom. Three uses, one system.

### 3.1 Hero ramp — Gradient Map
A neutral object (grayscale render, transparent PNG) has its **luminance mapped** onto the brand ramp. Shadows → violet, lights → orange. The effect is a *revealing light*: the opaque machine becomes desirable. Produced by the **Brand Light** component (see below).

**Notom Hero ramp** (shadows → lights):

| Position | Color | Hex |
|---|---|---|
| 0% | Brown | `#322A2E` |
| ~22% | Violet | `#B796FF` |
| ~47% | Orange | `#F0803A` |
| ~62% | Orange light | `#FFB579` |
| ~80% | Violet light | `#D1CCFF` |
| 100% | White | `#FAFAFA` |

### 3.2 Accent gradient
On cards, product blocks, UI elements: a **soft** violet→orange gradient, in a contained fill (a card, never a page). Always on a cream base. Token: `--notom-gradient-accent`.

### 3.3 Type gradient
One key title may carry the orange→violet gradient (e.g. *"Up and running under a month"*). **One per view** — otherwise the effect goes stale.

**Guardrails**
- ✅ **Always** treat these as punctuation — a base of neutral cream between each strong moment.
- ⛔ **Never** place two large gradients side by side.
- ⛔ **Never** use the gradient as a page background.

---

## 4. Space & grid

Base **16px**. Every spacing value is a multiple of 16 — usually 16, 24, 32, 48.

| Token | Value | Use |
|---|---|---|
| `--notom-base` | 16 | Reference unit for all gaps |
| `--notom-gutter` | 16 | Grid gutter |
| `--notom-margin` | 48 | Container / page margin |
| `--notom-radius` | 10 | Standard corner radius |
| `--notom-space-s` | 80 | Between sections |
| `--notom-space-m` | 96 | Between sections |
| `--notom-space-l` | 112 | Between sections |

- ✅ **Between sections:** only 80 / 96 / 112. Nothing else rhythms the large vertical breaths.
- ✅ **Everywhere else** (title→text, block internals, padding): multiples of 16 → 16, 24, 32, 48. 24 and 32 are the most common gaps between type.
- ✅ **Radius 10** on cards and components (pill CTAs stay fully round).

---

## 5. Buttons & surfaces

Signature principle: **the hover reveals the color** — the "brand light" logic carried into the UI. Radius **10**, padding **18 / 10**, text STK Bureau Sans **Book 16 / tracking 1%**.

| Variant | Fill | Text | Detail |
|---|---|---|---|
| **Primary** | Brown `#322A2E` | Cream `#FAFAFA` | Cream **dot** prefix (5px, gap 11) |
| Primary — hover | Lightened brown `#3F363A` | **Orange `#F0803A`** | Dot turns orange (7px) |
| **Secondary** | White `#FAFAFA` | Black `#13100E` | — |
| Secondary — hover | **Brand gradient** (violet light → cream) | Brown `#322A2E` | The fill lights up |
| **Link** | — | Brown `#322A2E` | padding 4 / 2 |
| Link — hover | — | Brown 50% | A **dot** appears |

**Kicker / section label:** Label style (Book 14 / 100% / tracking 15%, caps) preceded by a **violet dot** — e.g. `• GET STARTED`.

**Cards:** product card = a UI screenshot on a **brand accent gradient** (§3.2), the gradient bleeding out behind it, radius 10. Neutral card = white/cream fill, hairline brown border (low opacity) or none, radius 10. Section titles = two-tone H2 — line 1 Brown, line 2 Brown 50%.

**Depth.** Depth comes from **surface shifts** (Cream → White, hairline borders), never from heavy drop shadows. A luminous, calm brand does not cast dark shadows. If elevation is needed, use a soft, low-opacity warm shadow — never a hard grey one.

---

## 6. Motion

- **Breathing, not hard transitions:** the gradient's dominant hue oscillates slowly (violet ↔ orange, ~4–8s cycle).
- Soft easing by default.
- ⛔ **Never** flash, blink, or use an aggressive scan.
- Principle: *the future is calm and self-assured.*

---

## 7. Voice — v0.1

Grounded in *Le Flow Lucide*. To be expanded with full copy guidelines.

- **Lucid, not simplistic.** Make the complex legible; keep the truth intact. Translate, don't dumb down.
- **Calm and confident.** State, don't hype. No exclamation-driven marketing energy.
- **Positive.** Speak to what Notom makes possible, not the pain it removes. Never anxiety-inducing.
- **Precise, not cold.** Technical accuracy with human warmth — the opposite of jargon-for-jargon.

---

## Component — Notom Brand Light

The first living component of the system: a tool that **applies the brand light** to any visual. It takes a transparent PNG (ideally a neutral 3D render), applies the Notom gradient map, and animates a soft breathing (violet ↔ orange). Exports transparent PNG or an image sequence.

- **Role:** produce hero visuals for the site, decks and social — consistently, without going back through Photoshop each time.
- **Pipeline:** 3D renders the neutral object → Brand Light applies color + animation → export → edit.
- **Live tool:** embeddable via iframe.

---

## Agent prompt guide

Feed this file, then use prompts like these. Each one already carries the brand's intent, not just its values.

**Hero section**
> Generate a hero section for Notom. Cream background. An H1 in STK Bureau Sans **Light** (48/110), Brown. One keyword may carry the orange→violet type gradient — only one. To the right, a neutral 3D render treated with the gradient map (shadows violet, lights orange). Generous space (96px). Calm, luminous, no dark fills.

**Product card**
> A product card: a UI screenshot sitting on a soft violet→orange accent gradient that bleeds out behind it, radius 10, on a cream page. Depth from surface, no drop shadow. Caption in Onest-equivalent Book 14.

**Primary button**
> A primary button: Brown fill, Cream label, a small cream dot prefix. On hover, the fill lightens and the label + dot turn Orange (the hover reveals the color). Radius 10, padding 18/10.

**Section kicker**
> A section label: caps, STK Bureau Sans Book 14, tracking 15%, preceded by a violet dot — e.g. `• GET STARTED`.

**Guardrail to include in any prompt:** keep Cream at 70–80%, one gradient moment per view, Brown as ink only, motion that breathes and never flashes.

---

## Appendix — machine-readable tokens

### CSS custom properties
```css
:root {
  /* Color */
  --notom-cream: #F2F0EB;        /* primary surface — 70–80% of every layout */
  --notom-white: #FAFAFA;
  --notom-brown: #322A2E;        /* INK ONLY — text, marks, strokes, buttons */
  --notom-black: #13100E;
  --notom-orange: #F0803A;       /* warm accent — never without violet */
  --notom-orange-light: #FFB579;
  --notom-violet: #B796FF;       /* cool accent — never without orange */
  --notom-violet-light: #D1CCFF;

  /* Signature gradients */
  --notom-gradient-accent: linear-gradient(135deg, #B796FF 0%, #F0803A 100%);

  /* Space */
  --notom-base: 16px;
  --notom-gutter: 16px;
  --notom-margin: 48px;
  --notom-radius: 10px;
  --notom-space-s: 80px;
  --notom-space-m: 96px;
  --notom-space-l: 112px;

  /* Type — family + fallback for constrained tools */
  --notom-font: "STK Bureau Sans", "Inter", system-ui, sans-serif;

  /* Type — granular tokens (size / line-height / tracking) */
  --text-h1: 48px;    --leading-h1: 1.1;   /* Light */
  --text-h2: 32px;    --leading-h2: 1.2;   /* Light */
  --text-h3: 24px;    --leading-h3: 1.25;  /* Light */
  --text-large: 24px; --leading-large: 1.5;
  --text-main: 16px;  --leading-main: 1.5;  --tracking-main: 0.01em;
  --text-small: 14px; --leading-small: 1.5;
  --text-label: 14px; --leading-label: 1;   --tracking-label: 0.15em; /* caps */
  --text-tiny: 12px;  --leading-tiny: 1.5;
}
```

### JSON tokens
```json
{
  "color": {
    "cream":        { "value": "#F2F0EB", "role": "primary-surface", "usage": "70-80% of every layout" },
    "white":        { "value": "#FAFAFA" },
    "brown":        { "value": "#322A2E", "role": "ink", "usage": "text/marks/strokes only, never a large fill" },
    "black":        { "value": "#13100E" },
    "orange":       { "value": "#F0803A", "role": "warm-accent", "pairsWith": "violet" },
    "orangeLight":  { "value": "#FFB579" },
    "violet":       { "value": "#B796FF", "role": "cool-accent", "pairsWith": "orange" },
    "violetLight":  { "value": "#D1CCFF" }
  },
  "gradientHeroRamp": [
    { "pos": 0,   "hex": "#322A2E" },
    { "pos": 22,  "hex": "#B796FF" },
    { "pos": 47,  "hex": "#F0803A" },
    { "pos": 62,  "hex": "#FFB579" },
    { "pos": 80,  "hex": "#D1CCFF" },
    { "pos": 100, "hex": "#FAFAFA" }
  ],
  "space": { "base": 16, "gutter": 16, "margin": 48, "radius": 10, "sectionS": 80, "sectionM": 96, "sectionL": 112 },
  "type": {
    "family": "STK Bureau Sans",
    "weights": { "light": 300, "book": 400, "semibold": 600 },
    "scale": {
      "h1":       { "weight": "light", "size": 48, "line": 110, "tracking": 0 },
      "h2":       { "weight": "light", "size": 32, "line": 120, "tracking": 0 },
      "h3":       { "weight": "light", "size": 24, "line": 125, "tracking": 0 },
      "large":    { "weight": "book", "size": 24, "line": 150, "tracking": 1 },
      "main":     { "weight": "book", "size": 16, "line": 150, "tracking": 1 },
      "mainBold": { "weight": "semibold", "size": 16, "line": 120, "tracking": 1 },
      "small":    { "weight": "book", "size": 14, "line": 150, "tracking": 1 },
      "label":    { "weight": "book", "size": 14, "line": 100, "tracking": 15 },
      "tiny":     { "weight": "book", "size": 12, "line": 150, "tracking": 1 }
    }
  }
}
```

### Tailwind v4 (`@theme`)
```css
@theme {
  --color-cream: #F2F0EB;
  --color-white: #FAFAFA;
  --color-brown: #322A2E;
  --color-black: #13100E;
  --color-orange: #F0803A;
  --color-orange-light: #FFB579;
  --color-violet: #B796FF;
  --color-violet-light: #D1CCFF;

  --font-sans: "STK Bureau Sans", "Inter", system-ui, sans-serif;

  --radius-brand: 10px;
  --spacing-section-s: 80px;
  --spacing-section-m: 96px;
  --spacing-section-l: 112px;

  --text-h1: 48px;  --text-h1--line-height: 1.1;
  --text-h2: 32px;  --text-h2--line-height: 1.2;
  --text-h3: 24px;  --text-h3--line-height: 1.25;
  --text-body: 16px; --text-body--line-height: 1.5;
  --text-label: 14px; --text-label--letter-spacing: 0.15em;
}
```

---

*Generated by Those Guys Studio from the Notom design system. When the brand evolves, this file evolves first.*