layover.studio – Design System Reference

1. Visual Theme & Atmosphere

Bold purple-accented creative studio with a vivid gradient identity. The accent system radiates energy – vivid violet bleeds into pink, then white – communicating creativity and forward momentum.

The overall mode is light, with a monospaced, code-aesthetic typographic identity. Depth is entirely absent – the composition is rigorously flat.

2. Color Palette & Roles

Computed Roles

• border (body): rgb(229, 231, 235)
• background (footer): rgb(17, 39, 229)
• text (footer): rgb(0, 148, 255)

Key observations: No token layer exists. Colours emerge from context and browser defaults. Light-mode-first palette.

3. Typography Rules

body – Departure Mono, 16px, weight 400, line-height 24px

Hierarchy principle: A single typeface (Departure Mono) handles all levels. Size and weight alone establish rhythm.

What is absent: No proportional serif or display face. The monospaced system is intentional – do not introduce decorative type.

4. Component Styling

Border radii: No border radii detected – corners are sharp throughout.

Interactive states:

• a[href]: tag: a, default: [object Object], hover: null, focus: [object Object]
• a[href]: tag: a.font-normal “jbnj@layover.studio”, default: [object Object], hover: null, focus: [object Object]
• a[href]: tag: a.font-normal “baz@layover.studio”, default: [object Object], hover: null, focus: [object Object]

Buttons & controls: Match the typographic register – monospaced labels, minimal padding, high-contrast borders.

5. Layout Principles

Common padding values: 56px 40px.

The dominant padding rhythm (56px 40px) suggests a fixed-pixel grid.

Avoid introducing grid lines, dividers, or decorative rules unless absolutely necessary. Let whitespace do the structural work.

6. Depth & Elevation

No box shadows detected. Depth is achieved through colour contrast and spacing alone – the design is intentionally flat.

Maintain the flat aesthetic throughout. If you must indicate overlapping layers (modals, tooltips), use border outlines or background tints rather than shadows.

7. Do’s and Don’ts

Do:

• Respect the monospaced, code-aesthetic typographic voice – every element should speak the same typeface language.
• Use whitespace as a primary design tool. When in doubt, add space rather than elements.
• Stay within the established colour range – no additional palette colours.
• Keep interactions subtle: micro-transitions at 150-200ms maximum.

Don’t:

• Do not introduce proportional or display typefaces. The monospaced grid is the identity.
• Do not add drop shadows, gradients, or decorative textures unless they are already present in the system.
• Do not use colour to communicate hierarchy – size and weight do that work here.
• Avoid centring body text. The layout has a strong left-anchored reading rhythm.

8. Responsive Behavior

Breakpoints detected: 640, 768, 1024, 1280.

Honour the breakpoints extracted above.

On small screens, collapse multi-column layouts to a single column without compromising the typographic scale. The type should remain readable – never below 14px rendered size.

9. Agent Prompt Guide

When generating UI components, extensions, or page sections for layover.studio, instruct the agent as follows:

“Build in the style of layover.studio: bold purple-accented creative studio with a vivid gradient identity. Use Departure Mono as the primary typeface. Light background, dark text. No shadows or elevation. Minimal palette, no custom tokens. No animations – immediate state changes only. Generous whitespace, strong typographic scale. Sharp corners throughout.”

Generated by Sparkbites – extracted from live CSS analysis