unito.shop — Design System

1. Visual Theme & Atmosphere

Unito presents a sustainable or artisanal commerce aesthetic — earthy, muted, deliberate. The canvas is near-white (rgb(250,250,250)) with a faintly warm reading that avoids the sterility of pure white. The primary brand surface is a deep olive-khaki (rgb(58,60,35)) — an unusual, organic color that signals craft, nature, and intentionality rather than conventional retail energy.

The single electric accent — a neon chartreuse rgb(245,255,103) — cuts sharply against the earthtone palette, functioning as a CTA or highlight device with unmistakable clarity. This tension between quiet and electric is the design’s defining move. Built on Framer.

2. Color Palette & Roles

The olive-khaki and electric lime pairing is the signature. Everything else is a supporting neutral. The sand tones (rgb(194,190,173)) provide warm mid-ground surfaces for cards and secondary elements.

3. Typography Rules

Typeface: Roobert Medium — a friendly, rounded geometric sans with humanist warmth. Used consistently across all levels.

Line height of 1.0× on H1 creates dense, editorial headlines — text as a designed block rather than flowing prose. This is a deliberate choice that reinforces the craft-object aesthetic.

Notably absent: No italic, no bold (weight 700), no serif, no monospace, no uppercase text-transform.

4. Component Stylings

Framer-generated classes present:

• Primary button (button.framer-n9xSr) — olive-khaki rgb(57,60,35) background; white or cream text; likely rounded
• CTA block (div.framer-0ezNT) — electric lime rgb(245,255,103) background; black text; full-contrast accent panel
• Secondary link (a.framer-zP3jx) — warm sand rgb(194,190,173) background
• Input fields — rgb(235,235,235) background; clean, minimal
• Spacing tokens: 4px base, 12px, 15px, 18px, 28px, 40px — a tight spacing scale for a product-oriented layout

5. Layout Principles

• Built on Framer’s layout engine; breakpoints at 999px (tablet/mobile)
• Likely full-bleed hero sections with the olive-khaki primary surface
• Product grid below fold, likely 2–3 columns on desktop
• Compact spacing scale (4px, 12px) suggests tight, product-card-heavy layout
• 40px padding for section-level breathing room

6. Depth & Elevation

No explicit shadow tokens detected. Depth through:

1. Color contrast — electric lime rgb(245,255,103) blocks create immediate visual pop against neutrals
2. Surface layering — olive-khaki hero → warm sand cards → near-white canvas
3. Typography weight — Roobert Medium’s rounded geometry creates presence without needing shadows

7. Do’s and Don’ts

Do:

• Use the electric lime exclusively as the accent/CTA color — its power comes from singularity
• Place lime against the olive-khaki dark for maximum impact; it’s a complementary contrast
• Use Roobert Medium throughout — no weight switching, let size carry hierarchy
• Set H1 at 1.0× line height for dense, block-style headlines
• Use warm sand as the mid-tier surface for cards and secondary panels

Don’t:

• Add more colors to the palette — three surfaces (white, sand, olive) plus one accent is the whole system
• Use the electric lime as a background for large sections; it’s a punctuation color, not a canvas
• Mix in other geometric sans typefaces; Roobert’s personality is singular
• Apply shadows — the flat layering approach defines the aesthetic

8. Responsive Behavior

The 54px H1 should scale down via responsive font-size or clamp() on mobile.

9. Agent Prompt Guide

“Design in the style of unito.shop: near-white canvas rgb(250,250,250), deep olive-khaki rgb(58,60,35) for primary surfaces and buttons, warm sand rgb(194,190,173) for cards, electric lime rgb(245,255,103) as the single CTA accent, Roobert Medium typeface throughout, 54px H1 at 1.0 line height, no shadows, no additional accent colors — artisanal sustainable commerce with a single electric punctuation.”

Generated by Sparkbites — extracted from live CSS analysis