Every concept you learned in Week 1 lives somewhere in this website. This document shows you where each one is, and how it was applied.
Kopi & Co is a fictional specialty coffee roastery in Braamfontein, Johannesburg. You will rebuild this website in Elementor this week as your practice exercise.
The website has three sections plus a navigation bar and footer:
Every design concept from Week 1 is applied somewhere in this site. This document is your map.
Read the guideline before you start rebuilding. Then keep it open while you work. When you are not sure why a value is what it is, come back here. If you finish rebuilding early, experiment. Try breaking a rule on purpose and see what happens. That is how you really learn.
Kopi & Co uses exactly two font families. No more.
Used for all headings, the logo, prices, and key values. A serif gives the brand a crafted, editorial, slightly luxurious feel. Coffee roasting is an old craft. A serif signals tradition and attention to detail.
Where: Every text element on the page uses either Playfair Display or Inter. Nothing else.
How: Headings and brand elements get the serif. Everything functional gets the sans-serif. This gives you visual variety while keeping the site cohesive.
The letters have little feet at their ends. You can see it clearly in the main headline "Coffee with a story in every cup." on the hero section. The word story is italicised and coloured brown to add emphasis without changing the font.
The letters have clean, simple ends with no feet. You can see it in the subheading paragraph below the hero headline, in every button, and in every price unit (R285 / 250g).
Display typography means very large, attention-grabbing headlines used for impact. The hero headline uses Playfair Display at 72 px with weight 900 (the heaviest available). This is the display treatment. At this size and weight, the font behaves differently than when used at smaller sizes.
Line-height is the vertical space between lines of text. It is one of the most important typographic decisions you will make.
Where: All body paragraphs on the site.
How: Set to 1.7 for comfortable reading. Airy spacing between lines stops the eye getting tired. You can see this in the hero subheading paragraph and in the coffee card descriptions.
Where: All H1, H2, and H3 headings.
How: Set to 1.15 for tight, strong headings. Tight line-height makes headings feel decisive and grouped. Airy line-height on a heading looks disconnected.
Where: The main hero headline.
How: Set to 1.05, even tighter. At display sizes, line-height must shrink or the headline falls apart visually.
Letter-spacing (also called tracking) controls the space between individual letters.
Where: The hero headline and other large H1 and H2 headings.
How: Set to -0.01em to -0.02em (slightly negative). At large sizes, serif letters can feel loose. A small negative value tightens them visually without making them cramped.
Where: Every overline label on the site: ROASTED IN BRAAMFONTEIN, SINGLE ORIGIN, THE ROASTERY, ETHIOPIA | YIRGACHEFFE.
How: Set to 0.12em (positive and generous). Capital letters are wider than lowercase, so they feel cramped at default spacing. Adding space between them makes them readable and elegant.
Where: Regular paragraphs.
How: Left at default (0). Adding letter-spacing to body text hurts readability. Never do it.
Word-spacing is the space between entire words. This is rarely adjusted in web design, but knowing it exists matters.
Where: All body paragraphs.
How: Set to a tiny 0.02em positive value. This gives prose a bit more breathing room without being noticeable. If you set it much higher, text starts looking strange.
Default word-spacing works for 95 percent of cases. Only touch it if text feels cramped and line-height adjustments have not fixed it.
Font contrast is how you make some text feel important and other text feel secondary. You create contrast four ways.
The hero headline is 72 px. The subheading below it is 20 px. That is a 3.6x difference. The eye immediately knows the headline is the most important thing.
The hero headline is weight 900 (black). The subheading is weight 400 (regular). Same family, same colour, but the weight difference creates hierarchy.
Headings are near-black (#1a1a1a). Body text is medium grey (#6b6b6b). Captions are lighter grey (#9a9a9a). The darker the text, the more important it feels.
Serif for headings, sans-serif for body. The visual difference between the two families creates a secondary layer of hierarchy.
Where: The hero section.
How: The hero headline uses the biggest size, heaviest weight, darkest colour, AND the serif family. Four different kinds of contrast stacked on the same element. That is why your eye goes there first.
Every spacing value on the site comes from multiples of 4:
Nowhere on this site will you find a spacing value of 7, 13, 22, or 35. Every single number comes from the scale above.
This is implemented as CSS variables at the top of the stylesheet. You can see them named space-1 through space-32. Each one corresponds to a value on the grid.
Where: The Our Coffee section and the Visit Us section.
How: Padded 96 px top and 96 px bottom. Major page sections get generous breathing room so the content feels important and separate from what came before.
Where: The main container that holds all content.
How: Padded 24 px left and right on mobile, 32 px on tablet and up. This stops content from touching the edge of the screen.
Where: The primary "Shop Our Coffee" button.
How: Padded 16 px vertical and 32 px horizontal. Wider horizontal padding gives buttons their characteristic pill shape and makes them easy to tap on mobile.
Where: Each coffee product card.
How: Padded 32 px inside. Big enough to give the text breathing room, not so big that the card feels empty.
Where: The "Est. Since 2019" badge sitting on the hero image.
How: Padded 16 px vertical and 20 px horizontal. Just enough to surround the text with colour without feeling bloated.
Where: The "ROASTED IN BRAAMFONTEIN" label at the top of the hero.
How: Has 20 px of margin below it. This creates visible but tight proximity between the label and the headline that follows.
Where: The main hero headline.
How: Has 24 px of margin below it, connecting it to the subheading paragraph.
Where: The hero subheading.
How: Has 40 px of margin below it, creating distance before the buttons. The bigger gap signals a change in purpose (from explaining to asking for action).
Where: Below the "This month's selections" title.
How: Has 64 px of margin below it. Bigger margin because a major section transition is happening.
Gap is the modern way to add space between children in a flex or grid layout. It replaces the old habit of adding margin to every child.
Where: The three-card grid in the Our Coffee section.
How: Set to 32 px. The cards breathe apart without looking disconnected.
Where: Between the hero text and the hero image on desktop.
How: Set to 64 px. Generous gap so the two sides feel like separate compositions rather than competing for space.
Where: The three menu items at the top.
How: Set to 32 px between each link. Enough that they do not feel clumped, not so much that the menu sprawls.
Every font size on the site uses rem. Every padding and margin value uses rem (through the CSS variables). This means users who adjust their browser font size for accessibility see the whole site scale with their preference.
Where: Hero headline font size.
How: Set to 4.5rem, which equals 72 px at the default root size of 16 px. If a user sets their browser font size to 20 px, this headline becomes 90 px automatically. Accessibility respected.
Where: All section headings.
How: H1 at 3rem (48 px), H2 at 2.25rem (36 px), H3 at 1.5rem (24 px). Clear size hierarchy with each step down.
Where: All paragraphs.
How: Set to 1rem (16 px). Never smaller. This is the mobile minimum rule applied everywhere.
Where: The thin separator lines between sections and inside cards.
How: Set to 1px solid. Borders should stay exactly 1 pixel regardless of browser settings. This is what px is for.
Where: The html element.
How: Set to 16px. This anchors every rem calculation on the site. Change this one value and everything built with rem scales.
Where: The hero section height.
How: Set to 90vh (minimum). The hero fills 90 percent of the viewport height on any screen size. This makes it feel cinematic and immersive without touching the very top of the fold.
Percent is used implicitly through the CSS Grid system. When the coffee grid shows three columns, each card takes roughly 33% of the container width. The browser handles this calculation.
The palette follows the 60-30-10 rule with five defined colours plus three text variants.
Where: Almost everything you see on the page.
How: The warm off-white fills the page background. Most of what your eye sees is this colour, which is why adjusting it (for example, to dark mode) would transform the whole feel.
Where: The CTA button, overline labels, hover states, and accents.
How: The brown appears on maybe 10 to 15 percent of the actual page pixels. That is still the biggest coloured presence after the neutral background.
Where: The ampersand in the footer logo, the underline on the secondary button.
How: Used only a handful of times across the whole site. Because it is rare, when it does appear, the eye notices.
Body text is dark grey (#6b6b6b), not black. Headings are near-black (#1a1a1a), not pure black. Backgrounds are warm off-white (#faf7f2), not pure white.
The difference is subtle on screen but your eyes feel it over time. Pure black on pure white vibrates and causes screen fatigue.
Where: The overline, headline, subheading, and buttons.
How: All four elements share the same left edge. Trace a finger down the screen and you will see one straight invisible line running through all of them.
Where: The three product cards.
How: All three cards are identical in width. All three images start at the same vertical position. All three prices sit at the same height at the bottom. This alignment is what makes the grid feel ordered.
Where: Headline vs subheading.
How: 72 px headline vs 20 px subheading. 3.6x size difference. Your eye knows exactly what to read first.
Where: Primary CTA vs secondary link.
How: Primary button is coffee brown with white text (heavy contrast). Secondary is a text link with a gold underline (subtle contrast). The primary wins your attention instantly, which is exactly what we want.
Where: Every coffee card's origin label, product name, and tasting notes.
How: The origin label is 12 px above the name. The name is 12 px above the notes. These three items are tightly grouped because they all describe the same product.
Where: Between the hero and the coffee section.
How: 96 px of padding separates them. That big gap tells the eye these are two different things. You are done with the introduction. Now we are talking about products.
Where: All three coffee cards.
How: Same aspect ratio, same padding, same typography, same button style, same border radius. When the user learns how one card works, they know all three work the same way.
Where: ROASTED IN BRAAMFONTEIN, SINGLE ORIGIN, THE ROASTERY.
How: Every overline uses the same font, size, weight, letter-spacing, and coffee-brown colour. When you see that style anywhere on the page, you know it is introducing a new section.
This week you will rebuild Kopi & Co in Elementor. The exact same sections. The exact same spacing. The exact same colours. The exact same typography.
As you rebuild, you will start noticing things you did not notice in the original:
Write these observations down as you work. Bring your notes to next Saturday.
#000000) or pure white (#FFFFFF) on textUse these values when you configure Elementor's Site Settings.
| Token | Hex | Use For |
|---|---|---|
| Background | #faf7f2 | Page background |
| Surface | #ffffff | Card backgrounds |
| Primary | #8b4513 | CTAs, labels, brand |
| Primary Dark | #5c2e0d | Hover on primary |
| Accent | #c9a961 | Special details |
| Text | #1a1a1a | Headings, dark text |
| Text Muted | #6b6b6b | Body paragraphs |
| Text Light | #9a9a9a | Captions, small text |
| Border | #e8e2d6 | Dividers, borders |
| Element | Size | Weight | Family |
|---|---|---|---|
| Display (hero) | 72 px | 900 | Playfair Display |
| H1 | 48 px | 700 | Playfair Display |
| H2 | 36 px | 700 | Playfair Display |
| H3 | 24 px | 700 | Playfair Display |
| Lead (intro) | 20 px | 400 | Inter |
| Body | 16 px | 400 | Inter |
| Caption | 14 px | 400 | Inter |
| Overline | 12 px | 600 | Inter (uppercase) |
| Token | Value | Common Use |
|---|---|---|
| space-1 | 4 px | Tiny gaps, hover movements |
| space-2 | 8 px | Icon-to-text gaps |
| space-3 | 12 px | Button inner spacing, internal proximity |
| space-4 | 16 px | Default small gap, badge padding |
| space-5 | 20 px | Below small headings |
| space-6 | 24 px | Below large headings, container padding |
| space-8 | 32 px | Card padding, button horizontal padding |
| space-10 | 40 px | Margin before buttons |
| space-12 | 48 px | Between major groups |
| space-16 | 64 px | Below section headers |
| space-20 | 80 px | Between hero columns on desktop |
| space-24 | 96 px | Section vertical padding |
| space-32 | 128 px | Largest page-level breathing room |
Two fonts. Nine colours. Thirteen spacing values. Everything you see in Kopi & Co is built from these decisions, repeated consistently. This is what a design system looks like. When you work on real client projects, you will define tokens like these before you build anything. Consistency is what makes a website feel professional.