Petal Whisper

About Petal Whisper

Overview

Petal Whisper is for conversational AI products where people should feel welcomed rather than tested. A saturated rose primary sits on cool grey-blue neutrals, so the interface feels lively while long chat threads stay calm. The system expresses playfulness through pill shapes, rounded surfaces and short motion. Every text pairing holds at least 4.5:1 contrast in both modes, and most hold at least 5:1.

Color

Brand is a cool rose. brand.600 (#c92a5f) is the light-mode primary at 5.2:1 with white text, and brand.400 (#f76d99) is the dark-mode primary at 6.2:1 on neutral.950. Neutrals carry a deliberate blue tint (hue about 255), from neutral.50 #f6f8fb to neutral.950 #151a26, and each step darkens evenly with no grey dip in the middle. Danger moved further toward orange: danger.600 is #c2410c (5.2:1 with white) and danger.400 is #f97a4a in dark mode. This keeps primary and destructive more than 18 ΔE2000 apart in both modes, so an error never reads as a brand moment. Success is a minty green (success.700 #0c6748, 6.9:1 with white). Warning is a warm amber (warning.200 surface with warning.900 text). Both have chroma levels close to rose's, so they sit beside it without competing. The light ring is brand.500 (3.6:1 on background). The dark ring is brand.400.

Typography

Geist is the only text family, from greeting to chat bubble. Geist Mono is used for code, tokens and identifiers. The scale follows a ratio of about 1.25 from the 16px body: 20, 24, 30, 38, 48. Letter spacing tightens as size grows, from -0.01em at heading-sm (20px) to -0.03em at display-lg (48px). Display sizes use weights 600 to 700, which Geist ships. Body text uses weight 400 with a line height of 1.6 at body-md and body-lg so long model responses read comfortably. label uses 500. caption uses 500 at 12px with +0.01em tracking.

Layout

Comfortable density on a 4px base grid. Chat columns cap at 760px, which keeps body-md lines near 75 characters. Sidebars and settings panels use space.4 to space.6 (16px to 24px) of internal padding. Message groups are separated by space.6.

Elevation

In light mode, cards and inputs sit on #ffffff with a 1px border (neutral.200) and shadow.sm. Popovers and command palettes use shadow.md. Dialogs use shadow.lg. All shadows are tinted with neutral.950 rather than black. Dark mode builds elevation from tone instead of shadow. The background is neutral.950, while cards and popovers are lifted one step to neutral.900 with a neutral.800 border.

Shapes

Rounding is generous. Inputs use radius.md (12px). Cards and message bubbles use radius.lg (16px). Hero and empty-state surfaces use radius.xl (24px). Small chips and tooltips use radius.sm (6px). Buttons and badges use radius.full so interactive elements read as tactile pills.

Do

• Use primary (brand.600 light, brand.400 dark) for exactly one main action per view, such as Send or Start chat. Render other actions as secondary or ghost buttons.
• Build buttons at 40px height with radius.full, label typography and fontWeight 600. Keep inputs at 44px height with radius.md.
• Show focus with a 2px ring token and a 2px offset on every interactive element. This uses brand.500 in light mode and brand.400 in dark mode.
• Use display-lg (48px) and display-md (38px) only for greetings and empty-state headlines. Use heading-sm (20px) for message group titles.
• Render AI responses in body-md (16px, line height 1.6) within a 760px column. Set code blocks in Geist Mono with code typography on the muted surface.
• Pair every success, warning and destructive color with an icon or text label so status never relies on color alone.

Don’t

• Don't use primary or any brand step for errors or destructive confirmations. Use destructive (danger.600 light, danger.400 dark).
• Don't put long body text on accent (brand.100 light, brand.900 dark). Reserve accent for selected conversations, highlights and active nav items.
• Don't put shadow.md or shadow.lg on cards or message bubbles. Use shadow.md for popovers and command palettes, and shadow.lg for dialogs. In dark mode, show elevation with the card token (neutral.900) instead of shadow.
• Don't use neutral.600 or lighter for text on the light muted surface (it drops below 4.5:1). Use muted-foreground (neutral.700).
• Don't use pure black for text or for dark-mode surfaces. Use neutral.950 for both.
• Don't apply bounce or overshoot to text. Keep motion under 300ms, and disable overshoot when prefers-reduced-motion is set.