A clean, friendly modern-SaaS interface — white canvas, near-black primary action, light-gray cards holding real product UI fragments. Tweak it, expand it, make it Stelo's.
Stelo's marketing surface is white canvas with a near-black primary action. The system reads as confidently engineered without trying to impress — every band has clear hierarchy, generous whitespace, and a single primary action.
The page floor stays white. The primary action stays #111111. The brand reads as engineered, not decorated.
Display headlines use a custom geometric face with negative letter-spacing. Body, buttons, nav stay in Inter.
Light-gray cards (#f5f5f5) hold abstract feature claims. White cards with chrome hold real product fragments.
The dark navy footer (#101010) is the only dark surface in the system. The light-to-dark transition is the editorial rhythm.
Black ink for action and headlines. Gray surfaces for cards. A small pastel set for badges. Brand accent and semantic colors stay rare and intentional.
Display sizes use weight 600 with negative letter-spacing (-0.5 to -2px). Body, UI, and captions stay in Inter. The boundary is strict — never blur the trinity.
Eight spacing tokens on a 4px base. Section padding stays at 96px — modern-SaaS standard, calibrated for fast scanning.
Elevation is small and modern — never neumorphism, never glass. Color-block contrast does heavy lifting. Radius climbs in eight clear steps.
Component instances rendered live below. Each card shows the YAML key and the rendered piece — the system as it actually behaves.
Send a single link. Let people pick the time. Stelo handles the rest.
"Stelo cut our scheduling thrash to nothing. Cleanest booking flow we've ever shipped."
The rules here are tight on purpose. Cross them and the brand drifts toward generic SaaS.
Grids collapse from 4 → 2 → 1 columns. Feature cards keep their internal padding at every size. The dark footer stays distinct everywhere.
| Name | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Hamburger nav · h1 64→32px · hero stacks · feature/pricing 1-up · footer 4 cols → 1 |
| Tablet | 768–1024px | Top nav tightens · pill-group wraps · features 2-up · pricing 2-up |
| Desktop | 1024–1440px | Full nav · features 3-up · pricing 4-up |
| Wide | > 1440px | Same as desktop with more outer breathing room · max content width caps at 1200px |
A working list of the places where the spec is thin. Tweak from here as the product matures.