The building blocks.

01

Colour

Blue and pink carry the brand, mostly as one gradient. Pages alternate black and white sections; the greys are for borders and quiet text on black.

Brand

• Primary blue--primary-color#5170FF
• Secondary pink--secondary-color#FF66C4
• Purple--purple-color#7F6DEF
• Brand gradient--brand-gradient135°, blue → pink

Neutrals

• Blacksections, header, footer#000000
• Inkbuttons and text on colour#0B0B0F
• Text--text-color#1F1D1A
• Muted--muted-color#625D55
• White--surface-color#FFFFFF
• Paper--background-color#F6F3EC

Greys on black

• Ruledividing lines#26262C
• Bordercard edges#2A2A30
• Outlinepills, tiles#3A3A44
• Labelsmall labels#8A8A96
• Quietcaptions, client names#A6A6B0
• Body on blackdescriptions#B7B7C2

Status

• Available"Open to work" dot#2F9E5B
• LiveAPI mock-ups#6BE39B

02

Typography

Oswald for all headings (h1, h2 and h3) and the logo; Inter for paragraphs, links and lists; Space Mono for sub headings. Sizes are fluid: each grows from its phone size at 360px wide to its full size at 1280px.

Families

• Front end developerOswald--font-heading--primaryPage titles (h1), like the hero heading, and the logo
• Who I've worked withOswald--font-heading--secondarySection headings (h2) and h3
• Clean, accessible front-end code.Inter--font-body, --font-linkParagraphs, all links and buttons, and lists
• Chapter II · ClientsSpace Mono--font-monoSub headings (eyebrows, labels), captions and counters

Scale

• --text-display45 → 112pxDisplay
• --text-3xl36 → 72pxHeading 1
• --text-2xl28 → 45pxHeading 2
• --text-xl23 → 32pxTaglines and card titles
• --text-large19 → 24pxIntro text and h3
• --text-body16 → 18pxBody text, set at a line height of 1.6 for comfortable reading.
• --text-small13 → 15pxCaptions, labels and legal text.

03

Spacing

All padding, margins and gaps come from this scale. Sections add 20px extra at the bottom; the page sides use --gutter, 24px on phones up to 64px.

• --space-tiny4px
• --space-xsmall8px
• --space-small16px
• --space-medium24px
• --space-large40px
• --space-section48 → 80px
• --space-section-large72 → 144px

04

Shape, motion & layout

05

Components

Live examples, using the same classes as the pages. The class names to use are under each one.

Chapter II · Clients

Who I've worked with

Section heading

An eyebrow, then an Oswald h2 with its last word in the brand gradient.

.eyebrow, h2, .accent-word

Primary Ghost

Buttons

Pills that fill with the accent blue and lift 2px on hover.

.button, .button--ghost

See Work

Light button

The white version, for black sections.

.button.button--light

Start a project

Call-to-action button

The big black pill with an arrow that nudges right on hover.

.cta__button, .cta__arrow

Open to work Vancouver/Remote

Status pill

An outlined pill with a pulsing green dot.

.hero__eyebrow, .hero__status

Category pills

Numbered outline pills that brighten on hover.

.work-page__filters

• GitHub (example link)
• Résumé (PDF)

Icon links

A boxed arrow: up-right for a new tab, down for a download. The box fills blue and the arrow nudges on hover.

.site-footer__icon, .site-footer__arrow--out / --down

More about me →

Text link

Underlined, and blue on hover.

.text-link

Gemma Gentles

Logo

Live text, not an image: the name in white Inter.

.logo (partials/header.html)

• Bovada
• Bodog
• Slots.lv
• Ignition Casino
• MatchPay

Client list

Plain names in the body font: 2 columns on phones, 4 from tablet up.

.clients__list (partials/clients.html)

LNDMRK

Website

[Subject line] [Brand] · to you

Logo

[Campaign name]

Email · responsive

Work cards

A website in a browser frame, and an email mock-up, each with a serif name and a mono label.

partials/work-card-site.html, partials/work-card-email.html