Pastel Citrus Phone Classic

/pastelCitrusPhoneClassic
A minimal yet friendly design system fusing high-tech clarity with soft, approachable consumer aesthetics using porcelain canvases, soft bento grids, rounded elements, and tightly contained pastel citrus gradients.
1 likes
0 bookmarks
Jun 17, 2026
Design System Content
# Pastel Citrus Phone Classic Design System

A design language where minimal startup clarity meets friendly consumer softness.

---

## Philosophy

> "Design should feel as approachable as a conversation and as polished as pebble glass."

This system creates a reusable, light landing aesthetic that bridges the gap between stark, high-tech minimalism and inviting consumer warmth. The interface feels clean, incredibly soft, and highly tactile. By relying on porcelain whites, deep graphites, and highly constrained pastel citrus gradients, the design establishes immediate trust while retaining a fresh, energetic undertone.

### Core Beliefs

1. **Containment is Comfort** — Information lives comfortably inside oversized rounded panels and soft bento grids, never bleeding chaotically into the canvas.
2. **Gravity is Centered** — The hero section acts as the absolute center of gravity: compact, highly focused, and anchoring the eye down to the staged phone mockup.
3. **Softness over Sharpness** — Fully rounded interactive elements and diffused iOS-style drop shadows replace harsh angles and flat, rigid boxes.
4. **Restrained Vibrancy** — Color is a spatial tool, not a background. Fresh pastel citrus gradients are strictly quarantined to product-shot containers, bento cards, and active microchips.
5. **Approachable Rhythm** — Typography pairs confident, bold display headers with highly legible, natural-reading paragraph fonts.

### Strict Rules

* **Gradients are Contained** — Never use pastel green-yellow gradients for typography, primary buttons, or full-page backgrounds. They belong exclusively inside specific containers or screenshot frames.
* **Charcoal for Action** — Primary conversion points (CTAs) are always fully rounded, high-contrast charcoal. No bright, flashy button colors.
* **Natural Shadows Only** — Shadows must emulate iOS depth (diffused, low opacity, wide spread). No harsh, dark, or muddy offsets.
* **Hero Must Stage the Product** — The hero section strictly follows a compact vertical stack terminating directly into a prominent phone mockup.

---

## Color Palette

### Base, UI & Contrast Scale

The foundation relies on ultra-clean whites and grays, building contrast up to a deeply grounded graphite and charcoal layer.

```css
/* Backgrounds & Canvas */
bg-porcelain          /* Main site canvas, absolute pure background (#ffffff) */
bg-chalk              /* Subtle offset panels, frosted navbar backing (#fafafa) */
bg-palegray           /* Secondary sections, spacious FAQ backgrounds (#f4f5f7) */

/* Borders & Dividers */
border-palegray       /* Fine borders for oversized rounded panels */
border-neutral-200    /* Structural card dividers, subtle bounding boxes */
border-neutral-300    /* Input outlines, inactive microchip edges */

/* High-Contrast Interactive Elements */
bg-charcoal           /* Primary CTA pair, dark tooltips (#1c1c1c) */
hover:bg-charcoal/90  /* Primary CTA hover state */
ring-charcoal/20      /* Focus rings for form elements */

/* Text Hierarchy */
text-graphite         /* Bold hero headlines, primary text (#222428) */
text-neutral-700      /* Approachable paragraphs, secondary descriptions (#4a4a4a) */
text-neutral-500      /* Micro-copy, inactive tabs, placeholder text (#737373) */

```

### The Restrained Accent: Pastel Citrus Gradients

Used exclusively to inject fresh energy into specific spatial boundaries (bento grids, product frames, and selected microchips). 

```css
/* Container Gradients (Green to Yellow Pastels) */
bg-gradient-to-br from-green-100 to-yellow-50     /* Soft bento background */
bg-gradient-to-tr from-lime-100/80 to-yellow-100  /* Screenshot frame staging */
bg-gradient-to-r from-green-200 to-lime-200       /* Selected microchip background */

/* Accent Micro-Text (Rare) */
text-lime-700         /* Small success indicators, subtle positive metadata */

```

---

## Typography

The typographic system utilizes a dual-font approach. **Manrope** or **Geist** provides confident, geometric structure for bold headings, while **Roboto** or **Inter** delivers an approachable, frictionless reading experience for body text.

### Font Weights

```css
font-normal      /* Inter/Roboto: Core body copy, accordion descriptions */
font-medium      /* Inter/Roboto: Fully rounded CTA buttons, avatar labels */
font-semibold    /* Manrope/Geist: Microchip text, bento card titles, navigation */
font-bold        /* Manrope/Geist: Text-4xl hero headlines, primary section headers */

```

### Font Size Scale

```css
text-xs          /* Compact icon card labels, microchip details (12px) */
text-sm          /* Approachable paragraph text (mobile), secondary CTA (14px) */
text-base        /* Standard paragraph rhythm, primary CTA text (16px) */
text-lg          /* Subheadings, FAQ accordion questions (18px) */
text-xl          /* Oversized panel titles, bento grid highlights (20px) */
text-2xl         /* Lower section headers, social proof callouts (24px) */
text-4xl         /* Compact, centered hero headlines (MANDATORY) (36px+) */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* Confident bold headings, hero text */
tracking-normal  /* Approachable paragraph rhythm */
tracking-wide    /* Subtle overlines, micro-metadata */

```

### Hierarchy Examples

| Element | Font Family | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Manrope / Geist | 4xl | bold | text-graphite | tight |
| Section Title | Manrope / Geist | 2xl | bold | text-graphite | tight |
| Paragraph | Inter / Roboto | base | normal | text-neutral-700 | normal |
| Primary CTA | Inter / Roboto | base | medium | text-white | normal |
| Microchip | Inter / Roboto | sm | semibold | text-graphite | normal |

---

## Animation System

### Core Philosophy: Consumer Bounciness

Interactions should feel touchable, responsive, and natural. Animations mimic iOS physics, utilizing spring parameters for a soft, friendly feel rather than rigid, linear snaps.

### Page Transitions (Soft Fade & Rise)

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

```

### Micro-Interactions (Squish & Expand)

Buttons gently scale down when pressed, and accordion FAQs expand with spacious ease.

```tsx
// Button Press (Squish)
whileTap={{ scale: 0.96 }}
transition={{ type: "spring", stiffness: 400, damping: 25 }}

// Accordion Expand
initial={{ height: 0, opacity: 0 }}
animate={{ height: "auto", opacity: 1 }}
transition={{ duration: 0.3, ease: "easeInOut" }}

```

---

## UI Components

### The Compact Centered Hero

The flagship layout of the system. A tightly grouped, vertically centered stack that naturally cascades down to the product frame.

```tsx
<section className="flex flex-col items-center text-center pt-24 pb-0">
  <h1 className="text-4xl font-bold font-manrope text-graphite tracking-tight mb-4">
    Confident Headline
  </h1>
  <p className="text-base font-inter text-neutral-700 max-w-md mb-8">
    Short, approachable description rhythm.
  </p>
  <div className="flex gap-4 mb-16">
    <PrimaryCTA />
    <SecondaryCTA />
  </div>
  <PhoneMockupStaging />
</section>

```

### Frosted Navbar

Sits cleanly above the porcelain canvas, blurring the content behind it without drawing heavy attention to itself.

```tsx
<nav className="sticky top-0 w-full bg-porcelain/70 backdrop-blur-md border-b border-palegray/50 z-50" />

```

### Phone Mockup Staging

The phone asset is nested directly beneath the hero text, floating inside the restrained pastel citrus gradient.

```tsx
<div className="relative rounded-[2.5rem] p-8 bg-gradient-to-b from-green-50 to-yellow-50 shadow-ios-soft">
  <img src="phone-mockup.png" className="drop-shadow-2xl" alt="Product View" />
</div>

```

---

## Component Catalog

### Cards & Panels

```tsx
// Oversized Rounded Panel (Lower Sections)
"bg-chalk rounded-3xl p-10 border border-palegray shadow-ios-subtle"

// Small Bento Card (Gradient Container)
"bg-gradient-to-br from-lime-50 to-green-100 rounded-2xl p-6 shadow-ios-sm border border-white/50"

// Compact Icon Card
"bg-porcelain rounded-xl p-4 flex flex-col items-start gap-3 shadow-ios-subtle border border-palegray"

```

### Buttons & Inputs

```tsx
// Primary Charcoal CTA (Fully Rounded)
"bg-charcoal text-white font-inter font-medium text-base rounded-full px-6 py-3 hover:scale-105 active:scale-95 transition-transform shadow-ios-sm"

// Secondary CTA (Fully Rounded, Fine Border)
"bg-porcelain text-graphite font-inter font-medium text-base rounded-full px-6 py-3 border border-neutral-200 hover:bg-palegray transition-colors"

```

### Microchips & Badges

```tsx
// Selected/Active Microchip
"px-4 py-1.5 rounded-full text-sm font-semibold text-graphite bg-gradient-to-r from-green-200 to-lime-200 border border-transparent"

// Default/Inactive Microchip
"px-4 py-1.5 rounded-full text-sm font-medium text-neutral-600 bg-chalk border border-neutral-200 hover:border-neutral-300"

```

### Social Proof & FAQs

```tsx
// Avatar-Style Social Proof
<div className="flex items-center gap-3">
  <div className="flex -space-x-2">
    <Avatar src="user1.jpg" className="w-8 h-8 rounded-full border-2 border-porcelain" />
    <Avatar src="user2.jpg" className="w-8 h-8 rounded-full border-2 border-porcelain" />
  </div>
  <span className="text-sm font-inter text-neutral-700">Joined by 10,000+ users</span>
</div>

// Spacious Accordion FAQ Panel
"w-full bg-chalk rounded-2xl border border-palegray p-6 mb-4 hover:shadow-ios-subtle transition-shadow"

```

---

## Quality Checklist

* [ ] Does the hero headline strictly use `text-4xl` and `font-bold` in Manrope or Geist?
* [ ] Is the hero completely compact, centrally aligned, and immediately followed by the staged phone mockup?
* [ ] Are the primary buttons rendered as *fully rounded* pills using `bg-charcoal`?
* [ ] Are the pastel citrus (green/yellow) gradients confined *strictly* to bounding boxes (bento grids, screenshot backdrops, microchips)?
* [ ] Are paragraphs approachable and legible, using `text-base` Inter or Roboto?
* [ ] Do all shadows utilize a soft, high-spread iOS aesthetic (`shadow-ios-subtle`, `shadow-ios-sm`) rather than harsh, dark droplines?
* [ ] Do the lower sections implement oversized border radii (`rounded-2xl`, `rounded-3xl`) for panels?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Porcelain, chalk, and pale gray as the dominant structural canvases.
* Fully rounded, pill-shaped buttons.
* Subtle, diffused iOS-style shadows to create layering.
* Fresh pastel green-yellow gradients inside product staging areas and microchips.
* Avatar stacks and compact icon grids for social proof.
* Frosted glass (`backdrop-blur`) strictly for the upper navbar.

### ✗ Not Allowed

* Gradients used on typography, icons, or full-page background canvases.
* Bright, saturated primary colors for CTA buttons (e.g., bright blue or red).
* Sharp right angles (`rounded-none`) on main structural containers or cards.
* Left-aligned, sprawling hero sections (the hero must remain compact and centered).
* Harsh, dark, or highly opaque drop shadows.