---
version: alpha
name: Quiet Clinic
description: Trust-first calm. Soft teal, sage, roomy touch targets and contrast that clears AA everywhere without trying.
meta:
  id: "theme-quiet-clinic"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-08-29T15:33:37+09:00"
  updatedAt: "2026-08-29T15:33:37+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: Calm, careful, accessible — built for people having a bad day
  bestFor: Health, fintech, government services, onboarding, forms, account and settings flows
  avoidFor: Brand statements, entertainment, anything that needs to feel exciting
  defaultMode: light
  surfaceStyle: elevated
  accentUse: fill
  caseStyle: none
  borderWidth: 1px
  imageTreatment: soft
  motion:
    intensity: 2
    duration: 150ms
    ease: "cubic-bezier(0.16, 1, 0.3, 1)"
    signature: "Opacity and background only. Nothing moves, because movement is noise under stress."
  displayFont: Figtree
  displayKind: sans
  bodyFont: Figtree
  monoFont: IBM Plex Mono
colors:
  background: "#F6F8F8"
  foreground: "#14201F"
  card: "#FFFFFF"
  card-foreground: "#14201F"
  popover: "#FFFFFF"
  popover-foreground: "#14201F"
  primary: "#0F6B70"
  primary-foreground: "#FFFFFF"
  secondary: "#E4EDED"
  secondary-foreground: "#27403F"
  muted: "#E4EDED"
  muted-foreground: "#566665"
  accent: "#4A7A52"
  accent-foreground: "#FFFFFF"
  destructive: "#A32B32"
  destructive-foreground: "#FFFFFF"
  border: "#D3DEDE"
  input: "#D3DEDE"
  ring: "#0F6B70"
  chart-1: "#0F6B70"
  chart-2: "#4A7A52"
  chart-3: "#8A6520"
  chart-4: "#3E5F8A"
  chart-5: "#7A5A8A"
colorsDark:
  background: "#0C1414"
  foreground: "#E8F0EF"
  card: "#131E1E"
  card-foreground: "#E8F0EF"
  popover: "#131E1E"
  popover-foreground: "#E8F0EF"
  primary: "#4FC3C7"
  primary-foreground: "#04201F"
  secondary: "#1B2828"
  secondary-foreground: "#DCE7E6"
  muted: "#1B2828"
  muted-foreground: "#96A6A5"
  accent: "#8FCB92"
  accent-foreground: "#06200A"
  destructive: "#F0757C"
  destructive-foreground: "#2A060A"
  border: "#263535"
  input: "#263535"
  ring: "#4FC3C7"
  chart-1: "#4FC3C7"
  chart-2: "#8FCB92"
  chart-3: "#D6B05E"
  chart-4: "#7FA8E8"
  chart-5: "#C79AD8"
typography:
  display-lg:
    fontFamily: Figtree
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Figtree
    fontSize: 26px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Figtree
    fontSize: 19px
    fontWeight: 600
    lineHeight: 1.35
  body-lg:
    fontFamily: Figtree
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.65
  body-md:
    fontFamily: Figtree
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: Figtree
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label-form:
    fontFamily: Figtree
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.3
  helper-sm:
    fontFamily: Figtree
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.45
  label-mono:
    fontFamily: IBM Plex Mono
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  none: 0px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  gutter: 24px
  margin: 24px
  touch: 48px
  measure: 64ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.md}"
    padding: 14px
    height: 48px
  button-secondary:
    backgroundColor: "{colors.card}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 14px
    height: 48px
  card-panel:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  input-field:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.md}"
    height: 48px
    padding: 12px
  alert-error:
    backgroundColor: "{colors.card}"
    textColor: "{colors.destructive}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Quiet Clinic

## Overview

Quiet Clinic is built for someone who is stressed, distracted, or on a phone in
bad light. It is calm, roomy and legible before it is anything else. Every
decision favours the person who is having a bad day: bigger text, bigger targets,
plainer language, no surprises.

Use it for health, finance, public services, onboarding, forms, settings and
account flows — anywhere trust and comprehension matter more than delight. The
theme is intentionally not exciting; that is the feature.

Personality: steady, careful, plainspoken, never clinical-cold.

## Colors

A soft teal-neutral with sage as the positive signal.

- **Primary (#0F6B70):** Deep teal. All primary actions, links and the focus
  ring. Clears 4.5:1 on white with room to spare.
- **Accent (#4A7A52):** Sage. Success, completion, "verified" — a positive
  state, never a call to action.
- **Destructive (#A32B32):** Used with an icon and a text label, never alone.
  Colour is never the only carrier of meaning in this theme.
- **Neutral (#F6F8F8 / #FFFFFF):** A barely-tinted page with white panels. The
  tint keeps large white areas from glaring.

Every text pair in both modes is authored above 4.5:1, and the palette avoids
red/green as the sole distinction anywhere.

## Typography

One family, Figtree, at unusually large sizes.

- **Body:** 16px minimum, 17px preferred, line height 1.6–1.65, measure capped at
  64ch. 14px is the absolute floor and is reserved for helper text.
- **Headlines:** Figtree 600. Modest scale — 40px display, 26px section. Nothing
  shouts.
- **Form labels:** 14px semibold, always above the field, never a placeholder.
  Placeholders as labels are banned in this theme.
- **Helper text:** 13px regular in `muted-foreground`, always present under
  fields that have a rule (format, limit, why it is needed).
- **Mono:** IBM Plex Mono for account numbers, reference codes and dates.

## Layout

Single-column first. The primary flow is one column at a 64ch measure, centred,
with a maximum of one decision per screen. Two-column layouts are only used for
side-by-side review of unchanging content.

Touch targets are 48px minimum with 8px of clearance. Spacing is a 8px scale
with 24px as the standard gap and 48px between sections.

Sticky bottom action bars are correct here: on mobile, the primary action stays
reachable without scrolling back.

## Elevation & Depth

Soft, minimal elevation. Panels sit on the page with one very low-alpha shadow
(`0 1px 3px`) plus a 1px border. Overlays get a slightly larger shadow. Depth is
never conveyed by colour saturation, because saturation carries meaning here.

## Shapes

Gentle: 12px on panels, 8px on buttons and inputs, 6px on small controls, full
round on avatars and toggles. Nothing sharp — sharp corners read as severe in a
context where the user is already tense.

## Components

- **Buttons:** 48px tall, 8px radius, teal fill for primary; secondary is white
  with a 1px border and teal text. Disabled states keep 4.5:1 text contrast —
  a greyed-out button must still be readable.
- **Inputs:** 48px tall, 1px border, visible label above, helper text below,
  error text below that with an icon. Focus is a 2px teal ring at 2px offset.
- **Field validation:** `aria-invalid` on the control, `data-invalid` on the
  field wrapper, an icon plus a sentence explaining how to fix it. Never a bare
  red border.
- **Alerts:** white panel with a 4px left bar in the semantic colour, an icon,
  a bold one-line summary and a plain-language explanation.
- **Progress:** a numbered step list ("Step 2 of 4") in text, not just a bar.
- **Empty and loading states:** always a sentence saying what is happening and
  what the person can do next.

## Do's and Don'ts

- Do keep body text at 16px or larger and targets at 48px or larger.
- Do put labels above fields and helper text below them.
- Do pair every colour signal with an icon and words.
- Don't use placeholders as labels.
- Don't drop disabled or muted text below 4.5:1.
- Don't ask for more than one decision per screen in a flow.
- Don't add motion beyond a 150ms fade; movement is disorienting under stress.