Clean SaaS

---
version: "1.0"
name: "Clean SaaS"
description: "Minimal, whitespace-first design system for dashboard and SaaS applications. Geist typography, neutral palette, no gradients or decorative shadows."

colors:
  primary: "#171717"
  primary-foreground: "#fafafa"
  secondary: "#f5f5f5"
  secondary-foreground: "#171717"
  accent: "#2563eb"
  accent-foreground: "#ffffff"
  background: "#ffffff"
  surface: "#fafafa"
  surface-raised: "#ffffff"
  border: "#e5e5e5"
  border-strong: "#d4d4d4"
  text-primary: "#171717"
  text-secondary: "#525252"
  text-muted: "#a3a3a3"
  success: "#16a34a"
  warning: "#d97706"
  error: "#dc2626"
  info: "#2563eb"

typography:
  headline:
    family: "Geist"
    weight: 600
    use: "Page titles, section headers, modal headings"
  body:
    family: "Geist"
    weight: 400
    use: "Paragraph text, descriptions, form labels, table cells"
  mono:
    family: "Geist Mono"
    weight: 400
    use: "Code snippets, API keys, terminal output, data values"
  scale:
    - { label: "xs", size: "12px", lineHeight: "16px" }
    - { label: "sm", size: "14px", lineHeight: "20px" }
    - { label: "base", size: "16px", lineHeight: "24px" }
    - { label: "lg", size: "18px", lineHeight: "28px" }
    - { label: "xl", size: "20px", lineHeight: "28px" }
    - { label: "2xl", size: "24px", lineHeight: "32px" }
    - { label: "3xl", size: "30px", lineHeight: "36px" }
    - { label: "4xl", size: "36px", lineHeight: "40px" }

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96]
  unit: "px"

rounded:
  none: "0px"
  sm: "4px"
  md: "8px"
  lg: "12px"
  full: "9999px"

components:
  button:
    variants:
      - name: "primary"
        background: "#171717"
        text: "#fafafa"
        radius: "md"
        weight: 500
      - name: "secondary"
        background: "#f5f5f5"
        text: "#171717"
        radius: "md"
        weight: 500
      - name: "outline"
        background: "transparent"
        text: "#171717"
        border: "#e5e5e5"
        radius: "md"
        weight: 500
      - name: "ghost"
        background: "transparent"
        text: "#525252"
        radius: "md"
        weight: 500
      - name: "destructive"
        background: "#dc2626"
        text: "#ffffff"
        radius: "md"
        weight: 500
    sizes:
      - { name: "sm", height: "32px", padding: "0 12px", fontSize: "13px" }
      - { name: "md", height: "36px", padding: "0 16px", fontSize: "14px" }
      - { name: "lg", height: "40px", padding: "0 20px", fontSize: "14px" }
  input:
    background: "#ffffff"
    border: "#e5e5e5"
    radius: "md"
    height: "36px"
    focusRing: "#2563eb"
    placeholder: "#a3a3a3"
  card:
    background: "#ffffff"
    border: "#e5e5e5"
    radius: "lg"
    padding: "24px"
    shadow: "none"
    hoverBorder: "#d4d4d4"

x-stylebase:
  version: "1.0.0"
  template: "clean-saas"
  generated-by: "stylebase"
  ai-rules:
    always:
      - "Use Geist for all text. Never substitute with Inter, Helvetica, or system fonts."
      - "Use the 8-step spacing scale. No arbitrary values like 7px or 13px."
      - "Buttons always use the defined variants. Never invent new button styles."
      - "Cards have no shadow. Elevation is communicated through border weight only."
      - "Use accent (#2563eb) for interactive elements: links, focus rings, active states."
      - "Mono font for any data, code, or machine-readable value."
    never:
      - "Never use gradients. Not on buttons, backgrounds, or text."
      - "Never use drop shadows on cards or containers."
      - "Never use border-radius larger than lg (12px) except on pills (full)."
      - "Never use colors outside the 18 defined tokens."
      - "Never use font weights outside 400, 500, 600."
---

# Clean SaaS Design System

## Design Philosophy

Clean SaaS prioritizes clarity over decoration. Every pixel serves a function: guiding the user through data-dense dashboards, settings panels, and workflow screens. The system uses whitespace as the primary visual hierarchy tool — not shadows, not gradients, not color intensity.

The aesthetic is "invisible design." Users should notice their data, not the interface holding it. This means consistent spacing, predictable component behavior, and zero visual surprises.

## Color Usage

The palette is intentionally neutral. Primary (#171717) and its foreground (#fafafa) handle 80% of all UI. Accent blue (#2563eb) draws attention to interactive elements — links, focus rings, primary actions — and nothing else.

Semantic colors (success, warning, error, info) appear only in context: form validation, status badges, alert banners. They never appear in navigation, decorative elements, or background fills.

Surface colors create subtle depth: background (#ffffff) → surface (#fafafa) → surface-raised (#ffffff with border). No shadows required.

## Typography Rules

Geist is the only permitted sans-serif. Geist Mono is the only permitted monospace. No other fonts.

Headlines use weight 600. Body uses weight 400. Medium (500) is reserved for button labels and emphasis within body text. No bold (700+) in the system.

The 8-step type scale starts at 12px (xs) for captions and maxes at 36px (4xl) for page titles. Do not interpolate — use only the defined steps.

## Spacing Philosophy

Every spacing value is a multiple of 4px. The 13-step scale provides enough granularity for tight form layouts (4px gaps) and generous section padding (96px). Use the scale, not arbitrary values.

Component internal padding follows a pattern: cards use 24px, buttons use their size-specific padding, inputs match button height for alignment.

## Component Principles

Buttons have five variants, three sizes. Primary is always dark on light. Destructive is always red. Never create a sixth variant — if you need one, the design isn't clear enough.

Inputs are 36px tall by default, matching md button height. Focus is communicated with a 2px accent ring, not a color change on the input itself.

Cards are borderless containers by default. Elevation comes from the border token, not shadow. Hover state is a stronger border, not a lift effect.

## What This System Is Not

This is not a brand-heavy marketing system. It has no hero gradients, no oversized type, no decorative illustrations. Use it for internal tools, dashboards, admin panels, and SaaS products where the user's data is the hero.