# lab01.dev -- Design System Reference

## 1. Visual Theme & Atmosphere

Developer-first terminal aesthetic. Geist Mono unifies every text element under a code-lab identity, stripping away decorative type in favour of monospaced precision and functional density.

The overall mode is **dark**, with a monospaced, code-aesthetic typographic identity. Shadows and elevation are used sparingly to separate key surfaces.

---

## 2. Color Palette & Roles

### Computed Roles

- **background (body)**: `rgb(10, 10, 10)`
- **text (body)**: `rgba(255, 255, 255, 0.8)`
- **border (header)**: `oklch(1 0 0 / 0.08)`
- **background (footer)**: `rgb(250, 250, 250)`
- **background (button)**: `rgb(17, 17, 17)`
- **background (span.btn-availability-indicator)**: `rgb(52, 211, 153)`
- **background (button.btn-color)**: `rgb(186, 150, 90)`
- **background (button.btn-color)**: `rgb(134, 143, 159)`
- **background (button.btn-color)**: `rgb(252, 73, 160)`
- **background (button.btn-color)**: `rgb(122, 143, 247)`
- **background (button.btn-color)**: `rgb(238, 65, 105)`
- **background (button.btn-color)**: `rgb(178, 224, 113)`

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

---

## 3. Typography Rules

**h1** -- Geist Mono, 13px, weight 500, line-height 18.2px

**Hierarchy principle:** A single typeface (Geist 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:**
- `button`: tag: button.btn-color "Copy color to clipbo", default: [object Object], hover: null, focus: [object Object]
- `button`: tag: button.btn-color "Copy color to clipbo", default: [object Object], hover: null, focus: [object Object]
- `button`: tag: button.btn-color "Copy color to clipbo", default: [object Object], hover: null, focus: [object Object]
- `a[href]`: tag: a.logo "Back to top", default: [object Object], hover: null, focus: [object Object]

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

---

## 5. Layout Principles

Flex/grid gaps: normal 24px.

No dominant padding pattern -- spacing is contextual.

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

---

## 6. Depth & Elevation

- `element`: `"oklch(1 0 0 / 0.2) 0px 1px 0px 0px inset"`
- `element`: `"rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.075) 0px 0px 0px 1px, rgba(0, 0, 0, 0.06) 0px 0.2px 0.3px -2px, rgba(0, 0, 0, 0.082) 0px 0.7px 0.9px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px -2px"`

Use shadows conservatively -- reserve elevation for interactive feedback (dropdowns, modals), not decorative layering.

---

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

No explicit CSS breakpoints extracted. The layout relies on fluid units, CSS Grid auto-fit, or a single-column mobile-first approach.

Build mobile-first. Use fluid type and spacing where the existing CSS suggests it (clamp(), vw units). Avoid rigid pixel breakpoints if the system uses fluid scaling.

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 **lab01.dev**, instruct the agent as follows:

> "Build in the style of lab01.dev: developer-first terminal aesthetic. Use Geist Mono as the primary typeface. Dark background, light text. Shadows only for modal-level 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*