# Reboot Studio — Design Language

## 1. Visual Theme & Atmosphere
Reboot Studio operates with confident minimalism on a pure white ground. The use of Inter — Next.js's canonical choice — feels deliberate here, paired with a shadow system borrowed from Tailwind's geometric multi-layer philosophy. The defining visual signature is the exclusive use of pill-shaped elements (`border-radius: 9999px`) for all rounded components. This creates a contemporary, product-forward aesthetic reminiscent of high-end SaaS tools. No colour accents appear in the collected CSS — the studio lets its work carry the chromatic weight.

## 2. Color Palette & Roles
- **Background** — transparent/white: clean canvas
- **Text** — `rgb(0, 0, 0)` (pure black): primary type
- **Border default** — `rgb(229, 231, 235)` (Tailwind gray-200): subtle dividers and form elements
- No accent or brand colours visible in the site chrome

## 3. Typography Rules
- **Inter** (via Next.js font system, weight 400 and 600): clean and universal
- 14–16px range: compact, information-dense UI
- Weight 600 for emphasis rather than a separate typeface
- No letter-spacing, no text transforms, no italics — pure neutral Swiss typographic DNA

## 4. Component Stylings
- **Pill-only radius** — `9999px` exclusively: all rounded elements are fully pill-shaped; never intermediate radii
- Three-level shadow system:
  1. Subtle: `rgba(0,0,0,0.06)` across 5 layers (0→24px offsets) — low-elevation cards
  2. Standard: `rgba(0,0,0,0.1)` at 10px/4px — interactive components
  3. Fine ring: `rgba(0,0,0,0.05)` with 1px inset — inputs and tight containers
- Borders use Tailwind's gray-200 as a consistent divider tone

## 5. Layout Principles
- No spacing overrides on body — reset to zero for precise control
- Likely grid or flexbox-based column layout
- Studio work presented in a grid of cards or case study thumbnails
- Navigation minimal and pill-shaped for buttons

## 6. Depth & Elevation
- Three distinct shadow levels provide a clear elevation vocabulary
- No blur effects or heavy glows — shadows are precise and geometric
- The softest shadow (6% opacity) barely lifts elements off the surface

## 7. Do's and Don'ts
**Do:** Use only `9999px` (full pill) for any rounded component — never partial radii.
**Do:** Apply the three-tier shadow system consistently: low (6%), standard (10%), tight ring (5%).
**Do:** Keep typography in Inter 400/600 with no decorative variation.
**Don't:** Introduce colour accents into the site chrome.
**Don't:** Mix pill and rectangular shapes — consistency is the rule.
**Don't:** Add background colours to sections — white is the only surface.

## 8. Responsive Behavior
- Grid layouts collapse from multi-column to single-column
- Pill-shaped navigation elements may stack or condense
- Shadow system maintained across viewports — no mobile-specific shadow stripping

## 9. Agent Prompt Guide
> Design like Reboot Studio: white background, black text, Inter 400/600. Exclusively pill-shaped components (`border-radius: 9999px`). Three shadow tiers — 6% opacity for cards, 10% for interactive, 5% ring for inputs. Tailwind gray-200 borders. No colour accents in the UI shell.

*Generated by Sparkbites — extracted from live CSS analysis*