BUILD
- Build a complete Flat marketing homepage. Not a card, not an isolated navbar, not a dashboard, not tabs.
- Domain from Use on: consumer apps and marketing sites first; dashboards reuse the solid fills and hairlines, not the accent everywhere.
STYLE
- Flat: solid color fills, no gradients, hairline borders, one confident accent, a quiet shadow only where a card needs lift
- Page background a flat light tint #EDF0F4; every block is a solid white panel with a 1px #E4E7EC hairline
- Accent #FF5A3C carries the primary actions and kickers; secondary blue #2D7FF9 for one link state only; ink #15181E
- Radius 14px on cards, 12px on buttons. Shadow is subtle: 0 2px 8px rgba(21, 24, 30, 0.05). No gloss, no bevel
- Type: a clean geometric sans (Inter / Geist) for UI. No serif, no neon
LAYOUT
- Container max-width 1120px. Flat tint ground; every block is a solid white panel, never a gradient slab
- Top bar is a solid white chrome: wordmark left, three links, search field, primary CTA — hairline bottom
- Color blocks (the hero accent strip, the pricing middle column) are the only filled color on the page
SECTIONS
1. Hero: a solid white panel with headline "Color is the interface.", kicker NEW, one dek line, primary CTA Start free plus ghost See the kit
2. Three solid value cards: Solid, Quiet, Fast — kicker, one line, Read more each
3. Feature band: two columns, left a solid accent strip block, right a short list of four claims
4. Pricing strip: three solid columns, the middle one filled #FF5A3C with white text
5. Closing CTA band: a wide solid panel with one accent CTA
6. Three-column solid footer: Product / Company / Colophon
INTERACTION
- Hover lifts each panel 2px and turns its hairline to the accent; filled buttons darken one step
- Focus is a 2px solid #FF5A3C outline, never a glow ring
- Color stays flat on hover — no gradient fades, no gloss sweeps
MOTION
- Motion is short and linear: 140ms ease for lifts, no overshoot, no bounce
- Use ease, not steps; panels settle, they do not spring
- Entrance is a 8px rise with the panel fading in, staggered 40ms per card
- prefers-reduced-motion: no rise, no stagger, panels appear instantly
TECHNICAL
- React, Tailwind CSS, a .flat surface utility (solid fill + hairline + quiet shadow). One homepage route.
DON'Ts
- Do not call this skeuomorphic: flat has no bevel, gloss, or faux texture; surfaces are flat
- Do not call this neo-brutalism: corners are rounded and the border is a quiet hairline, not a hard black rule
- No gradient fills, no neon, no drop shadow heavier than 8px of 5% black, no glass
- Do not output only a headline plus two empty cells. Do not make every surface a solid accent block