Foundations

Typography

Three layers, strict separation. Oswald's condensed industrial structure connects the headings back to the Agency FB tagline. DM Sans's geometric forms echo the curves of the wordmark.

The three layers

Layer 1 · Logotype

Upryt logotype

Custom drawn. Logo only. Never typeset, never rebuilt from a font.

Layer 2 · Lockup

Agency FB

Tagline and lockup font, reserved for YOUR GROWTH PARTNERS. Licensed desktop font: do not embed on the web. Use the supplied image or SVG lockups instead.

Layer 3 · Web

Oswald + DM Sans

Oswald 500/600 carries every heading. DM Sans carries body, UI and captions. Both are free via Google Fonts.

Google Fonts embed

Scale

Desktop sizes. Mobile values shown where they differ. Nothing lives between the steps.

H1

Own the number

One per page. Page title.

H2

Own the number

Section openers.

H3

Own the number

Sub-sections.

H4

Own the number

Card titles.

H5

Own the number

List headers, small titles.

H6 / Eyebrow

Who we serve

Kicker above H1 or H2. Cyan 800.

Lead

Own the number

Intro paragraph under a heading.

Body

Own the number

Default copy. Max 68 characters.

Body strong

Own the number

Emphasis inside body copy.

Small

Own the number

Helper text, table cells.

Caption

Own the number

Labels, metadata.

The eyebrow pattern

H6 doubles as the kicker: uppercase Oswald in cyan-800 above an H1 or H2, raw cyan in dark mode. This is the primary place cyan enters typography.

Who we serve

Multi-location operators

Lead paragraph, DM Sans 400 at 20px. It sets up the section and never runs past 68 characters of measure.

Pressure test

Type a headline and read it at H1 size.

The last marketing team you will ever hire.

Setting rules

Do

  • Cap paragraph measure at 68 characters, max-width 42rem.
  • Use the eyebrow pattern to introduce sections.
  • Keep one H1 per page and never skip heading levels.
  • Use sentence case for headings, uppercase only for the eyebrow.

Don't

  • Set body copy in Oswald or headings in DM Sans.
  • Re-typeset the logo or tagline in web fonts.
  • Use Agency FB for headings or body copy.
  • Underline anything that is not a link, or bold whole paragraphs.