Components

Each component lists the class or file that implements it on this site or in my career in general. The options named in the text, such as variant and pad, are the design system's vocabulary. Below every component you will find a link to the post where I explain it in detail and a live example of how it should behave.

Actions

• Button

  Hard shadow, 3px edge, sinks on hover.

• Link

  Three links: heavy underline, nav and footer.

Surfaces

• Dialog

  A native dialog: modal panel and side drawer.

• Rule

  A 3px ink line.

• Slab

  The offset slab: the system's one object.

• Tooltip

  An ink bubble: name only, never links.

Text

• Blockquote

  Serif italic with a 2px accent rule.

• Code Block

  Ink block, paper text, copy button.

• Heading

  Six levels of heading

• InlineCode

  Code in a sentence

• Kbd

  A key cap.

• Label

  Mono micro-label, 13px capitals in dark lilac.

• Underline

  The yellow highlighter band behind ink text.

Content

• Chip

  A pill: a link, or a plain tag.

• Chip List

  A wrapping list of chips.

• Hotspot

  Markers on an image that open a link card.

• Post Item

  A numbered blog entry. Wrap entries in PostList.

Forms

• TextField

  Label, hint, 2px edge, halo on focus.

Navigation

• Language Switcher

  A listbox of locales: English, Español, Italiano.

• Site Footer

• Site Header

  Name, navigation, language switcher on a 3px rule.

• Skip to Main Content

  Hidden until it gets focus.

• Table of Contents

  Numbered contents.

Iconography

• Icon