Design OWO Now — Design System

1. Visual Theme & Atmosphere

Design OWO Now is unapologetically loud — a dark, near-black base canvas (#0f0f0f) punched through with neon candy: soft lavender, acid green, coral pink, and cyan. Built in Framer, the composition layers glassmorphic pill-shapes and translucent cards with subtle inset/ambient shadow systems that create a tactile sense of depth. The typographic choice is striking: Death Star for decorative/display moments and TT Firs Neue for navigation and body text — both unconventional, both signalling that this is a design statement, not a template.

2. Color Palette & Roles

The four accent colours appear in dedicated surface panels — they are never mixed on the same element. The frosted overlay creates the glassmorphic card language. Link/body text in mid-grey (#aaaaaa) ensures readability on the dark background without competing with the neon accents.

3. Typography Rules

Display typeface: Death Star — decorative, used for large graphical text moments. Navigation / body typeface: TT Firs Neue Regular — clean geometric grotesque.

• The p size of 7px is a scaled/computed value — actual display sizes will be significantly larger through transforms or viewport scaling.
• Navigation links have unusual 31px line-height at 14px — nearly 2.2 ratio, very airy nav.
• Death Star is a pure design statement typeface — not suitable for body or UI text.
• Positive tracking on Death Star (+0.28px) vs. negative on nav links (-0.42px) creates contrast between display and functional text.

4. Component Styling

• Cards / pill shapes: Framer-generated with layered inset and drop shadows for glassmorphic depth.
• Glass surfaces: rgba(173,179,189,0.4) frosted overlay — combined with backdrop-filter (implied by Framer).
• Shadow system (glass card): Multi-layer —
  • Inset dark: rgba(0,0,0,0.25) 0px -0.94px 3.75px inset
  • Inset light: rgba(255,255,255,0.3) 0px 1.87px 1.87px inset
  • Outer ambient: rgba(0,0,0,0.5) 0px 0px 1.87px
  • Outer drop: rgba(0,0,0,0.29) 0px 3.48px 7.84px
  • Large depth: rgba(0,0,0,0.26) 0px 14.8px — layered volumetric effect.
• No border-radius tokens visible — radii are set inline within Framer.

5. Layout Principles

• Section padding: 10px — minimal, nearly edge-to-edge content.
• Framer’s absolute positioning system governs placement — not a CSS grid/flex layout.
• Content is layered and overlapping — not a grid-aligned document layout.
• Designed for viewport-scale, full-bleed visual impact.

6. Depth & Elevation

• Multi-layer shadow system creates volumetric glassmorphic cards (see Component Styling).
• Depth is the primary aesthetic — dark base + transparent overlays + multi-inset shadows.
• Frosted glass effect on cards requires backdrop-filter: blur() — not captured in CSS data but implied by design.
• The shadow stack is unusually complex for simple cards — this is considered, intentional elevation work.

7. Do’s and Don’ts

Do:

• Keep the near-black (#0f0f0f) base unbroken — the dark field makes neon accents work.
• Use each neon accent on its own dedicated surface — one colour per panel.
• Apply the full multi-layer shadow system to glass cards for authentic depth.
• Use Death Star only for large graphical/display moments.

Don’t:

• Mix multiple neon accents on a single component.
• Use the glassmorphic surface on light backgrounds — it only works on dark.
• Substitute Death Star for navigation or body text.
• Use solid white or pure black backgrounds in place of the near-black (#0f0f0f).

8. Responsive Behavior

• Framer absolute-position layout needs explicit breakpoint overrides.
• The 14px/31px nav link rhythm may need tighter line-height on mobile.
• Neon accent surfaces (pill cards) should maintain full-bleed character at mobile — avoid shrinking to unreadable sizes.

9. Agent Prompt Guide

Build a dark creative portfolio using Design OWO Now’s aesthetic. Background #0f0f0f, body links #aaaaaa. Four neon accent surfaces: lavender rgb(167,125,255), mint rgb(163,254,196), coral rgb(255,108,122), cyan rgb(73,236,255) — one per panel, never mixed. Glassmorphic cards with rgba(173,179,189,0.4) surface and multi-layer inset+drop shadow. Death Star typeface for large display moments. TT Firs Neue for nav at 14px with -0.42px tracking. Framer-style absolute positioning, full-viewport-scale sections.

Generated by Sparkbites — extracted from live CSS analysis