Droxy AI — Design System
1. Visual Theme & Atmosphere
Droxy AI builds with softness and approachability — a near-white background (#f6f7f8) rather than pure white, pastel card surfaces, and Inter Display as the typographic backbone. It is the opposite of the aggressive dark AI aesthetic: this product wants to feel friendly, trustworthy, and accessible. The card palette reads like a children’s colour wheel of gentle pastels — warm yellow, sage green, lavender, and dusty teal — each assigned to a feature or product area. Shadows are cool blue-tinted rather than neutral black, anchoring the elevation system in the same cool-soft tone as the overall palette.
2. Color Palette & Roles
| Role | Value | Notes |
|---|---|---|
| Page background | #f6f7f8 |
Warm off-white |
| Primary text | rgb(37,37,37) |
Near-black, neutral |
| Section heading | rgb(37,37,37) |
Same near-black |
| Slate grey surface | rgb(100,113,126) |
Muted blue-grey card |
| Warm yellow card | rgb(251,235,192) |
Pastel sand |
| Sage green card | rgb(217,234,201) |
Soft green |
| Lavender card | rgb(227,201,234) |
Soft purple |
| Teal-blue card | rgb(214,233,235) |
Pale teal |
| Default link | rgb(0,0,238) |
Browser-default (likely unstyled) |
The pastel card system assigns one colour per product feature/panel — used as full background fills on card components, not as accent highlights. Cool-tinted shadows reinforce the gentle, non-aggressive tone.
3. Typography Rules
Primary typeface: Inter Display SemiBold (for headings), Inter Display (for body).
| Level | Size | Weight | Line Height | Tracking |
|---|---|---|---|---|
| h2 | 48px | 400 (SemiBold face) | 54px | -1.92px |
| h3 | 32px | 600 | 40px | -0.32px |
| p / body | 14px | 400 | — | — |
| Base body | 12px | 400 | normal | normal |
- Inter Display SemiBold is the face for h2 — the weight is baked into the font name, so CSS weight is 400 relative to that subfamily.
- h3 at weight 600 with Inter Display (regular face) is the secondary heading level.
- Negative tracking at large sizes (-1.92px at 48px) — strong compression typical of modern SaaS headings.
- No monospace, no display novelty — this is pure Inter through and through.
4. Component Styling
- Pastel cards: Full-colour fill backgrounds in the pastel palette — rounded (border-radius inferred from Framer).
- Shadow system (cool-tinted):
- Default card:
rgb(220,224,229) 0 0 0 1px, rgba(201,219,234,0.32) 0 7.65px 19.14px -5.74px, rgba(12,73,134,0.04) 0 -4px 8px inset - Elevated card:
rgba(201,219,234,0.32) 0 7.65px 19.14px -5.74px, rgba(12,73,134,0.04) 0 3.83px 8px inset
- Default card:
- The blue-tinted shadows (rgba(12,73,134,0.04) — dark navy at 4% opacity for inset) is subtle but consistent with the cool palette.
- 1px border ring in light grey (rgb(220,224,229)) before the blur shadow — crisp edge before soft glow.
- Links default to browser blue — likely not customised in this tool/utility context.
5. Layout Principles
- Body padding is 0 — content fills to edge, components control their own padding.
- No section-level spacing tokens — Framer absolute positioning handles layout.
- The layout appears card-grid based, with each feature in its own pastel panel.
6. Depth & Elevation
- Cool-tinted shadow system — all shadows have a blue-grey quality rather than neutral black.
- 1px border ring in light grey before the blur shadow — a crisp edge before the soft glow.
- Inset shadow adds a subtle concavity to cards — they appear pressed slightly into the surface.
- No dramatic depth — the elevation is whisper-soft, in keeping with the friendly aesthetic.
7. Do’s and Don’ts
Do:
- Assign one pastel to each feature area — the colour communicates category, not state.
- Use cool-tinted shadows exclusively — warm shadows would fight the palette.
- Apply Inter Display SemiBold at -1.92px tracking for all primary headings.
- Include the 1px grey border ring with every elevated card.
Don’t:
- Use high-contrast or saturated accent colours — this palette is intentionally muted.
- Mix multiple pastels in a single component.
- Use dark backgrounds or dark mode — the design is explicitly light and airy.
- Add harsh black drop shadows — only cool-tinted soft shadows.
8. Responsive Behavior
- Framer-built — absolute positioning requires explicit breakpoints at mobile.
- Pastel card grid should reflow to single-column at mobile.
- The compact body text (12–14px) needs minimum 16px on mobile to comply with accessibility norms.
- Off-white background (#f6f7f8) avoids the glare of pure white on high-brightness screens.
9. Agent Prompt Guide
Build a friendly AI SaaS interface using Droxy’s soft aesthetic. Background #f6f7f8. Text rgb(37,37,37). Typeface: Inter Display SemiBold for h2 at 48px/-1.92px tracking, Inter Display 600 for h3 at 32px/-0.32px tracking. Four pastel card surfaces: warm yellow rgb(251,235,192), sage rgb(217,234,201), lavender rgb(227,201,234), teal rgb(214,233,235). Cool-tinted shadows with 1px rgb(220,224,229) border ring. No dark backgrounds, no saturated accents, no warm shadows.
Generated by Sparkbites — extracted from live CSS analysis
