Design

Colours

accent-valencia

#c73c2e

violet-ultra

#52489c

orange-carrot

#f9a03f

white-sugar-cane

#f7f7f7

black-charcoal

#0a0908

subtle-charcoal

#4d4d4d

Typography

Inter Variable · headings

Heading 1

Heading 2

Heading 3

Heading 4

IBM Plex · body

Regular body text. Often found in high-impact, yet overlooked areas, such as editor tooling or error handling.

Secondary text. Used for metadata, captions, and dates. e.g. Dec 23, 2023 · programming, astro

system-ui monospace · code

inline code sample

Components

Buttons

button-style-bg-accent

.button-style-bg-accent

button-style-bg-violet

.button-style-bg-violet

Prose links

example link

Blockquote

Red blockquote, used in articles. Main accent border with a transparent accent tint.

Violet blockquote, used in the wiki. Violet border with a transparent violet tint.

Code block

fn main() {
    println!("Hello, world!");
}

Dinkus

The dinkus is used as a thematic break between sections of prose content.

It signals a scene change or shift in perspective without using a heading.

Article preview

featured

What's in a good error

Because good DX goes from W to N: Working to Not Working

Jul 02, 2023 · dev-experience, programming

regular

Things I've worked on at Astro in 2023

Turns out images are more complicated than I thought

Dec 23, 2023 · programming, astro

Mobile menu button

Icons

github

mail

bluesky

arrow-up

hamburger

toc

erika

erika.