hire-me@guillermo.design

Design system

Tokens and components behind this site. Every value here is read from src/design-system, so this page is always current.

Color

White pages, warm off-white cards and sidebar, a near-black ink, and one blue accent for primary actions and links.

paper
#FFFFFF / #191918
Page canvas (white, per draft)
sidebar
#F7F6F3 / #202020
Sidebar: warm off-white
surface
#FFFFFF / #252524
Raised surfaces: menus, table header
hover
#ECEBE8 / #2E2E2C
Hover / selected row
line
#E9E7E3 / #33322F
Dividers, table rules, borders
ink
#2B2A27 / #EDEBE6
Primary text
ink-muted
#73716C / #A29D93
Secondary text, property labels
ink-faint
#A19F99 / #6F6B64
Placeholders, icons at rest
accent
#FF7900 / #FF8A1F
Brand orange: primary pill buttons, statement banner, eyebrow
accent-ink
#343434 / #1B1B1A
Text on accent
accent-soft
#FFF1E5 / #3A2614
Soft accent surfaces
card
#FBFBFB / #222221
Home cards: stats, services, work, AI, fit
banner
#FF7900 / #FF8A1F
Statement banner
card-warm
#F6F5F4 / #252524
Testimonial cards
canvas
#F7F6F3 / #141413
App canvas behind the white document area
ink-strong
#000000 / #F4F2EE
Display headings
ink-body
#484846 / #BDB8AE
Body copy on Home
link
#0075DE / #6AA8F0
Inline text links

Tags

Six muted tones for select values. Status values use a dot.

graytealamberroseblueolivepurpleShippedIn progressArchived

Typography

Inter throughout. Hierarchy comes from size and weight: bold, tightly tracked page titles over a calm regular body.

Display

Page title

Heading 1

Section heading

Heading 2

Subsection heading

Heading 3

Block heading

Body

Body copy for case studies, set to stay under 70 characters a line.

UI

Sidebar items, properties and table cells

Small

Meta text and captions

Space

A 4px base. Blocks inside a page use 8–24; sections use 48–96.

space-14px
space-28px
space-312px
space-416px
space-524px
space-632px
space-748px
space-864px
space-996px

Components

Button

Properties

Status
Shipped
Role
Lead product designer
Timeline
Empty
Areas
Design systemsData UI

Callout

Toggle

Research and discovery

Toggles hold detail a skimmer can skip. They work without JavaScript.

Explorations that didn't make it

Closed by default.

Draft block

To write: Marks content still to be written. Remove before publishing.

Text blocks

Block heading

Paragraph with an inline link and inline code.

  • Bulleted list item
  • Another item
A pull quote from a stakeholder or a research participant.