--- version: alpha name: Sonata Whisker description: "Near-monochrome pet-care UI: warm stone neutrals, one sapphire accent, IBM Plex Serif headings and a spacious 4px-grid layout." colors: background: "#faf8f5" foreground: "#1a1816" card: "#ffffff" card-foreground: "#1a1816" popover: "#ffffff" popover-foreground: "#1a1816" primary: "#3f5ca3" primary-foreground: "#ffffff" secondary: "#f3f0eb" secondary-foreground: "#302c28" muted: "#f3f0eb" muted-foreground: "#5f5953" accent: "#e4eaf7" accent-foreground: "#202c50" destructive: "#b03a35" destructive-foreground: "#ffffff" success: "#256346" success-foreground: "#ffffff" warning: "#f0dca6" warning-foreground: "#483314" border: "#e4dfd8" input: "#cdc7bf" ring: "#5876bd" dark-background: "#1a1816" dark-foreground: "#faf8f5" dark-card: "#24211e" dark-card-foreground: "#faf8f5" dark-popover: "#2a2723" dark-popover-foreground: "#faf8f5" dark-primary: "#7b96d3" dark-primary-foreground: "#141b33" dark-secondary: "#47423d" dark-secondary-foreground: "#f3f0eb" dark-muted: "#302c28" dark-muted-foreground: "#cdc7bf" dark-accent: "#202c50" dark-accent-foreground: "#e4eaf7" dark-destructive: "#e0736a" dark-destructive-foreground: "#3a1210" dark-success: "#61ab84" dark-success-foreground: "#0c261a" dark-warning: "#d2aa53" dark-warning-foreground: "#30210d" dark-border: "#38342f" dark-input: "#5f5953" dark-ring: "#7b96d3" typography: display-lg: fontFamily: IBM Plex Serif fontSize: 56px fontWeight: 400 lineHeight: 1.1 letterSpacing: -0.022em display-md: fontFamily: IBM Plex Serif fontSize: 40px fontWeight: 400 lineHeight: 1.15 letterSpacing: -0.016em heading-lg: fontFamily: IBM Plex Serif fontSize: 28px fontWeight: 500 lineHeight: 1.25 letterSpacing: -0.01em heading-md: fontFamily: IBM Plex Sans fontSize: 20px fontWeight: 500 lineHeight: 1.35 letterSpacing: -0.005em heading-sm: fontFamily: IBM Plex Sans fontSize: 16px fontWeight: 600 lineHeight: 1.4 body-lg: fontFamily: IBM Plex Sans fontSize: 18px fontWeight: 400 lineHeight: 1.65 body-md: fontFamily: IBM Plex Sans fontSize: 16px fontWeight: 400 lineHeight: 1.6 body-sm: fontFamily: IBM Plex Sans fontSize: 14px fontWeight: 400 lineHeight: 1.55 label: fontFamily: IBM Plex Sans fontSize: 13px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.01em caption: fontFamily: IBM Plex Sans fontSize: 12px fontWeight: 400 lineHeight: 1.45 letterSpacing: 0.02em code: fontFamily: IBM Plex Mono fontSize: 13px fontWeight: 400 lineHeight: 1.55 rounded: sm: 4px md: 6px lg: 10px xl: 16px full: 9999px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 64px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.primary-foreground}" typography: "{typography.label}" rounded: "{rounded.md}" padding: 0 24px height: 44px button-secondary: backgroundColor: "{colors.secondary}" textColor: "{colors.secondary-foreground}" typography: "{typography.label}" rounded: "{rounded.md}" padding: 0 24px height: 44px button-destructive: backgroundColor: "{colors.destructive}" textColor: "{colors.destructive-foreground}" typography: "{typography.label}" rounded: "{rounded.md}" padding: 0 24px height: 44px input: backgroundColor: "{colors.background}" textColor: "{colors.foreground}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: 0 16px height: 48px card: backgroundColor: "{colors.card}" textColor: "{colors.card-foreground}" rounded: "{rounded.lg}" padding: 40px popover: backgroundColor: "{colors.popover}" textColor: "{colors.popover-foreground}" rounded: "{rounded.lg}" padding: 12px helper-text: backgroundColor: "{colors.background}" textColor: "{colors.muted-foreground}" typography: "{typography.body-sm}" table-row-alt: backgroundColor: "{colors.muted}" textColor: "{colors.muted-foreground}" typography: "{typography.body-sm}" height: 44px badge: backgroundColor: "{colors.accent}" textColor: "{colors.accent-foreground}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 0 12px height: 24px badge-success: backgroundColor: "{colors.success}" textColor: "{colors.success-foreground}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 0 12px height: 24px badge-warning: backgroundColor: "{colors.warning}" textColor: "{colors.warning-foreground}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 0 12px height: 24px badge-destructive: backgroundColor: "{colors.destructive}" textColor: "{colors.destructive-foreground}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 0 12px height: 24px button-primary-dark: backgroundColor: "{colors.dark-primary}" textColor: "{colors.dark-primary-foreground}" typography: "{typography.label}" rounded: "{rounded.md}" padding: 0 24px height: 44px button-secondary-dark: backgroundColor: "{colors.dark-secondary}" textColor: "{colors.dark-secondary-foreground}" typography: "{typography.label}" rounded: "{rounded.md}" padding: 0 24px height: 44px button-destructive-dark: backgroundColor: "{colors.dark-destructive}" textColor: "{colors.dark-destructive-foreground}" typography: "{typography.label}" rounded: "{rounded.md}" padding: 0 24px height: 44px input-dark: backgroundColor: "{colors.dark-background}" textColor: "{colors.dark-foreground}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: 0 16px height: 48px card-dark: backgroundColor: "{colors.dark-card}" textColor: "{colors.dark-card-foreground}" rounded: "{rounded.lg}" padding: 40px popover-dark: backgroundColor: "{colors.dark-popover}" textColor: "{colors.dark-popover-foreground}" rounded: "{rounded.lg}" padding: 12px helper-text-dark: backgroundColor: "{colors.dark-background}" textColor: "{colors.dark-muted-foreground}" typography: "{typography.body-sm}" table-row-alt-dark: backgroundColor: "{colors.dark-muted}" textColor: "{colors.dark-muted-foreground}" typography: "{typography.body-sm}" height: 44px badge-dark: backgroundColor: "{colors.dark-accent}" textColor: "{colors.dark-accent-foreground}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 0 12px height: 24px badge-success-dark: backgroundColor: "{colors.dark-success}" textColor: "{colors.dark-success-foreground}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 0 12px height: 24px badge-warning-dark: backgroundColor: "{colors.dark-warning}" textColor: "{colors.dark-warning-foreground}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 0 12px height: 24px badge-destructive-dark: backgroundColor: "{colors.dark-destructive}" textColor: "{colors.dark-destructive-foreground}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 0 12px height: 24px --- # Sonata Whisker ## Overview Sonata Whisker serves premium pet-care services, boutique products and vet-adjacent wellness brands. Many pet brands use bright color, cartoon shapes and playful type. This system uses whitespace, a warm stone neutral ramp, one sapphire accent and precise type instead. Each view has one primary button, one serif headline and at least 80px between major sections. Moods: restrained, expensive, calm, warm. Built for: pet-care, wellness, premium-retail. Density: spacious. Every color has a light value and a dark value. Tokens named `dark-*` are the dark-mode counterparts of the token with the same role name. ## Colors Warm stone neutrals (hue about 35°, low chroma) carry every surface and text role. Brand sapphire (hue about 222°) keeps its chroma highest at 500 to 600 and tapers toward 50 and 950. It is used only for primary, ring, accent and selected states. Success (sage green), warning (ochre) and danger (brick, hue about 3°) follow the same lightness curve, so equal steps carry equal visual weight. Primary and destructive differ by more than 18 ΔE2000 in both modes. Measured contrast in light mode: primary-foreground on brand.600 is about 6.5:1, white on danger.600 about 6.0:1, white on success.700 about 7:1, muted-foreground (neutral.700) on muted about 6:1, and ring brand.500 on background about 4.1:1. Dark mode uses a deep warm background (neutral.950, #1a1816) with card lifted to #24211e and popover to #2a2723. Primary is brand.400 at about 6:1 against the background, luminous but not neon. Muted-foreground (neutral.300) is about 8:1 on muted. - **Primary** `#3f5ca3` / dark `#7b96d3`: the single action color. Primary buttons, links, focus ring. - **Background / Foreground** `#faf8f5` / dark `#1a1816` on `#1a1816` / dark `#faf8f5`: page surface and body text. - **Card** `#ffffff` / dark `#24211e`: raised surfaces. - **Secondary** `#f3f0eb` / dark `#47423d`: secondary buttons and quiet controls. - **Muted** `#f3f0eb` / dark `#302c28` with **muted-foreground** `#5f5953` / dark `#cdc7bf`: helper text, table stripes, disabled-looking surfaces. - **Accent** `#e4eaf7` / dark `#202c50`: highlights, selected rows, badges. - **Destructive** `#b03a35` / dark `#e0736a`, **Success** `#256346` / dark `#61ab84`, **Warning** `#f0dca6` / dark `#d2aa53`: status only, always paired with an icon or label. - **Border** `#e4dfd8` / dark `#38342f`, **Input** `#cdc7bf` / dark `#5f5953`, **Ring** `#5876bd` / dark `#7b96d3`. All text/background pairs above pass WCAG AA (4.5:1) in both modes; this is checked automatically at build time. ## Typography Headings step by a ratio of about 1.4: heading-md 20, heading-lg 28, display-md 40, display-lg 56. Body and UI text step by about 1.125: caption 12, label 13, body-sm 14, body-md 16, body-lg 18. IBM Plex Serif (400, 500) is used only at 28px and above, with tracking from -0.01em at 28px to -0.022em at 56px. IBM Plex Sans (400, 500, 600) carries forms, tables, buttons and labels. IBM Plex Mono (400, 500) is limited to order numbers, microchip IDs and code. Body line height is 1.6 at 16px and 1.65 at 18px. - Display: **IBM Plex Serif** (fallback Georgia, serif) - Interface: **IBM Plex Sans** (fallback system-ui, sans-serif) - Mono: **IBM Plex Mono** (fallback ui-monospace, monospace) | Token | Font | Size | Line height | Weight | |---|---|---|---|---| | display-lg | IBM Plex Serif | 56px | 1.1 | 400 | | display-md | IBM Plex Serif | 40px | 1.15 | 400 | | heading-lg | IBM Plex Serif | 28px | 1.25 | 500 | | heading-md | IBM Plex Sans | 20px | 1.35 | 500 | | heading-sm | IBM Plex Sans | 16px | 1.4 | 600 | | body-lg | IBM Plex Sans | 18px | 1.65 | 400 | | body-md | IBM Plex Sans | 16px | 1.6 | 400 | | body-sm | IBM Plex Sans | 14px | 1.55 | 400 | | label | IBM Plex Sans | 13px | 1.3 | 500 | | caption | IBM Plex Sans | 12px | 1.45 | 400 | | code | IBM Plex Mono | 13px | 1.55 | 400 | ## Layout Spacious density on a 4px base grid. Content columns max out at 1120px. Major sections are separated by space.20 (80px) or space.24 (96px). Cards use space.10 (40px) padding, inputs are 48px tall and buttons are 44px tall. Spacing uses a 4px base: xs = 4px, sm = 8px, md = 16px, lg = 24px, xl = 32px, 2xl = 48px, 3xl = 64px. ## Elevation & Depth Mostly flat. Cards sit on background with a 1px border token and shadow.sm (5% warm alpha). Popovers use shadow.md and dialogs use shadow.lg. In dark mode, elevation comes from surface lightness (background, then card, then popover), and borders do the separating rather than shadows. - sm: `0 1px 2px rgba(48, 44, 40, 0.05)` - md: `0 6px 16px -4px rgba(48, 44, 40, 0.12)` - lg: `0 18px 40px -10px rgba(48, 44, 40, 0.18)` ## Shapes radius.md (6px) on buttons and inputs, radius.lg (10px) on cards, radius.xl (16px) on dialogs and large containers. radius.full is reserved for badges. radius.none and radius.sm (4px) are only for table cells and inline code. Radius scale: sm 4px, md 6px, lg 10px, xl 16px, full 9999px. ## Components Components ending in `-dark` are the dark-mode versions. Button: 44px tall, 24px horizontal padding, label type. Input: 48px tall with a 1px input-colored border; focus shows a 2px ring in the ring color. Card: 40px padding, 1px border, sm shadow. Badge: pill, caption type. ## Do's and Don'ts - **Do:** Use the primary token (brand.600 light, brand.400 dark) for one button per view. Render other actions as secondary or ghost buttons. - **Do:** Set page titles in IBM Plex Serif at heading-lg (28px), display-md (40px) or display-lg (56px). Set everything below 28px in IBM Plex Sans. - **Do:** Separate major sections with space.20 (80px) or space.24 (96px), and pad cards with space.10 (40px). - **Do:** Show focus as a 2px ring token with a 2px offset on buttons, inputs, checkboxes and links. - **Do:** Pair every success, warning and destructive state with an icon or text label so meaning never depends on color alone. - **Do:** Set prices, order numbers and microchip IDs with font-feature-settings 'tnum', and right-align monetary columns in tables. - **Do:** In dark mode, stack surfaces as background, then card (#24211e), then popover (#2a2723) instead of adding shadows. - **Don't:** Don't use primary, ring or any brand step for errors, destructive buttons or negative balances. Use destructive and the danger scale. - **Don't:** Don't place more than one saturated hue on a screen besides status badges. Keep everything else on neutral.50 to neutral.950. - **Don't:** Don't use #000000 or untinted greys. Pick from the warm neutral ramp. - **Don't:** Don't set IBM Plex Serif below 28px or use it in buttons, form labels, badges or table cells. - **Don't:** Don't put anything heavier than shadow.sm on cards. Reserve shadow.md for popovers and shadow.lg for dialogs. - **Don't:** Don't set long-form text below body-sm (14px) or below a 1.5 line height. - **Don't:** Don't place muted-foreground text on brand or status surfaces. Use the matching *-foreground token.