Pearl Frame Design System

/pearlFrameDesignSystem
A refined, gallery-inspired design system focused on premium app showcases, immaculate whitespace, monochrome palettes, soft framing, and restrained typography to ensure the product is always the visual centerpiece.
0 likes
0 bookmarks
Jul 10, 2026
Design System Content
# Pearl Frame Design System

A design language for crisp, gallery-like app presentations and immaculate product staging.

---

## Philosophy

> "The frame should never outshine the art; it merely gives it a perfect place to live."

This system creates interfaces that act as a pristine, sunlit modern art gallery. The app itself—specifically the device mockup—is the undisputed masterpiece. The surrounding web interface exists purely to provide immaculate spacing, restrained typography, and perfect modular staging. It relies on crisp geometry, off-white modular blocks, and breathtakingly calm layouts to convey absolute premium quality.

### Core Beliefs

1. **The Device is the Anchor** — The UI wraps around the product. Phone mockups and glass frames dictate the center of gravity; everything else supports them.
2. **Neutrality is Confidence** — A strict adherence to whites, grays, and graphites prevents the website from competing with the vibrant colors of the app interface being showcased.
3. **Immaculate Spacing** — A gallery requires expansive white walls. Spacing between feature rows and typographic blocks must be vast and mathematically precise.
4. **Restrained but Distinct Typography** — Combining a confident, geometric sans-serif for headings with a highly legible, clear sans for body text creates a distinctly premium editorial rhythm.
5. **Soft Framing** — Use thin, delicate gray borders and soft white overlays over high-quality imagery to create boundaries without adding visual weight.

### Strict Rules

* **No Saturated UI Colors** — Buttons and active states use dark smoked graphite, never bright blues, greens, or reds. The only color should come from the app screenshots.
* **Semibold is the Ceiling** — Headings are strictly semibold Manrope. Never use extra-bold or black weights; they disrupt the calm aesthetic.
* **Strictly Pill-Shaped Primary Actions** — Call-to-action elements (CTAs) must utilize fully rounded pill shapes to contrast with the crisp rectangular geometry of the device mockups.
* **Monochrome Iconography Only** — Icons in feature grids must be minimalist, monoline, and strictly carbon ink or cloud gray.

---

## Color Palette

### The Gallery Scale

The palette is intentionally devoid of traditional chroma, relying entirely on nuanced shifts in temperature and light. It moves from pristine whites down to deep, smoky graphites.

```css
/* Backgrounds & Canvas (Lightest to Darkest) */
bg-pearl-white        /* The primary hero canvas and absolute center focal points (#ffffff) */
bg-porcelain          /* Modular off-white blocks, secondary sections, FAQ backgrounds (#fbfcfc) */
bg-porcelain-dark     /* Subtle alternating feature row backgrounds (#f4f5f6) */
bg-white/80           /* Soft white overlays for hero image backgrounds (backdrop-blur applied) */
bg-white/40           /* Minimal frosted navigation backgrounds */

/* Borders & Dividers */
border-pale-ash       /* Thin gray borders for off-white rounded blocks and FAQ dividers (#e8e9eb) */
border-cloud-gray     /* Darker structural delineations, glass frame edging (#d1d4d7) */

/* Interactive & Accent (The Anti-Color) */
bg-smoked-graphite    /* Primary pill CTAs, active states, dark anchors (#2c2d30) */
hover:bg-carbon-ink   /* Hover state for primary buttons, deepest black (#18191b) */
ring-cloud-gray       /* Focus rings for minimal navigation elements */

/* Text Hierarchy (Contrast Levels) */
text-carbon-ink       /* Primary text, hero headlines, confident semibold titles (#18191b) */
text-smoked-graphite  /* Standard paragraph text, clear body copy (#2c2d30) */
text-cloud-gray       /* Concise supporting copy, small uppercase feature labels (#73777f) */
text-pale-ash         /* Muted metadata, disabled states, subtle icon fills (#a9acb1) */

```

---

## Typography

The typography system is a deliberate duet: **Manrope** provides confident, geometric anchors for all headings, while **DM Sans** delivers uncompromising clarity for paragraph and supporting text. 

### Font Families & Weights

```css
font-manrope     /* Headings, hero text, section titles */
font-dmsans      /* Paragraph text, supporting copy, feature descriptions, buttons */

font-normal      /* DM Sans: Default body copy, FAQ answers */
font-medium      /* DM Sans: Pill CTAs, minor interactive labels */
font-semibold    /* Manrope: ALL headings, small uppercase feature labels. MANDATORY for titles. */
/* font-bold is strictly forbidden — confidence is achieved through font family, not weight */

```

### Font Size Scale

```css
text-xs          /* Small uppercase feature labels, minimal footer links (12px) */
text-sm          /* Concise supporting copy, secondary feature details (14px) */
text-base        /* Standard DM Sans paragraph text, FAQ body (16px) */
text-lg          /* Sub-feature headings, button text, large input text (18px) */
text-xl          /* Calm feature grid titles, alternating row titles (20px) */
text-2xl         /* Secondary section anchors, FAQ headers (24px) */
text-3xl         /* Modular block titles (30px) */
text-4xl         /* Centered hero headline — strictly locked to this size for refined balance (36px) */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* text-4xl hero headlines, text-3xl modular block titles */
tracking-normal  /* All DM Sans paragraph and body text */
tracking-widest  /* Small uppercase feature labels */

uppercase        /* Strictly for text-xs feature labels to create architectural anchors */

```

### Hierarchy Examples

| Element | Font | Size | Weight | Color | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Manrope | 4xl | semibold | carbon-ink | none |
| Block Title | Manrope | 3xl | semibold | carbon-ink | none |
| Body Text | DM Sans | base | normal | smoked-graphite | none |
| Button Label | DM Sans | lg | medium | pearl-white | none |
| Feature Label | Manrope | xs | semibold | cloud-gray | uppercase |

---

## Animation System

### Core Philosophy: The Soft Reveal

Animations should mimic the lighting of a gallery turning on—smooth, deliberate, and entirely unhurried. 

### The Soft White Overlay

When the hero section mounts, the high-quality background image stays static, while the soft white overlay gently fades in to ensure typography legibility.

```tsx
initial={{ opacity: 0, backgroundColor: "rgba(255, 255, 255, 0)" }}
animate={{ opacity: 1, backgroundColor: "rgba(255, 255, 255, 0.8)" }}
transition={{ duration: 1.2, ease: "easeInOut" }}

```

### Scrolling Modular Reveal

As users scroll to lower sections, off-white rounded blocks slide up with barely perceptible movement, relying heavily on a slow opacity fade.

```tsx
initial={{ opacity: 0, y: 16 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-10%" }}
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}

```

---

## UI Components

### The Primary Visual Anchor (Hero Mockup)

The phone mockup sits immediately below the text-4xl hero text and pill CTAs. It uses a high-fidelity rendering placed perfectly center.

```tsx
<div className="relative w-full max-w-[320px] mx-auto mt-12 z-10">
  <PhoneMockup 
    src="/app-screenshot-1.png"
    className="shadow-2xl shadow-carbon-ink/10 rounded-[3rem] ring-1 ring-pale-ash"
  />
</div>

```

### Minimal Frosted Navigation

Sits fixed at the top of the viewport. No solid lines, only a glass-like blur over the hero image.

```tsx
<nav className="fixed top-0 w-full h-16 bg-white/40 backdrop-blur-md border-b border-white/20 z-50 flex items-center justify-center">
  {/* Minimal links centered */}
</nav>

```

### Glass Frame Screenshots

Used in alternating feature rows. App screenshots are wrapped in a translucent, rounded border that mimics glass.

```tsx
<div className="p-4 bg-white/30 backdrop-blur-sm border border-pale-ash rounded-3xl">
  <img src="/app-view.png" className="rounded-2xl border border-cloud-gray/30" />
</div>

```

---

## Component Catalog

### Modular Off-White Blocks

Used for the lower sections to create reusable, rhythmic structure.

```tsx
// Standard Modular Block
"bg-porcelain border border-pale-ash rounded-3xl p-12 md:p-16 w-full max-w-6xl mx-auto"

// Alternating Feature Row Container
"flex flex-col md:flex-row items-center gap-16 py-12"

```

### Buttons

Strictly pill-shaped to contrast with the rectangular/geometric modular blocks.

```tsx
// Primary Pill CTA
"bg-smoked-graphite text-pearl-white font-dmsans font-medium text-lg rounded-full px-8 py-3.5 hover:bg-carbon-ink transition-colors"

// Secondary Pill CTA
"bg-transparent text-smoked-graphite border border-cloud-gray font-dmsans font-medium text-lg rounded-full px-8 py-3.5 hover:bg-porcelain transition-colors"

```

### Feature Grid Items

Calm, spacious, and utilizing monochrome icons.

```tsx
<div className="flex flex-col items-center text-center p-6">
  <div className="w-12 h-12 rounded-full bg-porcelain border border-pale-ash flex items-center justify-center mb-6">
    <MonochromeIcon className="text-carbon-ink w-5 h-5" />
  </div>
  <h4 className="font-manrope font-semibold text-xl text-carbon-ink tracking-tight mb-2">Feature Title</h4>
  <p className="font-dmsans text-sm text-smoked-graphite leading-relaxed">Clear, concise supporting paragraph.</p>
</div>

```

### Spacious FAQ Area

Minimalist accordion structure relying on subtle dividers and ample vertical padding.

```tsx
// FAQ Item Container
"border-b border-pale-ash py-6 first:border-t"

// FAQ Question (Trigger)
"flex justify-between items-center w-full font-manrope font-semibold text-xl text-carbon-ink text-left"

// FAQ Answer (Body)
"font-dmsans text-base text-smoked-graphite mt-4 pr-12 leading-relaxed"

```

---

## Quality Checklist

* [ ] Is the hero text centered, locked to `text-4xl`, and using Manrope `semibold`?
* [ ] Does the hero have a high-quality background image completely muted by a soft white overlay?
* [ ] Is the primary phone mockup placed *immediately* beneath the hero copy and pill CTAs?
* [ ] Are all small feature labels uppercase with `tracking-widest` formatting?
* [ ] Are all primary buttons strictly pill-shaped (`rounded-full`) and colored dark smoked graphite?
* [ ] Did you use off-white rounded blocks (`bg-porcelain`) with thin gray borders for the lower modular sections?
* [ ] Is the interface devoid of colored UI elements (excluding the app screenshots themselves)?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-quality, softly obscured lifestyle or abstract imagery in the hero background.
* Strictly pill-shaped call-to-action buttons.
* Vast, sweeping whitespace between alternating feature rows.
* Monochrome (carbon ink/cloud gray) iconography.
* Glass-effect frames containing sharp app screenshots.

### ✗ Not Allowed

* Left-aligned hero layouts (must be centered for the gallery aesthetic).
* Colorful buttons, badges, or success/error text.
* Font weights heavier than `semibold`.
* Sharp-cornered square buttons or heavily drop-shadowed cards.
* Emojis, illustrations, or vector graphics that distract from the core device mockup.