Brand

The colors, type, and pieces this site is built from. Every value here is pulled from the live stylesheet, so this page changes when the site does. One-off components and their props live in the components area.

Color

Warm grays on a warm off-white page, with one teal kept for keyboard focus. Each swatch shows its contrast against the page. Text needs at least 4.5:1.

--paper #f5f2ec 1.0:1
--ink #1c1917 15.7:1
--muted #68635d 5.3:1
--body-ink #383531 10.9:1
--muted-soft #6f6a63 4.8:1
--rule #d6d0c7 1.4:1
--section-rule #e4dfd7 1.2:1
--accent #0589a9 3.6:1
--selection #ccebf2 1.1:1
--code-surface #ece8e1 1.1:1
--hover-surface #ede9e2 1.1:1
--card-surface #ece8e1 1.1:1
--card-surface-hover #e3ded5 1.2:1
--scrollbar-thumb #aaa49c 2.2:1
--portrait-shadow #1c1917 15.7:1

Type

One family, Google Sans Flex, in six sizes. Headings are set at weight 600 and everything else at 400.

--font-size-display 32px · 600 Make the technology useful

--font-size-section 24px · 600 Make the technology useful

--font-size-heading 20px · 600 Make the technology useful

--font-size-title 17px · 400 Make the technology useful

--font-size-body 15px · 400 Make the technology useful

--font-size-meta 12px · 400 Make the technology useful

--font-size-hero px · 400 Make the technology useful

--body-font 'Geist Variable', Arial, Helvetica, sans-serif
--title-font var(--body-font)
--mono-font 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace

Layout

Every section shares one grid: a narrow rail on the left and a content column on the right, so all the left edges line up. On phones it collapses to one column.

--content-max 61.5rem
--page-pad 3rem
--rail 12rem
--rail-gap clamp(2rem, 5vw, 5.5rem)

Links & focus

Links in text keep a thin underline, like this one. Press Tab to see the teal focus ring.

Focus ring

Dividers

A short centered line separates sections and closes article headers. There are no full-width rules.

Lists

Projects and posts are one row per link: name, description, then the date, with pixel dots between rows. Rows have no hover state beyond the screenshot preview.

Cards

Cards are only used on Inspo, for other people's work. The card grows with what it holds: a label, then any image, excerpt, title, source, and note. Quotes lead with the line itself.

Quote

It always bothered me that, as toys, Transformers were clearly compromised in both states.

— John Gruber The iPhone Duo

Excerpt and note

Are you surrendering your brain to AI?

Black Box: The Chatbots @guardian · instagram.comMichael Safi on how AI use is shaping our minds. A Guardian Investigates podcast series.

I just found out the GPT in ChatGPT stands for Gomputer Pomputer Tomputer

Gomputer Pomputer Tomputer @zamdoteth

With a video

Coolest brand designs you'll ever see online @drapzdesigns

No link

I know very little about anything, but I do know this: if you can live your life without an audience, you should do it.

— Bo Burnham Make Happy

Pixel art

Icons and cursors are drawn on a pixel grid and kept square. The dotted dividers use the same 2px squares.

Social icons

16 × 16, one color, shown at 1:1 in the nav and footer.

X
GitHub
LinkedIn
Instagram

Inspo types

8 × 8, beside each label on cards and filters.

All
Quotes
Patterns
Tweets
Articles
Books
Sites
Products
Videos

Favicon

The nav teacup on a transparent 16 × 16 grid.

Cursors

Hover the links on this page to try them. Hold Cmd over a link for the new-tab cursor.

Default
Link
Leaves the site
New tab

Photo

The portrait from the home page, full size, for talks, bios, and anything else that needs a photo.

1284 × 1712 JPEG Download

Link previews

Every external link on the site has a screenshot, taken once. Links that opt in show it beside the cursor: the project list, the intro, and blog posts. Hover Parcel to try it.

81 captured, 2 without a preview

internetlabs.co/ popup or overlay
linkedin.com/in/avigoldman/ HTTP 999