practica-brand-design
Skill13 starsChanged 27 days agoMITView on GitHub
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.
In this repository18 other files it gives its agents.
- .claude/skills/vercel-react-best-practices/AGENTS.mdAGENTS.md
- example-app-playwright/AGENTS.mdAGENTS.md
- example-app-vitest-browser/AGENTS.mdAGENTS.md
- CLAUDE.mdCLAUDE.md
- example-app-playwright/CLAUDE.mdCLAUDE.md
- example-app-vitest-browser/CLAUDE.mdCLAUDE.md
- openspec-apply-changeSkill
- openspec-archive-changeSkill
- openspec-bulk-archive-changeSkill
- openspec-continue-changeSkill
- openspec-exploreSkill
- openspec-ff-changeSkill
- openspec-new-changeSkill
- openspec-onboardSkill
- openspec-sync-specsSkill
- openspec-verify-changeSkill
- skill-maintenanceSkill
- vercel-react-best-practicesSkill
The file
Files
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.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.