Marco Perego — Portfolio

Style Guide

A living document of the foundations, components and patterns that make up marcoperego.eu. This page reflects the current state of the site and serves as the reference point for future changes.

Last reviewedMay 2026MaintainerMarco PeregoStatusDraft · v0.1

Colors

Six tones drive the entire site. Two are formal Webflow variables today; the other four live as raw CSS values in classes and should be promoted to variables (see cleanup proposal).

White

var(--white)

#FDFDFD

Default text on dark backgrounds. Surface on light contexts.

Black

var(--black)

#111111 hsl(0 0% 6.67%)

Default text on light backgrounds. Used in Heading 5, 24, Paragraph 14.

Magenta

var(--ff0072) rename

#FF0072

Brand accent. Primary button, highlight spans, CTAs, hovers. Currently named after its hex.

Dark Navy no token

no variable

#001327

The site's true background. Hard-coded in Body's linear-gradient. Should become var(--surface-dark).

Muted Grey no token

no variable

#888888 hsl(0 0% 53%)

Muted Text class, secondary metadata, dates. Should become var(--text-muted).

Body Default no token

no variable

#333333

Default body text color set on the body class. Rarely visible but inherited.

Typography

One typeface, twelve sizes. Today the same scale is spread across 30 numbered Heading classes and 21 Paragraph classes. The proposed scale below consolidates them into 12 named tokens.

Poppins

Primary · used everywhere

300400500600700

Ubuntu remove

Used only on Paragraph 20 — likely accidental

Display XL

display-xl80 / 86 · 600Heading 12

Display L

display-l70 / 95 · 600Heading (homepage hero)

Display M

display-m60 / 70 · 600Heading 17, 18 (consolidate 14, 15, 19)

Display S

display-s44 / 60 · 600Heading 30

Heading 1 — Section title

h140 / 50 · 500Heading 7

Heading 2 — Statement

h228 / 40 · 400Heading 29

Heading 3 — Subhead

h324 / 32 · 400Heading 16, 22, 24

Heading 4 — Card title

h422 / 30 · 500Heading 25

Heading 5 — Eyebrow

h520 / 28 · 500Heading 2, 20, 26

Body Large — Lead paragraph for hero copy and intros that need more presence.

body-l18 / 28 · 400Paragraph 5, 6, homepage modifier

Body — The default reading size used across all paragraphs, descriptions and longer-form copy.

body16 / 26 · 400Paragraph (base)

Body Small — Captions, secondary descriptions and metadata text.

body-s14 / 24 · 300Paragraph 19

Caption — Smallest text. Tags, fine print, helper labels.

caption12 / 18 · 400Paragraph 7, Text Block 52, Small

Caps Text — Section labels

caps18 · 600 · +0.4px · UPPERCaps Text (existing class)

Muted Caps — Dates, metadata

caps-muted+0.4px · 53% white · UPPERMuted Text (existing class)

Spacing & layout

No spacing variables exist today. The values below were extracted from the most-used Heading and Paragraph classes and represent the de facto scale.

space-14pxHairline padding (Nav Link bottom)

space-28pxCaps Text vertical padding

space-316pxNav Link horizontal margin, grid gaps

space-420pxHeading bottom margin, Paragraph 2 padding-top

space-524pxSmall modifier right margin, container padding

space-640pxSection paragraph margins, Button top margin

space-760pxWhite modifier top margin, large vertical rhythm

space-870pxBottom padding, hero spacing

Container max-widths

Default content

1200px

Heading, Heading 11, Paragraph default

Long-form text

800px

Paragraph 2, Paragraph 6, Heading 5

Display copy

700px

Heading 15

Section heading

650px

Heading 2

Breakpoints (Webflow defaults)

Desktopmain · ≥ 992px

Tabletmedium · ≤ 991px

Mobile landscapesmall · ≤ 767px

Mobile portraittiny · ≤ 478px

Components

Three formal components exist today: Navigation, Button DEPMA, Footer DEPMA. Plus a handful of recurring patterns that should be promoted to components.

Primary button

Component · Button DEPMA

DISCOVER MY WORK >

Backgroundvar(--ff0072) #FF0072

TextWhite, weight 500

Radius4px

Spacingmargin-top 40 · margin-left 40 · align-self flex-start

Suffix“DEPMA” — idiomatic naming, suggest renaming to “Button / Primary”

Navigation

Component · Navigation

MPHome Works About

Link styleWhite 300 · mx-16 · px-4 · pb-4

Issue3 separate classes (Nav Link, Nav Link 2, Nav Link 3) for identical links — consolidate to one

Caps label

Class · Caps Text

stakeholder management

05IKEA — Senior product UX designer

Use forskill tags, experience labels, navigation hints

VariantsCaps Text, Caps Text + small, Caps Text + small + red

Work card

Pattern · not yet a component

Retail — Internal enterprise software

Harmonising complex workflows through a centralised solution.

Used on/works (12 instances)

RecommendationPromote to a CMS-backed Webflow Component to remove duplication

Footer

Component · Footer DEPMA

Suffix“DEPMA” — same naming inconsistency as Button DEPMA

Modifier classes

These short-name classes layer on top of base elements as combo classes. Today they are inconsistent (multiple definitions of the same name) — the cleanup proposal converts each into a single, predictable token.

red

Magenta accent color (with weight 700 in some uses).

2 conflicting definitions

white

Forces white text. Sometimes adds margin-top 60.

2 conflicting definitions

big

Increases font-size to 30 or 80 depending on context.

2 conflicting definitions

small

Reduces to 12 / 18 with margin-right 24.

homepage

Body Large variant (18 / 26) used inside Text Block 36.

mob · mobile · mob-port

Three names for the same idea: mobile-only adjustments. Should be one class.

3 names, same intent

center

Centers content; used on About paragraph.

experience

Date label inside Muted Text on About page.

Recurring patterns

Visual conventions that appear across multiple pages. These define the personality of the site and should be preserved through any cleanup.

Custom cursor

The body sets cursor: none and a wrapper element handles a custom cursor visual. The HTML embed .cursor-wrapper { pointer-events: none } is repeated on every page.

Move into a global custom code block

Two-column About paragraph

The About page uses column-count: 2; column-gap: 5.5% on a single paragraph. Distinctive choice; document it as a reusable layout.

Class · About Paragraph

Magenta highlight spans

Text inside <span class="text-span-N"> tags is colored magenta to emphasize a phrase mid-sentence (e.g. “how are you shaping the world”).

31 numbered span classes — consolidate to .text-accent

ADPList iframe embed

Reviews and booking widgets are embedded as raw <iframe> blocks with inline styling. The same code appears on home and about.

Promote to a single Webflow component

“WANT TO TEAM UP?” footer CTA

Same heading and email link block at the bottom of Home, Works, and About. Three duplicate copies in markup.

Promote to a Webflow component

Background gradients

Body has linear-gradient(165deg, #001327, #001327) — both stops identical, so it is effectively a solid color. Either simplify to a flat background or commit to a real gradient.

Simplify

Cleanup proposal

A separate document accompanies this style guide listing concrete renames, consolidations, and deletions. Nothing has been touched in the live site — review and approve before any changes are applied.

678

classes today

~80

classes proposed

variables today

variables proposed

components today

components proposed

Promote raw values to variables

Add tokens for surface-dark, text-muted, body-default, accent-hover, plus the 12 typography sizes and 8 spacing values now hard-coded across hundreds of classes.

Rename the magenta variable

--ff0072 → --accent-magenta. Naming a variable after its hex defeats its purpose if you ever change the value.

Consolidate auto-numbered classes

Heading 1–30 → 12 named tokens. Paragraph 1–21 → 4 (body-l, body, body-s, caption). Text Block 1–59 → reuse Paragraph tokens. Text Span 1–33 → single .text-accent class.

Delete dead and typo classes

Single-letter classes (a), pure numbers (2 3 4 80), underscore-numbered (_3 through _27), typos (btach btahc convinience efficency higlihjt), and unused page-specific names (nutrilent batch1 framce) — all flagged for deletion.

Promote patterns to components

Work card, ADPList embed, “WANT TO TEAM UP?” CTA block, and the experience timeline row should each become a Webflow Component to remove duplicated markup.

Rename DEPMA components

Button DEPMA → Button / Primary. Footer DEPMA → Footer. Match the unprefixed convention used on Navigation.

Delete “Untitled” page

/untitled exists with title “Untitled” — leftover scaffolding from January.

Refer to the accompanying cleanup proposal document for the full per-class mapping table.