Candy Cloud App Gallery Design System

/candyCloudAppGalleryDesignSystem
A visually delightful system for B2C apps, balancing playful candy gradients and tactile softness with precise, polished layouts and crisp, grounded typography.
Jul 24, 2026
Design System Content
# Candy Cloud App Gallery Design System

A design language for cheerful, polished, and highly engaging B2C digital experiences.

---

## Philosophy

> "Softness invites interaction; structure ensures trust."

This system creates consumer-facing interfaces that feel welcoming, tactile, and impeccably polished. It balances the playful energy of candy-inspired colors with rigorous alignment and clean typography. Gradients are treated as physical presentation stages rather than chaotic wallpapers, bringing focus and premium framing to product interfaces and features.

### Core Beliefs

1. **Gradients are stages, not skies** — Candy colors (lilac, rose, ice) are strictly confined to large, rounded presentation pads to frame screenshots and mockups, keeping the main canvas crisp and white.
2. **Confident geometry** — Everything is grounded in friendly but deliberate shapes. Pill-shaped buttons and heavily rounded containers (squicles) dominate the UI.
3. **High-contrast anchors** — While the world is soft and pastel, the primary actions (CTAs) and typography use grounded, deep tones (plum, smoked berry, blue-black) to command attention.
4. **Vertical rhythm** — The layout flows naturally down the center axis. From the hero stack to alternating feature rows, alignment is deliberate, spacious, and balanced.
5. **Tactile softness** — Depth is achieved through subtle, dispersed shadows and frosted glass effects that mimic polished acrylic and soft silicone.

### Strict Rules

* **No Full-Page Gradients** — Backgrounds must remain warm white or mist gray. Gradients are exclusively for presentation surfaces and specific asset containers.
* **No Sharp Corners** — Buttons must be full pills (`rounded-full`). Cards and presentation pads require large, friendly radiuses (e.g., `rounded-3xl`).
* **Typography Pairing is Absolute** — Manrope is exclusively for headings. Geist (or DM Sans) is exclusively for supporting body copy.
* **No Pure Black** — Pure `#000000` creates harshness. Use Slate Graphite or Blue-Black to maintain a premium, approachable feel.
* **Icons Remain Monochrome** — To balance the vibrant presentation surfaces, system icons must remain small, crisp, and monochrome (graphite or gray).

---

## Color Palette

### Base & Surface Scale

The main canvas relies on warm whites and soft grays, allowing the candy gradients and dark interactive elements to pop.

```css
/* Core Backgrounds */
bg-warm-white         /* Main canvas background (#FAFAFA or #FCFCF9) */
bg-mist-gray-50       /* Soft alternating feature row backgrounds (#F3F4F6) */
bg-mist-gray-100      /* Secondary containers, FAQ card backgrounds */
bg-white/70           /* Frosted navigation, sticky headers (requires backdrop-blur) */

/* The Candy Cloud Gradients (Presentation Surfaces) */
from-pale-lilac       /* #E8DFF5 */
to-ice-blue           /* #D0E8F2 */
from-rose-quartz      /* #F5D0DA */
via-pale-lilac        /* Center gradient transitions */

/* Typography & Structural Neutrals */
text-blue-black       /* Primary Hero headlines, strong anchors (#0F172A) */
text-slate-graphite   /* Standard body copy, subheadings (#334155) */
text-mist-gray-500    /* Metadata, subtle labels, small icons (#64748B) */
border-mist-gray-200  /* Soft boundaries, FAQ dividers, subtle strokes */

/* CTAs & High-Contrast Interactive Elements */
bg-dark-plum          /* Primary action pills (#4A0E4E) */
bg-smoked-berry       /* Hover state for primary actions, secondary highlights (#7A2048) */
bg-blue-black         /* Alternative strong CTA, footer backgrounds */
```

### Destructive Actions

```css
hover:bg-rose-quartz/50
text-red-500
```

---

## Typography

A strict two-font system. Manrope delivers rounded, confident, and highly legible headings. Geist (or DM Sans) provides crisp, neutral, and readable supporting text that steps back and lets the headings shine.

### Font Weights

```css
font-medium      /* Standard body copy in Geist/DM Sans */
font-semibold    /* Feature titles, button labels, active navigation */
font-bold        /* Sub-section headers, large testimonial quotes */
font-extrabold   /* Confident Hero headlines in Manrope */
```

### Font Size Scale

```css
text-xs          /* Small tags, subtle UI metadata (12px) */
text-sm          /* Standard supporting copy, FAQ text, small icons (14px) */
text-base        /* Concise descriptions, button text, testimonial bodies (16px) */
text-xl          /* Standard feature row headings (20px) */
text-2xl         /* Sub-section headings, pricing tiers (24px) */
text-[38px]      /* STANDARD HERO HEADLINE (38px - Minimum) */
text-[42px]      /* MAX HERO HEADLINE (42px - Maximum for tight, compact feel) */
```

### Letter Spacing & Transforms

```css
tracking-tight   /* Large Manrope headings (Hero, H2) to unify the shape */
tracking-normal  /* Default paragraph flow for Geist/DM Sans */
tracking-wide    /* Small monochrome UI labels, tiny metadata */
```

### Hierarchy Examples

| Element | Font Family | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Manrope | 38-42px | extrabold | blue-black | tight |
| Concise Desc. | Geist / DM Sans | base/lg | medium | slate-graphite | normal |
| Feature Title | Manrope | 2xl | bold | blue-black | tight |
| Body Text | Geist / DM Sans | base | medium | slate-graphite | normal |
| CTA Pill | Geist / DM Sans | base | semibold | warm-white | normal |

---

## Animation System

### Core Philosophy: Cloud Bounce

Interactions should feel cheerful, tactile, and effortlessly smooth. Elements scale up softly with a gentle spring, avoiding rigid, linear movements.

### Page Transitions (Soft Fade & Scale)

```tsx
initial={{ opacity: 0, scale: 0.96, y: 15 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
transition={{ type: "spring", stiffness: 260, damping: 20 }}
```

### Micro-Interactions (The Pill Press)

Buttons and active cards physically depress when interacted with, utilizing a bouncy spring.

```tsx
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.95 }}
transition={{ type: "spring", stiffness: 400, damping: 17 }}
```

---

## UI Components

### The Presentation Pad (Candy Surface)

The core architectural unit of the design system. Instead of full-page gradients, screenshots and app mockups live entirely within these lush, oversized rounded rectangles.

```tsx
<div className="relative w-full max-w-4xl mx-auto rounded-[2.5rem] bg-gradient-to-br from-pale-lilac to-ice-blue p-8 sm:p-12 shadow-sm">
  {/* App Screenshot or Phone Mockup goes here */}
  <img src="/mockup.png" className="rounded-2xl shadow-xl shadow-blue-black/10 mx-auto" />
</div>
```

### Frosted Navigation

Keeps the hero layout feeling compact and modern while allowing the warm white background to softly blur beneath it as the user scrolls.

```tsx
<nav className="sticky top-0 z-50 w-full bg-warm-white/70 backdrop-blur-md border-b border-mist-gray-200/50">
  {/* Nav links and small dark plum CTA */}
</nav>
```

### Hero Headline Stack

A highly compact, reusable vertical composition.

```tsx
<header className="flex flex-col items-center text-center max-w-2xl mx-auto pt-16 pb-12">
  <h1 className="font-manrope text-[38px] md:text-[42px] font-extrabold text-blue-black tracking-tight leading-tight">
    Your App's Value Proposition Here.
  </h1>
  <p className="mt-4 font-geist text-base md:text-lg text-slate-graphite max-w-lg">
    A concise, single-sentence description supporting the confident headline.
  </p>
  <div className="mt-8 flex items-center gap-4">
    {/* CTA Row */}
  </div>
</header>
```

---

## Component Catalog

### Buttons (Pill CTAs)

Strictly pill-shaped (`rounded-full`). Highly contrasted against the soft backgrounds.

```tsx
// Primary CTA (Dark Plum)
"bg-dark-plum text-warm-white font-geist font-semibold text-base rounded-full px-8 py-3 hover:bg-smoked-berry hover:shadow-md transition-all duration-300"

// Secondary CTA (Subtle Mist)
"bg-mist-gray-100 text-blue-black font-geist font-semibold text-base rounded-full px-8 py-3 hover:bg-mist-gray-200 transition-colors"
```

### Feature Rows & Containers

Alternating vertical compositions with centered constraints. 

```tsx
// Soft Testimonial Card
"bg-warm-white rounded-3xl p-8 shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-white/60 flex flex-col items-center text-center"

// Spacious FAQ Row
"w-full max-w-3xl mx-auto py-6 border-b border-mist-gray-200 group cursor-pointer"
```

### System Icons

Icons strictly remain small and monochrome, complementing the candy surfaces without competing with them.

```tsx
// Small Monochrome Icon Wrapper
"w-10 h-10 rounded-full bg-mist-gray-100 text-slate-graphite flex items-center justify-center mb-4"
```

---

## Quality Checklist

* [ ] Is the Hero headline exactly between 38px and 42px and centered?
* [ ] Does the Hero section include the required sequence: frosted nav, headline stack, CTA row, and exactly one phone mockup below?
* [ ] Are all gradients strictly contained within large, rounded presentation pads (no full-bleed backgrounds)?
* [ ] Are all buttons shaped as perfect pills (`rounded-full`) using dark plum, smoked berry, or blue-black?
* [ ] Are you exclusively using Manrope for headings and Geist/DM Sans for body copy?
* [ ] Are shadows soft and dispersed (e.g., `4%` opacity black) rather than harsh and heavy?
* [ ] Are all UI icons small and monochrome (slate graphite or mist gray)?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-contrast pill buttons that pop against pastel gradient pads.
* Generous border radiuses (`rounded-2xl`, `rounded-3xl`, `rounded-full`).
* Center-aligned content stacks, especially in the Hero and lower vertical compositions.
* Soft, dispersed shadows that simulate natural studio lighting.
* Frosted glass/backdrop-blur effects for navigational elements.

### ✗ Not Allowed

* Full-page background gradients (the main canvas must be warm white or mist gray).
* Sharp corners (`rounded-none` or small radiuses like `rounded-sm`) on cards or buttons.
* Pure `#000000` text (always use blue-black or slate graphite).
* Left-aligned hero sections (the rhythm must remain vertically composed and centered).
* Colorful, complex illustrative icons that compete with the gradient presentation pads.
Preview