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):

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.

• 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