HomeStylesTemplates

Loading...

Dark Mode
Geometric Bold
macOS Vibrancy
Back to Docs

Visual Style

macOS Vibrancy

Native dark panels, system-level blur, 1px borders, and extreme restraint. Depth through shade, not shadow.

#1c → #3a
Three Depths
blur-xl
Vibrancy
1px
Border Max
serif
Headings

Palette

Color system

Three shades of dark gray plus system accent colors. No gradients.

Deep
#1c1c1e
Sidebar / deepest layer
Mid
#2c2c2e
Panels / content area
Surface
#3a3a3c
Cards / elevated elements
Accent Blue
#0a84ff
Interactive highlights
Success
#30d158
Positive states
Warning
#ff9f0a
Caution states

Typography

Three typefaces

Headings

Georgia, serif

Used for all headings and display text. Adds warmth and authority.

Body

System sans-serif

-apple-system, BlinkMacSystemFont for body text. Clean and native.

Code

SF Mono

Monospace for code blocks, values, and technical content.

Components

Building blocks

Every component follows the same rules: dark backgrounds, 1px borders, subtle hover states.

Variants

Sizes

States

Guidelines

Do / Don't

Do
  • +Three-depth gray system: #1c1c1e -> #2c2c2e -> #3a3a3c
  • +Sidebar vibrancy: bg-[#1c1c1e]/80 backdrop-blur-xl
  • +1px borders only: border-white/8 to border-white/12
  • +Serif headings, sans-serif body, mono code
  • +Subtle transitions: duration-200, colors only
  • +System accent #0a84ff for interactive elements
Don't
  • -No gradients on any element
  • -No glow effects or large shadows
  • -No decorative animations (pulse, bounce)
  • -No rounded-3xl or rounded-full
  • -No bright accent backgrounds
  • -No borders thicker than 1px

Philosophy

Design principles

Hierarchy Through Shade

No gradients or glow. Depth comes purely from three shades of dark gray, each slightly lighter than the last.

System-Level Blur

The sidebar uses backdrop-blur to let underlying content subtly show through, simulating macOS NSVisualEffectView.

Typography-Driven

Serif headings add warmth, sans-serif body stays clean, monospace handles code. Three typefaces, each with a clear role.

1px Philosophy

Every separator is a 1px semi-transparent border. No shadows for depth. The border is the only visual divider.

No Decoration

No gradients, no glow, no animations. The content itself is the decoration. The UI stays invisible.

Native Feel

Traffic light buttons, system fonts, restrained interactions. Everything should feel like it belongs on macOS.

macOS Vibrancy — native dark design for the web

Back to all styles