Brand → Code · v1.0 · Apr 2026

DNC Blog
Design Tokens

tailwind.config.mjs
src/styles/tokens.css
Astro 4 · Tailwind 3

01 / Color

Palette

Two brand anchors — Cod Gray 2 (#0B0B0B) and Viking 3 (#64CCDB) — extended into 11-step ramps so component states (hover, disabled, ring, etc.) all draw from the same DNA. Brand hexes are flagged.

Ink colors.ink.*
type, surfaces, ui

50f6f6f6

100ebebeb

200d4d4d4

300a8a8a8

4006e6e6e

500444444

6002b2b2b

7001a1a1a

800111111

9000b0b0b

950050505

Viking colors.viking.*
accent, links, focus

50effbfd

100d6f4f8

200b1e9f1

30085dbe7

40064ccdb

50036b1c4

6002690a4

700207485

8001d5f6d

9001c4f5b

9500d343e

Semantic aliases

bg
paper · #f8f8f8

surface
card · #ffffff

text
ink-900 · #0b0b0b

muted
ink-400 · #6e6e6e

accent
viking-400 · #64ccdb

border
hairline · #e6e6e6

paper.rule
divider · #f0f0f0

paper.muted
chip bg · #ececec

02 / Type

Typography

Lovelo Line Bold is wordmark-only — used solely for the DNC logo lockup at full size and for “De Noronha Consulting” at small size. Every headline, title, section header, and body line is set in Avenir, with hierarchy created by weight (900 Heavy / 700 Bold / 400 Book) rather than family. Free fallback for Avenir: Nunito Sans.

font-wordmark · LOGO ONLY

DNC

DE NORONHA CONSULTING

"Lovelo Line Bold", "Bowlby One SC", system-ui, sans-serif

Used for

The DNC logo lockup only: the three-letter mark at large size, and the “De Noronha Consulting” tagline beneath it at small size in Viking accent. Never for headings, body, navigation, or any UI surface — that's Avenir's job.

700 Bold (only weight shipped)

font-sans · EVERYTHING ELSE

Avenir

The quick brown fox jumps over the lazy dog. 0123456789

"Avenir", "Avenir Next", "Nunito Sans", "Helvetica Neue", system-ui, sans-serif

Used for

Hero display, page headlines, section titles, H1–H4, body copy, navigation, forms, captions — every line of running text. Hierarchy is built from weight: 900 Heavy for hero/section display, 700 Bold for headings, 400 Book for body.

300 Light 400 Regular 600 Semibold 700 Bold 900 Black

Type scale

7xl · 72

Headline

text-7xl · font-black

6xl · 60

Title

text-6xl · font-black

5xl · 48

Section title

text-5xl · font-black

4xl · 36

Heading H1

text-4xl · font-bold

3xl · 30

Heading H2

text-3xl · font-bold

2xl · 24

Heading H3

text-2xl · font-bold

xl · 20

Heading H4 / lede

text-xl · font-semibold

lg · 18

Large body — for emphasis or short intros above a primary block.

text-lg

base · 16

Body — the workhorse. The quick brown fox jumps over the lazy dog & runs into the woods at dawn.

text-base

sm · 14

Small body — caption, helper text, table cells.

text-sm

xs · 12

Eyebrow / metadata

text-xs · font-mono

03 / Spacing

Spacing

A 4px base scale aligned to Tailwind defaults, plus three named tokens that lock in the brand guide's article geometry: article (100px), section-y (80px), gutter (24px).

space.1hairline gap, icon to label

4px · 0.25rem

p-1 · gap-1 · space-y-1

space.2tight pair

8px · 0.5rem

p-2 · gap-2

space.3control padding-y

12px · 0.75rem

p-3 · gap-3

space.4default rhythm

16px · 1rem

p-4 · gap-4

space.6card inner padding

24px · 1.5rem · =gutter

p-6 · px-gutter

space.8block separation

32px · 2rem

py-8 · gap-8

space.12card outer / hero pad

48px · 3rem

p-12

space.20 · section-yvertical between sections

80px · 5rem

py-section · py-20

space.25 · articlelong-form left/right pad — from guide

100px · 6.25rem

px-article · p-25

maxW.articlelong-form width — from guide

1120px · 70rem

max-w-article

maxW.containerglobal page container

1216px · 76rem

max-w-container

04 / Radii

Corner radius

The brand reads square. Use sm (4px) by default, lifted from the swatch chips in the original guide. Reserve 2xl + full for avatars and floating UI only.

none0

xs2px

sm4px · default

md6px

lg10px

xl16px

full9999px

05 / Elevation

Shadows

card is the original guide's signature drop — a directional 5px x-offset that gives the article its lifted-paper feel. Keep it for the hero article surface only; everything else uses soft or lift.

shadow.card5px 0 35px -8px #c0c0c0

shadow.soft0 1px 2px / 0 4px 12px

shadow.lift0 12px 32px -12px

shadow.ring0 0 0 3px viking/35

06 / Implementation

Wiring it up

Two files do the work. Put tailwind.config.mjs at the project root and import tokens.css once from src/layouts/Base.astro.

tailwind.config.mjstailwind

// excerpt — full file in project root
export default {
  content: ["./src/**/*.{astro,html,js,ts,tsx,md,mdx}"],
  theme: {
    colors: {
      ink:    { 900: "#0b0b0b", /* …11 steps */ },
      viking: { 400: "#64ccdb", /* …11 steps */ },
      paper:  { DEFAULT: "#f8f8f8", card: "#fff", rule: "#f0f0f0" },
      accent: "#64ccdb", text: "#0b0b0b", muted: "#6e6e6e",
    },
    fontFamily: {
      wordmark: ["Lovelo Line Bold", "Bowlby One SC", "system-ui"], // logo only
      sans:     ["Avenir", "Nunito Sans", "system-ui"],         // H1–H4 + body
    },
    extend: {
      spacing:    { "article": "6.25rem", "section": "5rem", "gutter": "1.5rem" },
      maxWidth:   { article: "70rem", container: "76rem" },
      borderRadius:{ sm: "4px", md: "6px", lg: "10px" },
      boxShadow:  { card: "5px 0 35px -8px #c0c0c0" },
    },
  },
};

src/styles/tokens.csscss vars

:root {
  /* Color */
  --color-ink-900:    #0b0b0b;     /* Cod Gray 2 — brand */
  --color-viking-400: #64ccdb;     /* Viking 3 — brand */
  --bg: var(--color-paper);
  --accent: var(--color-viking-400);

  /* Type — Lovelo is wordmark-only; everything else is Avenir */
  --font-wordmark: "Lovelo Line Bold", "Bowlby One SC", system-ui;  /* logo only */
  --font-sans:     "Avenir", "Nunito Sans", system-ui;       /* H1–H4 + body */

  /* Spacing */
  --article-pad:  6.25rem;   /* from brand guide */
  --article-max:  70rem;
  --gutter:       1.5rem;

  /* Elevation */
  --shadow-card: 5px 0 35px -8px #c0c0c0;
}