Chapter 4: Design Systems (1.D)
Exam topic 1.D: Implement consistent typography, color systems, and reusable style foundations.
Exam topic 1.D: Implement consistent typography, color systems, and reusable style foundations.
Key terms: HTML tags, typography scales, global styles, variables, reusable patterns.
Weight: 6% of the exam (about 3 questions)
A design system is the set of decisions that keep a site consistent: which colours exist, which type sizes exist, how much space goes between things, and which patterns are reused. In Webflow you encode those decisions in four layers:
Variables (tokens) → Tag styles (global defaults) → Classes & utilities → Components
"brand blue" "every H2 looks like this" "section padding" "Card", "Button"
The earlier chapters covered classes (Chapter 1) and components (Chapter 3). This chapter covers the foundation underneath them.
4.1 HTML tags: semantics first, styling second
A design system starts with the right element for the job, because semantics drive accessibility and SEO:
| Element | Use for |
|---|---|
H1–H6 |
Document outline: one H1 per page describing the page topic, then logical nesting |
p |
Paragraphs of text |
a (Link) |
Navigation to another page/location |
button |
Actions on the current page (open modal, submit, toggle) |
ul / ol |
Lists of related items (nav links, features) |
section, header, footer, nav, main, article, aside |
Landmarks screen readers jump between |
blockquote, figure, figcaption |
Quotes, captioned media |
Webflow lets you set the HTML tag of Div Blocks/Sections (e.g. make a Div a <header> or <article>) and change heading levels from element settings.
Separate meaning from appearance
The heading level says what the content is. The visual size is a styling decision. If a design calls for a small H2 or a huge H3, keep the correct tag and use a class (e.g. heading-style-h4) to change its appearance. Never choose a heading level because of how big it looks. This is one of the most common exam scenarios.
4.2 Global styles: tag selectors
In the Selector field you can style tags instead of classes: Body (All pages), All H1 Headings through All H6, All Paragraphs, All Links, All Lists, All Blockquotes and so on. These styles apply site-wide.
What belongs on tag selectors
- Body (All pages): base
font-family,font-size(e.g.1rem),line-height,color, andbackground. Everything inherits from here (Chapter 1, style inheritance). - All H1–H6: font family, weight, size from the type scale, line height, margins.
- All Paragraphs: margins, maximum line length if appropriate.
- All Links: colour and underline treatment, plus focus/hover states.
Why it matters, especially for Rich Text and the CMS
Content from a Rich Text element or a CMS rich text field arrives as plain tags without classes. Your tag styles are the only thing styling a blog post’s H2s, paragraphs, lists and links. A site with no global tag styles shows unstyled CMS content.
Where Rich Text needs styling that differs from the site-wide default, create a class on the Rich Text element (e.g. text-rich-text) and style tags nested inside it. Webflow writes descendant selectors like .text-rich-text h2, which affect only content inside that wrapper.
Specificity order (low → high)
Tag selector (h2) < Class (.heading-style-h2) < Combo (.heading.is-large) < inline / custom !important
Classes override tag styles. Use that on purpose: tags set the defaults, classes make exceptions.
4.3 Typography scales
A type scale is a fixed, limited set of sizes generated from a base and a ratio, rather than sizes picked by eye.
Modular scale example
Base 1rem (16px), ratio 1.25 (major third):
| Step | Calculation | rem | px |
|---|---|---|---|
| Small | 1 ÷ 1.25 | 0.8rem | 12.8 |
| Body | 1 | 1rem | 16 |
| H6 / Large | 1 × 1.25 | 1.25rem | 20 |
| H5 | 1.25² | 1.563rem | 25 |
| H4 | 1.25³ | 1.953rem | 31.25 |
| H3 | 1.25⁴ | 2.441rem | 39 |
| H2 | 1.25⁵ | 3.052rem | 48.8 |
| H1 | 1.25⁶ | 3.815rem | 61 |
Larger ratios (1.333, 1.5) suit expressive marketing pages. Smaller ratios (1.125–1.2) suit dense app or documentation UIs.
Responsive type: two strategies
- Stepped: reduce heading sizes at Tablet and Mobile breakpoints (often by moving to a smaller ratio).
- Fluid: one
clamp()value per step:
--h1: clamp(2.5rem, 1.6rem + 3.2vw, 3.815rem);
Fluid type needs fewer overrides. Keep a rem part in the middle so it respects user zoom and font settings.
Line height and measure
- Body text line-height around 1.4–1.6. Headings tighter (1.1–1.3). Use unitless values (
1.5) so they scale with font size. - Line length (measure): 45–75 characters.
max-width: 65chon paragraph containers. - Allow enough letter and word spacing for readability. WCAG 1.4.12 Text Spacing requires that layouts don’t break when users increase it.
Utility classes for type
Provide classes for the scale that are independent of tags: text-size-large, text-size-small, heading-style-h3, text-weight-bold. They let you style text visually without breaking semantics.
4.4 Variables (design tokens)
Variables in Webflow are named values (stored as CSS custom properties) that you use in place of hard-coded values. Common types include colour, size, font family, and number/percentage.
:root {
--brand--primary: #146ef5;
--neutral--900: #0b0b0b;
--space--section: 6rem;
--font--heading: "Inter", sans-serif;
}
.button { background-color: var(--brand--primary); }
Primitive vs. semantic tokens
Mature systems use two tiers:
| Tier | Example | Purpose |
|---|---|---|
| Primitive | blue-600 = #146ef5, neutral-50 = #fafafa |
The raw palette. Rarely used directly in styles |
| Semantic / alias | color-text-primary → neutral-900, color-action → blue-600, color-surface → neutral-50 |
Meaning-based names used in styles |
Styles reference semantic variables. When the brand colour changes, you update one primitive. When the “action” colour should become green, you re-point one alias. Webflow variables can reference other variables, which is what makes this two-tier setup possible.
Modes: theming without duplication
Variable modes let one variable hold different values in different contexts, typically light and dark, or per-brand themes. A section set to the dark mode reads every color-text, color-surface and so on from its dark values. You don’t need a duplicated section-dark class tree or per-element overrides. The components stay the same; only the token values change.
Why variables beat hard-coded values and legacy swatches
- Single source of truth: change a value once, it updates everywhere.
- Consistency: builders pick from the defined set instead of eyeballing
#1470f4. - Theming: modes and aliases make dark mode and sub-brands practical.
- Portability: variables can be shared through libraries (Chapter 3), so every site in a Workspace uses the same tokens.
- Developer alignment: they map directly to CSS custom properties, and through DevLink to code.
Size variables for spacing
Define a spacing scale as variables (space-xs 0.5rem, space-s 1rem, space-m 2rem, space-l 4rem, space-xl 6rem…) and use them for padding, margin and gap. Same idea as the type scale: a limited set of allowed values produces visual rhythm.
4.5 Colour systems and contrast
A colour system isn’t just a palette. It’s a set of approved pairings that meet contrast requirements:
| WCAG 2.x requirement (AA) | Minimum contrast |
|---|---|
| Normal text | 4.5:1 |
| Large text (≥ 24px regular, or ≥ ~18.66px bold) | 3:1 |
| UI components and meaningful graphics (borders of inputs, icons, focus indicators) | 3:1 |
| AAA (enhanced) normal / large text | 7:1 / 4.5:1 |
Encode pairings into semantic variables (color-text-on-action, color-text-on-surface) so a builder can’t easily put light grey text on white by accident. Remember mode values must pass contrast too: dark mode is a second palette that needs its own check.
Also: don’t use colour alone to convey meaning (WCAG 1.4.1). Error states need text or an icon, not just red.
4.6 Reusable patterns
Reusable patterns are the layer between tokens and full components: layout and utility classes used throughout the site.
| Pattern | Example class | What it does |
|---|---|---|
| Section spacing | padding-section-medium |
Consistent vertical rhythm |
| Global gutter | padding-global |
Consistent left/right page padding |
| Container | container-large / container-small |
Consistent max-widths, centred |
| Layout | layout-grid-3col |
Standard grid configurations |
| Type utilities | text-align-center, text-size-large |
Visual adjustments without new classes |
| Visibility | hide-mobile-portrait |
Responsive show/hide |
| Accessibility | sr-only (visually hidden) |
Text for screen readers only |
The sr-only pattern is worth memorising as a developer:
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
Use it for “Opens in new tab” hints, icon-only button labels and skip links.
Documenting the system: a style guide page
Create a style guide page (set to not be indexed, or behind a password), showing: tag styles, type scale, colour variables with contrast notes, spacing scale, buttons and form elements, and key components with their variants. It’s where you test changes, where new team members learn the system, and where clients see what they can use.
4.7 Putting it together: a scalable setup order
- Variables: primitives, then semantic aliases; modes if theming is needed.
- Body (All pages): font, base size
1rem, line height, text colour, background. - Tag styles: H1–H6, paragraphs, links, lists, blockquote. All from variables.
- Utility and layout classes: container, section padding, gutter, type utilities,
sr-only. - Components: buttons, cards, navbars, using variables and utilities with variants.
- Style guide page: documents and tests everything above.
- Library (optional): share it all across Workspace sites.
Practice questions: Design Systems
Q1 A brand’s primary colour is used on 60 classes across the site. The brand is updated to a new shade. What setup would make this a one-step change?
Show answer
Answer: a. A colour variable is the single source of truth: update its value once and all 60 classes update. (b) combo classes don’t centralise a value. (c) hex values mean 60 manual edits. (d) !important overrides bypass the system and cause specificity problems.
Q2 A design shows a section title that should be visually small, but structurally it’s the main heading of that section, below the page’s H1. What’s correct?
Show answer
Answer: b. Heading levels describe document structure. Under the page’s H1, a section’s main heading is an H2. Visual size is a styling concern handled by a class. (a) choosing the level by appearance breaks the outline used by screen readers and search engines. (c) loses heading semantics altogether. (d) adds a second H1 and an incorrect structure.
Q3 (Multi-select) Blog posts from a CMS rich text field show unstyled headings and lists. Which approaches fix this in a maintainable way? (Choose two.)
Show answer
Answer: a and b. Rich text output is plain tags, so global tag styles cover it. Where blog content should differ from the site default, nested tag styles under a Rich Text class target only that content. (c) editors can’t reliably add classes inside rich text, and it doesn’t scale. (d) throws away the CMS.
Q4 A team wants light and dark sections using the same components without creating duplicate “-dark” classes for everything. Which feature fits best?
Show answer
Answer: a. Variable modes switch token values per context, so the same components and classes render light or dark. (b) combo classes on every element is the duplication modes avoid. (c) doubles the components. (d) filters distort images and brand colours and cause contrast problems.
Q5 Using the WCAG 2.x AA standard, what’s the minimum contrast ratio for normal-sized body text?
Show answer
Answer: b. WCAG AA requires 4.5:1 for normal text. (a) 3:1 is for large text and UI components. (c) 7:1 is AAA for normal text. (d) 2:1 doesn’t meet any WCAG text requirement.
Q6 (Multi-select) Which are characteristics of a well-built typography system? (Choose three.)
Show answer
Answer: a, b and d. A ratio-based scale, a rem base on the Body tag and visual utility classes that separate appearance from semantics are the core of a scalable type system. (c) choosing heading tags by size breaks semantic structure.
Q7 Why do mature design systems use semantic variables (e.g. color-action) that point to primitive variables (e.g. blue-600), instead of referencing primitives directly in classes?
Show answer
Answer: b. Aliasing separates what a colour means from what the colour is. You can re-theme meaning-level uses (or swap per mode) without touching the raw palette or individual classes. (a), (c) false. (d) the effect on performance is negligible; the benefit is maintainability.
Q8 Which element should be used for a control that opens a modal on the same page?
Show answer
Answer: b. Actions on the current page are buttons. Links navigate. A <button> is focusable, keyboard-operable (Enter/Space) and announced correctly. (a) href="#" misrepresents the control and can jump to the top of the page. (c) a plain Div isn’t focusable or announced. (d) headings aren’t controls.
Q9 A site’s H2 tag style sets font-size: 3rem. An element with tag H2 and class heading-style-h4 (which sets font-size: 1.5rem) renders at what size?
Show answer
Answer: b. Class selectors (0,1,0) are more specific than tag selectors (0,0,1), so the class’s 1.5rem wins regardless of order. (a) is backwards. (c) CSS values don’t add up. (d) source order only decides between selectors of equal specificity.
Q10 (Multi-select) Which items belong on a style guide page for a Webflow design system? (Choose three.)
Show answer
Answer: a, b and c. A style guide documents and tests the system: type, colour (with contrast pairings) and components and their variants. (d) analytics aren’t part of a design system.
Q11 A developer wants icon-only social buttons to be understandable to screen-reader users without showing visible text. What’s the best reusable pattern?
Show answer
Answer: a. Visually hidden text (the sr-only pattern) or an accessible label gives the button a name screen readers announce (WCAG 4.1.2, 2.4.4) without changing the visual design. Making it a utility class means it’s reusable everywhere. (b) the icon still has no accessible name. (c) file names aren’t reliably announced and often aren’t meaningful. (d) display: none hides the text from screen readers too.
Q12 A designer spaces sections with values like 87px, 92px and 100px chosen by eye, and pages look inconsistent. What’s the best systemic fix?
Show answer
Answer: a. A limited spacing scale in variables, applied through section-padding utilities, gives consistent rhythm and a single place to adjust it. (b) percentage padding is relative to the parent’s width, so vertical rhythm changes with viewport width. (c) per-page overrides make the inconsistency worse. (d) removes the problem by removing the design.