# thesocialbrain.in — Design System

## 1. Visual Theme & Atmosphere

The Social Brain is a marketing or growth agency that channels energy through red. The design is clean and white-dominant, but a vivid coral-red (`#f15757`) punches through at key moments — a brand element that reads equally as confident urgency and approachable warmth. The heading typeface is a custom `heading` font (loaded as Next.js font) at large bold sizes, while Geist handles the functional interface layer. Built on Next.js and Tailwind with shadcn/ui-style tokens, the design is modern and systematically built.

## 2. Color Palette & Roles

| Role | Value | Usage |
|---|---|---|
| Canvas | `rgb(255,255,255)` | Pure white background |
| Near-white muted | `oklch(97% 0 0)` ≈ `#f7f7f7` | Muted sections, sidebar |
| Border | `oklch(92.2% 0 0)` ≈ `#ebebeb` | Input and component borders |
| Body text | `oklch(14.5% 0 0)` ≈ near-black | Primary foreground |
| Secondary text | `oklch(55.6% 0 0)` ≈ mid-gray | Supporting text |
| Primary accent | `#f15757` (coral red) | Brand CTA, highlighted elements |
| Secondary accent | `#ff2c2c` (vivid red) | Stronger red variant |
| Accent text on red | `#ffeaea` | Text on red surfaces — pale pink |
| Shadow | `rgba(88,88,88,0.25)` | Card shadows with inset highlight |

The red system is dual: coral `#f15757` and vivid `#ff2c2c` — slightly different personalities for different use cases.

## 3. Typography Rules

A two-family system:

- `h1`: `heading` (custom), 48px, weight 700, line-height 80px — generous leading
- `h2`: `heading`, 24px, weight 700
- `h3`: `heading`, 30px, weight 700
- `p`: `heading`, 24px, weight 700 — paragraphs use the heading font at heading weight (unusual, suggests large body-as-display treatment)
- `h4/body/button/input`: Geist, 16–20px, weight 400
- `label`: system sans-serif, 14px, weight 500

The `p` using the heading font at 700 weight suggests editorial-style large body text rather than conventional body copy.

## 4. Component Stylings

Border radius: `10px` (standard), `8px` (compact), `14px` (prominent cards), `9999px` (pills). Shadcn-style tokens with `--radius: 0.625rem`. Shadow system uses inset highlights: `rgba(162,162,162,0.25) 3px 6px 3px inset` — a subtle pressed/embossed quality. Footer uses `120px` top margin — generous separation.

## 5. Layout Principles

Next.js + Tailwind with no explicit custom breakpoints — standard Tailwind defaults. Standard full-width sections with centered content. Oklch-based token system suggests shadcn/ui color system.

## 6. Depth & Elevation

Shadow system: outer drop `rgba(88,88,88,0.25) 0px 4px 4px` combined with inner inset `rgba(162,162,162,0.25) 3px 6px 3px inset`. This creates a slightly dimensional, plastic-like quality for button/card elements.

## 7. Do's and Don'ts

**Do:** Use the heading font at bold weights for all display text including large body paragraphs. Use Geist for functional UI elements. Apply coral red sparingly — it's the brand accent, not a background.

**Don't:** Use light font weights — this design leans bold. Don't add multiple accent colors beyond the red variants. Don't suppress the inset shadow on CTAs.

## 8. Responsive Behavior

No custom breakpoints detected — Tailwind defaults at 640, 768, 1024, 1280, 1536px. Standard responsive flow.

## 9. Agent Prompt Guide

> "Design in the style of thesocialbrain.in: pure white canvas, custom bold heading font at large sizes, Geist for UI elements, coral red `#f15757` accent with `#ff2c2c` variant, inset+outer shadow on interactive components, 10px border radius, oklch-based token architecture."

*Generated by Sparkbites — extracted from live CSS analysis*