# Ruru Build — Design Language

## 1. Visual Theme & Atmosphere
Ruru Build is a developer-tooling product with a design language that prioritises clarity above all. The palette is essentially monochrome: white surface, near-black text, mid-grey for secondary navigation. The two fonts — GeistSans for primary content and the characterful angie-sans for headlines — introduce a subtle personality without compromising utility. With no shadows and only small radii (4–6px), the aesthetic is flat, focused, and unassuming. This is a tool that trusts its content.

## 2. Color Palette & Roles
- **Background** — `lab(100 0 0)` (true white in perceptual colour space): the cleanest possible canvas
- **Primary text** — `rgb(23, 23, 23)` (near-black): ink-dark for maximum legibility
- **Secondary / navigation** — `rgb(124, 124, 124)` (neutral mid-grey): links, metadata, inactive states
- **Border default** — `lab(90.952 0 -0.0000119209)` (very light grey): structural dividers

This is a two-tone interface: near-black on white, with grey as the only variation.

## 3. Typography Rules
- **GeistSans** (weight 400): body, UI, and navigation — clean and modern
- **angie-sans** (weight 400): likely for headings — a distinctive display voice
- Sizes at 14–16px only — a tight, UI-focused range with no dramatic display scaling
- No letter-spacing adjustments, no text transforms — pure functional typography
- Single weight (400) throughout; hierarchy from size and placement alone

## 4. Component Stylings
- **6px radius** for larger containers (panels, cards)
- **4px radius** for smaller UI elements (inputs, tags, buttons)
- No shadows
- Borders use the very light grey lab value — structural but unobtrusive
- Content area with a fixed right margin (`margin: 0px 340px`) suggesting a persistent sidebar

## 5. Layout Principles
- Main content area with 340px right margin — likely a fixed sidebar for navigation or context panel
- 32px top / 24px side padding on main content
- Single-column reading flow within the content area
- Navigation fixed as sidebar — a documentation/tool layout pattern

## 6. Depth & Elevation
- Zero shadows — completely flat
- Layout structure (sidebar + content) provides spatial hierarchy
- Light grey borders define regions without visual weight

## 7. Do's and Don'ts
**Do:** Maintain the sidebar-plus-content layout structure — it's the defining spatial pattern.
**Do:** Use 6px for panels, 4px for interactive elements — the two-radius system is sufficient.
**Do:** Keep secondary text at `rgb(124,124,124)` — never go lighter for interactive navigation.
**Don't:** Add shadows — the flat system is intentional.
**Don't:** Introduce colour accents into the UI chrome.
**Don't:** Exceed 16px for body text — compact information density is the goal.

## 8. Responsive Behavior
- 340px right margin collapses on mobile — sidebar likely moves to top or becomes a drawer
- Content padding reduces from 32px/24px to smaller values
- Two-radius system maintained; no mobile-specific shape changes
- Font sizes remain at 14–16px — mobile does not need scaling

## 9. Agent Prompt Guide
> Design like Ruru Build: white background (`lab(100 0 0)`), near-black primary text (`rgb(23,23,23)`), neutral mid-grey for links (`rgb(124,124,124)`). GeistSans for body, angie-sans for headings. 6px radius (panels) and 4px (elements). No shadows. Fixed sidebar layout with 340px right margin on main content. Flat, focused, developer-tool aesthetic.

*Generated by Sparkbites — extracted from live CSS analysis*