skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-lovable

Apply Lovable's design system tokens and component styles when generating UI code.

Updated Feb 23, 2026
Search Tags:#typography#design system#css#design tokens#lovable#ui generation#brand styling
One-click install
npx skills add https://github.com/deepparser/skills --skill design-lovable-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-lovable
Source: https://github.com/deepparser/skills/tree/main/design-lovable
Command: npx skills add https://github.com/deepparser/skills --skill design-lovable-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Recreating Lovable's distinctive warm, editorial visual identity requires exact design tokens that are hard to guess, and this Skill provides the complete specification so generated interfaces match the brand accurately. ## Core Features & Use Cases - Complete Design Tokens: Exact color values (cream #f7f4ed, charcoal #1c1c1c, opacity-based neutral scale), typography specs for Camera Plain Variable, spacing scale, and border radius system. - Component Recipes: Detailed styling for buttons (dark with signature inset shadow, ghost, cream, pill), cards, forms, navigation, template galleries, and stats bars. - Light & Dark Previews: Bundled HTML preview files showing the full token catalog visualized in both themes for verification of CSS values. - Use Case: When asked to build a landing page or dashboard styled like Lovable, generate a hero with 60px weight-600 headlines at -1.5px letter-spacing on a cream background with inset-shadowed dark CTA buttons. ## Quick Start Build a landing page hero section styled like Lovable with a cream background, dark CTA button, and ghost secondary button.

Frequently Asked Questions about design-lovable

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a website look like Lovable?▼

Use a cream background (#f7f4ed) instead of white, charcoal text (#1c1c1c), and Camera Plain Variable typography with negative letter-spacing on headings. Cards use 1px solid #eceae4 borders with 12px radius instead of drop shadows.

What colors does the Lovable design system use?▼

The palette centers on cream (#f7f4ed) backgrounds, charcoal (#1c1c1c) text, and off-white (#fcfbf8) button text. All grays derive from charcoal at opacity levels (0.03 to 0.83), with #eceae4 for borders and a blue focus ring at 50% opacity.

What font does Lovable use on its website?▼

Lovable uses Camera Plain Variable, a humanist sans-serif with a continuous weight axis supporting values like 480. Headings use weight 600 with negative letter-spacing (-0.9px to -1.5px), while body text uses weight 400 with system-ui fallbacks.

Does this design system support dark mode?▼

Yes, the skill includes a dark theme preview (preview-dark.html) that inverts the palette to a dark warm background (#1a1916) with light text (#e8e5de). Both light and dark HTML previews visualize all tokens, components, and elevation levels.

Why do Lovable-style buttons look tactile instead of flat?▼

Dark buttons use a signature multi-layer inset shadow combining a white top highlight line, a dark inner ring, and a soft drop shadow. This creates a pressed-into-surface feel rather than a floating appearance, and active states reduce opacity to 0.8.

Related Skills

Explore More Design & Creative Skills→
pikkujspikkujs

copywriting

Generate conversion-focused marketing copy for web pages.

Official
Intermediate
PlayableIntelligencePlayableIntelligence
307

game-deploy

Deploy browser games to here.now, GitHub Pages, Vercel, or Netlify.

Official
Advanced
CleanExpoCleanExpo

visual-qa

Capture deterministic Playwright screenshots and diff them against stored baselines.

Community
Intermediate
ArnavPuriArnavPuri
3

design-context

Establish and manage design context with brand identity, color palettes, and typography.

Community
Intermediate