Allan Kirsten
Less, but better. One display font for a point of view, one body font built to be read without effort, one accent, one radius. A rule survives only if it barely has exceptions.
Display
text-display
Hero, primary headline
The quick brown fox
clamp(5.6rem, 10vw, 9.5rem) / lh 0.88 / weight 400 / DM Serif Display
Example
Design decides.
Title
text-title
Page title
The quick brown fox
clamp(3.25rem, 7.8vw, 5.85rem) / lh 0.95 / weight 400 / DM Serif Display
Example
20 years building products that scale.
Heading
text-heading
Section title
The quick brown fox
clamp(2rem, 4vw, 3rem) / lh 1.1 / weight 400 / DM Serif Display
Example
Case Studies
Subheading
text-subheading
Subtitle, card title. Token defined, not yet used on the site
The quick brown fox
clamp(1.5rem, 2.5vw, 2rem) / lh 1.2 / weight 400 / DM Serif Display
Example
Remessa Online: Design Leadership
Lead
text-lead
Opening paragraph
The quick brown fox
1.25rem / lh 1.55 / weight 300 / Atkinson Hyperlegible
Example
I joined when the design team was just me. I left when it was twelve.
Body
text-body
Standard body copy
The quick brown fox
1.125rem / lh 1.6 / weight 300 / Atkinson Hyperlegible
Example
I mapped the onboarding journey and found 3 drop-off points. We redesigned the flow in two weeks.
Running paragraph
I mapped the onboarding journey and found 3 drop-off points, all concentrated between signup and the first transaction. We redesigned the flow in two weeks, in parallel with the growth team, without touching the KYC backend. The result showed up in the funnel in the first week post-launch: a visible drop in abandonment and a consistent increase in 7-day activation.
Caption
text-caption
Captions, metadata
The quick brown fox
0.875rem / lh 1.4 / weight 300 / Atkinson Hyperlegible
Example
Remessa Online · 2016–2020 · Design Leadership
Brand: dark theme (home, /ai, nav)
Bg
#0D0D0D · var(--color-bg)
Primary background, home, nav in dark state
Text
#F5F0E8 · var(--color-text)
Primary text over dark background
Text · 65%
rgba(245,240,232,0.65)
Defined, not currently used on the site
Text · 45%
rgba(245,240,232,0.45)
Metadata, supporting links, tertiary, also the /ai body paragraph
Text · 8%
rgba(245,240,232,0.08)
Dividers, subtle borders
Accent
#C8A96E · var(--color-accent)
Gold, CTA, hover, active state
Accent · 40%
rgba(200,169,110,0.4)
Subtle accent, highlight borders
Neutrals: light theme (about, cases, this page)
Ink
#000000
Titles, maximum emphasis (about, case hero)
Secondary
#555555
Case metadata (case-meta-value)
Support
#777777
Supporting text, secondary values
Muted
#888888
Low-emphasis supporting text
Subtle
#AAAAAA
Captions, labels, below the AA minimum ←
Divider
#E5E5E5
Borders and dividers (case metrics) ←
#AAAAAA and #E5E5E5 don't pass WCAG AA for normal text (4.5:1 minimum). On the site, they're restricted to large captions, borders and dividers, never running text.
One radius, used sparingly: 6px
Just enough to soften a sharp corner without pretending to be a rounded-corner app. Applied only where a genuinely sharp-cornered rectangle exists: case images, visual placeholders, color swatches. Never on full-bleed sections, buttons (already pill-shaped, 999px) or avatar/logo (circle, 50%).
A rhythm, not a ruler pulled out for every gap. Seven values cover every distance on the site, from an icon sitting next to a label to one section ending and the next beginning.
0.25rem
4px
Icon-to-label, tightest gaps
0.5rem
8px
Dot pagination, inline icon gaps
0.75rem
12px
Label-to-value pairs
1.25rem
20px
Card and list internal gaps
2rem
32px
Paragraph-to-paragraph, component gaps
3rem
48px
Block-to-block within a section
5–8rem
80–128px
Section-to-section, scales with viewport
The last row isn't one number, it's a formula: var(--section-px). Horizontal padding grows with the viewport like the rest of the scale, but past roughly 1600px wide it keeps growing on purpose, capping the content column at 1440px so nothing on a large monitor stretches into an unreadable line. Same variable, every section, every page.
CTA: options, not a decision yet
A site that never reacts to a cursor feels unfinished. No CTA anywhere on the site has a hover or active state today, the home pill, the contact links, all of it just sits there static. These two are candidates, not a final pick. Try them with a mouse and on a phone.
Rule applied to both: tap always scales down to 96% (150ms) for physical, tactile feedback, no exceptions. Hover effects are wrapped in @media (hover: hover) and (pointer: fine), so a tap on mobile can never leave a hover state "stuck" the way it does on so many sites. -webkit-tap-highlight-color is off, replaced by the scale.
Dark theme: home, /ai, nav
A signature move, not a pattern. The label rolls up and a gold duplicate rolls in behind it, masked inside the pill. Playful and a little unexpected, so it's best kept to a single spot instead of turning into wallpaper.
Not a pill, a text link. Underline grows from the left, arrow steps diagonally, color turns gold. This is the secondary/tertiary tier: crosslinks, "see the case", anything that isn't the one thing you want clicked.
Light theme: about, cases
Same technique, ink instead of cream. The gold accent gets a shade darker (#9C7B45) here, the brand gold reads fine as a fill, but as text on white it falls short of AA on its own.
Same motion, same darker gold on hover for the same contrast reason. This is the version that ships on /about and every case page.
Primary: filled, one per view
For the one action a page exists for, like installing a product on a Lab page. The outline pill reads as an option; this one reads as the answer. Gold fill, ink label, sentence case, same roll-up and 96% tap. Never more than one in a viewport, and never on portfolio pages, where the conversation is the goal, not a conversion. First used on /lab/gt-pilot.
Icons: Solar, line duotone
One library, one style: Solar line duotone (480 Design, CC BY 4.0). A thin line plus a softer second tone gives warmth without weight, so icons sit with the hairlines and serif titles instead of shouting over them. Use the Icon component with a name from components/ui/solarIcons.ts; add glyphs there as needed. 28px above a step or card title, 24px inline with a list item. Color: dark gold (#9C7B45) on white, gold (#C8A96E) on dark. Icons support a label, they never replace one.
Choice chip: pick any that apply
For multi-select options in a form, like the interests on a waitlist. A pill with its own round check: empty ring when off, gold disc with an ink check when on, and the whole pill takes the gold. It is a real checkbox underneath (visually hidden), so keyboard, screen readers and form data work as usual; focus shows as a gold ring around the pill. Use the ChoiceChip component, tone="light" on white. Not for a single on/off setting, and never as a button.
Text link: a citation, not a button
For a reference dropped inside a sentence, running text and an actual button read as too much weight. No uppercase, no arrow, no pill, just an underline that shifts to gold on hover. Same family as the CTA above, quieter register.
Talked through a version of this on Bipa Cast #74, if podcasts are more your speed.
Talked through a version of this on Bipa Cast #74, if podcasts are more your speed.
Fintech · Design Leadership · 2016–2020
I joined when the design team was just me. I left when it was twelve.
My work was to redesign the signup, transfer and acquisition journeys, and to structure the design team from scratch as the company grew from 10 to over 300 employees.
12×
design team growth
300+
company headcount
$229M
exit valuation
4 yr
of execution
