JAIM.ES DESIGN SYSTEM
Style Guide
Typography
Colophon
The site is hand coded by me. It’s built with Kirby CMS, and hosted on Digital Ocean. The current version was launched February 2026 and is the 11th revision since 2008. Claude Code is used for development and design iteration.
H1 — 31px, weight 700 · Titles
Main Header is used for titles
H2 — 20px, weight 500, uppercase · Sections
Second Level Header is used to separate sections
H3 — 25px, weight 500 · Introductions
Third Level Header is used for introductions and descriptions
H4 — weight 400 · Metadata
Fourth Level Header is used for metadata and figure captions
H5 — 13px, uppercase · Labels
Fifth Level Header is used for labels and timestamps
H6 — 13px, uppercase · Location
>-: San Francisco :->
Body — 16px, weight 400, line-height 1.6
Here's to the crazy ones. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently.
They're not fond of rules. And they have no respect for the status quo.
You can praise them, disagree with them, quote them, disbelieve them, glorify or vilify them. About the only thing you can't do is ignore them. Because they change things.
They invent. They imagine. They heal. They explore. They create. They inspire. They push the human race forward.
Maybe they have to be crazy. How else can you stare at an empty canvas and see a work of art? Or sit in silence and hear a song that's never been written? Or gaze at a red planet and see a laboratory on wheels? We make tools for these kinds of people.
Ligatures
:->
<-:
>-:
:->
->
<-
=>
==
!=
>=
<=
Stylistic Set ss02
aaa
ggg
yyy
lll
III
Top: default · Bottom: ss02 enabled
Special Characters
&ersand
@at
¶pilcrow
§section
†dagger
« »guillemets
•bullet
…ellipsis
–en dash
—em dash
‘ ’single quotes
“ ”double quotes
∞infinity
№numero
↗arrow NE
©copyright
Blockquote — 25px, italic, line-height 1.5
They're not fond of rules. And they have no respect for the status quo.
Italic / Bold
italic / bold
Lists
Numbered
- They invent
- They imagine
- They heal
Bulleted
- They explore
- They create
- They inspire
Mark — 40% opacity · border-radius 4px
You can praise them, disagree with them, quote them, disbelieve them, glorify or vilify them. About the only thing you can't do is ignore them.
Links — hover: 1px dashed border-bottom
Learn more about the crazy ones and how they push the human race forward.
Images & Components
Thirds
Halves
Post — max-width 64rem
Cover
Album Grid (.albumgrid)
Tokyo, 2024
Barcelona, 2023
New York, 2022
Photo Stacks (.photo-stack)
Tokyo, 2024
Barcelona, 2023
New York, 2022
Minigrid (.minigrid)
Role Card (.role-excerpt)
Project Grid (.projectsgrid)
Article Header (.articletop)
Here’s to the Crazy Ones
The ones who see things differently
>-: San Francisco :->
Side Panel (.side)
Role
Head of Design
Years
2022 – Current
Company Size
Series B
Company Type
B2B
Tags (.type-tag)
Design
Product
Engineering
Leadership
Back Nav
Blockquote (component)
The people who are crazy enough to think they can change the world are the ones who do.
Pagination (.pagination)
Experience + Twogrid (.twogrid .experience .side)
Led the design team through a complete product overhaul, establishing a design system and shipping a new flagship product to 20,000 users.
Managed a team of 5 designers, ran weekly design critiques, and partnered with engineering to reduce design-to-ship time by 40%.
Role
Head of Design
Years
2022 – Current
Team
5 designers
Device Frames (.safari, .iphone)
Disco Ball (.disco-toggle)
Click toggles between light and dark mode. Triple-click reveals the emergency button.
Emergency Button (.emergency-btn)
Hold to party
Hold for 400ms to activate disco party mode. Revealed after triple-clicking the disco ball.
Elevator (.elevator)
Sticky button at bottom-right. Scrolls to top on click.
