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