A field guide to a personal web

Good themes make
good places to think.

A living collection of the palettes, surfaces, type, and tiny details I reach for when I make a site.

Explore the collection ↓ See the recipe →

personal interface
index / 001 make
it feel
like yours colors · forms · words

01 / The point

Less “design system.”
More “place with a pulse.”

The best sites I use are consistent without feeling sterile. They have a clear palette, a recognizable shape, and enough room for the content to breathe. These are the ingredients.

28theme families
in rotation05aesthetics
to compose

02 / The gallery

Try on a mood.

Palette is the color story.
Aesthetic is the posture.

W/notesprojectsabout☼

field note / 014

Make room for
the weird idea.

A good interface does not shout over the thought. It gives it a surface, a rhythm, and somewhere to land.

Component language semantic roles

Text link ↗

successwarningerrorinfo

Note A quiet surface for supporting context, alerts, and explanations.

// palette-aware syntax
const theme = "yours";
return theme.2026;

Surface cardElevated content with a readable border.

NavigationActive, muted, and linked states.

Surface texture

Coverage

Heading wear

Use the current texture as transparent missing ink inside heading glyphs.

Intensity

heading strength21% heading scale100% surface strength8% surface scale100%

A seamless ink screen with fine pinholes and subtle variation.

Pattern layer

Pattern Glyph

Color Stack

Pattern image URLOptional SVG used to draw a repeating pattern. Defaults to https://waylonwalker.com/w.svg. size80px gap32px row offset26% scatter65% color distance2% color distance randomness35%

A repeated block W field for poster-like backgrounds. Place the pattern below the active texture, above it, or on both sides of the texture.

Current paletteAyu Dark

background#0d1017

surface#131721

accent#e6b450

ink#bfbdb6

Fontpack

03 / The recipe

Start small.
Keep the signal.

A theme is not a pile of overrides.
It is a handful of good decisions.

Pick a palette

Start with the feeling, not the hex code. A palette gives every surface and accent a shared point of view.

Browse palettes →

Set the posture

Choose how the site carries itself: sharp and direct, soft and spacious, or precise and quiet.

Change the aesthetic →

Make it yours

Override a few tokens. Save the rest of your energy for the content that made you build the site.

Get the starter →

markata-go.toml

# start with a feeling
[markata-go.theme]
palette = "ayu-dark"

[markata-go]
aesthetic = "balanced"
texture = "screenprint"
texture_strength = "8%"
texture_scope = "all"
heading_texture = "screenprint"
heading_texture_strength = "21%"
motif = "block-w"
motif_glyph = "W"
motif_size = "80px"
motif_gap = "32px"
motif_row_offset = "26%"
motif_scatter = "65%"
motif_layer = "over"
motif_color_distance = "2%"
motif_color_distance_randomness = "35%"
motif_color = "ink"
fontpack = "vintage-print"

[markata-go.theme.variables]
"--content-width" = "68ch"