| 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
A minimal, clean design system for the Practica consultancy brand. Apply these guidelines to every UI element to maintain visual consistency across pages and projects.
Design Philosophy
- Minimal and clean — generous whitespace, no visual clutter
- Professional but approachable — soft shadows, smooth transitions, rounded corners
- Content-first — typography optimized for readability, muted chrome
- Light theme only — no dark mode
Quick Reference
| Token | Value |
|---|
| Font | Inter (300–800) via Google Fonts |
| Primary/Accent | Teal — oklch(0.68 0.12 199) (~#0d9488) |
| Background | Light gray — oklch(0.91 0.004 265) (~#f8f9fa) |
| Text | Near-black — oklch(0.16 0 0) |
| Card surface | White — oklch(1 0 0) |
| Muted text | Medium gray — oklch(0.45 0 0) |
| Border | Light gray — oklch(0.87 0.005 265) |
| Base radius | 0.75rem (12px) |
| Max content width | max-w-6xl (sections), max-w-[52rem] (articles) |
Tech Stack
- Tailwind CSS v4 — configured inline in
src/index.css (no tailwind.config.js)
- shadcn/ui — "new-york" style, neutral base color, lucide icons
- CSS Variables — all tokens as OKLCH values in
:root
cn() utility — from @/lib/utils for conditional class merging
Font
Inter — loaded from Google Fonts with weights 300, 400, 500, 600, 700, 800.
Add to your HTML <head>:
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
CSS variable:
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
Color Palette
All colors use OKLCH format. Define these as CSS variables in :root:
:root {
--background: oklch(0.91 0.004 265);
--foreground: oklch(0.16 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.16 0 0);
--primary: oklch(0.68 0.12 199);
--primary-foreground: oklch(1 0 0);
--secondary: oklch(0.94 0.015 199);
--secondary-foreground: oklch(0.2 0 0);
--muted: oklch(0.93 0.003 265);
--muted-foreground: oklch( );
: ( );
: ( );
: ( );
: ( );
: ( );
: ( );
: ;
}
Using colors in Tailwind
Reference via semantic classes: bg-background, text-foreground, bg-primary, text-primary, bg-card, text-muted-foreground, border-border.
For tinted variants use opacity: text-foreground/85, bg-primary/10, border-primary/30.
Typography
Headings
| Level | Classes |
|---|
| H1 (hero) | text-5xl md:text-6xl lg:text-7xl font-bold leading-tight tracking-tight |
| H2 (section) | text-4xl md:text-5xl font-bold tracking-tight |
| H3 (subsection) | text-xl md:text-2xl font-semibold |
| Section label | text-sm font-semibold uppercase tracking-widest text-primary |
Body text
| Variant | Classes |
|---|
| Primary | 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 |
| Ordered list | ml-1 list-inside list-decimal space-y-4 marker:font-semibold marker:text-primary |
| Unordered list | 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 |
Spacing
Section padding
- Vertical:
py-24 to py-28 for major sections
- Horizontal:
px-8 (desktop), px-4 (mobile)
Container widths
max-w-6xl mx-auto — standard sectionsmax-w-3xl mx-auto — narrow contentmax-w-[52rem] mx-auto — blog article body
Component spacing
- Card padding:
p-6 to p-10
- Flex gaps:
gap-4 to gap-8
- Grid gaps:
gap-8 to gap-12
Component Patterns
Buttons
Primary CTA buttons are pill-shaped:
rounded-full px-6 py-2.5 text-sm font-medium
Larger variant:
rounded-full px-8 py-3.5 text-base font-medium
Use shadcn Button variants: default (primary), outline (secondary), ghost (navigation).
Cards
Standard card pattern with hover lift:
rounded-2xl bg-background p-8 md:p-10 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg
Base shadcn card: rounded-xl border shadow-sm.
Badges
Category badges:
rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-primary
Navigation
- Header:
sticky top-0 z-50 bg-card/80 backdrop-blur-md
- Nav links:
text-sm font-medium text-muted-foreground transition-colors hover:text-foreground
- Mobile nav:
text-lg font-medium text-foreground transition-colors hover:text-primary
Code blocks (decorated)
overflow-hidden rounded-2xl border border-border
With a top bar showing three dots (red/yellow/green) and filename, then p-6 md:p-8 for code content.
Interaction Patterns
- Hover lift:
hover:-translate-y-1 on cards
- Hover shadow:
hover:shadow-lg or hover:shadow-md
- Color transitions:
transition-colors for links, transition-all duration-300 for cards
- Focus ring: Uses
--ring (teal) via shadcn defaults
Layout Structure
Every page follows this skeleton:
<div className="flex min-h-screen flex-col bg-background text-foreground">
<Header /> {}
<main className="flex-1">
{}
<section className="py-28 px-8">
<div className="mx-auto max-w-6xl text-center">...</div>
</section>
{}
<section className="py-24 px-8 bg-card">
<div className="mx-auto max-w-6xl">...</div>
</section>
</main>
<Footer />
</div>
Sections alternate between transparent (shows bg-background gray) and bg-card (white).
Border Radius Scale
| Token | Value |
|---|
--radius-sm | 8px |
--radius-md | 10px |
--radius-lg | 12px (base) |
--radius-xl | 16px |
--radius-2xl | 20px |
--radius-3xl | 24px |
Common usage: rounded-xl / rounded-2xl for cards, rounded-full for buttons and badges, rounded-lg for code blocks.
Shadow Scale
shadow-sm — default card rest stateshadow-md — subtle hovershadow-lg — prominent hover
Responsive Breakpoints
- Mobile-first approach
md: (768px) — tablet and uplg: (1024px) — desktop and up- Common patterns:
hidden md:block, md:grid-cols-2, lg:grid-cols-3
Checklist for New Pages
- Use Inter font (verify Google Fonts link is in
<head>)
- Set
bg-background text-foreground on the root layout
- Use teal (
primary) as the only accent color
- Cards on white (
bg-card or bg-background), page bg is light gray
- Pill-shaped CTA buttons (
rounded-full)
- Generous vertical padding (
py-24+) between sections
- Content capped at
max-w-6xl; articles at max-w-[52rem]
- Hover effects: lift (
-translate-y-1) + shadow on interactive cards
- Section labels: uppercase, tracked, teal
- No dark mode — light theme only
