# Ray Care — Design Language

## 1. Visual Theme & Atmosphere
Ray Care is a healthcare interface that rejects clinical coldness in favour of warm, grounded simplicity. The palette opens with pure white and black — maximally legible — but the custom brand font named "ray" signals intention: this is a considered typographic identity, not a generic health app. A warm sandy tone (`rgb(223, 213, 204)`) appears as a soft surface accent, suggesting approachability. The overall feeling is clean and trustworthy without being sterile.

## 2. Color Palette & Roles
- **Background** — `rgb(255, 255, 255)` (pure white): primary canvas
- **Text** — `rgb(0, 0, 0)` (pure black): all primary type
- **Warm sand accent** — `rgb(223, 213, 204)`: section backgrounds, decorative panels, soft visual warmth
- No strong colour accents in the UI chrome — the product trusts white, black, and sand

## 3. Typography Rules
- **Brand typeface** — `ray` (custom, weight 400): the sole font family; a named proprietary typeface signals brand investment
- Display heading at 50px — confident and clean
- Body at 17px — comfortable reading size
- No letter-spacing adjustments, no text transforms detected
- Single weight (400) throughout — the typeface's own character carries visual variety

## 4. Component Stylings
- Small, precise radii: 4px and 6px — slightly rounded corners that soften without decorating
- No shadows — flat, clean elevation model
- Pure black/white contrast for interactive affordances
- Inputs and form elements follow the same minimal rounding

## 5. Layout Principles
- Clean horizontal header with transparent background
- `position: absolute` panels with warm sand background used for feature callouts
- Generous whitespace; layout communicates clarity of purpose
- No dense information packing — healthcare UX respects cognitive load

## 6. Depth & Elevation
- No shadows detected — purely flat
- Colour blocks (white vs. sand) create subtle section delineation
- Overlay panels use colour rather than elevation

## 7. Do's and Don'ts
**Do:** Maintain pure white and black as the primary pair — high contrast and clarity are non-negotiable.
**Do:** Use warm sand (`rgb(223, 213, 204)`) for section backgrounds that need warmth without colour.
**Do:** Honour the brand by always using the `ray` typeface — it defines the product identity.
**Don't:** Introduce shadows or complex layering.
**Don't:** Use bright accent colours — warm neutrals only.
**Don't:** Deviate from the 4px/6px radius system.

## 8. Responsive Behavior
- Header collapses to minimal navigation at mobile
- Content sections stack vertically; sand panels become full-width backgrounds
- Font sizes scale moderately; 50px headings may reduce to ~32px

## 9. Agent Prompt Guide
> Design in Ray Care's style: pure white background, pure black text, warm sand accent (`rgb(223,213,204)`). Custom font named "ray" at weight 400, 50px headings, 17px body. 4–6px border radius, no shadows. Flat, warm, clinically clean aesthetic.

*Generated by Sparkbites — extracted from live CSS analysis*