Frosted Maker App Index

/frostedMakerAppIndex
A design system for soft, focused, directory-style interfaces that combines deep rounding, frosted layers, and minimal palettes for clear, inviting, app-like experiences across desktop and mobile.
1 likes
0 bookmarks
Jun 18, 2026
Design System Content
# Frosted Maker App Index Design System

A design language for clean, B2C-inspired directory interfaces combining native-app softness with absolute clarity.

---

## Philosophy

> "Softness invites interaction; clarity sustains it."

This system creates interfaces that feel like a highly polished native mobile application, seamlessly adapting to desktop environments. The aesthetic relies on inviting, tactile elements—frosted layers, deep rounding, and porcelain-smooth surfaces. It strictly avoids cognitive overload by forcing a unified vertical focus, ensuring every app listing feels curated, pick-up-able, and deeply human.

### Core Beliefs

1. **The Centered Feed** — Desktop interfaces must retain the single-column, scrolling vertical rhythm of mobile. Multi-column grids dilute focus and break the directory narrative.
2. **Tactile Modularity** — Every project module should look like an interactive app listing. Soft shadows and fine borders define their physical boundaries.
3. **Subdued Highlighting** — Saturation is a distraction. Status, selections, and active states use low-saturation blue-grays to inform without shouting.
4. **Charcoal Anchors** — Primary actions do not use the accent color. They use high-contrast, fully rounded charcoal to ground the airy, light interface.
5. **Dual Typography** — Personality lives in the bold, geometric hero type; utility lives in the crisp, neutral body and metadata type.

### Strict Rules

* **No Multi-Column Grids** — The main index must remain a centered vertical column (`max-w-2xl`), even on ultra-wide displays.
* **No Sharp Edges** — All buttons, plaques, and modules must utilize significant border radii (squircles, full pills, or deep rounded corners).
* **No Saturated Colors** — No bright primary blues, greens, or reds. Rely strictly on the designated low-saturation blue-gray for states.
* **No Flat Modals** — Floating elements, sticky headers, and modules must use frosted glass (blur) to maintain native-app depth against the directory canvas.
* **No Thin Hero Fonts** — Display typography must be unabashedly bold to establish structural anchors.

---

## Color Palette

### Base & Canvas Scale

The palette mimics premium physical materials—porcelain, mist, and pearl—to create a soft, glare-free background canvas. 

```css
/* Backgrounds (Porcelain, Mist, and Pearl) */
bg-slate-50/50        /* Main canvas background (Porcelain White) */
bg-white/80           /* Frosted modules, sticky navbars (Pearl Panels) */
bg-slate-100          /* Secondary soft backgrounds, inactive tags (Mist Gray) */
bg-slate-100/50       /* Hollow states, subtle dividing zones */
bg-slate-200/40       /* Hover states for interactive directory rows */

/* Borders */
border-slate-200/70   /* Fine borders for app modules and thumbnail bounds */
border-slate-300/50   /* Hover states for interactive modules */
border-slate-400/40   /* Focus rings, subtle active outlines */

/* The Anchor: Charcoal */
bg-slate-800          /* Fully rounded primary CTA buttons */
text-slate-800        /* Deepest text color, active icon fills */

/* The Accent: Low-Saturation Blue-Gray */
text-slate-500        /* Active directory tabs, selected chips */
bg-slate-400/20       /* Avatar rings, active label backgrounds */
ring-slate-400/30     /* Focused states on active category pills */
border-slate-400/30   /* Active filter boundaries */

/* Text Hierarchy (Graphite Scale) */
text-slate-900        /* Deep graphite: Hero headlines, app titles */
text-slate-700        /* Standard graphite: Concise benefit copy, descriptions */
text-slate-500        /* Muted graphite: Metadata, dates, category pills */
text-slate-400        /* Faint graphite: Traction rows, launch status details */
```

### Destructive Actions

```css
bg-rose-50/50
text-rose-400
```

---

## Typography

A strict two-family system. Display layers use expressive, bold geometry (Plus Jakarta Sans, Manrope, or Geist). Utilitarian layers rely on ultimate legibility (Inter or Roboto).

### Font Families

```css
font-display     /* Plus Jakarta Sans, Manrope, or Geist - exclusively for headings */
font-sans        /* Inter or Roboto - exclusively for descriptions, dates, and metadata */
```

### Font Weights

```css
font-normal      /* Inter/Roboto: Standard descriptions, metadata, dates */
font-medium      /* Inter/Roboto: Category pills, CTA button text, sub-labels */
font-bold        /* Jakarta/Manrope: Hero text, app titles - MANDATORY for headings */
```

### Font Size Scale

```css
text-[10px]      /* Tiny traction rows, micro launch statuses, platform tags */
text-xs          /* Category pills, concise metadata labels (12px) */
text-sm          /* App module concise benefit copy, directory subtext (14px) */
text-base        /* Standard UI interactions, standard app titles (16px) */
text-lg          /* App listing primary titles, prominent section headers (18px) */
text-xl          /* Sub-hero anchors */
text-4xl         /* Standard Hero Headline (Mobile) */
text-5xl         /* Standard Hero Headline (Desktop) */
```

### Hierarchy Examples

| Element | Font Stack | Size | Weight | Color | Formatting |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Plus Jakarta Sans | 4xl/5xl | bold | text-slate-900 | tracking-tight |
| App Title | Plus Jakarta Sans | lg | bold | text-slate-900 | none |
| Benefit Copy | Inter | sm | normal | text-slate-700 | leading-relaxed |
| Action Button | Inter | text-sm | medium | text-white | rounded-full |
| Category Pill | Inter | text-xs | medium | text-slate-500 | bg-slate-100 |
| Traction Row | Inter | [10px] | normal | text-slate-400 | flex/items-center |

---

## Animation System

### Core Philosophy: Native-App Spring

Interactions should feel like modern iOS or polished Android frameworks—elastic, responsive, and softly anchored.

### App Listing Reveal (Slide & Fade)

Modules enter the vertical index with a soft upward spring, appearing as though they are surfacing from underneath the glass.

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

### Active Chip/Pill Snap

When switching categories in the directory index, the active background glides to the new selection seamlessly.

```tsx
layoutId="categoryPillActive"
transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
```

---

## UI Components

### Centered Directory Layout Constraint

The entire system relies on maintaining a vertical index, ensuring mobile-first clarity translates to massive monitors by locking the reading width.

```tsx
<main className="min-h-screen bg-slate-50/50 flex flex-col items-center pt-24 pb-12">
  <div className="w-full max-w-2xl px-4 sm:px-6 flex flex-col gap-6">
    {/* Directory Content Goes Here */}
  </div>
</main>
```

### Frosted App Listing Module

The core building block of the directory. Soft shadows, fine borders, and strict internal grid alignments.

```tsx
<article className="flex gap-4 p-4 bg-white/80 backdrop-blur-md border border-slate-200/70 rounded-3xl shadow-[0_4px_20px_-4px_rgba(0,0,0,0.03)] hover:shadow-[0_8px_30px_-4px_rgba(0,0,0,0.06)] transition-shadow">
  {/* Rounded App-Icon Plaque */}
  <div className="flex-shrink-0 w-16 h-16 bg-slate-100 rounded-2xl border border-slate-200/50 overflow-hidden">
    <img src="/app-icon.png" alt="App Icon" className="w-full h-full object-cover" />
  </div>
  
  {/* Content Column */}
  <div className="flex-grow flex flex-col justify-center">
    <div className="flex items-center gap-2">
      <h3 className="font-display font-bold text-lg text-slate-900">App Name</h3>
      <span className="px-2 py-0.5 rounded-full bg-slate-100 text-slate-500 text-[10px] font-medium">Finance</span>
    </div>
    <p className="font-sans text-sm text-slate-700 mt-0.5 line-clamp-1">
      Concise benefit copy describing the value proposition.
    </p>
    
    {/* Tiny Traction Row */}
    <div className="flex items-center gap-3 mt-2 text-[10px] text-slate-400 font-sans">
      <span className="flex items-center gap-1"><IconUsers className="w-3 h-3" /> 1.2k active</span>
      <span className="flex items-center gap-1"><IconCalendar className="w-3 h-3" /> Launched Oct 24</span>
    </div>
  </div>

  {/* CTA Column */}
  <div className="flex-shrink-0 flex items-center justify-center pl-2">
    <button className="bg-slate-800 text-white font-sans font-medium text-sm px-4 py-2 rounded-full hover:bg-slate-700 transition-colors">
      Get
    </button>
  </div>
</article>
```

---

## Component Catalog

### Buttons & Chips

```tsx
// Primary CTA (Fully rounded charcoal)
"bg-slate-800 text-white font-sans font-medium text-sm rounded-full px-5 py-2 hover:bg-slate-700 active:scale-95 transition-all"

// Selected Category Pill (Low-saturation blue-gray accent)
"bg-slate-400/20 text-slate-600 font-sans font-medium text-xs rounded-full px-3 py-1.5 border border-slate-400/10"

// Inactive Category Pill (Mist gray)
"bg-slate-100 text-slate-500 font-sans font-medium text-xs rounded-full px-3 py-1.5 hover:bg-slate-200/60 transition-colors"
```

### Media Assets

```tsx
// Screenshot Thumbnail
"aspect-video w-full rounded-2xl border border-slate-200/70 bg-slate-100 overflow-hidden shadow-sm"

// App-Icon Plaque
"w-14 h-14 rounded-2xl bg-white border border-slate-200/50 shadow-[0_2px_8px_-2px_rgba(0,0,0,0.05)] flex items-center justify-center"

// Avatar Ring (Using the low-saturation accent)
"w-8 h-8 rounded-full ring-2 ring-slate-400/20 ring-offset-2 ring-offset-slate-50"
```

### Data & Status Rows

```tsx
// Tiny Traction Row Indicator
"flex items-center gap-1.5 text-[10px] text-slate-400 font-sans"

// Launch Status Dot (Low-saturation active indicator)
"w-1.5 h-1.5 rounded-full bg-slate-400"
```

---

## Quality Checklist

* [ ] Is the desktop layout restricted to a centered vertical index (no multi-column grid layouts)?
* [ ] Does the Hero text use Plus Jakarta Sans, Manrope, or Geist at a bold `text-4xl` or `text-5xl`?
* [ ] Are all descriptive strings and metadata set strictly in Inter or Roboto?
* [ ] Are the primary CTA buttons fully rounded (`rounded-full`) and charcoal-colored (`bg-slate-800`)?
* [ ] Do the app listing modules use frosted backgrounds (`backdrop-blur`) and deep border radii (`rounded-3xl` or `rounded-2xl`)?
* [ ] Have you entirely avoided bright, saturated accents, relying only on low-saturation blue-gray?
* [ ] Do tiny metadata and traction rows utilize the `text-[10px]` styling to stay visually out of the way?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Frosted glass panels over pure white or mist-gray backgrounds.
* Centered maximum-width layout constraints (`max-w-2xl`).
* Deeply rounded corners on everything from buttons to project modules.
* Soft, ultra-diffused drop shadows (`rgba(0,0,0,0.03)`).
* Utilizing scale and bold type for hierarchy instead of bright color highlights.

### ✗ Not Allowed

* Multi-column masonries or heavy grid layouts on desktop displays.
* Sharp corners (`rounded-none` or `rounded-sm`) on cards or buttons.
* Highly saturated success/warning/active colors (no neon green, bright red, or electric blue).
* Light or thin weights for display typography.
* Flat white backgrounds without subtle border definitions to separate project modules.