Design teardown
Miro
A warm gray marketing page with a white bar, a large centered headline, and a living canvas in the hero. Blue carries the main action, and yellow is reserved for the selected pill.
miro.com
Design character
Warm gray workshop
The page reads as a calm studio rather than a dark product console. A sticky white bar sits over a light gray stage, the hero is a slightly lighter panel with a soft bottom curve, and a yellow-pink glow sits behind floating cards. Headlines are short, tightly tracked, and set in two lines. Supporting lines are a single muted sentence. Cards and stats do the explaining, so the writing stays brief and declarative.
Typography
Display and navigation use Roobert PRO, with a medium cut for headlines and a semibold italic for large numbers. Paragraphs, buttons, and pills use Noto Sans. Text inside the canvas demo uses Inter.
Color system
The stage is warm gray, surfaces are white, and text is near-black with a cooler gray for secondary lines. Blue is the only strong action color. Yellow marks the selected pill and the small mark in the header. Pastel pills and a yellow-pink glow add the rest of the color.
Spacing and geometry
Spacing follows an 8px rhythm with generous section padding and tighter control padding. Corners are soft on controls and rounder on cards, pills, and the hero panel.
Layout
A full-width white bar stays fixed. The hero is centered. Below it, content alternates between a centered text column, three-up tiles, a sideways card scroller, and a six-column footer.
Motion
The hero cards drift slowly. Testimonials rise in once. Controls change color on a short ease. A blue ring pulse is defined for calls to action.
UI fingerprint
- Yellow selected pill One item in a white track turns #fde050 while the others stay white.
- Blue only for action The header action is #3859ff; the rest of the chrome stays gray, white, and ink.
- Glow behind the demo A radial wash of #ffdc4a and #f17de5 sits behind the floating cards.
- Italic numbers Large stats use the semibold italic cut at 48px with tight tracking.