# 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*