Deeploy Brand System

Design system and brand reference for Deeploy — digital marketing agency.

Usage

For developers

Tokens only — raw CSS custom properties:

@import url('./tokens/tokens.css');

Full component library — tokens + .db namespace components (buttons, forms, stats, etc.):

@import url('./tokens/foundations.css');

Reporting layer — data-viz palette, four-state semantic set, and reporting primitives (KPI blocks, delta chips, callouts, data tables, CSS charts). Must load after foundations.css:

@import url('./tokens/reporting.css');

Wrap any section in .db to activate the baseline:

<div class="db">
  <h2 class="section-title">...</h2>
  <button class="btn btn--primary btn--lg">Book a strategy call</button>
</div>

Use CSS custom properties directly:

.button {
  background: var(--db-red);
  color: var(--db-red-fg);
  font-family: var(--db-ff);
  font-weight: 700;
}

For Claude Code / AI tools

CLAUDE.md in this repo root is the primary machine-readable brand brief. Reference it when building Deeploy UI or generating marketing assets.

For designers

Open brand/index.html in a browser for the full visual brand book. Hosted on GitHub Pages at [org].github.io/DeeployBrand.

File Structure

DeeployBrand/
├── CLAUDE.md                    ← AI brand reference (start here)
├── .impeccable.md               ← Design context for Claude Code /impeccable
├── assets/
│   └── logos/
│       ├── logo-primary.svg     ← Default: red mark + navy wordmark
│       ├── logo-white.svg       ← Reversed: all white
│       ├── logo-black.svg       ← Mono: Blue King only
│       ├── mark.svg             ← Compact: squares + D, two-color
│       └── mark-white.svg       ← Compact: squares + D, white
├── tokens/
│   ├── colors.json              ← Color palette with hex/RGB/CMYK
│   ├── typography.json          ← Font family, scale, rules
│   ├── spacing.json             ← 4pt spacing scale and grid
│   ├── tokens.css               ← CSS custom properties (import this)
│   ├── foundations.css          ← Component primitives (.db namespace)
│   └── reporting.css            ← Data-viz palette, semantic states, reporting primitives
├── brand/
│   ├── index.html               ← Visual brand book
│   └── foundations.html         ← Component primitives specimen
├── preview/                     ← Standalone specimen cards (7 × Reporting)
└── templates/
    ├── social/specs.json        ← Social media dimensions + composition rules
    ├── marketing/specs.json     ← Landing page, print, email specs
    └── reporting/               ← Client performance deck + printable quarterly report

Brand Colors

Name	Hex	Use
Deploy Red	#d81d4d	Accent, mark, CTAs (10% max)
Blue King	#0e2d3f	Text, dark sections (30%)
Baby Blue	#8BC9DB	Secondary accent
Off-white	#fafaf8	Page background (60%)

Charts have their own fixed palette — see Data Visualisation below. Do not pick chart colours by eye from the brand palette; the series order is prescribed so colour stays stable across every chart in a report.

Typography

Font: Avenir (full family — load via Adobe Fonts for web) Weights: Light 300 · Book 400 · Medium 500 · Heavy 700 · Black 900

• Web fallback: Mulish (Google Fonts) — geometric, low-contrast, double-storey a, tracking Avenir's proportions far closer than Nunito, whose rounded terminals read soft and off-brand. Set in tokens/reporting.css.
• No Avenir weight is self-hosted yet, so the 300 / 500 / 700 / 900 hierarchy currently renders in the fallback. ⚠ tokens/reporting.css has four commented @font-face slots ready — drop the .woff2 files into fonts/ and uncomment to fix everywhere at once.

Data Visualisation

Performance reporting is most of what Deeploy ships. Chart colour is a system decision, not a per-deck one.

Categorical — --dv-1 … --dv-8

Series order is fixed. Start at --dv-1 and walk down.

Token	Colour	Role
--dv-1	Deploy Red #d81d4d	The headline series. Always.
--dv-2	Blue King #0e2d3f	Comparison / prior period. Always.
--dv-3	Baby Blue #8bc9db	Supporting series
--dv-4	Mid navy	4th series
--dv-5	Light rose	5th series
--dv-6	Slate teal	6th series
--dv-7	Deep wine	7th series
--dv-8	Pale blue-grey	8th series, and the "Other" bucket

• Eight series is the ceiling. Past that, aggregate the tail into "Other".
• Never re-order series colours to "look nicer" — a channel must be the same colour on every chart in a report.
• A chart with more than one series needs a legend.

Sequential and diverging

• --dv-red-1…5 and --dv-navy-1…5 — intensity of a single metric (heatmaps, density, geography). Use the navy ramp when red is already carrying a series.
• --dv-div-1…5 — diverging, under target through on target to over target, with a neutral midpoint. Only for measures that have a real target.

Chrome

--dv-grid --dv-axis --dv-label --dv-track --dv-target. Gridlines stay behind the data and never darker than --dv-grid.

Semantic states

Four states — success, warning, danger, info — each with four tokens: --db-{state} (fill), --db-{state}-soft (tinted background), --db-{state}-border, --db-{state}-fg (text on soft). The soft/fg pair is what callouts use, so they work on both off-white and white.

Numbers

• Always font-variant-numeric: tabular-nums. Figures must align in a column.
• Numbers right-aligned in tables, labels left-aligned.
• Delta chips separate direction from judgement: delta--up states the number rose, delta--good / --bad / --warn colours it. A rising cost per acquisition is up and bad. Never conflate the two.
• Every KPI carries its prior-period value as context. A number with nothing to compare against is decoration.

Charts

• Every chart needs a title and a one-line takeaway. If you can't write the takeaway, the chart doesn't belong in the deliverable.
• No 3D, no drop shadows on data, no gradient fills on bars, no pie chart with more than four slices.

Templates

• templates/reporting/deck.html — client performance deck, nine fixed slide layouts at 1920×1080. Arrow keys navigate.
• templates/reporting/report.html — printable quarterly report, Letter, with repeating header and footer.
• preview/*.html — seven standalone specimen cards for the reporting primitives.

Logo Rules

• All logos are SVG with transparent backgrounds
• Primary: light surfaces | White: dark surfaces | Mono: print only
• Wordmark viewBox: 800 × 300 | Mark viewBox: 600 × 600
• Minimum digital: 120px wide (wordmark), 40px (mark)
• Never distort, recolor, rotate, or add effects

GitHub Pages

Enable GitHub Pages from the brand/ directory to host the brand book at: https://[your-org].github.io/DeeployBrand