Card
Border, radius and padding come from the tokens.
Pattern Library
Building blocks of this website
Colours, type and components of the design, shown with the real classes. Switching to dark mode (icon at the top right) shows how the colours change.
Colours
All colours are CSS variables (tokens). The values change with the mode, the names stay.
Typography
Headings in Quicksand, text in Noto Sans, both served locally (no Google Fonts request).
Eyebrow
Heading 2 for sections
Heading 3 for cards and steps
Lead text: slightly larger, for the introduction of a page.
Body text in Noto Sans, 17 pixels, with generous line height for readability. This is what a link in the text looks like.
Muted text, 14 pixels, for captions and notes.
Buttons
Variants
.button .button--secondary .button--outline .button--small
Links with arrows
.project-link .more-link chevron_icon() ext_icon()
Chips and badges
- PHP
- Daily
- Depending on the project
.chip .chip--strong .chip--outline .badge--client .badge--own
Cards
Service card
With a number and an optional tools line.
Figma · HTML · CSS
.card .service-card
Form fields
Help text directly under the field.
Note under the form, e.g. about the reply time.
.form-field .form-hint .form-note
Building blocks of the project pages
All project pages are built from the same PHP functions (includes/case-study.php). Two of them below as a preview.
At a glance
Fast
Key facts sit in the dark band with an icon.
30
One value, one short text.
Maintainable
Up to four entries side by side.
Tech stack
- PHP
- SQLite
- CSS
Approach
First step
Numbered steps on a light grey surface, with a heading and a short text.
Second step
The number comes automatically from the order.
„This is what a client quote looks like.“
Icons
Line icons on a 24 px grid, embedded as SVG (case_icon()). Plus the arrows chevron_icon() and ext_icon().
Radii
control 10
badge 12
image 14
card 16
portrait 20
pill