labs.noomoagency.com – Design System Reference

1. Visual Theme & Atmosphere

Experimental agency lab with fluid type scaling and a deliberate tension between display proportions and content density. The fluid CSS system signals intentional responsiveness across every viewport.

The overall mode is light, with a editorial, serif-driven typographic identity. Depth is entirely absent – the composition is rigorously flat.

2. Color Palette & Roles

Design Tokens

• var(--swiper-theme-color): #007aff

Computed Roles

• text (a): rgb(0, 0, 238)
• background (input): rgba(255, 255, 255, 0.3)
• text (input): rgb(16, 16, 16)
• background (div.color): rgb(4, 51, 255)
• border (div.color): rgb(52, 54, 57)
• background (div.color): rgb(26, 10, 83)
• background (div.color): rgb(148, 33, 146)
• background (div.color): rgb(121, 26, 62)
• background (div.color): rgb(92, 0, 0)
• background (div.color): rgb(238, 77, 49)
• background (div.color): rgb(254, 187, 37)
• background (div.color): rgb(0, 88, 25)

Key observations: Token-driven colour system – use CSS custom properties as the single source of truth. Never hardcode hex values. Light-mode-first palette.

3. Typography Rules

h4 – DrukMedium, 48.897px, weight 500, line-height 45.4742px, tracking 0.978px, uppercase

body – Source Sans Pro, 16px, weight 400

input – Arial, 13.3333px, weight 400

Hierarchy principle: DrukMedium carries the primary voice. Scale and weight – not typeface changes – create hierarchy.

What is absent: No monospace or system-UI fallback. The serif identity is deliberate – do not substitute.

4. Component Styling

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

Interactive states:

• a[href]: tag: a.router-link-active, default: [object Object], hover: null, focus: [object Object]
• a[href]: tag: a “[Work]”, default: [object Object], hover: null, focus: [object Object]
• a[href]: tag: a “[Noomo Agency]”, default: [object Object], hover: null, focus: [object Object]
• input: tag: input.slider, default: [object Object], hover: null, focus: [object Object]

Buttons & controls: Match the typographic register – serif labels, generous line-height, understated borders.

5. Layout Principles

Common padding values: 0px 20px.

The dominant padding rhythm (0px 20px) 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 editorial, serif-driven 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.
• Reference CSS custom properties exclusively – never bypass the token layer.
• Keep interactions subtle: micro-transitions at 150-200ms maximum.

Don’t:

• Do not swap the serif for a sans-serif alternative. The editorial register depends on it.
• Do not add drop shadows, gradients, or decorative textures unless they are already present in the system.
• Do not use colour to communicate hierarchy – spacing and scale do that work here.
• Avoid centring body text. The layout has a strong left-anchored reading rhythm.

8. Responsive Behavior

Breakpoints detected: 767, 991, 1024.

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 labs.noomoagency.com, instruct the agent as follows:

“Build in the style of labs.noomoagency.com: experimental agency lab with fluid type scaling and a deliberate tension between display proportions and content density. Use DrukMedium as the primary typeface. Light background, dark text. No shadows or elevation. Token-driven colours via CSS custom properties. No animations – immediate state changes only. Generous whitespace, strong typographic scale. Sharp corners throughout.”

Generated by Sparkbites – extracted from live CSS analysis