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

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