Modern Minimal

source

---
name: Modern Minimal
description:
  Clean sans-serif, generous whitespace, neutral grays with a single blue
  accent. Soft corners, subtle shadows.
colors:
  background: "#FFFFFF"
  surface: "#F7F8FA"
  ink: "#0F172A"
  ink-muted: "#64748B"
  accent: "#2563EB"
  accent-soft: "#93C5FD"
  border: "#E2E8F0"
  link: "{colors.accent}"
typography:
  h1:
    family: "'Inter', system-ui, -apple-system, sans-serif"
    size: "2.75rem"
    weight: 700
    lineHeight: 1.1
    letterSpacing: "-0.025em"
  h2:
    family: "'Inter', system-ui, sans-serif"
    size: "1.875rem"
    weight: 600
    lineHeight: 1.2
    letterSpacing: "-0.02em"
  h3:
    family: "'Inter', system-ui, sans-serif"
    size: "1.25rem"
    weight: 600
    lineHeight: 1.3
  body:
    family: "'Inter', system-ui, sans-serif"
    size: "1rem"
    weight: 400
    lineHeight: 1.6
spacing:
  xs: "0.5rem"
  sm: "1rem"
  md: "1.5rem"
  lg: "2.5rem"
  xl: "4rem"
rounded:
  sm: "6px"
  md: "10px"
  lg: "16px"
shadows:
  sm: "0 1px 2px rgba(15, 23, 42, 0.06)"
  md: "0 4px 12px rgba(15, 23, 42, 0.08)"
components:
  button-primary:
    background: "{colors.accent}"
    color: "#FFFFFF"
    border: "1px solid {colors.accent}"
    radius: "{rounded.md}"
    padding: "0.625rem 1.25rem"
    shadow: "{shadows.sm}"
  button-secondary:
    background: "{colors.surface}"
    color: "{colors.ink}"
    border: "1px solid {colors.border}"
    radius: "{rounded.md}"
    padding: "0.625rem 1.25rem"
  card:
    background: "{colors.background}"
    border: "1px solid {colors.border}"
    radius: "{rounded.lg}"
    padding: "{spacing.lg}"
    shadow: "{shadows.md}"
---

## Overview

Modern Minimal is a restrained product-UI design language: Inter type, neutral
grays, a single blue accent, and gentle rounded corners. It reads as current
without chasing trends and works for dashboards, SaaS marketing, and internal
tools.

## Colors

- Pure white background with a very-light-gray surface for elevation.
- Slate-900 ink for headings and slate-500 for body copy / metadata.
- A single blue accent for primary actions and links. Everything else is
  neutral.

## Typography

- Inter at 15-17px for body, tightened letter-spacing on headings for a modern
  feel.
- Clear hierarchy: 44/30/20/16px for h1/h2/h3/body.

## Usage

Reach for Modern Minimal when the brief says "clean" or "SaaS-looking". Pair
with subtle shadows (never harsh), 10-16px corners, and lots of whitespace. Keep
the accent to roughly 5% of the UI surface.