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