| name | practica-brand-design |
| description | Practica brand design system with colors, typography, spacing, and component patterns. Use when building or styling any UI for Practica — pages, components, layouts, blog posts, or landing pages. Ensures visual consistency with the established minimal, clean design language. |
| license | MIT |
| metadata | {"author":"practica","version":"1.0"} |
Practica Brand Design System
Stack: Tailwind v4, shadcn/ui (new-york style), OKLCH CSS vars in :root, cn() from @/lib/utils. Light theme only.
Quick Reference
| Token | Value |
|---|
| Font | Inter (300–800) via Google Fonts |
| Primary/Accent | Teal — oklch(0.68 0.12 199) |
| Background | Light gray — oklch(0.91 0.004 265) |
| Text | Near-black — oklch(0.16 0 0) |
| Card surface | White — oklch(1 0 0) |
| Muted text | oklch(0.45 0 0) |
| Border | oklch(0.87 0.005 265) |
| Base radius | 0.75rem |
| Max width | max-w-6xl (sections), max-w-[52rem] (articles) |
| Section padding | py-24–py-28 px-8 |
Colors via semantic classes: bg-background, text-foreground, bg-primary, bg-card, text-muted-foreground, border-border. Tinted: text-foreground/85, bg-primary/10, border-primary/30.
Typography
| Level | Classes |
|---|
| H1 | text-5xl md:text-6xl lg:text-7xl font-bold leading-tight tracking-tight |
| H2 | text-4xl md:text-5xl font-bold tracking-tight |
| H3 | text-xl md:text-2xl font-semibold |
| Section label | text-sm font-semibold uppercase tracking-widest text-primary |
| Body | text-lg leading-relaxed text-muted-foreground |
| Blog prose | text-lg leading-[1.85] text-foreground/85 space-y-6 |
| Metadata | text-sm text-muted-foreground |
Blog Prose Elements
| Element | Classes |
|---|
| Prose H2 | mb-8 mt-20 text-2xl md:text-3xl font-bold tracking-tight |
| Blockquote | border-l-4 border-primary/30 pl-6 italic text-foreground/70 |
| Inline code | rounded bg-foreground/[0.06] px-1.5 py-0.5 text-[0.88em] font-mono |
| Link | text-primary underline-offset-4 hover:underline |
| ol | ml-1 list-inside list-decimal space-y-4 marker:font-semibold marker:text-primary |
| ul | ml-1 list-inside list-disc space-y-3 marker:text-primary |
| Code block | my-6 overflow-x-auto rounded-lg bg-foreground/[0.04] p-5 text-sm leading-relaxed font-mono |
Components
- Button (CTA):
rounded-full px-6 py-2.5 text-sm font-medium — shadcn variants: default / outline / ghost
- Card:
rounded-2xl bg-background p-8 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg
- Badge:
rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-primary
- Nav header:
sticky top-0 z-50 bg-card/80 backdrop-blur-md
- Nav link:
text-sm font-medium text-muted-foreground transition-colors hover:text-foreground
Layout
Page root: flex min-h-screen flex-col bg-background text-foreground. Sections alternate bg-background (gray) / bg-card (white). Cards use rounded-xl/rounded-2xl; buttons/badges use rounded-full. Hover: hover:-translate-y-1 hover:shadow-lg.
For full CSS setup (Tailwind v4 @theme, :root vars, shadcn components.json): see references/css-tokens.md.
