# DESIGN.md — buka.studio

## 1. Visual Theme & Atmosphere

Buka Studio's site leads with one of the most memorable accent colors in modern studio design: a vivid electric lime (`rgb(231, 254, 77)`) detonated against a warm off-white ground. The design philosophy is "design studio that takes creative risks but has the craft to back it up." It uses a Tailwind/shadcn-style token system but with a distinctly custom primary color that escapes the generic blue-primary trap. The atmosphere is warm, grounded, and unmistakably opinionated — this is a studio proud of its voice.

## 2. Color Palette & Roles

Built on HSL design tokens (shadcn-style):

| Role | Token | Computed Value | Notes |
|------|-------|----------------|-------|
| Background | `--background` | `hsl(20, 6%, 90%)` | Warm off-white — almost cream |
| Foreground | `--foreground` | `hsl(20, 14%, 4%)` | Near-black with warm undertone |
| Card surface | `--card` | `hsl(0, 0%, 100%)` | Pure white — lifts above warm ground |
| Primary token | `--primary` | `hsl(24.6, 95%, 53.1%)` | Deep orange — hover/active states |
| Electric lime accent | Surface color | `rgb(231, 254, 77)` | The signature color — hero sections, CTAs |
| Muted text | `--muted-foreground` | `hsl(20, 6%, 45%)` | Warm mid-gray |
| Border | `--border` | `hsl(20, 6%, 82%)` | Warm light gray |

The electric lime is the only saturated element in an otherwise warm-neutral system. This creates maximum impact when it appears — the entire page exists to set up that lime.

## 3. Typography Rules

**Typeface**: Custom extended sans (likely Söhne or similar) for display; system sans-serif for body and utility text.

| Selector | Size | Weight | Notes |
|----------|------|--------|-------|
| h1 (display) | 88px+ | Heavy | Maximum impact display scale |
| body | 16px | 400 | Standard readable baseline |

- The contrast between display and body scale is extreme — this is editorial typography, not UI typography.
- Warm black (`hsl(20, 14%, 4%)`) for all body text — slightly warmer than neutral, matching the cream ground.
- The `--radius: .5rem` token (8px) carries through to all interactive components.
- **What's absent**: no serif accents, no condensed fonts, no italic treatments.

## 4. Component Stylings

- **Hero surface**: electric lime (`rgb(231, 254, 77)`) — full bleed or card-scaled, the primary brand moment.
- **Cards**: white on warm-off-white ground — the lift is subtle but effective.
- **Borders**: warm-tinted light gray (`hsl(20, 6%, 82%)`) — never cold gray.
- **Secondary accent**: orange primary token (`hsl(24.6, 95%, 53.1%)`) for interactive states and hover effects.
- **Radius**: 8px across the board — friendly, not sharp.

## 5. Layout Principles

- Warm background creates a "studio wall" feel — works beautifully behind work images.
- Full-bleed lime sections create hard visual breaks in the scroll journey.
- White cards above warm ground follow the classic "card lifts from wall" pattern.
- No detected animations, suggesting smooth CSS transitions handle hover/interactive states.

## 6. Depth & Elevation

No explicit shadows detected in the token system. Depth is achieved through:
1. Chromatic ground/card contrast: cream background (`hsl(20, 6%, 90%)`) → white cards
2. The electric lime surface as a high-luminance (0.89) plane above the page
3. The warm undertone in borders and text anchors all elements to the same tonal family

## 7. Do's and Don'ts

**Do:**
- Use the electric lime (`#E7FE4D`) sparingly and deliberately — it earns its power through restraint.
- Keep the background warm (`hsl(20, 6%, 90%)`) — cold grays will break the studio warmth.
- Apply the orange primary token for interactive hover/active states.
- Pair large display text with wide whitespace — the scale needs air.

**Don't:**
- Use lime as a body text color — it is a background/surface element only.
- Switch to neutral gray borders — the warm tint is essential.
- Add drop shadows — the warm neutral palette handles depth through color alone.
- Compress the heading scale — the large display is non-negotiable for brand impact.

## 8. Responsive Behavior

- Large display headings require aggressive scaling on mobile (likely 40–48px).
- Warm cream background holds its warmth at all sizes — no perceptual shift.
- Full-bleed lime sections maintain impact at mobile width because the color does the work.
- Card whites at 8px radius look appropriate across breakpoints.

## 9. Agent Prompt Guide

> Design a creative studio website in the style of Buka Studio: warm cream background (`hsl(20, 6%, 90%)`), near-black warm text (`hsl(20, 14%, 4%)`), electric lime hero surface (`#E7FE4D`), white cards with warm light-gray borders, large display headings, 8px border-radius. No shadows — depth through chromatic contrast. One saturated accent (lime) deployed at maximum impact moments only.

*Generated by Sparkbites — extracted from live CSS analysis*