Sonata Whisker

About 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.

Color

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.

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.

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.

Elevation

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.

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.

Do

• Use the primary token (brand.600 light, brand.400 dark) for one button per view. Render other actions as secondary or ghost buttons.
• 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.
• Separate major sections with space.20 (80px) or space.24 (96px), and pad cards with space.10 (40px).
• Show focus as a 2px ring token with a 2px offset on buttons, inputs, checkboxes and links.
• Pair every success, warning and destructive state with an icon or text label so meaning never depends on color alone.
• Set prices, order numbers and microchip IDs with font-feature-settings 'tnum', and right-align monetary columns in tables.
• 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 place more than one saturated hue on a screen besides status badges. Keep everything else on neutral.50 to neutral.950.
• Don't use #000000 or untinted greys. Pick from the warm neutral ramp.
• Don't set IBM Plex Serif below 28px or use it in buttons, form labels, badges or table cells.
• Don't put anything heavier than shadow.sm on cards. Reserve shadow.md for popovers and shadow.lg for dialogs.
• Don't set long-form text below body-sm (14px) or below a 1.5 line height.
• Don't place muted-foreground text on brand or status surfaces. Use the matching *-foreground token.