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