FOUNDATIONS

Typography

Audiowide for display, Exo 2 for body and UI. The personality lives in weight, tracking, and the eyebrow mono accent — no extra families needed.

Specimens

DISPLAY · AUDIOWIDE · GOOGLE FONTS

Damo UI

BODY · EXO 2 · GOOGLE FONTS

Every token in its place.

Scale

Display XL

Damo UI · tokens and components

68px / 400
--font-display

Display L

Damo UI · tokens and components

48px / 400
--font-display

Display M

Damo UI · tokens and components

36px / 400
--font-display

Display S

Damo UI · tokens and components

24px / 400
--font-display

Body XL

Damo UI · tokens and components

20px / 500
--font-body

Body L

Damo UI · tokens and components

18px / 500
--font-body

Body M

Damo UI · tokens and components

16px / 400
--font-body

Body S

Damo UI · tokens and components

14px / 400
--font-body

Caption

Damo UI · tokens and components

12px / 500
--font-body

Mono / Eyebrow

DAMO · UI · DESIGN

11px / 700
--font-mono

Loading the fonts

The lib ships var(--font-*) tokens but does not embed font files. Load Audiowide + Exo 2 yourself (Google Fonts link or next/font) and bind the families to the lib's variables.

1// app/layout.tsx — load Audiowide + Exo 2 from Google Fonts
2export default function RootLayout({ children }) {
3  return (
4    <html lang="en">
5      <head>
6        <link rel="preconnect" href="https://fonts.googleapis.com" />
7        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
8        <link
9          href="https://fonts.googleapis.com/css2?family=Audiowide&family=Exo+2:wght@300;400;500;600;700;800&display=swap"
10          rel="stylesheet"
11        />
12      </head>
13      <body>{children}</body>
14    </html>
15  )
16}
17

1/* app/globals.css — bind your loaded families to the lib's variables */
2:root {
3  --font-display: 'Audiowide', system-ui, sans-serif;
4  --font-body: 'Exo 2', system-ui, sans-serif;
5  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
6}
7

Or use Next.js next/font/google for self-hosted, FOUT-free loading:

1// app/layout.tsx — Next.js 'next/font/google' alternative
2import { Audiowide, Exo_2 } from 'next/font/google'
3
4const display = Audiowide({
5  subsets: ['latin'],
6  weight: '400',
7  variable: '--font-display',
8  display: 'swap',
9})
10
11const body = Exo_2({
12  subsets: ['latin'],
13  weight: ['400', '500', '600', '700'],
14  variable: '--font-body',
15  display: 'swap',
16})
17
18export default function RootLayout({ children }) {
19  return (
20    <html lang="en" className={`${display.variable} ${body.variable}`}>
21      <body>{children}</body>
22    </html>
23  )
24}
25

Using fonts in JSX (Tailwind)

Three Tailwind utilities map to the three families: font-display, font-body, font-mono.

Damo UI

Body copy uses the body family by default.

npm install damo-ui

1// In JSX: use the lib's Tailwind utilities
2<h1 className="font-display text-5xl leading-[0.95]">
3  Damo UI
4</h1>
5<p className="font-body text-base text-foreground/80">
6  Body copy uses the body family by default — explicit class for clarity.
7</p>
8<code className="font-mono text-sm">
9  npm install damo-ui
10</code>
11

Helper classes

Three CSS classes ship with damo-ui/styles/globals.css for the most common Memphis-flavoured patterns.

Display heading

read-only mono spanSECTION LABEL

1// Three CSS helpers ship in damo-ui/styles/globals.css
2<h2 className="display">Display heading</h2>
3<code className="mono">read-only mono span</code>
4<span className="eyebrow">SECTION LABEL</span>
5

Using fonts in CSS

1/* In a stylesheet — read the variable */
2.callout {
3  font-family: var(--font-display);
4  font-size: 28px;
5  letter-spacing: 0.02em;
6  line-height: 1.1;
7}
8
9.code-pill {
10  font-family: var(--font-mono);
11  font-size: 11px;
12  letter-spacing: 0.04em;
13}
14

The eyebrow pattern

Section headers in Damo UI pair an uppercase mono accent (the "eyebrow") with a display headline. The contrast in family + tracking is what gives the layout its Memphis edge.

FOUNDATIONS

Typography

Sub-copy explaining the section.

1// The "eyebrow" pattern: small uppercase mono accent above a heading.
2// Helps with hierarchy and ties into the Memphis vibe.
3<section>
4  <span className="eyebrow">FOUNDATIONS</span>
5  <h2 className="font-display text-4xl">Typography</h2>
6  <p className="text-muted-foreground">
7    Sub-copy explaining the section.
8  </p>
9</section>
10

Need to swap fonts entirely? Override --font-display, --font-body, --font-mono at :root — every utility and helper re-points automatically. See Tokens for the override pattern.

← Colors Patterns →