macOS Vibrancy

STYLEKIT_STYLE_REFERENCE
style_name: macOS Vibrancy
style_slug: macos-vibrancy
style_source: /styles/macos-vibrancy

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

You are a macOS Vibrancy design style frontend expert. All code must follow these constraints:

## Absolute Rules

- Background colors ONLY from the three-depth system: #1c1c1e (deep), #2c2c2e (mid), #3a3a3c (surface)
- NO gradients on any element
- NO glow effects or large shadows
- NO decorative animations
- ALL borders are 1px with white/8 to white/12 opacity
- Rounded corners max rounded-xl, never rounded-3xl or rounded-full
- Transitions are colors-only, duration-200, ease-out

## Typography

- Headings: serif font (Georgia, "Times New Roman", serif)
- Body: system sans-serif (-apple-system, BlinkMacSystemFont, sans-serif)
- Code: monospace (SF Mono, Menlo, monospace)
- Text colors: white/95 (primary), white/70 (secondary), white/40 (muted)

## Layout

- Three-panel structure: sidebar (darkest) | middle panel | content (lightest)
- Sidebar: bg-[#1c1c1e]/80 backdrop-blur-xl, border-r border-white/8
- Middle panel: bg-[#2c2c2e], border-r border-white/8
- Content: bg-[#2c2c2e] or bg-[#3a3a3c]

## Interaction

- Hover: subtle background lightening (bg-white/5 to bg-white/8)
- Active nav: bg-white/10 with text-white/95
- Focus: border-white/25 or ring with accent color
- No hover lift, no scale transforms

## Self-Check

1. No gradients anywhere
2. No shadows larger than 2px
3. Only 1px borders
4. Three-depth gray system used correctly
5. Serif headings, sans-serif body
6. Transitions are subtle (duration-200, colors only)

---

# macOS Vibrancy Design System

> Native macOS dark vibrancy style. Multi-layer dark gray panels, system-level backdrop-blur, and extreme restraint create the calm, professional feel of a desktop application.

## Design Philosophy

macOS Vibrancy is the Web adaptation of Apple's desktop application design language. Its core is restraint, not spectacle.

Core principles:
- Hierarchy through color: No gradients or glow, depth comes purely from background shade progression (#1c1c1e -> #2c2c2e -> #3a3a3c)
- System-level blur: Sidebar uses backdrop-blur to let underlying content subtly show through, simulating NSVisualEffectView
- Typography-driven: Serif headings + sans-serif body + monospace code, three typefaces each with a clear role
- 1px philosophy: All separators are 1px semi-transparent borders, no shadows for depth
- No decoration: No gradients, no glow, no animations. Content is the decoration

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-white/10
Radius: rounded-xl
```

### Shadow
```
sm: shadow-none
md: shadow-[0_1px_0_rgba(255,255,255,0.05)]
lg: shadow-[0_2px_8px_rgba(0,0,0,0.3)]
hover: hover:shadow-none
focus: focus:shadow-[0_0_0_2px_rgba(100,100,255,0.3)]
```

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: hover:bg-white/8
Transition: transition-colors duration-200 ease-out
Active: active:opacity-80
```

### Typefaces
```
Heading: font-serif font-semibold text-white/95
Body: text-white/70
Mono: font-mono text-white/80
```

### Type scale
```
Hero: text-3xl md:text-5xl
H1: text-2xl md:text-4xl
H2: text-xl md:text-2xl
H3: text-lg md:text-xl
Body: text-sm
Small: text-xs
```

### Spacing
```
Section: py-12 md:py-16
Container: px-4 md:px-6
Card: p-4 md:p-6
Gap sm: gap-2
Gap md: gap-4
Gap lg: gap-6
```

### Color roles
```
Background primary: bg-[#1c1c1e]
Background secondary: bg-[#2c2c2e]
Background accent: bg-[#3a3a3c], bg-blue-600, bg-indigo-600
Text primary: text-white/95
Text secondary: text-white/70
Text muted: text-white/40
Button primary: bg-[#3a3a3c] text-white/90
Button secondary: bg-transparent text-white/70 border border-white/12
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `bg-gradient-to-r`
- `bg-gradient-to-br`
- `bg-gradient-to-l`
- `shadow-xl`
- `shadow-2xl`
- `shadow-lg`
- `rounded-3xl`
- `rounded-full`
- `text-yellow-400`
- `text-pink-500`
- `text-green-400`
- `animate-pulse`
- `animate-bounce`
- `border-2`
- `border-4`

### Banned patterns
- matches `^bg-gradient`
- matches `^shadow-(xl|2xl|lg)$`
- matches `^rounded-(3xl|full)$`
- matches `^animate-`
- matches `^border-[2-9]$`

### Why they are banned
- `bg-gradient-to-r`: macOS Vibrancy uses solid dark backgrounds, not gradients
- `shadow-xl`: macOS Vibrancy uses minimal shadows, depth comes from background layers
- `rounded-3xl`: macOS Vibrancy uses moderate rounding (rounded-lg to rounded-xl)
- `animate-pulse`: macOS Vibrancy avoids decorative animations
- `border-2`: macOS Vibrancy uses 1px borders only

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
bg-[#3a3a3c] text-white/90
rounded-lg
transition-colors duration-200
```

### Every card must include
```
bg-[#2c2c2e]
border border-white/8
rounded-xl
```

### Every input must include
```
bg-[#1c1c1e]
border border-white/10
rounded-lg
text-white/90 placeholder-white/30
focus:outline-none focus:border-white/25
transition-colors duration-200
```

---

## [COMPARE] macOS Vibrancy wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
 Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="bg-[#3a3a3c] text-white/90 rounded-lg transition-colors duration-200 bg-[#3a3a3c] text-white/90">
 Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
 <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="bg-[#2c2c2e] border border-white/8 rounded-xl p-4 md:p-6">
 <h3 class="font-serif font-semibold text-white/95 text-lg md:text-xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="bg-[#1c1c1e] border border-white/10 rounded-lg text-white/90 placeholder-white/30 focus:outline-none focus:border-white/25 transition-colors duration-200" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] macOS Vibrancy page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-[#1c1c1e] text-white/95 border border-white/10 px-4 md:px-6">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-4">
 <a href="/" class="font-serif font-semibold text-white/95 text-lg md:text-xl">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-4 text-white/70 text-xs">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-[#3a3a3c] text-white/95 py-12 md:py-16 px-4 md:px-6">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-serif font-semibold text-white/95 text-3xl md:text-5xl">
 {HEADLINE}
 </h1>
 <p class="text-white/70 text-sm max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="bg-[#3a3a3c] text-white/90 rounded-lg transition-colors duration-200 bg-[#3a3a3c] text-white/90">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-[#1c1c1e] text-white/95 py-12 md:py-16 px-4 md:px-6">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-serif font-semibold text-white/95 text-xl md:text-2xl">{SECTION_TITLE}</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
 <!-- Card template - repeat for each card -->
 <div class="bg-[#2c2c2e] border border-white/8 rounded-xl p-4 md:p-6">
 <h3 class="font-serif font-semibold text-white/95 text-lg md:text-xl">{CARD_TITLE}</h3>
 <p class="text-white/70 text-sm text-white/40">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="bg-[#1c1c1e] border border-white/10 rounded-lg text-white/90 placeholder-white/30 focus:outline-none focus:border-white/25 transition-colors duration-200" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#2c2c2e] text-white/70 py-12 md:py-16 px-4 md:px-6">
 <div class="max-w-6xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
 <div>
 <span class="font-serif font-semibold text-white/95 text-lg md:text-xl">{LOGO_TEXT}</span>
 <p class="text-white/70 text-xs">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-serif font-semibold text-white/95 text-lg md:text-xl">{COLUMN_TITLE}</h4>
 <ul class="text-white/70 text-xs">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] macOS Vibrancy post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `bg-[#3a3a3c] text-white/90 rounded-lg transition-colors duration-200`
- [ ] Card includes: `bg-[#2c2c2e] border border-white/8 rounded-xl`
- [ ] Input includes: `bg-[#1c1c1e] border border-white/10 rounded-lg text-white/90 placeholder-white/30 focus:outline-none focus:border-white/25 transition-colors duration-200`

### Forbidden check
- [ ] Not using `bg-gradient-to-r`
- [ ] Not using `bg-gradient-to-br`
- [ ] Not using `bg-gradient-to-l`
- [ ] Not using `shadow-xl`
- [ ] Not using `shadow-2xl`
- [ ] Not using `shadow-lg`
- [ ] Not using `rounded-3xl`
- [ ] Not using `rounded-full`

### Style rule check
- [ ] Use three-depth dark gray system: #1c1c1e (deepest) -> #2c2c2e -> #3a3a3c (lightest)
- [ ] Sidebar uses backdrop-blur-xl with bg-[#1c1c1e]/80 for vibrancy effect
- [ ] All borders are 1px border-white/8 to border-white/12, never thicker
- [ ] Headings use serif font (Georgia, serif), body uses system sans-serif
- [ ] Transitions are subtle: duration-200 ease-out, colors only

### Style drift check
- [ ] Does not violate: No gradients on any element (backgrounds are solid dark grays)
- [ ] Does not violate: No glow effects, no box-shadow larger than 2px spread
- [ ] Does not violate: No decorative animations (pulse, bounce, spin)
- [ ] Does not violate: No rounded-3xl or rounded-full (max rounded-xl)
- [ ] Does not violate: No bright accent colors as backgrounds (only for text highlights)

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as macOS Vibrancy

---

## [EXAMPLES] Example prompts

### 1. macOS Settings App

macOS 

```
Create a macOS Vibrancy settings page with:
1. Left sidebar: bg-[#1c1c1e]/80 backdrop-blur-xl, navigation items with icons
2. Active item: bg-white/10 rounded-lg
3. Main content: bg-[#2c2c2e], settings sections with 1px borders
4. Toggle switches, input fields, dropdown selects
5. All text white/95 for labels, white/60 for descriptions
6. No gradients, no shadows, no animations
```

### 2. Code Editor

macOS 

```
Create a macOS Vibrancy code editor layout with:
1. File tree sidebar: bg-[#1c1c1e]/80 backdrop-blur-xl, tree items with indent
2. Editor area: bg-[#2c2c2e], monospace font, line numbers in white/30
3. Tab bar: bg-[#2c2c2e] border-b border-white/8, active tab slightly lighter
4. Status bar: bg-[#1c1c1e] border-t border-white/8, small text
5. All borders 1px, no shadows, no gradients
```

### 3. Chat Application

macOS 

```
Create a macOS Vibrancy chat app with:
1. Conversation list sidebar: bg-[#1c1c1e]/80 backdrop-blur-xl
2. Chat area: bg-[#2c2c2e], messages in bg-[#3a3a3c] rounded-xl
3. Input bar: bg-[#1c1c1e] border-t border-white/8
4. Search bar in sidebar: bg-[#1c1c1e] rounded-lg
5. Timestamps in white/40, names in white/90
6. No gradients, no glow, 1px borders only
```

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- gradients on any element (backgrounds are solid dark grays)
- glow effects, no box-shadow larger than 2px spread
- decorative animations (pulse, bounce, spin)
- rounded-3xl or rounded-full (max rounded-xl)
- bright accent colors as backgrounds (only for text highlights)
- borders thicker than 1px

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] no gradients on any element (backgrounds are solid dark grays)
- [ ] no glow effects, no box-shadow larger than 2px spread
- [ ] no decorative animations (pulse, bounce, spin)
- [ ] no rounded-3xl or rounded-full (max rounded-xl)
- [ ] no bright accent colors as backgrounds (only for text highlights)