# Frontend Design
> Frontend design system for the Orient. Use this skill when doing ANY UI work including creating components, building pages, adding forms, styling elements, or working with buttons, cards, modals, inputs, tables, or layouts. Triggers on "create component", "build page", "add form", "button", "card", "modal", "style", "layout", "UI", "frontend", "display data", "show results", "dashboard", or any visual/interface development task.
- Skill: `diegosouzapw/frontend-design-19` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add diegosouzapw/frontend-design-19`
- Raw SKILL.md: https://api.skillmd.com/api/skills/diegosouzapw/frontend-design-19/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: diegosouzapw (https://skillmd.com/u/diegosouzapw)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/diegosouzapw/frontend-design-19
---
# Frontend Design System
This project uses a **developer-grade** design aesthetic inspired by Vercel, Linear, and shadcn/ui.
## Core Principles
1. **Black & White Dominant** - Color only for semantic status (success/error/warning)
2. **High Information Density** - Clean but compact
3. **Border-Based Hierarchy** - Avoid heavy shadows
4. **Monospace for Data** - IDs, dates, timestamps, code always in `font-mono`
## Tech Stack
- **React + Vite** for apps
- **Tailwind CSS v3.4+** for styling
- **CSS Variables** with semantic classes (`bg-background` not `bg-white`)
- **Dark Mode First** - Class-based via `.dark` on ``
## Semantic Color Tokens
**NEVER use hardcoded colors.** Use semantic tokens:
| Token | Purpose |
| ------------------------- | ---------------------- |
| `bg-background` | Page background |
| `text-foreground` | Primary text |
| `bg-card` | Cards/panels |
| `border-border` | All borders |
| `bg-muted` | Secondary backgrounds |
| `text-muted-foreground` | Secondary text, labels |
| `bg-primary` | Primary actions |
| `text-primary-foreground` | Text on primary |
## Typography
- **UI Text**: `font-sans` (Inter)
- **Data/Code**: `font-mono` (JetBrains Mono) - MANDATORY for:
- IDs, UUIDs, hashes
- Dates and timestamps
- Status codes
- Logs/console output
- Metric values
## Component Patterns
### Buttons
```tsx
// Primary
// Secondary
// Ghost (for icons/menus)
```
### Cards
```tsx
Title
ID: abc123
{/* Content */}
```
### Inputs
```tsx
```
### Tables
```tsx
```
## Quick Reference
| Element | Classes |
| ------------- | --------------------------------------------------- |
| Page bg | `bg-background` |
| Card | `rounded-xl border border-border bg-card shadow-sm` |
| Button height | `h-9` |
| Border radius | `rounded-md` (6px) |
| Text sizes | `text-sm` (body), `text-xs` (labels) |
| Monospace | `font-mono` |
| Muted text | `text-muted-foreground` |
## Do's and Don'ts
**DO:**
- Use `border-border` for all dividing lines
- Use `text-muted-foreground` for metadata/labels
- Use `font-mono` for any data values
- Ensure sufficient contrast
**DON'T:**
- Use shadows to define hierarchy (use borders)
- Use `rounded-full` for buttons (except icon-only)
- Mix serif fonts
- Use hardcoded colors like `bg-white` or `bg-gray-100`
## Reference Files
For detailed information:
- **Full design system**: See [references/design-system.md](references/design-system.md)
- **Component examples**: See [references/components.md](references/components.md)