ByteDance — An easy-to-customize modern design system that helps designers and developers create high-quality products.
Fit guidance has no recorded field-level check date. No readiness audit recorded.
Palette, type ramp, spacing grid, radius, elevation and motion — restated in our own structure from Semi Design’s public references. Factual values for study; the official docs remain canonical.
Editable editorial reference. 0/4 fields have an explicit source and 0 have a recorded check date. Context sources are not proof of every value; verify current values with the maintainer before implementation.
Inspect every field and its evidence (JSON)Primary
Primary actions. Declared as rgba(var(--semi-blue-5),1); blue-5 is 0,100,250.
--semi-color-primary
Exactly what ships in bytedance-semi-design.md. This entry doesn’t have a full editorial breakdown yet, so the spec covers the verified facts — profile, official source, and an AI-ready prompt.
Restated from semi.design and DouyinFE/semi-design, links last checked 2026-09-16. The file lists its sources and method in a provenance block at the top.
# Semi Design — Design Style Reference
```yaml
# How this file was made. Sources are first-party; nothing here is
# read from a rendered page. Full breakdown at source_page below.
method: restated-from-official-docs
confidence: medium
verified_at: 2026-09-16
source_page: https://www.designsystems.one/design-systems/bytedance-semi
sources:
- https://semi.design/
- https://github.com/DouyinFE/semi-design/blob/main/packages/semi-theme-default/scss/global.scss
- https://github.com/DouyinFE/semi-design
```
> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by ByteDance. "Semi Design" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.
**System:** Semi Design
**Owner:** ByteDance
**Official documentation:** https://semi.design/
---
## Summary
An easy-to-customize modern design system that helps designers and developers create high-quality products.
_Editorial confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product. Colour only: the primary is resolved from the default theme's blue-5 primitive. Field-level evidence: 0/4 claims source-linked, 0/4 dated. Confidence is not verification; validate canonical values before implementation._
[Inspect every field and its evidence](https://www.designsystems.one/api/style-spec?system=bytedance-semi)
## Color tokens
| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Primary | `#0064fa` | `--semi-color-primary` | Primary actions. Declared as rgba(var(--semi-blue-5),1); blue-5 is 0,100,250. |
## Quick start (CSS)
```css
/* Semi Design — illustrative tokens, restated as CSS custom properties.
Unofficial reference by designsystems.one; values are indicative, not
canonical. Native dp/sp values are omitted, never silently converted.
Official reference: https://semi.design/
Reference scope: Colour only: the primary is resolved from the default theme's blue-5 primitive.
Field evidence: https://www.designsystems.one/api/style-spec?system=bytedance-semi */
:root {
/* Color */
--semi-color-primary: #0064fa; /* Primary actions. Declared as rgba(var(--semi-blue-5),1); blue-5 is 0,100,250. */
}
```
## Engineering profile
- Public engineering details are limited; see the official documentation.
## Apply this style with an AI tool
Paste this into your AI coding assistant as a direction, then iterate:
> Design in the spirit of Semi Design by ByteDance — An easy-to-customize modern design system that helps designers and developers create high-quality products. Use a primary colour near #0064fa. Match the intent, not the pixels; adapt it to my product rather than cloning it.
## Official reference
- [Semi Design documentation](https://semi.design/)
---
_Generated by [designsystems.one](https://www.designsystems.one/design-systems/bytedance-semi) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._
Want the deep dive?
Semi Design doesn’t have a full editorial breakdown yet — those cover origin, governance, token decisions, and the components worth studying. Thirty-seven anchor systems do.