Guidelines

Typography

Grotzec for the big statements, Suisse for everything people read, an editorial serif for the voices of others. Every piece of type on a Builtwell page is one of the classes below.

Families

Four families, each with one job. Loaded with next/font in packages/design-system/lib/fonts.ts.

FT Grotzec Poster

X Condensed Bold, 700

display-2xl only. The poster voice, for the one line a page is remembered by.

FT Grotzec Condensed

Condensed Bold, 700

Big headings in uppercase: display-xl to display-md, h1, h2, menu and footer links.

Suisse Intl

Light 300, Regular 400

Everything people read: h3 to h6, every paragraph size, the interface. The body's default.

PP Editorial New

Light, 300

quote-serif only. Testimonials and pull quotes.

Code, tokens and file paths use IBM Plex Mono, through font-mono.

Type scale

Every size is fluid: it grows in a straight line from the 390px viewport to 1920px, so there is nothing to set per breakpoint.

Display

Poster sizes in Grotzec, uppercase. One per section at most.

f-display-2xl

104 → 264px

The poster. One per page at most: the home hero, a campaign opener.

Builtwell

f-display-xl

80 → 200px

A statement that fills the width: a section opener on a landing page.

Brand, web, marketing

f-display-lg

56 → 168px

Big numbers and short statements inside a section.

Built to last

f-display-md

56 → 128px

The smallest poster size: stats, price headlines.

$12,000 value

Headings

h1 and h2 are Grotzec Condensed, uppercase. From h3 down, headings are Suisse Light in sentence case; paired classes (h3-h5) name their desktop and phone sizes.

f-h1

56 → 104px

The page title. One per page.

Design that does the work

f-h2

40 → 80px

Section titles. Condensed and uppercase, like the h1, a step down.

Selected work

f-h3

36 → 64px

The first reading heading: an intro line, a feature title.

A modern website designed and built to perform.

f-h3-h5

28 → 64px

An h3 on desktop that relaxes to h5 on a phone, for long headings.

We uncover your story and hand you a brand system you can use.

f-h3-h6

24 → 64px

An h3 on desktop that drops to h6 on a phone, for tight columns.

Original photos of products, people and lifestyle.

f-h4

32 → 56px

Pull statements between sections, set light.

Your website is the only digital space you truly control.

f-h5

28 → 40px

Card and section subtitles; the docs' own section titles.

Branding, websites and marketing

f-h5-h7

22 → 40px

Card titles that shrink on a phone: project names in a grid.

Raíces, a heritage brand

f-h6

24 → 32px

The smallest heading: list titles, a plan name in a pricing table.

In-house-like, $4,500 a month

Paragraphs

Suisse for everything people read. Light down to p-base, Regular for the small sizes so they hold up.

f-p-xl

28 → 38px

A lead that is almost a heading: the first line of a case study.

A heritage brand plants deep roots to cultivate authentic connections.

f-p-lg

19 → 32px

Leads under a page title.

Branding isn't a logo, a colour palette or a tagline. It's the feeling people get when they think about you.

f-p-md

19 → 26px

Long-form reading: articles, case study text, docs leads.

Competitors can copy your features and undercut your price. They can't steal your story.

f-p-base

18 → 22px

Default body copy in blocks.

A fast push to give your idea a clear face: a logo, colours and lightweight guidelines to launch quickly.

f-p-sm

16 → 18px

Secondary copy, card descriptions, UI text in the docs.

Your designer on call every month: site updates, content and quick-turn projects, without hiring.

f-p-xs

15 → 16px

Captions, eyebrows, labels, legal copy.

Raíces · 2024 · Branding

f-p-2xs

14px

Interface text: sidebars and dense lists. Matches shadcn's text-sm.

Overview · Buttons · Dialog · Select

Navigation and quotes

Condensed links for the menu and footer, and the serif, which only ever sets a quote.

f-menu

22 → 24px

Primary navigation and the full-screen menu.

f-footer-link

28 → 64px

The big links in the footer.

f-quote-serif

28 → 56px

Testimonials and quotes. The only place the serif appears.

We're a small studio that loves working with founders who care about craft.

Sizes at a glance

Every typeset at the phone, tablet and desktop widths, in px, from frontend.config.json.

Class	Family	Mobile	Tablet	Desktop
`f-display-2xl`	FT Grotzec Poster	104	170	264
`f-display-xl`	FT Grotzec Condensed	80	130	200
`f-display-lg`	FT Grotzec Condensed	56	102	168
`f-display-md`	FT Grotzec Condensed	56	86	128
`f-h1`	FT Grotzec Condensed	56	76	104
`f-h2`	FT Grotzec Condensed	40	57	80
`f-h3`	Suisse Intl	36	48	64
`f-h3-h5`	Suisse Intl	28	43	64
`f-h3-h6`	Suisse Intl	24	41	64
`f-h4`	Suisse Intl	32	42	56
`f-h5`	Suisse Intl	28	33	40
`f-h5-h7`	Suisse Intl	22	29	40
`f-h6`	Suisse Intl	24	27	32
`f-menu`	FT Grotzec Condensed	22	23	24
`f-footer-link`	FT Grotzec Condensed	28	43	64
`f-p-xl`	Suisse Intl	28	32	38
`f-p-lg`	Suisse Intl	19	24	32
`f-p-md`	Suisse Intl	19	22	26
`f-p-base`	Suisse Intl	18	20	22
`f-p-sm`	Suisse Intl	16	17	18
`f-p-xs`	Suisse Intl	15	15	16
`f-p-2xs`	Suisse Intl	14	14	14
`f-quote-serif`	PP Editorial New	28	40	56

Using the classes

Name the role, never the size. A class carries family, size, leading, tracking and case together, so they can't drift apart.

<h1 className="f-h1">Design that does the work</h1>
<p className="f-p-lg text-muted-foreground">
  A modern website designed and built to perform.
</p>
<blockquote className="f-quote-serif">…</blockquote>

className="f-h1 text-bw-black"

DoOne class from the scale, plus colour if it needs it.

className="font-condensed text-6xl uppercase"

Don'tRebuilding a heading from a family and Tailwind sizes. It stops being fluid and drifts from the scale; bracketed values fail the no-arbitrary-type lint.

Rules

Grotzec (poster and condensed) is only for big headings: display-*, h1, h2, menu and footer links. Never for paragraphs, labels or UI text.
Use the classes. No Tailwind text sizes, and no bracketed size, leading or tracking values.
Write copy in sentence case; the classes that need capitals set them.
One display-2xl per page at most. It is the poster, not a heading level.
quote-serif is for quotes and testimonials only.
Pick the class for the look and the element for the outline: an h2 element can wear h5.