Semi Design is ByteDance's design system, advocating a user-centric, content-first, human-friendly experience. Its React implementation unfolds primary blue (#0064FA) into 10-step ramps with a full dark theme, 4px radii, 1px #E5E6EB borders, and compact 32px controls for high-density work; dense tables, forms, and long-form data workflows feel polished, with refined focus states and semantic tokens.
Semi DesignDesign System
Prompt Template
Base Template
Design a Semi Design-inspired interface. - ByteDance design system with React components; - #0064FA primary blue with 10-step ramps and a full dark theme; - 4px radii, 1px #E5E6EB borders, compact 32px controls; - Dense tables, forms, and long-form data workflows; - Refined focus states and semantic color tokens. Colors: #0064FA, #E5E6EB, #F7F8FA, #1C1F23 with #0064FA accent. Typography: Inter.
Variant Prompts
📱 Mobile
Design a mobile app with Semi Design aesthetics. Use Semi Design color identity with #0064FA accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Semi Design style. Use Semi Design color identity with #0064FA accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Semi Design design language. Use Semi Design color identity with #0064FA accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Semi Design visual identity. Use Semi Design color identity with #0064FA accents. Compelling, conversion-focused.
Usage Examples
Semi Design Data Dashboard
DashboardBuild a data dashboard with Semi Design style: dense tables, filter forms, and #0064FA accent with dark mode support.
Semi Design Enterprise Console
WebCreate an enterprise console with Semi Design language: navigation sidebar, form workflows, and refined focus states.
✅ Best For
- React
- Enterprise products
- Dark mode apps
❌ Avoid For
- Non-React projects
- Heavily branded marketing pages
DESIGN.md File
A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.