Living style guide

Brand.

One ramp of ten colors, ocean to ember. Each section of the site takes one stop on it as its theme, so scrolling the page is walking the ramp.

The ramp

Ink

#001219

Deep

#005f73

Teal

#0a9396

Mint

#94d2bd

Sand

#e9d8a6

Amber

#ee9b00

Ochre

#ca6702

Rust

#bb3e03

Red

#ae2012

Crimson

#9b2226

Type

Display — Space Grotesk 700

Builder. Engineer. Explorer.

Body — Inter 400

Engineering is what I do — not all I am.

Mono — JetBrains Mono 500

03 The Journey · matt@portfolio:~$

Themes

01 About

teal.

data-theme="teal"

--bg

--surface

--surface-alt

--border

--accent-soft

--accent

--accent-ink

--text-faint

--text-muted

--text

A card title

In Progress

Body copy sits in the muted text color. Links take the accent ink.

Python WebAssembly
Complete Archived A chip A skill

02 Life

mint.

data-theme="mint"

--bg

--surface

--surface-alt

--border

--accent-soft

--accent

--accent-ink

--text-faint

--text-muted

--text

A card title

In Progress

Body copy sits in the muted text color. Links take the accent ink.

Python WebAssembly
Complete Archived A chip A skill

03 Experience

sand.

data-theme="sand"

--bg

--surface

--surface-alt

--border

--accent-soft

--accent

--accent-ink

--text-faint

--text-muted

--text

A card title

In Progress

Body copy sits in the muted text color. Links take the accent ink.

Python WebAssembly
Complete Archived A chip A skill

04 Projects

ochre.

data-theme="ochre"

--bg

--surface

--surface-alt

--border

--accent-soft

--accent

--accent-ink

--text-faint

--text-muted

--text

A card title

In Progress

Body copy sits in the muted text color. Links take the accent ink.

Python WebAssembly
Complete Archived A chip A skill

05 Skills

rust.

data-theme="rust"

--bg

--surface

--surface-alt

--border

--accent-soft

--accent

--accent-ink

--text-faint

--text-muted

--text

A card title

In Progress

Body copy sits in the muted text color. Links take the accent ink.

Python WebAssembly
Complete Archived A chip A skill

06 Terminal

ink.

data-theme="ink"

--bg

--surface

--surface-alt

--border

--accent-soft

--accent

--accent-ink

--text-faint

--text-muted

--text

A card title

In Progress

Body copy sits in the muted text color. Links take the accent ink.

Python WebAssembly
Complete Archived A chip A skill

07 Contact

crimson.

data-theme="crimson"

--bg

--surface

--surface-alt

--border

--accent-soft

--accent

--accent-ink

--text-faint

--text-muted

--text

A card title

In Progress

Body copy sits in the muted text color. Links take the accent ink.

Python WebAssembly
Complete Archived A chip A skill