05 · Design / Foundations
The 8-point system.
Everything steps in multiples of four and eight. Spacing, type, columns, corner radii. It is the quiet discipline that makes the whole brand feel intentional and calm, even when different people build different things.
Spacing scale
Nine steps. Every gap and pad snaps to one.space-1
4px
Tight detail, icon gaps
space-2
8px
Chip padding, small gaps
space-3
16px
Default gap, grid gutter
space-4
24px
Card padding (min)
space-5
32px
Generous card padding
space-6
48px
Section padding (min)
space-7
64px
Section padding
space-8
96px
Large section breaks
space-9
128px
Hero spacing
Columns
6, 8, 12, or 16 columns. 8 or 16 px gutters.Pick the column count that fits the density. 12 is the workhorse for product and marketing. 6 for simple editorial layouts. The gutter is always 8 or 16 px. Nothing in between.
12 columns · the default
1
2
3
4
5
6
7
8
9
10
11
12
8 columns
1
2
3
4
5
6
7
8
6 columns
1
2
3
4
5
6
Radii
Soft corners always. Nothing is square.xs
4px
Inner chips
sm
8px
Nested cards
md
16px
Inputs, tiles
lg
24px
Cards
xl
32px
Big surfaces
pill
1000px
Buttons
The nesting rule
Inner radius = outer radius minus inner padding. Outer card at 24, padding of 16, gives an inner radius of 8. This keeps concentric corners visually parallel.
Why it matters
When a rounded card sits inside another, mismatched radii make the corners look lumpy. Subtracting the padding keeps the curves concentric, so nested surfaces feel like they belong together. Buttons are the exception. They are always full pills.
Depth from color, not shadow
Flat design. The single most-broken rule, so look closely.
On brand
Hairline border
A 1-px Lunar Dust border separates this small card from the page. Soft corners do the rest. Calm, flat, intentional.
Never
Drop shadow
Shadows imply physical elevation we don't use. They read as generic SaaS, not Planetary Talent. No drop shadows, inner shadows, or glows. Ever.
When a card gets a border
A contrast function, not a habit. Borders exist to separate a card from what's behind it.
1
Is the card the same color as what's behind it?
White on white, or Cosmic Fog on Cosmic Fog, always gets a border, at any size. Without it there's no edge at all. Same in dark mode: a Graphite Core card on a Graphite Core surface always gets a Crater Shadow border.
2
Does the background already provide contrast?
White on Cosmic Fog, or any card on a tint. The tonal shift does the work, so the border becomes a size decision. Small cards get borders. Large cards don't.
3
How small is small?
If every card in the group is narrower than 25% of the layout, or the group is a row of four or more, they all get borders. Anything larger stands on its own.
4
Is it part of a group?
Decide once for the whole group. All bordered or none. If a single card in the group wouldn't qualify, nobody gets one. A 50% card beside two 25% cards means no borders anywhere in that row.
Border
Small cards, four across
Under 25% of the layout and in a row of four. Each needs its own edge, so every card in the row gets one.
No border
Large section card on Cosmic Fog
A full-width white surface on Cosmic Fog. The tonal shift is enough, so the border would only add noise.
Full-width section surface
Border
Same color on same color, any size
White on white, or Cosmic Fog on Cosmic Fog. No tonal difference at all, so the hairline is the only thing defining the edge.
Card inside a white surface
No border
Mixed widths in one row
A 50% card beside two 25% cards. The large one wouldn't take a border, so none of them do. The group always wins over the per-card rule.
50%
25%
25%
Border weight
When a border is warranted, it's always 1 px: Lunar Dust in light mode, Crater Shadow in dark. Never heavier, never a shadow.
In-card divider
Section one
Section two, split by a 1-px hairline. No heavier rules.
Layout rules
How structure and imagery come together.5,000+
One wow-factor focal point
An oversized number, a hero image, or one big Moret statement. Build the page around it. Don't let two focal points compete.
Start for free
Book a call
One primary action per view
A single Rocket Flame button leads. Secondary actions are ghost or light. More than one primary and neither wins.
Headline here.
Type on imagery
Never a gradient or a scrim. Either set the type in the image's own negative space, or put it on a solid card that sits on top.
Imagery rounds to card radius
16 to 24 px in product. Full-bleed for marketing heroes and deck title slides. Never sharp-cornered inside product surfaces.
breathing room
Generous padding
At least 24 px on cards, 48 to 96 px on sections. Whitespace is not wasted space. It is how the page breathes.
20% tint
Tints for rhythm
Alternate section backgrounds with 20% color tints (seafoam, gold, blue) to give a long page rhythm without new hues.