rodmag® / design system

Design System

Editorial, high-contrast design system for rodmag — a hybrid design, growth and AI studio.

Colors

On surface-light
surface-light
#EEEEDF
On surface-dark
surface-dark
#101010

Only two hex values exist in this entire system — no white, no black, no gray, no third color. Whichever one isn't the background is always the text color.

Typography

Neue Haas Grotesk Display Pro is licensed and not bundled here — specimens render in a system fallback. Four weights exist: Thin 100, Light 300, Roman 400, Medium 500 — there is no Bold.

rodmag

display
Medium 500
9rem · 0.9 lh · -0.02em ls

Aesthetics without function is just surface work.

h1 (Roman) + Light italic emphasis
3.25rem · 1.05 lh

To make this possible, I developed the INTER™ methodology.

h1 (Roman) + Medium word emphasis
3.25rem · 1.05 lh

The growth strategist of the future is also a designer

h1-strong
Medium 500, single-tone
3.25rem · 1.05 lh

A hybrid studio and growth engine

h2
Medium 500
1.75rem · 1.15 lh

Working with design, data and AI also means obsessing over the how. There's no room for vision decks with no execution.

body
Light 300
1rem · 1.5 lh

With acquisition slowing down and the sales pipeline stuck, the fintech needed a fast way to unlock growth on both fronts.

case-body
Roman 400
0.9rem · 1.6 lh

Activations doubled. Inflows grew 8x.

caption
Light 300
0.8125rem · 1.4 lh

{QUOTE} · {BHAG} · INPUT

label (Medium) / label-bracket (Thin)
0.75rem · uppercase · 0.06em ls

Methodology™

tag-plain
Roman 400, no brackets
0.75rem · uppercase

Spacing

1 · 4px
2 · 8px
3 · 16px
4 · 32px
5 · 64px
6 · 96px

Radius

none · 0px
(every component)

Elevation & Depth

Flat surface

Solid color block, zero shadow, zero blur.

Photo depth

Depth via photography contrast only.

Border separation

Hairline border, no shadow, for card edges when needed.

Components

wordmark — docs/assets/logo.svg
slide-card / slide-card-dark
{ }rodmag

Aesthetics without function is just surface work.

{QUOTE}
{ }rodmag

To make this possible, I developed the INTER™ methodology.

{INTER}
slide-card — h1-strong & tag-plain variants
{ }rodmag

The growth strategist of the future is also a designer

Data is whatDrives design
{ }rodmag

There's a gap in how brands approach growth: fragmented teams, scattered tools, and no clear link between design, data and AI. I work in that intersection — where strategy becomes structure, and growth real.

BrandsProductsTeams
display-hero-text
{{ currentYear }}{ }

rod

{WHEN}
case-study-block
Fintech & Nespresso
Input
With acquisition slowing down and the sales pipeline stuck, the fintech needed a fast way to unlock growth on both fronts.
System
The mechanic was simple: deposit R$5,000, get a Nespresso. Behind it, a growth architecture designed for speed, desire and scale.
Acquisition
Activations doubled. Inflows grew 8x. AUM surged by 125% the following month.
full-bleed-photo
full-bleed-photo — zero radius, no border

Do's and Don'ts

  • Keep every card flat — color-block or photo, never shadowed.
  • Alternate surface-light and surface-dark deliberately for rhythm.
  • Keep corner radius at zero across every component.
  • Use label typography only for kickers and tags.
  • Don't add drop shadows, gradients, or glassmorphism.
  • Don't round any corner — no exceptions.
  • Don't mix in a second typeface.
  • Don't crowd a card — negative space is structural.