# polify.xyz — Design System

## 1. Visual Theme & Atmosphere
Polify is a Framer-built product site with a playful, candy-coloured aesthetic. Light grey backgrounds, soft glassmorphic shadows, and a trio of accent colours (electric pink, amber yellow, mint green) create an approachable, almost app-store-preview energy. Geist handles the functional text layer while the overall composition leans into the contemporary "liquid glass" UI trend with inset highlight shadows and near-transparent surfaces. This is a product that wants to feel delightful and accessible.

## 2. Color Palette & Roles
| Role | Value | Notes |
|------|-------|-------|
| Background | `rgb(240, 240, 240)` | Soft light grey canvas |
| Link/highlight | `rgb(0, 0, 238)` | Browser-native blue — intentional |
| Pink | `rgb(255, 107, 147)` | Feature callout, warm accent |
| Yellow | `rgb(254, 188, 46)` | Energetic secondary accent |
| Green | `rgb(25, 195, 115)` | Success, positive state |

Three-accent system on a neutral grey base. Each accent carries a semantic or section-role meaning rather than appearing together.

## 3. Typography Rules
- **Body default**: Generic `sans-serif` at 12px — system font baseline.
- **UI/Content**: Geist — 700 weight, 13px for paragraph text (notably bold for body copy — an intentional density choice).
- Using bold Geist at 13px for body creates a compact, information-dense UI aesthetic typical of productivity tools.
- No display serif. No custom heading font. Typography is deliberately unobtrusive.

## 4. Component Stylings
- **Radius**: 16px — consistent medium rounding across all components.
- **Shadows (glassmorphic)**: `rgba(255,255,255,0.3) 0px 1px 0px inset` (top highlight) + `rgba(255,255,255,0.32) 0px 0px 28px inset` (inner glow) + `rgba(0,0,0,0.03) 0px 8px 16px outer` + `rgb(0,0,0) 0px 0px 0px 1px` (thin border). Full glass-card treatment.
- Cards have a frosted/glassy appearance with internal glow and precise black border.
- Framer-driven component animations.

## 5. Layout Principles
- Light grey ground plane with glass-effect floating cards.
- Compact information density (bold 13px body, 12px base).
- Framer-auto-layout grids for feature sections.
- Colour-coded sections or feature blocks (one accent per block).

## 6. Depth & Elevation
Multi-layer glassmorphic shadow: inset top highlight + inset glow + outer soft shadow + hairline border. Creates a lifted, frosted-glass appearance. The only shadow complexity in the system.

## 7. Do's and Don'ts
**Do:**
- Apply the full glass-card shadow stack to featured components
- Use 16px radius consistently across all cards and buttons
- Keep each accent colour to its own section or feature block

**Don't:**
- Use multiple accent colours in the same component
- Reduce Geist body weight below 700 — bold density is intentional
- Simplify the shadow stack — all four layers are needed for the glass effect

## 8. Responsive Behavior
Framer handles responsive layout. 16px radius is consistent across breakpoints. The glass shadow system scales correctly without adjustment. Bold 13px text remains legible on small screens.

## 9. Agent Prompt Guide
> Reproduce polify.xyz style: light grey `rgb(240,240,240)` canvas, Geist 700 at 13px for body text. Pink `rgb(255,107,147)`, yellow `rgb(254,188,46)`, green `rgb(25,195,115)` accents. 16px border-radius. Glassmorphic shadow: inset white highlight + inset glow + soft outer + 1px black border. Framer-built, compact density.

*Generated by Sparkbites — extracted from live CSS analysis*