Style guide

Every token and component of this site, rendered from the same code the pages use.

Color

  • --bg
  • --bg-muted
  • --fg
  • --fg-muted
  • --acc

Use the theme toggle in the header to see the dark values.

Type

Display H1

Heading H2

Heading H3

Heading H4

Lead. I'm a Design Engineer living in Hermosillo, Mexico.

Body. This website is my hub on the web, with strong, emphasis, a link, inline code, and strikethrough.

Small. Metadata, tags, footers.

Small muted.

Spacing

  • --s-xxs
  • --s-xs
  • --s-s
  • --s
  • --s-m
  • --s-l
  • --s-xl
  • --s-xxl

Radius

xs
m
pill

Prose

A heading in prose

A paragraph, followed by a quote.

My goal for this year is to fully embrace discomfort

  • Unordered item
  • Another item
  1. Ordered item
  2. Another item

Press 4 to take a screenshot. 

npm run start
Token Value
--s 1rem
--s-l 2rem

A footnote after a divider.

Primitives

Link: default, stealth, plain

Default link Stealth link Plain link

Button

Icon button

Tag: on the page, on a card

Field

Card: default, short

Card content, with a link.

Card footer

Short card with a disclosure

Hidden content.

Divider: pill

Icons

Meta line

Content

Post summary

Rearranging

I don't know if it's the ADHD. It probably is, but I have this urge to constantly rearrange everything.

By everything I mean: my home office, the bag I carry with me wherever I go, and lately, this website.

Continue reading →

Post meta: summary, full

Thought

Memory card: horizontal

Link item

Tech Independence, by Derek Sivers

sive.rs/ti

A relatively easy to use guide on how to get tech independence: getting a website, email, storage, and everything in a personal tech stack under your control and only your control. Very inspiring.

Entry

Company

Role

2011—2021

Description of the work.

Pagination

Archive list

Memory card: grid

Layout

sidebar
.cols
.cols.cols-main-first (main is first in the source)
sidebar
.main-offset
.cols-grid
2
3