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 leadingh2:heading, 24px, weight 700h3:heading, 30px, weight 700p: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 400label: 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
#f15757accent with#ff2c2cvariant, inset+outer shadow on interactive components, 10px border radius, oklch-based token architecture.”
Generated by Sparkbites — extracted from live CSS analysis
