---
title: "Theme: Soft"
description: Warm, rounded, developer-SaaS aesthetic with a violet accent (DM Sans).
visibility: guest
draft: false
---

# Theme: Soft

Warm, rounded, developer-facing SaaS aesthetic. Inspired by Notion, Loom, Pitch. Requires `config/wirekit.php` → `'sans' => 'dm-sans'`:

```css
/* WireKit Theme: Soft — Warm, rounded, developer SaaS aesthetic.
   Inherits from Default: neutral palette, dark-mode colors, sizing,
   border-wk-width 1px, WCAG-verified text/bg contrasts.

   Prerequisite: config/wirekit.php → 'sans' => 'dm-sans'
   WCAG: All violet pairs ≥ AA — verify exact ratios via DevTools
   against actual Tailwind v4 OKLCH values.

   IMPORTANT: .dark block includes shadow overrides to prevent
   Default's dark shadows (2/12/32px blur) from overriding Soft's
   wider blur values (8/20/40px). Without this, the "airy" feeling
   disappears in dark mode. */
@theme {
    /* Font — DM Sans: warmer and rounder than Inter.
       letter-spacing reset to 0em — overrides Default's -0.01em.
       DM Sans has naturally friendly proportions. */
    --font-wk-sans:           'DM Sans', ui-sans-serif, system-ui, sans-serif;
    --font-wk-letter-spacing: 0em;

    /* Heading — bold for strong hierarchy. */
    --font-wk-heading-weight: 700;

    /* Radius — 0.75rem base → sm: 0.5625rem, md: 0.75rem,
       lg: 0.9375rem, xl: 1.5rem (signature Soft rounding). */
    --radius-wk: 0.75rem;

    /* Shadows — soft, airy, diffuse light (wider blur than Default).
       Dark-mode shadows MUST be set in .dark block below. */
    --shadow-wk-sm: 0 2px 8px -1px rgba(0, 0, 0, 0.06),
                    0 1px 2px -1px rgba(0, 0, 0, 0.04);
    --shadow-wk-md: 0 8px 20px -4px rgba(0, 0, 0, 0.08),
                    0 3px 8px -2px rgba(0, 0, 0, 0.04);
    --shadow-wk-lg: 0 20px 40px -8px rgba(0, 0, 0, 0.10),
                    0 8px 16px -4px rgba(0, 0, 0, 0.06);

    /* Motion — 200ms ease-out decelerate: starts fast, settles gently. */
    --transition-wk-duration: 200ms;
    --transition-wk-easing:   cubic-bezier(0, 0, 0.2, 1);

    /* Accent — Violet.
       white on violet-600: ≥ 5:1 (AA ✓)
       white on violet-700 (hover): ≥ 6:1 (AAA ✓)
       violet-600 ring on white: ≥ 3:1 (UI ✓) */
    --color-wk-accent:         var(--color-violet-600);
    --color-wk-accent-hover:   var(--color-violet-700);
    --color-wk-accent-content: var(--color-violet-700);
    --color-wk-accent-fg:      var(--color-white);
    --color-wk-ring:           var(--color-violet-600);
}
@layer theme {
    .dark {
        /* Accent dark — accent-fg (neutral-900) inherited from Default.
           neutral-900 on violet-400: ≥ 6:1 (AAA ✓)
           neutral-900 on violet-300 (hover): ≥ 9:1 (AAA ✓) */
        --color-wk-accent:         var(--color-violet-400);
        --color-wk-accent-hover:   var(--color-violet-300);
        --color-wk-accent-content: var(--color-violet-300);
        --color-wk-ring:           var(--color-violet-400);

        /* Shadows dark — MUST override to keep Soft's wider blur values.
           Without this, Default's .dark shadows (2/12/32px blur) win
           the cascade and the airy feeling disappears. */
        --shadow-wk-sm: 0 2px 8px -1px rgba(0, 0, 0, 0.25),
                        0 1px 2px -1px rgba(0, 0, 0, 0.20);
        --shadow-wk-md: 0 8px 20px -4px rgba(0, 0, 0, 0.30),
                        0 3px 8px -2px rgba(0, 0, 0, 0.20);
        --shadow-wk-lg: 0 20px 40px -8px rgba(0, 0, 0, 0.40),
                        0 8px 16px -4px rgba(0, 0, 0, 0.25);
    }
}
```

## Design notes

Soft is warm and rounded: DM Sans for friendlier letterforms, a 0.75rem radius, and wide, diffuse shadows that give surfaces an airy, lifted feel — paired with an approachable violet accent. The mood is drawn from tools like Notion, Loom, and Pitch.

**Best for:** developer-facing SaaS, onboarding flows, documentation, and any product that wants to feel approachable. Avoid it for ultra-dense data UIs, where the generous radius and shadow spread cost vertical rhythm.

## Accessibility

Every violet accent pairing clears WCAG AA: white on violet-600 is ≥5:1, the violet-700 hover state ≥6:1 (AAA), and the violet-600 focus ring ≥3:1 for UI contrast. Dark mode shifts the accent to violet-400/300 (≥6:1 / ≥9:1 against the dark surface) and re-declares the wide shadows so the airy feel survives the cascade. Because the accent is theme-overridable, re-verify the exact ratios against your built OKLCH values if you retune the violet.