---
version: alpha
name: Lilac Quiet
description: Tinted neutrals all the way down. Every grey in this system is lilac, so nothing ever looks like default UI.
meta:
  id: "theme-lilac-quiet"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-01T19:34:32+09:00"
  updatedAt: "2026-09-02T16:52:37+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: There is no grey here — even the borders are lilac
  bestFor: Journalling and reflection apps, calm productivity, mental health, personal finance
  avoidFor: Industrial tools, dense analytics, high-urgency operational software
  defaultMode: light
  surfaceStyle: elevated
  accentUse: underline
  caseStyle: none
  borderWidth: 1px
  imageTreatment: soft
  motion:
    intensity: 3
    duration: 280ms
    ease: "cubic-bezier(0.33, 1, 0.68, 1)"
    signature: "Everything fades. No element ever changes position abruptly."
  displayFont: Sora
  displayKind: sans
  bodyFont: Sora
  monoFont: Fira Mono
colors:
  background: "#F8E9FE"
  foreground: "#2D2330"
  card: "#ECE2F1"
  card-foreground: "#2D2330"
  popover: "#ECE2F1"
  popover-foreground: "#2D2330"
  primary: "#6C2F76"
  primary-foreground: "#FDF8FF"
  secondary: "#E5D8EB"
  secondary-foreground: "#2D2330"
  muted: "#E5D8EB"
  muted-foreground: "#695B6F"
  accent: "#17745D"
  accent-foreground: "#FDF8FF"
  destructive: "#94020D"
  destructive-foreground: "#FDF8FF"
  border: "#D2C6D7"
  input: "#D2C6D7"
  ring: "#6C2F76"
  chart-1: "#774080"
  chart-2: "#626600"
  chart-3: "#853047"
  chart-4: "#007686"
  chart-5: "#723A00"
colorsDark:
  background: "#1C1120"
  foreground: "#E9DFEE"
  card: "#251C28"
  card-foreground: "#E9DFEE"
  popover: "#251C28"
  popover-foreground: "#E9DFEE"
  primary: "#CA88D5"
  primary-foreground: "#120916"
  secondary: "#322637"
  secondary-foreground: "#E9DFEE"
  muted: "#322637"
  muted-foreground: "#9B8EA0"
  accent: "#66BEA4"
  accent-foreground: "#120916"
  destructive: "#FD7468"
  destructive-foreground: "#120916"
  border: "#3F3444"
  input: "#3F3444"
  ring: "#CA88D5"
  chart-1: "#C78BD0"
  chart-2: "#9DA245"
  chart-3: "#EC8DA1"
  chart-4: "#00A4BB"
  chart-5: "#ECA067"
typography:
  display-lg:
    fontFamily: Sora
    fontSize: 58px
    fontWeight: 600
    lineHeight: 1.02
    letterSpacing: -0.025em
  headline-lg:
    fontFamily: Sora
    fontSize: 34px
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Sora
    fontSize: 21px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Sora
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.62
  body-md:
    fontFamily: Sora
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.58
  body-sm:
    fontFamily: Sora
    fontSize: 13.5px
    fontWeight: 400
    lineHeight: 1.5
  label-caps:
    fontFamily: Sora
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.14em
  label-mono:
    fontFamily: Fira Mono
    fontSize: 12.5px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  numeral-xl:
    fontFamily: Fira Mono
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.03em
rounded:
  none: 0px
  sm: 6px
  md: 12px
  lg: 18px
  xl: 26px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 28px
  xl: 56px
  gutter: 24px
  margin: 34px
  measure: 66ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.lg}"
    padding: 13px
  button-secondary:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 13px
  card-article:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  badge-label:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.sm}"
---

# Lilac Quiet

## Overview

Lilac Quiet is built on one rule that turns out to change everything: no colour
in the system may have zero chroma. The ground is lilac, the cards are lilac, the
borders are lilac, the disabled text is lilac. Because there is no true grey, the
interface never falls back to looking like unstyled UI, which is what most calm
products actually suffer from.

The pace matches. Transitions are 280ms and fade rather than move, the accent is
a teal underline that draws slowly, and there is a lot of space between things.

Personality: soft, unhurried, private. Calm without being sleepy.

## Colors

Everything is tinted. That is the specification.

- **Ground (#F8E9FE):** Pale lilac. Never white.
- **Primary (#6C2F76):** A muted orchid. Buttons and the current item. Its
  chroma is deliberately lower than most primaries here — it is not trying to
  grab you.
- **Accent (#17745D):** Deep teal. Appears as a 2px underline beneath headings
  and links, and as the second chart series. It is the only cool colour and the
  only one at full strength.
- **Neutrals:** cards, muted fills and borders all carry lilac chroma. If a
  value in this palette reads as grey, it is wrong.
- Charts are accented: orchid and teal loud, three quiet supporting hues.

## Typography

Sora for display and body, Fira Mono for dates and counts.

- **Display:** Sora at 58px, weight 600. Its slightly geometric forms stay calm
  at large sizes where a grotesque would look corporate.
- **Body:** Sora at 16.5px with a 1.62 line height and a 66ch measure. Long
  reflective copy is the expected content.
- **Labels:** sentence case, 11px, muted-foreground. Nothing is uppercase — an
  uppercase label in this system sounds like shouting in a library.
- **Dates and streak counts:** Fira Mono, 12.5px.

## Layout

A 12-column grid at 1120px with 24px gutters and a deliberately narrow content
column — text sits at 66ch even on a wide screen, with the remaining columns
left empty rather than filled.

Vertical rhythm is 8px, and the gap between blocks is large: 28px inside a card,
56px between sections. The emptiness is functional.

## Elevation & Depth

Cards float on a very soft, wide, lilac-tinted shadow at low alpha. Hover
increases the shadow slightly without moving the card. Modals use a lilac
backdrop at 60% rather than a black one — a black scrim in this theme is jarring
enough to feel like an error.

## Shapes

Round: 18px on cards, 26px on modals and large panels, 12px on buttons and
inputs, 6px on badges. Not pills — the difference between this and Bloom Lab is
that Lilac Quiet stops short of the pill, which keeps it adult.

Images get a soft, slightly desaturated grade and the card radius.

## Components

- **Buttons:** solid orchid, pale text, 12px radius, 13px padding. Hover deepens
  the fill over 280ms.
- **Entry cards:** 18px radius, 24px padding, soft lilac shadow, a mono date in
  the top right and a teal underline beneath the title.
- **Inputs:** 12px radius, hairline lilac border, card fill, teal focus ring at
  3px offset.
- **Streak and count tiles:** the number in Fira Mono at 40px, the label beneath
  in muted lilac.
- **Badges:** 6px radius, 12% orchid tint, full-strength orchid text.

## Do's and Don'ts

- Do tint every neutral. No value in this theme may be pure grey.
- Do keep the measure narrow and leave the remaining columns empty.
- Do fade rather than move.
- Don't use a black scrim behind a modal.
- Don't uppercase anything.
- Don't raise the orchid's chroma to make it more clickable; raise its size.
- Don't fill a card with the primary. The underline is the accent mechanism.