# Trunorm Brand Guidelines

---

## 1. Brand Identity

**trunorm** is written entirely in lowercase, always. The name is two parts — `tru` (trust, verified, true) and `norm` (normalization, standards) — visually bound together but semantically distinct, each with its own color. Never flatten them to a single color and never alter the case.

The **standards matrix mark** is a 3×3 grid of circles with the center position replaced by a rounded square. It represents a structured system: surrounding data points held in precise relation to a normalized center. The center square and the `tru` prefix always share the same color — they are the same concept made visible in two forms.

---

## 2. Logo & Mark

### 2.1 Wordmark

Set in **Plus Jakarta Sans Medium (500)**, letter-spacing **−0.03 em**, all lowercase. The `tru` prefix always matches the color of the center square in the companion mark. `norm` takes the contrasting role.

| Element | Light mode | Dark mode |
|---------|-----------|-----------|
| `tru` | `#0C447C` Navy | `#FFFFFF` White |
| `norm` | `#2C2C2A` Ink | `#378ADD` Cobalt |

### 2.2 Standards Matrix Mark

A 3×3 dot grid with the center replaced by a rounded square. The N/E/S/W cardinal dots are **identical in both modes**; only the background, center square, and corner dots adapt.

| Element | Light mode | Dark mode |
|---------|-----------|-----------|
| Background | `#FFFFFF` White | `#042C53` Abyss |
| Center square | `#0C447C` Navy | `#FFFFFF` White |
| N/E/S/W cardinal dots | `#378ADD` Cobalt | `#378ADD` Cobalt |
| Corner dots | `#B5D4F4` Sky | `#185FA5` Ocean |

The cardinal dots using `#378ADD` in both modes is intentional — they are the constant, the fixed reference frame. The background and center invert; the anchoring dots do not.

### 2.3 Lockup Variants

| Variant | Usage |
|---------|-------|
| Primary lockup | Default — mark + wordmark horizontal, all full-size contexts |
| Compact lockup | Nav bars, headers, small horizontal spaces |
| Mark only | Favicons, app icons, avatar slots, 32px and below |

Minimum size for the full lockup: **180px wide**. Below that, use the compact lockup. Below **80px wide**, use the mark only.

### 2.4 Clear Space

Minimum clear space on all sides = **the height of the mark itself**. Nothing enters this zone — not text, borders, imagery, or other UI elements.

### 2.5 Placement Rules

| Background | Use |
|------------|-----|
| White `#FFFFFF` | Light mode lockup |
| Cloud `#F5F5F3` | Light mode lockup |
| Abyss `#042C53` | Dark mode lockup |
| Navy `#0C447C` | Dark mode lockup (center square becomes `#E6F1FB` Mist) |

### 2.6 What Not To Do

- Do not place the logo on any background not listed above
- Do not set `tru` and `norm` in the same color
- Do not use the dark-mode wordmark on any light surface
- Do not add shadows, outlines, glows, or gradients to either element
- Do not alter the letter-spacing or weight of the wordmark
- Do not stack the wordmark below the mark unless a custom stacked lockup is produced — the current mark and wordmark are horizontal only

---

## 3. Color System

### 3.1 Core Palette

| Name | Hex | Usage |
|------|-----|-------|
| **Abyss** | `#042C53` | Dark mode background, darkest surfaces |
| **Navy** | `#0C447C` | Primary brand — `tru`, center square (light), CTAs |
| **Ocean** | `#185FA5` | Hover states, secondary interactive, corner dots (dark) |
| **Cobalt** | `#378ADD` | Cardinal dots (both modes), `norm` (dark), active states, data highlights |
| **Sky** | `#B5D4F4` | Corner dots (light), tints |
| **Mist** | `#E6F1FB` | Lightest tints, hover backgrounds, surface on dark |

### 3.2 Neutral Palette

| Name | Hex | Usage |
|------|-----|-------|
| **Ink** | `#2C2C2A` | `norm` (light), body text, primary dark text |
| **Slate** | `#888780` | Captions, metadata, annotations |
| **Dust** | `#D3D1C7` | Borders, dividers |
| **Cloud** | `#F5F5F3` | Off-white page backgrounds, card surfaces |
| **White** | `#FFFFFF` | Light mode surface, `tru` (dark), center square (dark) |

### 3.3 Light Mode Semantic Tokens

| Token | Value |
|-------|-------|
| Page background | `#FFFFFF` |
| Surface / card | `#F5F5F3` |
| Border | `#D3D1C7` |
| Primary text | `#2C2C2A` |
| Secondary text | `#888780` |
| Primary action | `#0C447C` |
| Action hover | `#185FA5` |
| Action active | `#378ADD` |
| Focus ring | `#378ADD` at 40% opacity |

### 3.4 Dark Mode Semantic Tokens

| Token | Value |
|-------|-------|
| Page background | `#042C53` |
| Surface / card | `#0C447C` |
| Raised surface | `#185FA5` |
| Border | `#185FA5` |
| Primary text | `#FFFFFF` |
| Secondary text | `#B5D4F4` |
| Primary action | `#378ADD` |
| Action hover | `#B5D4F4` |
| Focus ring | `#378ADD` at 60% opacity |

### 3.5 Color Rules

- **Navy `#0C447C`** is the primary brand color. It anchors both the `tru` prefix and all primary interactive elements in light mode.
- **Cobalt `#378ADD`** is the action and highlight color. Use it for links, active states, and focused controls — never as body text on white (contrast insufficient at small sizes).
- **Abyss `#042C53`** is a background color only. Do not use it for foreground text or standalone icons.
- The six core blues form a single ramp from Abyss to Mist. Never introduce blues outside this ramp.
- Data visualizations use the full ramp (Abyss → Mist) for sequential data, and Cobalt as the primary highlight color.

---

## 4. Typography

### 4.1 Typeface

**Plus Jakarta Sans** — used exclusively across all brand and product contexts.

```
Source: fonts.google.com/specimen/Plus+Jakarta+Sans
License: Open Font License (free for commercial use)
```

### 4.2 Roles & Weights

| Role | Weight | Name |
|------|--------|------|
| Logotype | 500 Medium | Plus Jakarta Sans Medium |
| Display / Hero | 700 Bold | Plus Jakarta Sans Bold |
| Heading | 600 SemiBold | Plus Jakarta Sans SemiBold |
| UI labels & navigation | 500 Medium | Plus Jakarta Sans Medium |
| Body copy | 400 Regular | Plus Jakarta Sans Regular |
| Captions & metadata | 400 Regular | Plus Jakarta Sans Regular |

**DM Mono** is used exclusively for code samples, API strings, data identifiers, and monospace contexts. It is never used for UI text or headings.

```
Source: fonts.google.com/specimen/DM+Mono
License: Open Font License (free for commercial use)
```

### 4.3 Type Scale

| Role | Size | Weight | Tracking | Line height |
|------|------|--------|----------|-------------|
| Logotype — primary | 48px | 500 | −0.03em | — |
| Logotype — compact | 24px | 500 | −0.03em | — |
| Display | 56–72px | 700 | −0.03em | 1.05 |
| Heading 1 | 40px | 700 | −0.02em | 1.1 |
| Heading 2 | 32px | 600 | −0.02em | 1.15 |
| Heading 3 | 24px | 600 | −0.01em | 1.2 |
| Heading 4 | 20px | 600 | 0em | 1.3 |
| Body — large | 18px | 400 | 0em | 1.65 |
| Body | 16px | 400 | 0em | 1.6 |
| Body — small | 14px | 400 | 0em | 1.55 |
| UI label | 14px | 500 | 0em | 1.4 |
| Caption / metadata | 12px | 400 | +0.06em | 1.4 |
| Annotation | 11px | 400 | +0.10em | 1.4 |
| Code / data | 14px | 400 (DM Mono) | 0em | 1.6 |

### 4.4 Typography Rules

- The brand name is always **`trunorm`** — lowercase, no space, no hyphen, no capital
- Headings use **sentence case** — never title case, never all-caps in running text
- Display sizes (40px+) always use negative tracking to match the tight logotype rhythm
- Captions and annotations use a small positive track (`+0.06–0.10em`) to remain legible at small sizes
- Do not use Plus Jakarta Sans below **11px**
- Do not combine Plus Jakarta Sans with any other sans-serif typeface in the same surface

---

## 5. Spacing & Layout

### 5.1 Base Unit

All spacing is built on an **8px base unit**. Accepted values: 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96px.

### 5.2 Grid

| Breakpoint | Columns | Gutter | Margin |
|------------|---------|--------|--------|
| Desktop (1280px+) | 12 | 24px | 48px |
| Tablet (768–1279px) | 8 | 20px | 32px |
| Mobile (< 768px) | 4 | 16px | 20px |

### 5.3 Border Radius

Corner radii mirror the mark's internal geometry at each size scale.

| Context | Radius |
|---------|--------|
| Cards, panels, modals | 8px |
| Buttons, inputs, badges | 6px |
| Tags, chips, small elements | 4px |
| Mark center square — large | 8px |
| Mark center square — small | 2.5px |
| Dots | 50% (circle) |

Never use a border radius above 8px on product surfaces, to maintain the structured, precise character of the brand. The only exception is the mark itself at small sizes where optical correction applies.

---

## 6. Iconography

### 6.1 System

Use **Lucide** icons (open source, consistent stroke geometry, rounded line caps). Lucide's rounded construction echoes the mark's corner radius language directly.

- Default stroke width: **1.5px** at 24px
- Scale stroke proportionally for other sizes
- Icon color always draws from the semantic token system — never use a hardcoded color outside the palette

### 6.2 Usage

Icons appear at **16px** (inline / metadata), **20px** (UI controls), **24px** (standard), and **32px** (feature callouts). Do not use icons above 32px — use illustration instead at larger scales.

---

## 7. Illustration

All illustration uses the core blue ramp (Abyss → Mist) only. No additional colors are introduced. Compositions follow the same structural logic as the mark: grid arrangements, rounded rectangles, and clear relational hierarchy between elements.

- Primary shape: rounded rectangle (matching brand border radii)
- Primary composition device: grid / matrix layouts
- Flat color only — no gradients, no shadows, no blur effects

---

## 8. Voice & Tone

| Principle | What it means |
|-----------|---------------|
| **Direct** | State what the product does. No marketing filler. |
| **Precise** | Use exact language. Avoid hedging words: *some*, *often*, *might*, *generally*. |
| **Understated** | Let the work demonstrate value. Never oversell. |
| **Technical when needed** | Don't simplify away accuracy. Make precision accessible, not absent. |

### 8.1 Vocabulary

| Prefer | Avoid |
|--------|-------|
| normalize | clean, fix, process |
| standard | rule, template, format |
| verify | check, validate, confirm |
| trunorm | Trunorm, TruNorm, TRUNORM |

---

## 9. Asset Reference

| Asset | File format | Minimum usage size |
|-------|-------------|-------------------|
| Primary lockup — light | SVG | 180px wide |
| Primary lockup — dark | SVG | 180px wide |
| Compact lockup — light | SVG | 100px wide |
| Compact lockup — dark | SVG | 100px wide |
| Mark only — light | SVG | 24px |
| Mark only — dark | SVG | 24px |
| Favicon | ICO / PNG | 16px, 32px, 48px |

Always use SVG for screen. Export PNG only when SVG is not supported by the target environment (email clients, some print workflows). Never scale the logo using CSS `width/height` attributes alone — preserve the `viewBox` and use the `preserveAspectRatio` default.

---

*Trunorm Brand Guidelines — Version 1.0*