DiffLab Brand Kit — full guide. Generated from site/md/ by scripts/build-llms-full.sh
---
# DiffLab Brand — The Differential Approach
> Source: https://branding.difflab.ai/
The Differential AI Lab ("DiffLab") brand and style guide: logo, color, typography, layout, and voice — plus downloadable assets and machine-readable design tokens. This site serves branding.difflab.ai; the marketing site is https://difflab.ai.
**Tagline:** Your guide for the AGI Age
In calculus, the differential is infinitesimal change—the moment where one state becomes another. That's our specialty: finding the critical points where AI delivers real outcomes. This guide defines how Differential AI Lab looks, reads, and behaves across every surface.
## Four pillars
1. Organizational AI Transformation
2. AI Native Software Development
3. AI Compliance
4. Agentic Boundary Enforcement
## The system
Everything here is the source of truth — the terrain map for the brand. Amber is the single pop accent; navy and slate do the quiet work.
| # | Section | URL | What it covers |
|---|---------|-----|----------------|
| 01 · Identity | Logo | https://branding.difflab.ai/logo/ | The tilted ∂ mark, lockups, clear space, and every approved variant. |
| 02 · Palette | Color | https://branding.difflab.ai/color/ | Navy, paper, slate, and amber — plus the topographic elevation ramp. |
| 03 · Type | Typography | https://branding.difflab.ai/typography/ | Space Grotesk for display, Inter for body, JetBrains Mono for code and eyebrows. |
| 04 · Structure | Layout | https://branding.difflab.ai/layout/ | Marketing surfaces, the internal-app system, spacing, radii, and components. |
| 05 · Language | Voice | https://branding.difflab.ai/voice/ | How DiffLab sounds: premium, precise, calm — the differential metaphor in words. |
| 06 · Assets | Downloads | https://branding.difflab.ai/downloads/ | SVG and PNG logo packs, favicons, tokens, and templates — ready to ship. |
Markdown mirrors of each page live under https://branding.difflab.ai/md/ (this file is `index.md`).
## Theme model
- Marketing/brand surfaces are **dark-first** (navy background). The brand site itself is dark-first with a working light/dark/auto toggle.
- Internal apps are **light-first** (white surfaces + navy gradient sidebar).
## Contact
Differential AI Lab
7111 W Alameda Ave, Ste J #4101
Lakewood, CO 80226
contact@difflab.ai
Elsewhere: https://difflab.ai · GitHub https://github.com/difflabai · X https://x.com/difflabai · LinkedIn https://www.linkedin.com/company/difflabai (all @difflabai)
For machines: https://branding.difflab.ai/llms.txt · https://branding.difflab.ai/llms-full.txt · https://branding.difflab.ai/tokens/tokens.json
---
# Logo
> Source: https://branding.difflab.ai/logo/
One glyph carries the whole brand: a partial-derivative symbol (∂), set in amber and tilted nine degrees clockwise. Everything on this page exists to keep that glyph unmistakable.
## Anatomy — the ∂, and why it leans
The mark is the partial-derivative symbol — **∂** — the operator of infinitesimal change. In calculus, the differential is the moment where one state becomes another; that is DiffLab's specialty, so the symbol of that moment is the identity.
The glyph is **tilted 9° clockwise**. The tilt is part of the mark, not an accident: it is the mark caught mid-rotation, change in progress. The tilt is baked into every logo asset — never rotate the files further, and never straighten them.
The angle is tokenized as `--dl-motion-logo-tilt: 9deg`. The only sanctioned untilted use is `mark-mono-upright.svg` — for contexts where the tilt is mechanically impossible or would be re-rotated (e.g. spinner geometry). Everywhere else, the mark leans.
### Exact geometry (authoritative)
The ∂ glyph path, in font coordinates (y-up):
```
M195 625C220 633 242 638 269 638C371 638 400 545 400 457C400 433 397 409 393 387C372 424 329 435 297 435C151 435 40 292 40 151C40 66 78 -11 176 -11C410 -11 471 260 471 408C471 578 409 668 283 668C249 668 213 662 185 645ZM367 319C367 288 361 254 352 221C324 119 265 19 188 19C125 19 121 79 121 117C121 256 207 405 306 405C333 405 367 384 367 319Z
```
Wrapper transform convention (flips y, rotates 9° clockwise about the glyph bbox center 255.5,328.5):
```
translate(tx,ty) scale(s,-s) translate(-255.5,-328.5) rotate(9) translate(255.5,328.5)
```
Reference values: in a 120-viewBox icon, `s=0.1296` and `translate(40,112)`; scale proportionally for other viewBoxes. In the shipped 512-viewBox marks: `s=0.5529700540009819` and `translate(170.6667,477.8667)`. The tilted mark in a 512 viewBox is therefore:
```svg
```
The upright exception (`mark-mono-upright.svg`) uses the same path with the tilt legs omitted: `translate(170.6667,477.8667) scale(0.5529700540009819,-0.5529700540009819)`.
## Variants — every approved file
Each variant is shown on the surface it was built for. Pick the file that matches your background — never recolor a file to fit.
### The mark
| File | Use |
|------|-----|
| `mark-amber.svg` | Primary — on light surfaces and on navy. |
| `mark-navy.svg` | One-color, light surfaces only. |
| `mark-white.svg` | One-color, dark surfaces only. |
| `mark-mono.svg` | `fill: currentColor` — inherits its context's color (navy on light, paper on dark, etc.). |
| `mark-mono-upright.svg` | Untilted exception — spinner geometry and similar. `currentColor`, no tilt. |
### Lockup
| File | Use |
|------|-----|
| `lockup-difflab-light.svg` | Mark + difflab.ai, light surfaces. |
| `lockup-difflab-dark.svg` | Mark + difflab.ai, navy surfaces. |
### Wordmark
| File | Use |
|------|-----|
| `wordmark-light.svg` | Full company name ("Differential AI Lab"), light surfaces. |
| `wordmark-dark.svg` | Full company name, navy surfaces. |
### App icon
| File | Use |
|------|-----|
| `appicon-light.svg` | Paper tile, favicon & app icon on light. |
| `appicon-dark.svg` | Navy tile, favicon & app icon on dark. |
## Clearspace — give the glyph room
Keep a clear area of at least **0.5 × the glyph width** on every side of the mark — half a ∂, all the way around. Nothing enters that zone: no text, no other logos, no edges of the canvas.
The same rule applies to lockups and wordmarks: measure the clear zone from the mark's glyph width, and keep it clear on all sides of the whole asset.
## Minimum sizes — never smaller than this
Below these sizes the ∂ loses its counter and the tilt reads as an error.
| Minimum | Context |
|---------|---------|
| 16 px | Favicon (use the appicon PNGs; never scale the SVG below this). |
| 24 px | Inline mark (in text, buttons, list items). |
| 120 px | Lockup (below this, switch to the bare mark). |
## Usage rules — do and don't
**Do:**
- Use amber on navy — the primary pairing on brand surfaces.
- Use navy or paper-white one-color variants on light surfaces.
- Let `mark-mono.svg` inherit its context's color via `currentColor`.
- Keep the 9° tilt exactly as shipped in the files.
- Hold the clearspace: ≥ 0.5 × glyph width on every side.
- Respect the minimums: 16 px favicon, 24 px inline mark, 120 px lockup.
**Don't:**
- Don't recolor the mark — no gradients, no off-palette fills.
- Don't untilt it. The only sanctioned upright use is `mark-mono-upright.svg`.
- Don't add drop shadows, glows, outlines, or strokes.
- Don't stretch, squash, or re-rotate the files.
- Don't set the amber mark on low-contrast mid-tones.
- Don't rebuild the ∂ from a font — always use the shipped assets.
## Motion — the spinner
The loading spinner is the upright mono glyph rotating about its center — one full revolution every **1.4 s**, tokenized as `--dl-motion-spinner-duration: 1.4s`. This is the one place the mark spins: the 9° tilt is a fixed pose, the spinner is continuous change.
| File | Use |
|------|-----|
| `spinner-light.svg` | Self-contained paper tile. |
| `spinner-dark.svg` | Self-contained navy tile. |
| `spinner-transparent.svg` | Amber glyph, any surface. |
All logo files are downloadable from https://branding.difflab.ai/downloads/ (assets under https://branding.difflab.ai/assets/logo/ and https://branding.difflab.ai/assets/png/).
---
# Color
> Source: https://branding.difflab.ai/color/
Navy and slate do the quiet work; paper carries the reading; amber is the single pop accent. Underneath sits a topographic elevation ramp — terrain for the terrain metaphor. All values below are also machine-readable in https://branding.difflab.ai/tokens/tokens.json and https://branding.difflab.ai/tokens/tokens.css.
## Core palette — seven named colors
Four brand colors, a brighter amber for dark surfaces, a destructive red, and a strictly functional blue.
| Name | Hex | HSL | Token | Role |
|------|-----|-----|-------|------|
| Navy | `#1a2744` | `hsl(218 44% 18%)` | `--dl-color-brand-navy` | Primary brand dark. Marketing/brand surface background (dark-first). |
| Paper | `#f8fafc` | `hsl(210 40% 98%)` | `--dl-color-brand-paper` | Primary brand light. Light-theme background and dark-theme foreground. |
| Slate | `#64748b` | `hsl(215 16% 47%)` | `--dl-color-brand-slate` | Muted mid-tone for secondary text and quiet UI. |
| Amber | `#f59e0b` | `hsl(38 92% 50%)` | `--dl-color-brand-amber` | The single pop accent. Color of the tilted partial-derivative mark. |
| Amber Bright | `#fbbf24` | `hsl(43 96% 56%)` | `--dl-color-brand-amber-bright` | Brighter amber used as the accent on dark surfaces. |
| Destructive | `#dc2626` | `hsl(0 72% 51%)` | `--dl-color-brand-destructive` | Destructive / danger. |
| Functional Blue | `#0085FF` | — | `--dl-color-brand-blue` | Links/info in app UIs only. NOT used on marketing surfaces. |
## Topo ramp — eight steps of elevation
DiffLab's core metaphor is terrain: we map complexity and guide clients through it. The ramp climbs from **deep** navy ocean floor through slate lowlands and warm highlands to **snow** — paper white at the summit. Use it for elevation-encoded data, contour backgrounds, and depth cues; never as decoration-by-the-handful.
| Step | Name | Hex | HSL | Token |
|------|------|-----|-----|-------|
| 1 (lowest) | Deep | `#1a2744` | `hsl(218 44% 18%)` | `--dl-color-topo-deep` |
| 2 | Ocean | `#314e81` | `hsl(215 45% 35%)` | `--dl-color-topo-ocean` |
| 3 | Shore | `#4a699b` | `hsl(215 35% 45%)` | `--dl-color-topo-shore` |
| 4 | Lowland | `#64748b` | `hsl(215 16% 47%)` | `--dl-color-topo-lowland` |
| 5 | Highland | `#8f7456` | `hsl(30 25% 45%)` | `--dl-color-topo-highland` |
| 6 | Mountain | `#af8f6a` | `hsl(30 30% 55%)` | `--dl-color-topo-mountain` |
| 7 | Peak | `#c5a986` | `hsl(30 35% 65%)` | `--dl-color-topo-peak` |
| 8 (highest) | Snow | `#f8fafc` | `hsl(210 40% 98%)` | `--dl-color-topo-snow` |
## Semantic tokens — light and dark, one vocabulary
Never style with raw values — style with roles. Each semantic token resolves per theme; the brand site is dark-first, internal apps are light-first, and both draw from this table.
| Token | Role | Light | Dark |
|-------|------|-------|------|
| `--dl-bg` | Page background | `hsl(210 40% 98%)` paper | `hsl(218 44% 18%)` navy |
| `--dl-surface` | Cards, panels | `#ffffff` | `hsl(218 44% 22%)` |
| `--dl-surface-raised` | Elevated surfaces | `#ffffff` | `hsl(218 42% 26%)` |
| `--dl-fg` | Primary text | `#111827` | `hsl(210 40% 98%)` paper |
| `--dl-fg-muted` | Secondary text | `#4B5563` | `hsl(215 20% 72%)` |
| `--dl-border` | Hairlines, dividers | `hsl(214 32% 91%)` | `hsl(218 30% 30%)` |
| `--dl-accent` | The pop accent | `hsl(38 92% 50%)` amber | `hsl(43 96% 56%)` amber-bright |
| `--dl-accent-fg` | Text on accent | `#ffffff` | `hsl(218 44% 18%)` navy |
| `--dl-link` | Links | `#0085FF` functional blue | `hsl(43 96% 56%)` amber-bright |
## App status colors — four fg/bg pairs
Internal apps signal state with paired colors: a strong foreground on a soft background, rendered as pill badges (radius `--dl-radius-badge`, 9999px). Always use the pair together — never mix a foreground with another pair's background.
| Status | Foreground | Background | Tokens |
|--------|------------|------------|--------|
| Success | `#0F7A0A` | `#E4FFEC` | `--dl-color-app-status-success-fg` / `--dl-color-app-status-success-bg` |
| Error | `#DC2626` | `#FEE2E2` | `--dl-color-app-status-error-fg` / `--dl-color-app-status-error-bg` |
| Warning | `#B45309` | `#FEF3C7` | `--dl-color-app-status-warning-fg` / `--dl-color-app-status-warning-bg` |
| Info | `#0085FF` | `#E0F2FF` | `--dl-color-app-status-info-fg` / `--dl-color-app-status-info-bg` |
## Internal-app color tokens
| Token | Value | Role |
|-------|-------|------|
| `--dl-color-app-accent-blue` | `#0085FF` | Internal-app link/info blue. |
| `--dl-color-app-sidebar-gradient` | `linear-gradient(167deg, #1A2744 0%, #0B1224 100%)` | 240px fixed left sidebar background in internal apps. |
| `--dl-color-app-sidebar-text` | `rgba(255, 255, 255, 0.84)` | Sidebar default text. |
| `--dl-color-app-sidebar-text-muted` | `rgba(255, 255, 255, 0.55)` | Sidebar muted text / section labels. |
| `--dl-color-app-sidebar-active-bg` | `rgba(245, 158, 11, 0.18)` | Active nav item background (amber overlay). |
| `--dl-color-app-sidebar-active-indicator` | `#ffffff` | Active nav item: inset 2px left bar + text color. |
| `--dl-color-app-text-strong` | `#111827` | Internal-app text ramp: primary. |
| `--dl-color-app-text-muted` | `#4B5563` | Internal-app text ramp: secondary. |
| `--dl-color-app-text-faint` | `#9CA3AF` | Internal-app text ramp: tertiary / placeholder. |
## Pairing rules — which colors, which surface
Marketing surfaces are **dark-first**: navy ground, paper text, amber as the single pop. Internal apps are **light-first**: white surfaces, navy sidebar, functional blue for links and info.
**Do:**
- Marketing: navy background, paper text, amber accents — dark-first with a working light theme.
- Internal apps: white surfaces, navy gradient sidebar, light-first.
- Amber is *the* pop accent — one accent, used sparingly, everywhere.
- Use amber-bright `#fbbf24` as the accent on dark surfaces.
- Blue `#0085FF` for links and info inside app UIs only.
- Reach for the topo ramp when encoding depth or elevation.
**Don't:**
- Don't use functional blue on marketing surfaces — not for links, not for decoration.
- Don't introduce a second accent color alongside amber.
- Don't flood layouts with amber — it pops because it is scarce.
- Don't hard-code raw hex where a `--dl-*` token exists.
- Don't split a status pair — foregrounds and backgrounds travel together.
- Don't use destructive red for emphasis; it means danger only.
---
# Typography
> Source: https://branding.difflab.ai/typography/
Three families, three jobs: Space Grotesk speaks, Inter reads, JetBrains Mono measures. All three load from Google Fonts and everything sits on the tokenized scale below.
## Families — display, body, mono
| Family | Job | Token | Full stack |
|--------|-----|-------|------------|
| Space Grotesk | Display / headings | `--dl-font-family-display` | `'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif` |
| Inter | Body / UI | `--dl-font-family-sans` | `'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif` |
| JetBrains Mono | Code + the eyebrow motif | `--dl-font-family-mono` | `'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace` |
## The eyebrow motif — small, mono, amber
The signature typographic move: a tiny tracked-out mono label above the heading, always in the accent amber. It kicks off nearly every section on every DiffLab surface. Eyebrow whispers the category; the heading makes the claim.
```css
.eyebrow {
font-family: var(--dl-font-family-mono); /* JetBrains Mono */
font-size: 0.8125rem; /* --dl-font-scale-eyebrow-size */
font-weight: 500;
letter-spacing: 0.1em; /* --dl-font-scale-eyebrow-tracking */
line-height: 1.4;
text-transform: uppercase;
color: var(--dl-accent); /* amber; amber-bright on dark */
}
```
## Scale — six steps, tokenized
Headings are Space Grotesk with negative tracking that tightens as the size grows; body is Inter; the eyebrow is mono. Every value below is a `--dl-font-scale-*` token.
| Style | Size | Weight | Tracking | Line-height | Family |
|-------|------|--------|----------|-------------|--------|
| `h1` | 2.25rem | 900 | -0.05em | 1.1 | Space Grotesk |
| `h2` | 1.875rem | 800 | -0.04em | 1.15 | Space Grotesk |
| `h3` | 1.5rem | 700 | -0.03em | 1.2 | Space Grotesk |
| `h4` | 1.25rem | 600 | -0.02em | 1.3 | Space Grotesk |
| `body` | 1.125rem | 400 | 0 | 1.6 | Inter |
| `eyebrow` | 0.8125rem | 500 | 0.1em | 1.4 | JetBrains Mono (uppercase) |
## App conventions — type inside internal apps
The internal-app system keeps the same families but tunes the metrics for dense, data-heavy screens.
- `html { font-size: 106.25% }` — a 17px base (`--dl-layout-html-font-size`), slightly larger than browser default for long working sessions.
- `line-height: 1.55` for app UI text (`--dl-layout-line-height`) — tighter than the marketing body's 1.6.
- `font-variant-numeric: tabular-nums` in every data table, so digit columns align.
## Implementation — loading & one known bug
All three families come from Google Fonts. Put this in the ``:
```html
```
### The `font-grotesk` bug
difflab.ai currently references a `font-grotesk` utility class that is never defined, so headings silently fall back to Inter and the display voice disappears. This guide is the corrected standard — headings must render in Space Grotesk. If you inherit markup using that class, the fix is one line:
```css
.font-grotesk { font-family: var(--dl-font-family-display); }
```
---
# Layout
> Source: https://branding.difflab.ai/layout/
Two kinds of surfaces, one system. Marketing and brand surfaces are dark-first — navy, atmospheric, editorial. Internal apps are light-first — white surfaces anchored by the navy gradient sidebar. This page is the canonical, framework-independent standard for the internal-app shell.
## The shell — anatomy of a DiffLab app
Every internal app is the same three regions: a 240px fixed gradient sidebar, a 56px white header with breadcrumbs, and a scrollable content area. This is the canonical DiffLab app shell (from the enterprise-workflows template) — it supersedes any legacy app style.
- Grid: `grid-template-columns: 240px 1fr` — the sidebar spans both rows; only the content scrolls.
- A live, self-contained reference implementation ships at https://branding.difflab.ai/layout/demo.html (light-first by design; it does not follow the brand site's theme toggle). Copy it as the starting point for any new internal app.
## Specification — the numbers
Every value below is normative and available as a `--dl-*` token in https://branding.difflab.ai/tokens/tokens.json / https://branding.difflab.ai/tokens/tokens.css.
### Sidebar
| Property | Value | Token |
|----------|-------|-------|
| Width | `240px`, fixed | `--dl-layout-sidebar-width` |
| Background | `linear-gradient(167deg, #1A2744 0%, #0B1224 100%)` | `--dl-color-app-sidebar-gradient` |
| Text | `rgba(255,255,255,0.84)` | `--dl-color-app-sidebar-text` |
| Text, muted / section labels | `rgba(255,255,255,0.55)` | `--dl-color-app-sidebar-text-muted` |
| Active item background | `rgba(245,158,11,0.18)` (amber @ 18%) | `--dl-color-app-sidebar-active-bg` |
| Active item indicator | inset `2px` white left bar + white text (`box-shadow: inset 2px 0 0 #fff`) | `--dl-color-app-sidebar-active-indicator` |
| Brand block | the mark rendered white at the top; user block pinned to the bottom | — |
### Header & content
| Property | Value | Token |
|----------|-------|-------|
| Header height | `56px` (`3.5rem`) | `--dl-layout-header-height` |
| Header treatment | white background, 1px bottom hairline, breadcrumbs left / actions right | — |
| Content padding | `1.5rem` | `--dl-layout-content-pad` |
| Content padding, ≥ 1024px | `2rem` | `--dl-layout-content-pad-lg` |
| Page background | paper `#f8fafc`; cards sit on it as white surfaces | `--dl-color-brand-paper` |
### Text ramp (light app surfaces)
| Role | Value | Token |
|------|-------|-------|
| Strong — headings, primary data | `#111827` | `--dl-color-app-text-strong` |
| Muted — labels, descriptions | `#4B5563` | `--dl-color-app-text-muted` |
| Faint — placeholders, tertiary | `#9CA3AF` | `--dl-color-app-text-faint` |
### Type conventions
| Convention | Value |
|------------|-------|
| Root font size | `html { font-size: 106.25% }` — 17px at the browser default |
| Line height | `1.55` for app UI text |
| Families | Inter for UI, Space Grotesk for headings, JetBrains Mono for code, IDs, and eyebrow labels |
| Numerals | `font-variant-numeric: tabular-nums` in every data table and stat |
### Radii
| Element | Radius | Token |
|---------|--------|-------|
| Card | `0.75rem` (padding `1.25–1.5rem`) | `--dl-radius-card` |
| Button | `0.375rem` | `--dl-radius-button` |
| StatusBadge | `9999px` (pill) | `--dl-radius-badge` |
(The base radius token is `--dl-radius-base: 0.75rem`.)
### Buttons — 4 variants
| Variant | Background | Text | Hover |
|---------|------------|------|-------|
| Primary | amber `#F59E0B` | white | `#D97706` |
| Secondary | white, 1px border | `#111827` | border darkens to `#9CA3AF` |
| Ghost | transparent | `#4B5563` | faint gray fill |
| Danger | `#DC2626` | white | `#B91C1C` |
### Buttons — 3 sizes
| Size | Padding | Font size |
|------|---------|-----------|
| sm | `0.3rem 0.7rem` | `0.75rem` |
| md (default) | `0.45rem 0.95rem` | `0.85rem` |
| lg | `0.6rem 1.25rem` | `0.95rem` |
### Status badges
| Status | Foreground | Background |
|--------|------------|------------|
| Success | `#0F7A0A` | `#E4FFEC` |
| Error | `#DC2626` | `#FEE2E2` |
| Warning | `#B45309` | `#FEF3C7` |
| Info | `#0085FF` | `#E0F2FF` |
## Component recipes
Framework-free snippets — plain HTML and CSS over the tokens. Port them to React, Vue, or whatever your app uses; the numbers are what matter.
### Card
White surface on the paper background. Radius 0.75rem, padding 1.25–1.5rem, hairline border.
```css
.section-header {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
}
.section-header h2 {
font: 700 1.375rem/1.2 var(--dl-font-family-display);
letter-spacing: -0.03em;
color: #111827;
margin: 0;
}
.section-header p { margin: 0.2rem 0 0; font-size: 0.85rem; color: #4B5563; }
```
---
# Voice
> Source: https://branding.difflab.ai/voice/
How DiffLab sounds: premium, precise, calm. We write like people who have read the terrain — technical without jargon, confident without hype.
## Who we are — in one paragraph
Differential AI Lab (DiffLab) is an Applied AI Lab. We help organizations find the critical points where AI delivers real outcomes — and then build the systems that hold at those points. Our work spans four practices:
1. Organizational AI Transformation
2. AI Native Software Development
3. AI Compliance
4. Agentic Boundary Enforcement
## Taglines — two lines, two jobs
Use exactly these strings — no variants, no re-punctuation.
| Tagline | Job |
|---------|-----|
| **Your guide for the AGI Age** | The outward promise. Use it where DiffLab meets the world: heroes, footers, social bios, decks. |
| **The Differential Approach** | The method. Use it when naming how we work: methodology pages, proposals, section titles. |
## The metaphor — the differential
> "In calculus, the differential is infinitesimal change—the moment where one state becomes another. That's our specialty: finding the critical points where AI delivers real outcomes."
The mark — a partial-derivative symbol ∂ tilted nine degrees — carries the same idea in a single glyph. The visual language extends it topographically: navigating AI is navigating terrain. Navy is the deep base layer, the topo ramp climbs from ocean to snow, and amber marks the point of interest — the critical point on the map. Write the same way: we are guides who read contours, not tourists selling postcards. Elevation, terrain, paths, critical points, and derivatives are our images; magic, rockets, and gold rushes are not.
## Tone — premium, precise, calm
- **Premium** — Considered and unhurried. Few words, well chosen. No exclamation points doing the work of evidence.
- **Precise** — Technical claims are specific and checkable. Numbers over adjectives; named methods over vibes.
- **Calm** — AI is a terrain to navigate, not a storm to panic about. We never sell urgency; we provide bearings.
**Do (sounds like us):**
- "We find the critical points where AI delivers real outcomes."
- "Agent boundaries you can state, test, and enforce."
- "Cut review time from four days to one — here's how."
- "A map of where AI helps your organization, and where it doesn't yet."
**Don't (never this):**
- "Revolutionary AI magic that changes everything!"
- "Unlock 10x game-changing synergy with our cutting-edge platform."
- "The future is NOW — don't get left behind!!"
- Vague superlatives: "world-class", "next-gen", "disruptive" with no evidence attached.
## Boilerplate — copy-ready blocks
For press pages, footers, directories, and anywhere a canonical description or contact block is needed.
**Boilerplate:**
> Differential AI Lab (DiffLab) is an Applied AI Lab. We help organizations find the critical points where AI delivers real outcomes, across four practices: Organizational AI Transformation, AI Native Software Development, AI Compliance, and Agentic Boundary Enforcement. Your guide for the AGI Age.
**Contact block:**
> Differential AI Lab
> 7111 W Alameda Ave, Ste J #4101
> Lakewood, CO 80226
> contact@difflab.ai
> difflab.ai · GitHub / X / LinkedIn: @difflabai
---
# Downloads
> Source: https://branding.difflab.ai/downloads/
Every approved asset, ready to ship: the logo pack in SVG and PNG, the design tokens, and machine-readable brand references. All URLs below are absolute and fetchable.
## Logo pack — SVG (source of truth)
Vector originals. The tilted ∂ mark ships pre-rotated 9° inside each file — never tilt it again.
| File | Format / size | Notes | URL |
|------|---------------|-------|-----|
| mark-amber.svg | SVG · 512×512 | Primary mark | https://branding.difflab.ai/assets/logo/mark-amber.svg |
| mark-navy.svg | SVG · 512×512 | For light surfaces | https://branding.difflab.ai/assets/logo/mark-navy.svg |
| mark-white.svg | SVG · 512×512 | For dark surfaces | https://branding.difflab.ai/assets/logo/mark-white.svg |
| mark-mono.svg | SVG · 512×512 | currentColor | https://branding.difflab.ai/assets/logo/mark-mono.svg |
| mark-mono-upright.svg | SVG · 512×512 | currentColor, no tilt | https://branding.difflab.ai/assets/logo/mark-mono-upright.svg |
| lockup-difflab-dark.svg | SVG · 560×120 | For dark surfaces | https://branding.difflab.ai/assets/logo/lockup-difflab-dark.svg |
| lockup-difflab-light.svg | SVG · 560×120 | For light surfaces | https://branding.difflab.ai/assets/logo/lockup-difflab-light.svg |
| wordmark-dark.svg | SVG · 640×120 | For dark surfaces | https://branding.difflab.ai/assets/logo/wordmark-dark.svg |
| wordmark-light.svg | SVG · 640×120 | For light surfaces | https://branding.difflab.ai/assets/logo/wordmark-light.svg |
| appicon-dark.svg | SVG · 120×120 | Navy tile | https://branding.difflab.ai/assets/logo/appicon-dark.svg |
| appicon-light.svg | SVG · 120×120 | Paper tile | https://branding.difflab.ai/assets/logo/appicon-light.svg |
| spinner-dark.svg | SVG · 120×120 | Animated | https://branding.difflab.ai/assets/logo/spinner-dark.svg |
| spinner-light.svg | SVG · 120×120 | Animated | https://branding.difflab.ai/assets/logo/spinner-light.svg |
| spinner-transparent.svg | SVG · 120×120 | Animated, transparent | https://branding.difflab.ai/assets/logo/spinner-transparent.svg |
**Wordmark caveat.** The SVG wordmarks and lockups use live `` — they render correctly only where the Inter font is installed or loaded. For contexts you don't control (email, documents, third-party tools), the PNG wordmarks below are authoritative.
## Logo pack — PNG (pre-rendered)
Transparent-background rasters at fixed sizes, for surfaces that can't take SVG.
| File | Size | URL |
|------|------|-----|
| mark-amber-512.png | 512×512 | https://branding.difflab.ai/assets/png/mark-amber-512.png |
| mark-amber-256.png | 256×256 | https://branding.difflab.ai/assets/png/mark-amber-256.png |
| mark-amber-128.png | 128×128 | https://branding.difflab.ai/assets/png/mark-amber-128.png |
| mark-amber-64.png | 64×64 | https://branding.difflab.ai/assets/png/mark-amber-64.png |
| lockup-difflab-dark-1200.png | 1200×257 | https://branding.difflab.ai/assets/png/lockup-difflab-dark-1200.png |
| wordmark-dark-1280.png | 1280×240 | https://branding.difflab.ai/assets/png/wordmark-dark-1280.png |
| wordmark-light-1280.png | 1280×240 | https://branding.difflab.ai/assets/png/wordmark-light-1280.png |
| appicon-dark-512.png | 512×512 | https://branding.difflab.ai/assets/png/appicon-dark-512.png |
| appicon-dark-256.png | 256×256 | https://branding.difflab.ai/assets/png/appicon-dark-256.png |
| appicon-dark-128.png | 128×128 | https://branding.difflab.ai/assets/png/appicon-dark-128.png |
| appicon-dark-64.png | 64×64 | https://branding.difflab.ai/assets/png/appicon-dark-64.png |
| appicon-dark-32.png | 32×32 | https://branding.difflab.ai/assets/png/appicon-dark-32.png |
| appicon-dark-16.png | 16×16 | https://branding.difflab.ai/assets/png/appicon-dark-16.png |
| appicon-light-512.png | 512×512 | https://branding.difflab.ai/assets/png/appicon-light-512.png |
| appicon-light-256.png | 256×256 | https://branding.difflab.ai/assets/png/appicon-light-256.png |
| appicon-light-128.png | 128×128 | https://branding.difflab.ai/assets/png/appicon-light-128.png |
| appicon-light-64.png | 64×64 | https://branding.difflab.ai/assets/png/appicon-light-64.png |
| appicon-light-32.png | 32×32 | https://branding.difflab.ai/assets/png/appicon-light-32.png |
| appicon-light-16.png | 16×16 | https://branding.difflab.ai/assets/png/appicon-light-16.png |
## Design tokens
The same values that drive the brand site — one source of truth for color, type, radii, layout, and motion.
| File | Format | Notes | URL |
|------|--------|-------|-----|
| tokens.json | JSON | W3C-style token source. Feed it to Style Dictionary, code generators, or agents. | https://branding.difflab.ai/tokens/tokens.json |
| tokens.css | CSS | Ready-made custom properties — link it and use `var(--dl-*)` everywhere. | https://branding.difflab.ai/tokens/tokens.css |
## Machine-readable brand
The whole guide is mirrored in plain text and Markdown so agents and tooling can consume it directly.
| File | Notes | URL |
|------|-------|-----|
| llms.txt | Compact brand summary with pointers to every resource on this site. | https://branding.difflab.ai/llms.txt |
| llms-full.txt | The complete guide in one file — everything an agent needs in a single fetch. | https://branding.difflab.ai/llms-full.txt |
| /md/ mirrors | Each page of this guide is mirrored as Markdown under /md/. | https://branding.difflab.ai/md/ |
## For partners & press
These assets are provided for partners and press referencing Differential AI Lab. Use them as shipped: don't recolor, re-tilt, distort, or add effects to the marks, and don't combine them with other logos into new lockups. Questions about a use case? Write to contact@difflab.ai.