Frosted Lime Indie Classic

/frostedLimeIndieClassic
A crisp design system for indie products focused on clarity, trust, and conversion, using glassmorphic depth, vibrant lime-cyan gradients, and confident typography to achieve a high-end, modern, and approachable feel.
1 likes
1 bookmark
Jun 26, 2026
Design System Content
# Frosted Lime Indie Classic Design System

A crisp, high-conversion design language for indie products that demand instant polish and absolute trust.

---

## Philosophy

> "Clarity accelerates trust; motion creates emotion."

This system is engineered for independent creators who need their products to immediately punch above their weight class. It leverages crisp boundaries, deliberate staging, and a restrained but vibrant energy. The design should feel effortlessly modern and natively digital, utilizing soft textures and precise structural framing rather than vast, empty minimalism. 

### Core Beliefs

1. **Conversion through Clarity** — The hierarchy points flawlessly to the primary action. Typography and layout work in tandem to eliminate friction and guide the eye.
2. **The High-Fidelity Stage** — UI elements and product screenshots are treated as physical artifacts, resting on subtle grid textures and framed by soft, multi-layered shadows.
3. **The Gradient is a Scalpel** — The signature lime-to-cyan gradient is an electric pulse. It is never used as a background fill; it exists only to highlight critical conversion points and micro-interactions.
4. **Architectural Glass** — Depth is created through frosted glassmorphism rather than solid layering. Navigation and floating menus should feel like they are hovering just above the surface.
5. **Fluidity implies Quality** — Every entrance relies on smooth, Framer-level kinematics. Elements don't just appear; they gracefully slide and fade into existence.

### Strict Rules

* **No Flat Colors for Primary CTAs** — The primary conversion button must always utilize the exact lime-to-cyan gradient.
* **80% Width Anchoring** — The primary navigation must float and be constrained to 80% of the viewport width. Full-bleed navbars are strictly forbidden.
* **Semibold Heroes Only** — Large, confident semibold typography drives the hero section. Light-weight headings are not permitted.
* **Restrained Social Proof** — Avatars and star ratings must be highly compact, subtly integrated beneath the CTA, and never visually compete with the primary headline.
* **No Heavy Blocks** — Cards and containers must use pearl gray tones, pale aqua tints, or frost white with hairline dividers.

---

## Color Palette

### The Canvas & Neutrals

The palette replaces stark architectural greys with softer, more organic tech neutrals: frost white canvases, pearl gray surfaces, and graphite text.

```css
/* Backgrounds */
bg-white              /* Frost white: Main canvas background (#ffffff) */
bg-slate-50/60        /* Pearl gray: Secondary panels, subtle card fills (#f8fafc) */
bg-slate-100/50       /* Soft container zones, inactive states */
bg-sky-50/40          /* Pale aqua: Ultra-subtle interactive hover states */
bg-yellow-50/50       /* Lemon cream: Extremely subtle highlight blocks/notices */

/* Borders & Dividers */
border-slate-100      /* Hairline dividers, soft structural framing */
border-slate-200      /* Default container borders, input rings */
border-slate-300      /* Hover state borders, focused elements */

/* Text Hierarchy (Graphite & Slate) */
text-slate-900        /* Graphite: Primary text, semibold hero headlines (#0f172a) */
text-slate-700        /* Soft Graphite: Body copy, concise supporting text */
text-slate-500        /* Soft Slate: Metadata, restrained social proof text (#64748B) */
text-slate-400        /* Muted placeholders, subtle system hints */

```

### The Pulse (Accent Gradient)

The brand's entire energetic identity is condensed into a highly controlled gradient. 

```css
/* The Primary Gradient: Frosted Lime to Cyan */
bg-gradient-to-r from-lime-400 to-cyan-400    /* Primary CTAs, progress bars */
text-transparent bg-clip-text bg-gradient-... /* Rare, hyper-specific text highlights */
border-image-source: linear-gradient(...)     /* Active input halos, active nav tabs */

/* Micro-Interaction Hints */
bg-lime-50 text-lime-700                      /* Success tags, minor positive trends */
bg-cyan-50 text-cyan-700                      /* Informational badges, structural pills */
```

### Destructive Actions

```css
hover:bg-rose-50
hover:text-rose-600
hover:border-rose-200
```

---

## Typography

The typography leverages modern, geometric sans-serifs (Manrope, Plus Jakarta Sans, Figtree, Geist, or Satoshi). It relies on confident, slightly tighter letter spacing and semibold weights to project authority.

### Font Weights

```css
font-normal      /* Supporting copy, secondary UI text, metadata */
font-medium      /* CTA buttons, navigation links, active states, tags */
font-semibold    /* Mandatory for large hero headlines, section titles, social proof numbers */
font-bold        /* Reserved strictly for inline text emphasis inside paragraphs */
```

### Font Size Scale

```css
text-[11px]      /* Tiny interaction details, tooltip microcopy */
text-xs          /* Restrained social proof labels, system status (12px) */
text-sm          /* Navigation links, concise supporting metadata (14px) */
text-base        /* Standard concise supporting copy, dual CTA buttons (16px) */
text-lg          /* Subheadings, featured feature titles (18px) */
text-xl          /* Standard component headers (20px) */
text-3xl         /* Secondary page headers */
text-5xl-7xl     /* Large semibold hero headlines (Responsive) */
```

### Letter Spacing & Transforms

```css
tracking-tight   /* Large semibold hero headlines (-0.02em to -0.04em) */
tracking-normal  /* Body text, CTA buttons */
tracking-wide    /* Uppercase sub-labels, social proof metrics */

uppercase        /* Tiny structural labels, "TRUSTED BY" micro-headers */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 6xl | semibold | slate-900 | tight | none |
| Supporting Copy | base | normal | slate-600 | normal | none |
| Primary CTA | base | medium | white | normal | none |
| Section Eyebrow | xs | medium | cyan-600 | wide | uppercase |
| Social Proof | xs | medium | slate-500 | normal | none |

---

## Animation System

### Core Philosophy: Framer-Level Fade-Up

Interfaces should assemble themselves with fluid, spring-based motion. Elements fade and glide upward, creating a sense of lightness and meticulous engineering.

### Page Transitions (The Smooth Fade-Up)

```tsx
initial={{ opacity: 0, y: 24 }}
animate={{ opacity: 1, y: 0 }}
transition={{ 
  duration: 0.5, 
  ease: [0.16, 1, 0.3, 1], /* Custom spring-like easing */
  staggerChildren: 0.1 
}}
```

### Micro-Interactions (The Hover Lift)

Buttons and cards feature subtle physical lifts accompanied by layered shadow expansion.

```tsx
whileHover={{ y: -2, scale: 1.01 }}
transition={{ type: "spring", stiffness: 400, damping: 25 }}
```

---

## UI Components

### The 80% Glassmorphic Navbar

A floating, frost-white transparent element that anchors the top of the page, dropping a soft shadow over the subtle grid texture beneath.

```tsx
<nav className="w-[80%] max-w-5xl mx-auto mt-6 px-6 py-3 bg-white/70 backdrop-blur-md border border-white/20 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] flex justify-between items-center sticky top-6 z-50">
  {/* Nav Links and Gradient Highlight */}
</nav>
```

### The Wide Horizontal Screenshot

Positioned below the hero, this asset anchors the product's value. It features a thin structural frame and a signature soft, layered shadow.

```tsx
<div className="w-full max-w-6xl mx-auto mt-16 rounded-xl border border-slate-200/60 bg-white/50 p-2 shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05),0_0_40px_rgba(0,0,0,0.02)] backdrop-blur-sm">
  <img src="/app-ui.webp" className="w-full rounded-lg border border-slate-100 shadow-sm" />
</div>
```

### Subtle Grid Texture

Used in the hero or canvas background to provide depth without adding noise.

```tsx
<div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]">
  {/* Radial gradient mask to fade grid at edges */}
  <div className="absolute inset-0 bg-white [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
</div>
```

---

## Component Catalog

### Dual CTA Buttons

Always presented as a pair in hero sections: one gradient primary, one soft ghost secondary.

```tsx
// Primary CTA (Slightly Rounded, Lime-to-Cyan)
"bg-gradient-to-r from-lime-400 to-cyan-400 text-slate-900 font-medium text-base rounded-xl px-6 py-3 shadow-[0_4px_14px_0_rgb(34,211,238,0.39)] hover:shadow-[0_6px_20px_rgba(34,211,238,0.23)] hover:-translate-y-0.5 transition-all duration-200"

// Secondary CTA (Pearl Gray / Glass)
"bg-slate-50/80 backdrop-blur-sm border border-slate-200 text-slate-700 font-medium text-base rounded-xl px-6 py-3 hover:bg-slate-100/80 hover:text-slate-900 transition-all duration-200"
```

### Restrained Social Proof

Compact, grayscale or muted color avatars layered tightly, alongside small slate-colored text.

```tsx
<div className="flex items-center gap-3 mt-6 opacity-90">
  <div className="flex -space-x-2">
    {/* 24px width avatars with 2px white borders */}
  </div>
  <div className="flex flex-col">
    <div className="flex text-lime-500 text-[10px]">★★★★★</div>
    <span className="text-xs font-medium text-slate-500">Trusted by 2,000+ creators</span>
  </div>
</div>
```

### Cards

Cards use soft pearl gray fills rather than stark white, providing a tactile, grounded feel against the frost white canvas.

```tsx
// Standard Feature Card
"bg-slate-50 border border-slate-100 rounded-2xl p-6 hover:shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:bg-white transition-all duration-300"
```

### Badges & Status Indicators

```tsx
// Lemon Cream Highlight Badge
"px-2.5 py-1 text-xs font-medium rounded-full bg-yellow-50 text-yellow-700 border border-yellow-100/50"

// Nav Highlight / New Feature Accent
"px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide rounded-full bg-gradient-to-r from-lime-300/20 to-cyan-300/20 text-cyan-800 border border-cyan-200/50"
```

---

## Quality Checklist

* [ ] Does the primary navbar float securely at exactly 80% width with a glassmorphic blur?
* [ ] Is the hero headline utilizing a `font-semibold` weight with `tracking-tight`?
* [ ] Are you exclusively using the lime-to-cyan gradient for the primary CTA and essential interaction hooks?
* [ ] Does the primary product screenshot feature a thin structural frame and a soft, multi-layered drop shadow?
* [ ] Is the social proof neatly constrained, using `text-xs` and muted slate tones so it doesn't fight the headline?
* [ ] Do elements enter the viewport via a smooth, 0.5s Framer-style fade-up (`y: 24` to `y: 0`)?
* [ ] Is the background textured with a subtle grid rather than left completely flat and empty?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-contrast graphite text on frost white backgrounds.
* The tasteful lime-to-cyan gradient on primary buttons, active icons, and progress bars.
* Subtle grid patterns masked by radial gradients.
* Soft layered shadows (`shadow-[0_8px_30px_...]`).
* Slightly rounded corners (`rounded-xl` and `rounded-2xl`).

### ✗ Not Allowed

* Edge-to-edge (100% width) top navigation bars.
* Flat, unshadowed product screenshots dropped raw onto the canvas.
* The lime-to-cyan gradient used as a large background fill or text color for entire paragraphs.
* `font-light` or `font-thin` weights for any typography.
* Hard, dark, or muddy drop shadows (opacity must remain under 8%).