Spacing
Use a 4px base with 8, 12, 16, 24, 32, 48, 64, and 96px steps. Desktop section padding: 64–96px. Mobile: 40–64px. Card padding: 20–32px.
Brand foundationsSpace & shape
Space is part of the identity.
Desktop composition
Maximum content width: 1440px. Outer gutters: 32–80px. Hero copy occupies roughly 44%; the human composition takes 56%. Keep the face clear and the UI in the lower third.
Responsive behavior
At roughly 900px, stack copy above the portrait. Below 600px, put the three cards in normal flow in journey order. Integration logos wrap. The dark architecture diagram becomes vertical.
Space you can see
Use the 4px base for measured relationships. Choose the gap for its job, rather than filling every empty area.
4px
8px
12px
16px
24px
32px
48px
64px
96px
Within a component
8px between related elements.
Between ideas
24px between sibling components.
Room to breathe
64px for a distinct content group.
Softness with a purpose
Control · 8px
Inputs and compact controls
Card · 16px
Reusable content surfaces
Panel · 24px
Major regions and overlays
Pill · 999px
Buttons and status badges
Three levels of elevation
Quiet
A border separates ordinary content. Start here.
1px borderRaised
A soft shadow lifts the hero's supporting UI.
--shadow-cardFloating
More depth for overlays that sit above the page.
--shadow-floatingBreakpoints are starting points; switch layouts before content collides. Do not shrink the desktop mockup into an unreadable mobile image. Build text and UI as HTML, and reserve positioning for the decorative composition.