name: frontend-design description: 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.
Frontend Design System
This project uses a developer-grade design aesthetic inspired by Vercel, Linear, and shadcn/ui.
Core Principles
- Black & White Dominant - Color only for semantic status (success/error/warning)
- High Information Density - Clean but compact
- Border-Based Hierarchy - Avoid heavy shadows
-
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-backgroundnotbg-white) -
Dark Mode First - Class-based via
.darkon<html>
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
// Primary
<button className="h-9 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90">
Action
</button>
// Secondary
<button className="h-9 px-4 rounded-md bg-secondary text-secondary-foreground text-sm font-medium hover:bg-secondary/80">
Cancel
</button>
// Ghost (for icons/menus)
<button className="h-9 px-3 rounded-md hover:bg-accent hover:text-accent-foreground">
<Icon />
</button>
Cards
<div className="rounded-xl border border-border bg-card text-card-foreground shadow-sm">
<div className="p-6 pb-2">
<h3 className="font-semibold text-foreground">Title</h3>
<span className="font-mono text-xs text-muted-foreground">ID: abc123</span>
</div>
<div className="p-6 pt-0">{/* Content */}</div>
</div>
Inputs
<input
className="h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:ring-1 focus-visible:ring-ring"
placeholder="Enter value..."
/>
Tables
<div className="rounded-md border border-border">
<table className="w-full">
<thead>
<tr className="border-b border-border bg-muted/50">
<th className="p-4 text-left text-xs uppercase font-medium text-muted-foreground">
Column
</th>
</tr>
</thead>
<tbody>
<tr className="border-b border-border hover:bg-muted/50">
<td className="p-4 align-middle font-mono text-sm">value</td>
</tr>
</tbody>
</table>
</div>
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-borderfor all dividing lines - Use
text-muted-foregroundfor metadata/labels - Use
font-monofor any data values - Ensure sufficient contrast
DON'T:
- Use shadows to define hierarchy (use borders)
- Use
rounded-fullfor buttons (except icon-only) - Mix serif fonts
- Use hardcoded colors like
bg-whiteorbg-gray-100
Reference Files
For detailed information:
- Full design system: See references/design-system.md
- Component examples: See references/components.md
chat Comments (0)
Sign in to join the discussion and leave a comment.
Skill Details
GitHub Stars
6
GitHub Forks
0
Created
Jan 2026
Last Updated
5个月前
tools
tools productivity tools
Related Skills
Build your own?
Join 12,000+ developers contributing to the Claude ecosystem.
No comments yet. Be the first to share your thoughts!