Unlimited Lovable

Overview

Unlimited Lovable is a high-velocity SaaS reseller platform built on a **Production-Minimalist** aesthetic—dark, focused, and unapologetically technical. The brand serves developers and AI app builders who demand speed without compromise: unlimited Lovable.dev prompts, instant delivery (2 minutes), and zero credit anxiety. The visual language combines a near-black canvas (#0c1d16) with vibrant emerald accents (#10b981, #1ebe57, #25d366) that signal energy, trust, and forward momentum. Every pixel reinforces the core promise: production-grade reliability at startup velocity.

The tone is direct, confident, and honest. Vocabulary leans technical but never gatekeeping—phrases like "pure production," "no daily caps," "no credit anxiety," and "live since Feb 2026" establish credibility through specificity, not hype. The brand personality is the founder-engineer who ships fast, communicates clearly, and backs claims with proof (544+ orders delivered, 2-minute average delivery, encrypted checkout). Example sentence in brand voice: "We are the only team still operating in the market after the recent Lovable updates."

Colors

The color system is built on **high-contrast dark minimalism with strategic emerald dominance**. The primary accent, emerald green (#10b981), is the signature CTA color—used on "Get Access," "Order Now," and all interactive affordances. It appears frequently but never overwhelmingly, creating a visual rhythm that guides attention without fatigue. The secondary accent, WhatsApp green (#25d366), reinforces urgency and trust (used in badges, delivery confirmations, and secondary CTAs). The surface stack uses deep forest tones (#0c1d16 base, #142820 container, #284a3e highest) to create depth without relying on shadows alone. On-surface text is warm cream (#f7f4ee), chosen for readability over pure white to reduce eye strain on dark backgrounds. Secondary surfaces (#ebe7e0, #dcd8d0) provide ne

Typography

The type system pairs **Space Grotesk** (geometric, technical, high-energy) for headlines and display text with **DM Sans** (humanist, warm, approachable) for body and UI text. This pairing communicates precision without coldness: Space Grotesk's sharp geometry signals engineering rigor, while DM Sans's curves keep the interface approachable. Display (84px, 700wt, -0.04em tracking) is reserved for hero headlines like "Build faster than you think." Headline-lg (40px, 600wt) anchors section breaks. Body-lg (18px, 400wt, 28px line-height) is used for hero copy and feature descriptions—the 28px line-height (1.56x) ensures readability on dark backgrounds. Label-md (14px, 600wt) is applied to all button text and UI labels. Label-sm (12px, 700wt, 0.05em tracking) is used for badges, timestamps, a

Layout

The layout follows a **fluid 12-column grid with a 1600px container max-width**, optimized for desktop-first delivery (the product is a browser extension, so mobile is secondary). The page rhythm uses semantic spacing: lg (40px) for major section breaks, md (24px) for component padding and inter-element spacing, sm (12px) for internal component spacing. The hero section uses full-width background with centered content at max-width, creating a sense of scale. Cards and containers use md padding (24px) internally, with lg spacing (40px) between sections. The gutter is fixed at 24px on desktop, creating a consistent rhythm. Whitespace is intentional and generous—the dark background makes dense layouts feel claustrophobic, so breathing room is critical. The notification bar at the top uses ful

Elevation & Depth

Depth is achieved through **layered surface colors and subtle shadows**, not aggressive drop-shadows. The elevation stack is: Level 1 (Base): solid #0c1d16 background with no shadow. Level 2 (Standard Card): surface-container (#142820) with 1px border at rgba(247, 244, 238, 0.1) and box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08). Level 3 (Elevated/Modal): surface-container-high (#1e3a30) with 1px border at rgba(247, 244, 238, 0.15) and box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12). Glass overlays (header, notification bar) use backdrop-filter: blur(20px) with background: rgba(12, 29, 22, 0.75) and a

Shapes

The shape philosophy is **Technical Warmth**—sharp enough to signal precision, rounded enough to feel approachable. Buttons use md radius (0.75rem / 12px), creating a subtle softness that prevents the UI from feeling austere. Cards use lg radius (1rem / 16px) for a slightly more generous curve, signaling containment and safety. Input fields use DEFAULT radius (0.5rem / 8px) for a neutral, utilitarian feel. Badges and pills use full radius (9999px) to signal completeness and finality (e.g., "Secure," "Live"). The notification bar at the top uses 0px radius (sharp corners) to signal system-level

Components

Action Elements **Button-Primary** (#10b981, 48px height, 16px 28px padding, md radius, label-md typography, 700 weight) is the signature CTA. On hover, shift to primary-fixed-dim (#10b981 at reduced opacity) with a 150ms ease-out transition. On active/press, shift to primary-container (#104c33) to signal commitment. Focus state: 3px ring at rgba(16, 185, 129, 0.1). **Button-Secondary** (transparent background, 1px outline at outline-variant, same dimensions) is used for secondary actions. On hover, fill with surface-container-high and text shifts to primary. Transition: 150ms ease-out. **Button-Ghost** (transparent, no border, on-surface text) is used for tertiary actions and navigation links. On hover, underline appears at 2px solid primary.

Containers & Surfaces **Card** (surfa

Do's and Don'ts

**Do**

• Do use emerald green (#10b981) exclusively for primary CTAs and focus states—it's the brand's signature and should never be diluted or overused.
• Do maintain high contrast between text and background; the dark canvas demands on-surface (#f7f4ee) for all body text to ensure readability.
• Do apply negative letter-spacing (-0.02em to -0.04em) to all Space Grotesk headlines to tighten the geometric letterforms and reinforce technical precision.
• Do use the full surface-container stack (lowest, low, container, high, highest) to create depth without relying on shadows; this maintains the clean, minimalist aesthetic.
• Do apply 150ms ease-out transitions to all interactive state changes (hover, focus, active) to create a snappy, responsive feel.
• Do use full-width treatment for system-level notifications (header bar, alerts) to signal importance and urgency.

**Don't**

• Don't use pure white (#fff) for text or backgrounds; the brand uses warm cream (#f7f4ee) and deep forest (#0c1d16) to reduce eye strain and maintain warmth.
• Don't apply heavy drop-shadows (> 0.12 opacity); instead, use the surface-container stack and subtle 1px borders to create depth.
• Don't mix emerald green with other accent colors in the same component; primary (#10b981) and tertiary (#25d366) should never appear together in a single button or badge.
• Don't use rounded corners > lg (1rem) on buttons or inputs; the brand's technical aesthetic demands restraint—full radius is reserved for pills and badges only.
• Don't apply text-shadow to body text; it's only used on small labels (label-sm) over busy backgrounds to maintain legibility.
• Don't use the secondary color (#ebe7e0) for interactive elements; it's reserved for neutral containers and backgrounds to avoid confusion with primary CTAs.