Typography
The marketing type scale: ABC Arizona for display, Inter for everything else.
Rogo answers
Rogo answers
Rogo answers
Rogo answers
Rogo answers
Rogo answers
Overview
Not the product's type scale. packages/ui owns the type-* utilities the app uses; these are
type-marketing-* and belong to brand surfaces only. The two scales are built for different jobs
(the marketing scale opens at 88px in a serif, where the product's largest title is 36px), so
mixing them produces a surface that reads as neither.
The font files live in the app, not the package. Brand names its faces through CSS variables,
so a consumer loads the faces (next/font localFont, as this app does in layout.tsx) and exposes
them on <html>. Shipping licensed binaries inside a published package would push that licence
onto every consumer, and next/font hashes family names anyway, so naming "ABC Arizona Mix"
literally in CSS falls back to Georgia.
Three faces:
| Variable | Face | Used by |
|---|---|---|
--marketing-font-display | ABC Arizona Mix | the Display scale |
--marketing-font-title | Inter Display | the Title scale |
--marketing-font-body | Inter | the Body scale |
@import "@rogo-technologies/brand/styles";<h1 className="type-marketing-display-xl">Rogo answers the questions analysts actually ask</h1>
<p className="type-marketing-body-regular-md">…</p>Display
The serif voice. display-3xl down to display-sm, in Arizona Mix. Use for page openers and
section headlines.
Title
Rogo answers
Rogo answers
Rogo answers
Rogo answers
Rogo answers
Rogo answers
Rogo answers
Rogo answers
Inter Display at weight 500. Use where a serif heading would be too editorial: product sections, cards, dense layouts.
Body Regular
Rogo answers the questions analysts actually ask, sourced back to the filing.
Rogo answers the questions analysts actually ask, sourced back to the filing.
Rogo answers the questions analysts actually ask, sourced back to the filing.
Rogo answers the questions analysts actually ask, sourced back to the filing.
Inter 400. Body copy, supporting lines, labels.
Body Medium
Rogo answers the questions analysts actually ask, sourced back to the filing.
Rogo answers the questions analysts actually ask, sourced back to the filing.
Rogo answers the questions analysts actually ask, sourced back to the filing.
Rogo answers the questions analysts actually ask, sourced back to the filing.
The same sizes as Body Regular, at weight 500.
Responsive steps are not wired up yet
The sizes above are the desktop values. Narrower-viewport sizes are not turned into media queries yet.
The breakpoint widths themselves are already stated in one place, packages/brand/src/styles/breakpoints.css, as an opt-in import
for the marketing site only: it replaces Tailwind's entire breakpoint scale, so importing it into
an app that ships product UI would repoint every existing sm:/md:/lg: utility there.