Editorialminimalmono

Fog

A soft cool-grey minimal theme: misty slate neutrals, gentle contrast, and roomy radii for calm, modern interfaces.

by PromptsRush· MIT· v1.0.0· shadcn, tailwind, css-vars

Download design.md

Lumen

ProductPricingGet started

✦ New release

Build something people love.

A live preview of this theme — every color, font, radius, and shadow you see is rendered straight from its tokens.

Start free Live demo

12.4k

Active users+18%

$48.2k

Revenue+7.1%

4.9

Rating2.1k

Quick actions

Prov2.0

Search anything…

CreateInvite

Color system

Click any swatch to copy. Contrast graded against WCAG.

Contrast (WCAG)AAA ≥ 7 · AA ≥ 4.5

AaBody text

13.98:1AAA

AaMuted text

4.55:1AA

AaPrimary button

7.58:1AAA

AaCard text

14.63:1AAA

AaAccent

8.47:1AAA

Typography

5xl3remDesign with intent

4xl2.25remDesign with intent

3xl1.875remDesign with intent

2xl1.5remDesign with intent

xl1.25remThe quick brown fox jumps over the lazy dog

lg1.125remThe quick brown fox jumps over the lazy dog

base1remThe quick brown fox jumps over the lazy dog

sm0.875remThe quick brown fox jumps over the lazy dog

xs0.75remThe quick brown fox jumps over the lazy dog

Body sample. Inter carries running text — readable paragraphs, comfortable measure, and a rhythm that holds up across long pages of content and UI.

Radius, shadow & fonts

Radius · base 0.625rem

base

Shadow

Fonts

Sans

Inter

Aa Bb Cc 0123

Mono

JetBrains Mono

Aa Bb Cc 0123

Components

Real UI rendered with this theme's tokens.

Buttons

PrimarySecondaryOutlineAccentGhostDelete

Badges

PrimarySecondaryAccent

Input

you@example.com

Card title

A surface for grouping content, with the theme's border, radius, and shadow.

Accent callout

Use the accent surface for highlights, tips, and gentle emphasis.

Principles, guidelines & component specs

Do's & don'ts, spacing, motion, iconography, accessibility, and exact component specs — all in the design.md too.

Do

•Use low-chroma neutrals for a calm atmosphere.
•Keep contrast gentle but always AA-compliant.

Don't

•Don't introduce a saturated accent.
•Don't tighten spacing — air is part of the look.

Spacing · base 0.25rem

Motion

fast · 160msbase · 260msslow · 440ms

ease · cubic-bezier(0.4,0,0.2,1)

•Soft, slow easing matches the relaxed mood.

Easing & duration (hover)

Hover to feel this theme's base transition.

Iconography

Lucide · 1.5px stroke · 1rem. Outline icons with a consistent stroke width; size icons to match adjacent text and align them optically.

Accessibility

Contrast

WCAG AA — 4.5:1 text, 3:1 UI

Focus

2px solid var(--ring), 2px offset

Targets

44x44px

Never use color as the only signal — pair it with text, an icon, or a shape.
Every interactive element must be keyboard reachable and show a visible focus ring.
Honor prefers-reduced-motion: reduce by disabling non-essential animation.
Keep a logical heading order and give every form control a label.

Component specs

Button

Background	var(--primary)
Text	var(--primary-foreground)
Radius	0.625rem
Padding	0 1.1rem
Height	2.6rem
Weight	600

Badge

Background	var(--accent) / var(--primary)
Text	var(--accent-foreground) / var(--primary-foreground)
Radius	9999px
Padding	0.15rem 0.55rem
Font size	0.72rem
Weight	600

Use for status, counts, and short labels. Keep to one or two words.

Alert

Radius	0.938rem
Padding	1rem 1.25rem
Border	1px solid var(--border)

Always pair the color with an icon and a text label — never rely on color alone.

Form field

Background	var(--background)
Border	1px solid var(--input)
Radius	0.625rem
Height	2.6rem
Padding	0.5rem 0.75rem

Label sits above the field; helper or error text sits below.

Card

Background	var(--card)
Text	var(--card-foreground)
Border	1px solid var(--border)
Radius	0.875rem
Padding	1.5rem
Shadow	0 8px 22px -8px rgba(30,41,59,0.10)

The design brief

Fog is a soft, cool-grey minimal design system. Misty slate neutrals with gentle contrast and roomy radii feel modern, quiet, and unhurried.

Principles

Low-chroma slate neutrals create a calm, foggy atmosphere.
Soft contrast that still clears AA for body text.
Roomy radii and airy spacing keep it relaxed.

When to use

Use Fog for calm SaaS, settings UIs, and meditative consumer apps. Avoid it where you need urgent, high-contrast emphasis.

Signature details

Slate #475569 primary on misty #f8fafc surfaces.
Inter + JetBrains Mono, 0.625rem radius.

Use this with your AI

Download or copy the design.md and paste it into Claude, Cursor, or v0 — it tells the agent exactly which colors, fonts, radii, and shadows to use, so your site comes out looking like this.

Download

Export tokens

Drop straight into your codebase.

:root {
  --radius: 0.625rem;
  --background: #f8fafc;
  --foreground: #1e293b;
  --card: #ffffff;
  --card-foreground: #1e293b;
  --popover: #ffffff;
  --popover-foreground: #1e293b;
  --primary: #475569;
  --primary-foreground: #ffffff;
  --secondary: #eef2f6;
  --secondary-foreground: #1e293b;
  --muted: #eef2f6;
  --muted-foreground: #64748b;
  --accent: #e3e9f0;
  --accent-foreground: #334155;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #e2e8f0;
  --input: #e2e8f0;
  --ring: #475569;
  --shadow-sm: 0 1px 2px rgba(30,41,59,0.05);
  --shadow-md: 0 8px 22px -8px rgba(30,41,59,0.10);
  --shadow-lg: 0 24px 50px -16px rgba(30,41,59,0.16);
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --ease-standard: cubic-bezier(0.4,0,0.2,1);
  --ease-emphasized: cubic-bezier(0.16,1,0.3,1);
  --duration-base: 260ms;
}

.dark {
  --background: #0e1117;
  --foreground: #e6ebf2;
  --card: #161b23;
  --card-foreground: #e6ebf2;
  --popover: #161b23;
  --popover-foreground: #e6ebf2;
  --primary: #94a3b8;
  --primary-foreground: #0e1117;
  --secondary: #1d242e;
  --secondary-foreground: #e6ebf2;
  --muted: #1d242e;
  --muted-foreground: #94a3b8;
  --accent: #262f3b;
  --accent-foreground: #e6ebf2;
  --destructive: #f87171;
  --destructive-foreground: #450a0a;
  --border: #28313d;
  --input: #28313d;
  --ring: #94a3b8;
}