diff --git a/README.md b/README.md
index 7caa7c6..bb1ab31 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,19 @@
-# KDC Design System
+# Kode Design Consultants — Design System
-The official design system for KDC — tokens, components, brand assets, and guidelines for building consistent KDC product and brand experiences.
+The official design system for **Kode Design Consultants Ltd** (KDC) — tokens, components, brand assets, and guidelines for building consistent product and brand experiences.
> The single source of truth lives in [`design.md`](./design.md), which encodes the design tokens (colors, typography, spacing, radii, components) in the [google-labs-code/design.md](https://github.com/google-labs-code/design.md) format.
+## Brand at a glance
+
+| | |
+|--|--|
+| Wordmark | `kode` set in **Opificio Bold** (72pt / 52pt) |
+| Secondary line | `design consultants` in **Manrope ExtraLight** (20pt / 76pt) |
+| Brand color | Kode purple `#6B35A7` |
+| Supporting | Black `#000000`, White `#FFFFFF`, Off-white `#F5F4F0` |
+| UI typeface | **Manrope** (200–800) |
+
## Repository structure
```
@@ -12,7 +22,7 @@ KDCDesignSystem/
├── brand/ # Logos, wordmarks, brand guidelines
├── tokens/ # Generated/exported design tokens
├── foundations/ # Color, type, spacing, motion, grid, breakpoints
-├── assets/ # Fonts, icons, illustrations, images, patterns
+├── assets/ # Fonts (Manrope + Opificio), icons, illustrations
├── components/ # Per-component specs and anatomy
├── themes/ # Light, dark, high-contrast theme overrides
├── templates/ # Web, mobile, email, print, presentation
@@ -29,7 +39,7 @@ KDCDesignSystem/
## Status
-Version: **alpha**. Tokens and components are still settling — expect breaking changes.
+Version: **beta**. Tokens and components are still settling — expect breaking changes.
## Contributing
diff --git a/assets/fonts/Inter/README.md b/assets/fonts/Inter/README.md
deleted file mode 100644
index 6078d6c..0000000
--- a/assets/fonts/Inter/README.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Inter
-
-Place the licensed Inter font files here:
-
-- Inter-Regular.woff2
-- Inter-Medium.woff2
-- Inter-SemiBold.woff2
-- Inter-Bold.woff2
-
-Include the upstream LICENSE alongside the binaries.
diff --git a/assets/fonts/Inter/LICENSE.txt b/assets/fonts/Manrope/LICENSE.txt
similarity index 100%
rename from assets/fonts/Inter/LICENSE.txt
rename to assets/fonts/Manrope/LICENSE.txt
diff --git a/assets/fonts/Inter/Inter-Bold.woff2 b/assets/fonts/Manrope/Manrope-Bold.woff2
similarity index 100%
rename from assets/fonts/Inter/Inter-Bold.woff2
rename to assets/fonts/Manrope/Manrope-Bold.woff2
diff --git a/assets/fonts/Inter/Inter-Medium.woff2 b/assets/fonts/Manrope/Manrope-ExtraBold.woff2
similarity index 100%
rename from assets/fonts/Inter/Inter-Medium.woff2
rename to assets/fonts/Manrope/Manrope-ExtraBold.woff2
diff --git a/assets/fonts/Inter/Inter-Regular.woff2 b/assets/fonts/Manrope/Manrope-ExtraLight.woff2
similarity index 100%
rename from assets/fonts/Inter/Inter-Regular.woff2
rename to assets/fonts/Manrope/Manrope-ExtraLight.woff2
diff --git a/assets/fonts/Inter/Inter-SemiBold.woff2 b/assets/fonts/Manrope/Manrope-Medium.woff2
similarity index 100%
rename from assets/fonts/Inter/Inter-SemiBold.woff2
rename to assets/fonts/Manrope/Manrope-Medium.woff2
diff --git a/assets/fonts/Manrope/Manrope-Regular.woff2 b/assets/fonts/Manrope/Manrope-Regular.woff2
new file mode 100644
index 0000000..e69de29
diff --git a/assets/fonts/Manrope/Manrope-SemiBold.woff2 b/assets/fonts/Manrope/Manrope-SemiBold.woff2
new file mode 100644
index 0000000..e69de29
diff --git a/assets/fonts/Manrope/Manrope-Variable.woff2 b/assets/fonts/Manrope/Manrope-Variable.woff2
new file mode 100644
index 0000000..e69de29
diff --git a/assets/fonts/Manrope/README.md b/assets/fonts/Manrope/README.md
new file mode 100644
index 0000000..c5b1d96
--- /dev/null
+++ b/assets/fonts/Manrope/README.md
@@ -0,0 +1,17 @@
+# Manrope
+
+Primary UI typeface for Kode Design Consultants — used for all headings, body
+copy, captions, and the secondary line of the wordmark lockup.
+
+Drop the licensed binaries here:
+
+- Manrope-Variable.woff2 (preferred, weights 200–800)
+- Manrope-ExtraLight.woff2 (200) — secondary wordmark line
+- Manrope-Regular.woff2 (400)
+- Manrope-Medium.woff2 (500)
+- Manrope-SemiBold.woff2 (600)
+- Manrope-Bold.woff2 (700)
+- Manrope-ExtraBold.woff2 (800)
+
+Manrope is licensed under the SIL Open Font License — include LICENSE.txt
+alongside the binaries.
diff --git a/assets/fonts/Opificio/LICENSE.txt b/assets/fonts/Opificio/LICENSE.txt
new file mode 100644
index 0000000..e69de29
diff --git a/assets/fonts/Opificio/Opificio-Bold.woff2 b/assets/fonts/Opificio/Opificio-Bold.woff2
new file mode 100644
index 0000000..e69de29
diff --git a/assets/fonts/Opificio/Opificio-Regular.woff2 b/assets/fonts/Opificio/Opificio-Regular.woff2
new file mode 100644
index 0000000..e69de29
diff --git a/assets/fonts/Opificio/Opificio-Rounded.woff2 b/assets/fonts/Opificio/Opificio-Rounded.woff2
new file mode 100644
index 0000000..e69de29
diff --git a/assets/fonts/Opificio/README.md b/assets/fonts/Opificio/README.md
new file mode 100644
index 0000000..59c7f3f
--- /dev/null
+++ b/assets/fonts/Opificio/README.md
@@ -0,0 +1,12 @@
+# Opificio
+
+Display typeface for Kode Design Consultants — used **only** for the `kode`
+wordmark and headline display moments. Bold is the canonical cut.
+
+Drop the licensed binaries here:
+
+- Opificio-Bold.woff2 — canonical wordmark cut
+- Opificio-Rounded.woff2 — editorial / friendly variant
+- Opificio-Regular.woff2 — used sparingly
+
+Confirm Opificio's licensing terms with the foundry before redistributing.
diff --git a/assets/fonts/fonts.css b/assets/fonts/fonts.css
index c6d4758..c351a54 100644
--- a/assets/fonts/fonts.css
+++ b/assets/fonts/fonts.css
@@ -1,14 +1,41 @@
-/* KDC Design System — font-face declarations.
+/* Kode Design Consultants — font-face declarations.
Self-host these files from /assets/fonts/. */
+/* Manrope — primary UI typeface (variable, 200–800). */
@font-face {
- font-family: "Inter";
+ font-family: "Manrope";
font-style: normal;
- font-weight: 100 900;
+ font-weight: 200 800;
font-display: swap;
- src: url("./Inter/Inter-Regular.woff2") format("woff2");
+ src: url("./Manrope/Manrope-Variable.woff2") format("woff2-variations"),
+ url("./Manrope/Manrope-Regular.woff2") format("woff2");
}
+/* Opificio — display / wordmark only.
+ Three cuts: Bold (canonical), Rounded, Regular. */
+@font-face {
+ font-family: "Opificio";
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url("./Opificio/Opificio-Bold.woff2") format("woff2");
+}
+@font-face {
+ font-family: "Opificio Rounded";
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url("./Opificio/Opificio-Rounded.woff2") format("woff2");
+}
+@font-face {
+ font-family: "Opificio";
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url("./Opificio/Opificio-Regular.woff2") format("woff2");
+}
+
+/* Roboto Mono — code / tabular figures only. Not a brand typeface. */
@font-face {
font-family: "Roboto Mono";
font-style: normal;
diff --git a/brand/brand-guidelines/README.md b/brand/brand-guidelines/README.md
index e9356e9..fa081d2 100644
--- a/brand/brand-guidelines/README.md
+++ b/brand/brand-guidelines/README.md
@@ -1,12 +1,40 @@
# Brand Guidelines
-Placeholder. Replace with the formal KDC brand book covering:
+## Wordmark
-- Mission, vision, and personality
-- Logo clear-space and minimum sizes
-- Approved color usage
-- Typography in marketing
-- Photography & illustration direction
-- Voice and tone
-- Co-branding rules
-- Do's and don'ts (with examples)
+**Primary lockup** — `kode` set in **Opificio Bold**, 72pt size with 52pt spacing.
+
+**Secondary lockup** — `kode` (Opificio Bold, 72pt / 52pt) above `design consultants` (Manrope ExtraLight, 20pt / 76pt spacing).
+
+Use the secondary lockup wherever clarity about the legal name is required (legal documents, contracts, invoices, footers, first-mention contexts). Use the primary single-line `kode` wherever the brand is already established (favicons, app bar, signed emails, swag).
+
+## Color palette
+
+| Color | Hex | Use |
+|-------|-----|-----|
+| Kode purple | `#6B35A7` | Primary brand color, links, primary actions. |
+| Black | `#000000` | Wordmark, high-emphasis text. |
+| White | `#FFFFFF` | Cards, modals, contrast surface. |
+| Off-white | `#F5F4F0` | Default page background. |
+
+## Typography
+
+| Use | Family |
+|-----|--------|
+| Wordmark / display | **Opificio Bold** (Rounded and Regular cuts available for editorial moments) |
+| All UI (headings, body, labels) | **Manrope** — weights 200, 300, 400, 500, 600, 700, 800 |
+| Code / tabular figures | Roboto Mono (system fallback) |
+
+## Logo variants
+
+The brand mark must always appear in one of:
+
+- Solid Kode purple (`#6B35A7`) on white or off-white
+- Solid black on white or off-white
+- Outlined (white interior) on a Kode purple or photographic background
+
+Never re-color, re-stretch, drop-shadow, or place the wordmark on busy or low-contrast imagery.
+
+## Reference
+
+The canonical asset board (kode wordmark, color blocks, typography ramps) lives in [`../logos-source/`](../logos-source/). Replace the placeholders there with the official source artwork before use.
diff --git a/design.md b/design.md
index 0adf99f..ec4da02 100644
--- a/design.md
+++ b/design.md
@@ -3,13 +3,13 @@ version: beta
name: Kode Design Consultants Ltd Design System
description: The official design system for Kode Design Consultants — tokens, components, and guidelines for building consistent KDC product and brand experiences.
colors:
- brand.primary: "rgb(11, 95, 255)"
- brand.primaryHover: "#0848C2"
- brand.primaryPressed: "#063494"
- brand.secondary: "#FF6B00"
- brand.accent: "#00C2A8"
+ brand.primary: "#6B35A7"
+ brand.primaryHover: "#582A8D"
+ brand.primaryPressed: "#45216E"
+ brand.ink: "#000000"
+ brand.canvas: "#F5F4F0"
neutral.0: "#FFFFFF"
- neutral.50: "#F7F8FA"
+ neutral.50: "#F5F4F0"
neutral.100: "#EDEFF3"
neutral.200: "#D9DCE3"
neutral.300: "#B8BDC9"
@@ -31,48 +31,54 @@ colors:
border.strong: "{colors.neutral.300}"
typography:
display:
- fontFamily: "Inter"
- fontSize: "48px"
+ fontFamily: "Opificio"
+ fontSize: "72px"
fontWeight: 700
- lineHeight: "56px"
- letterSpacing: "-0.02em"
+ lineHeight: "80px"
+ letterSpacing: "-0.01em"
+ wordmarkSecondary:
+ fontFamily: "Manrope"
+ fontSize: "20px"
+ fontWeight: 200
+ lineHeight: "28px"
+ letterSpacing: "0.04em"
headingXL:
- fontFamily: "Inter"
+ fontFamily: "Manrope"
fontSize: "32px"
fontWeight: 700
lineHeight: "40px"
headingL:
- fontFamily: "Inter"
+ fontFamily: "Manrope"
fontSize: "24px"
fontWeight: 600
lineHeight: "32px"
headingM:
- fontFamily: "Inter"
+ fontFamily: "Manrope"
fontSize: "20px"
fontWeight: 600
lineHeight: "28px"
headingS:
- fontFamily: "Inter"
+ fontFamily: "Manrope"
fontSize: "16px"
fontWeight: 600
lineHeight: "24px"
bodyL:
- fontFamily: "Inter"
+ fontFamily: "Manrope"
fontSize: "18px"
fontWeight: 400
lineHeight: "28px"
bodyM:
- fontFamily: "Inter"
+ fontFamily: "Manrope"
fontSize: "16px"
fontWeight: 400
lineHeight: "24px"
bodyS:
- fontFamily: "Inter"
+ fontFamily: "Manrope"
fontSize: "14px"
fontWeight: 400
lineHeight: "20px"
caption:
- fontFamily: "Inter"
+ fontFamily: "Manrope"
fontSize: "12px"
fontWeight: 500
lineHeight: "16px"
@@ -176,9 +182,9 @@ KDS targets WCAG 2.2 AA at minimum across all components and themes.
Color is organized in three layers:
-1. **Brand** — primary identity colors (`brand.primary`, `brand.secondary`, `brand.accent`).
-2. **Neutral** — a 12-step gray ramp powering surfaces, text, and borders.
-3. **Semantic** — meaning-bearing colors for status: success, warning, danger, info.
+1. **Brand** — the four-color brand palette: `brand.primary` (`#6B35A7` purple), `brand.ink` (`#000000`), `neutral.0` (`#FFFFFF`), and `brand.canvas` (`#F5F4F0` off-white).
+2. **Neutral** — a 12-step gray ramp powering surfaces, text, and borders. `neutral.50` is set to `brand.canvas` so the off-white reads as the natural page surface.
+3. **Semantic** — meaning-bearing colors for status: success, warning, danger, info. These sit alongside the brand palette but are not part of brand identity.
Always reference *role* tokens (`text.default`, `surface.subtle`, `border.default`) in product code rather than raw palette values, so themes can swap without churn.
@@ -190,11 +196,18 @@ Contrast minimums:
## Typography
-The primary typeface is **Inter** (variable, 100–900). The monospace companion is **Roboto Mono**, used only for code, tabular figures, and technical content.
+KDS uses two brand typefaces:
-The scale is a modular 8-step ramp (`caption` → `display`). Use semantic tokens (`headingL`, `bodyM`) — never hardcode `font-size`. Body copy defaults to `bodyM`/16px with a 1.5 line-height for readability. Display sizes use tighter tracking (`-0.02em`) to prevent airy letterspacing at large sizes.
+- **Opificio Bold** — reserved for the **kode** wordmark and headline display moments. Available in Bold, Rounded, and Regular cuts; Bold is the canonical brand weight.
+- **Manrope** — the working typeface for all UI: headings, body, captions, and the secondary wordmark line ("design consultants"). Use the full weight ramp: ExtraLight (200), Light (300), Regular (400), Medium (500), SemiBold (600), Bold (700), ExtraBold (800).
-Web fonts are self-hosted from `assets/fonts/` and preloaded for the two most common weights (400, 600).
+The wordmark lockup pairs them: primary line in Opificio Bold (72pt, 52pt spacing), secondary line in Manrope ExtraLight (20pt, 76pt spacing).
+
+The UI scale is a modular 8-step ramp (`caption` → `display`). Use semantic tokens (`headingL`, `bodyM`) — never hardcode `font-size`. Body copy defaults to `bodyM`/16px with a 1.5 line-height for readability.
+
+A monospace stack (Roboto Mono fallback to system mono) is available for code and tabular figures only — it is **not** part of the brand identity.
+
+Web fonts are self-hosted from `assets/fonts/` and preloaded for Manrope Regular (400) and SemiBold (600), plus Opificio Bold for the wordmark.
## Layout
diff --git a/examples/web/index.html b/examples/web/index.html
index b8ae92c..02fe2be 100644
--- a/examples/web/index.html
+++ b/examples/web/index.html
@@ -3,15 +3,16 @@
- KDC Design System — Web Example
+ Kode Design Consultants — Design System Example
- KDC Design System
- A minimal page wired up to KDS tokens and fonts.
+ kode
+ design consultants
+ A minimal page wired up to the KDC design tokens and brand fonts.
diff --git a/examples/web/styles.css b/examples/web/styles.css
index e6dc410..4a0f38d 100644
--- a/examples/web/styles.css
+++ b/examples/web/styles.css
@@ -1,6 +1,9 @@
:root {
- --color-brand-primary: #0B5FFF;
- --color-brand-primary-hover: #0848C2;
+ --color-brand-primary: #6B35A7;
+ --color-brand-primary-hover: #582A8D;
+ --color-brand-primary-pressed: #45216E;
+ --color-brand-ink: #000000;
+ --color-brand-canvas: #F5F4F0;
--color-text-default: #111827;
--color-surface-bg: #FFFFFF;
--radius-md: 8px;
@@ -10,14 +13,32 @@
body {
margin: 0;
- font-family: "Inter", system-ui, sans-serif;
+ font-family: "Manrope", system-ui, sans-serif;
color: var(--color-text-default);
- background: var(--color-surface-bg);
+ background: var(--color-brand-canvas);
}
.container { max-width: 1200px; margin: 0 auto; padding: var(--space-5); }
-.display { font-size: 48px; font-weight: 700; line-height: 56px; letter-spacing: -0.02em; }
-.body { font-size: 16px; line-height: 24px; }
+
+.wordmark {
+ font-family: "Opificio", "Manrope", system-ui, sans-serif;
+ font-weight: 700;
+ font-size: 72px;
+ line-height: 80px;
+ letter-spacing: -0.01em;
+ color: var(--color-brand-primary);
+ margin: 0;
+}
+.wordmark-sub {
+ font-family: "Manrope", system-ui, sans-serif;
+ font-weight: 200;
+ font-size: 20px;
+ letter-spacing: 0.04em;
+ color: var(--color-brand-primary);
+ margin: 0 0 24px;
+}
+
+.body { font-size: 16px; line-height: 24px; }
.btn-primary {
background: var(--color-brand-primary);
@@ -26,6 +47,8 @@ body {
border-radius: var(--radius-md);
padding: 12px 20px;
font: inherit;
+ font-weight: 600;
cursor: pointer;
}
-.btn-primary:hover { background: var(--color-brand-primary-hover); }
+.btn-primary:hover { background: var(--color-brand-primary-hover); }
+.btn-primary:active { background: var(--color-brand-primary-pressed); }
diff --git a/foundations/colors/swatches.md b/foundations/colors/swatches.md
index 72a02e4..42943bc 100644
--- a/foundations/colors/swatches.md
+++ b/foundations/colors/swatches.md
@@ -1,13 +1,27 @@
# Color Swatches
-| Token | Hex | Preview |
-|-------|-----|---------|
-| `brand.primary` | `#0B5FFF` | 🟦 |
-| `brand.secondary` | `#FF6B00` | 🟧 |
-| `brand.accent` | `#00C2A8` | 🟩 |
-| `neutral.0` | `#FFFFFF` | ⬜ |
-| `neutral.900` | `#111827` | ⬛ |
-| `semantic.success` | `#16A34A` | ✅ |
-| `semantic.warning` | `#F59E0B` | ⚠️ |
-| `semantic.danger` | `#DC2626` | 🛑 |
-| `semantic.info` | `#0EA5E9` | ℹ️ |
+## Brand palette
+
+| Token | Hex | Use |
+|-------|-----|-----|
+| `brand.primary` | `#6B35A7` | Kode purple — primary brand color, links, primary actions. |
+| `brand.ink` | `#000000` | Wordmark, high-emphasis text. |
+| `neutral.0` | `#FFFFFF` | Pure white — cards, modals, top-bar. |
+| `brand.canvas` | `#F5F4F0` | Brand off-white — default page background. |
+
+## Primary state ramp
+
+| Token | Hex |
+|-------|-----|
+| `brand.primary` | `#6B35A7` |
+| `brand.primaryHover` | `#582A8D` |
+| `brand.primaryPressed` | `#45216E` |
+
+## Semantic
+
+| Token | Hex |
+|-------|-----|
+| `semantic.success` | `#16A34A` |
+| `semantic.warning` | `#F59E0B` |
+| `semantic.danger` | `#DC2626` |
+| `semantic.info` | `#0EA5E9` |
diff --git a/foundations/typography/README.md b/foundations/typography/README.md
index 99fcde8..bfc43d1 100644
--- a/foundations/typography/README.md
+++ b/foundations/typography/README.md
@@ -1,8 +1,14 @@
# Foundations · Typography
-Reference documentation for the **typography** foundation. The canonical token values
-live in [`../../design.md`](../../design.md) and the machine-readable export
-in [`../../tokens/`](../../tokens/).
+KDS uses two brand typefaces:
-This page is for human-facing rationale: when to use which token, examples,
-and platform notes.
+| Family | Use | Weights |
+|--------|-----|---------|
+| **Opificio** | Wordmark and display moments only. | Bold (700) — canonical. Rounded and Regular cuts available for editorial. |
+| **Manrope** | All UI typography — headings, body, labels, captions. | 200 ExtraLight, 300 Light, 400 Regular, 500 Medium, 600 SemiBold, 700 Bold, 800 ExtraBold |
+
+Roboto Mono is available as a non-brand fallback for code and tabular figures.
+
+The wordmark lockup pairs them: `kode` in Opificio Bold (72pt, 52pt spacing) above `design consultants` in Manrope ExtraLight (20pt, 76pt spacing).
+
+Canonical token values live in [`../../design.md`](../../design.md); machine-readable typography tokens are in [`../../tokens/typography.json`](../../tokens/typography.json).
diff --git a/tokens/colors.json b/tokens/colors.json
index 99cbeab..0d990f4 100644
--- a/tokens/colors.json
+++ b/tokens/colors.json
@@ -2,15 +2,15 @@
"$schema": "https://design-tokens.github.io/community-group/format/",
"color": {
"brand": {
- "primary": { "$value": "#0B5FFF", "$type": "color" },
- "primary-hover": { "$value": "#0848C2", "$type": "color" },
- "primary-pressed":{ "$value": "#063494", "$type": "color" },
- "secondary": { "$value": "#FF6B00", "$type": "color" },
- "accent": { "$value": "#00C2A8", "$type": "color" }
+ "primary": { "$value": "#6B35A7", "$type": "color", "$description": "Kode purple — primary brand color." },
+ "primary-hover": { "$value": "#582A8D", "$type": "color" },
+ "primary-pressed": { "$value": "#45216E", "$type": "color" },
+ "ink": { "$value": "#000000", "$type": "color", "$description": "Brand black — wordmark and high-emphasis text." },
+ "canvas": { "$value": "#F5F4F0", "$type": "color", "$description": "Brand off-white — default page surface." }
},
"neutral": {
"0": { "$value": "#FFFFFF", "$type": "color" },
- "50": { "$value": "#F7F8FA", "$type": "color" },
+ "50": { "$value": "#F5F4F0", "$type": "color", "$description": "Aliased to brand.canvas." },
"100": { "$value": "#EDEFF3", "$type": "color" },
"200": { "$value": "#D9DCE3", "$type": "color" },
"300": { "$value": "#B8BDC9", "$type": "color" },
diff --git a/tokens/typography.json b/tokens/typography.json
index a05296a..0404833 100644
--- a/tokens/typography.json
+++ b/tokens/typography.json
@@ -1,14 +1,15 @@
{
"typography": {
- "display": { "fontFamily": "Inter", "fontSize": "48px", "fontWeight": 700, "lineHeight": "56px", "letterSpacing": "-0.02em" },
- "headingXL": { "fontFamily": "Inter", "fontSize": "32px", "fontWeight": 700, "lineHeight": "40px" },
- "headingL": { "fontFamily": "Inter", "fontSize": "24px", "fontWeight": 600, "lineHeight": "32px" },
- "headingM": { "fontFamily": "Inter", "fontSize": "20px", "fontWeight": 600, "lineHeight": "28px" },
- "headingS": { "fontFamily": "Inter", "fontSize": "16px", "fontWeight": 600, "lineHeight": "24px" },
- "bodyL": { "fontFamily": "Inter", "fontSize": "18px", "fontWeight": 400, "lineHeight": "28px" },
- "bodyM": { "fontFamily": "Inter", "fontSize": "16px", "fontWeight": 400, "lineHeight": "24px" },
- "bodyS": { "fontFamily": "Inter", "fontSize": "14px", "fontWeight": 400, "lineHeight": "20px" },
- "caption": { "fontFamily": "Inter", "fontSize": "12px", "fontWeight": 500, "lineHeight": "16px", "letterSpacing": "0.02em" },
- "mono": { "fontFamily": "Roboto Mono", "fontSize": "14px", "fontWeight": 400, "lineHeight": "20px" }
+ "display": { "fontFamily": "Opificio", "fontSize": "72px", "fontWeight": 700, "lineHeight": "80px", "letterSpacing": "-0.01em", "$description": "Wordmark / hero only." },
+ "wordmarkSecondary": { "fontFamily": "Manrope", "fontSize": "20px", "fontWeight": 200, "lineHeight": "28px", "letterSpacing": "0.04em", "$description": "Secondary lockup line: 'design consultants'." },
+ "headingXL": { "fontFamily": "Manrope", "fontSize": "32px", "fontWeight": 700, "lineHeight": "40px" },
+ "headingL": { "fontFamily": "Manrope", "fontSize": "24px", "fontWeight": 600, "lineHeight": "32px" },
+ "headingM": { "fontFamily": "Manrope", "fontSize": "20px", "fontWeight": 600, "lineHeight": "28px" },
+ "headingS": { "fontFamily": "Manrope", "fontSize": "16px", "fontWeight": 600, "lineHeight": "24px" },
+ "bodyL": { "fontFamily": "Manrope", "fontSize": "18px", "fontWeight": 400, "lineHeight": "28px" },
+ "bodyM": { "fontFamily": "Manrope", "fontSize": "16px", "fontWeight": 400, "lineHeight": "24px" },
+ "bodyS": { "fontFamily": "Manrope", "fontSize": "14px", "fontWeight": 400, "lineHeight": "20px" },
+ "caption": { "fontFamily": "Manrope", "fontSize": "12px", "fontWeight": 500, "lineHeight": "16px", "letterSpacing": "0.02em" },
+ "mono": { "fontFamily": "Roboto Mono", "fontSize": "14px", "fontWeight": 400, "lineHeight": "20px" }
}
}