Cream-on-cream depth
--bg and --surface are the same warm parchment (#f7f4ed). The 1px #eceae4 border carries the containment — Lovable's depth model is borders, never drop-shadows on cards.
Inspect tokens →Reference fixture · lovable
Type a sentence in plain language and watch your idea become a working web app — no setup, no boilerplate, just a preview that updates as you tinker. Built warm, on cream, never on cold white.
What this fixture exercises
--bg and --surface are the same warm parchment (#f7f4ed). The 1px #eceae4 border carries the containment — Lovable's depth model is borders, never drop-shadows on cards.
Inspect tokens →Display type runs at 60px / weight 600 / -1.5px tracking. The variable axis lets weight 480 sit between regular and semibold for editorial moments. Body stays at 400, normal tracking.
Read the rule →Dark CTAs press into the cream with a multi-layer inset shadow: white highlight at 0.5px, dark ring at 0.5px, soft drop at 1px. The button feels pressed-into-paper, not floated above it.
Inspect shadow →Try it
The whole product begins from one prompt — the input below uses the same warm cream surface, the same #eceae4 border, the same Tailwind ring blue at 50% for keyboard focus. Form is page is craft.