Semantic UI Design System

# Semantic UI — 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-03
source_page: https://www.designsystems.one/design-systems/semantic-ui
sources:
  - https://semantic-ui.com/
  - https://semantic-ui.com/usage/theming.html
  - https://github.com/Semantic-Org/Semantic-UI
```

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Semantic UI. "Semantic UI" 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:** Semantic UI
**Owner:** Semantic UI
**Official documentation:** https://semantic-ui.com/
**Visual character:** Human-readable class names and a Lato-voiced rainbow palette — the friendliest grammar the pre-React component era produced.

---

## Summary

A development framework that helps create beautiful, responsive layouts.

_Editorial confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product. Field-level evidence: 0/58 claims source-linked, 0/58 dated. Confidence is not verification; validate canonical values before implementation._

[Inspect every field and its evidence](https://www.designsystems.one/api/style-spec?system=semantic-ui)

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Blue / Primary | `#2185d0` | `--semantic-blue` | Primary actions |
| Teal | `#00b5ad` | `--semantic-teal` | Secondary accent |
| Green | `#21ba45` | `--semantic-green` | Success |
| Yellow | `#fbbd08` | `--semantic-yellow` | Warnings |
| Red | `#db2828` | `--semantic-red` | Errors |
| Text | `#212121` | `--semantic-text` | Body text |
| White | `#ffffff` | `--semantic-white` | Surfaces |
| Border | `#d4d4d5` | `--semantic-border` | Borders |

## Typography

- **Body:** Lato — weights 400, 700 — `Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| h1 | `28px` | `36px` |
| h2 | `24px` | `31px` |
| h3 | `18px` | `23px` |
| body | `14px` | `20px` |

## Spacing

Base unit: `14px (em-based)`

Scale: `7px` · `14px` · `21px` · `28px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `4.66px (.28571429rem)` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| card | `0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5` |

## Quick start (CSS)

```css
/* Semantic UI — 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://semantic-ui.com/
   Field evidence: https://www.designsystems.one/api/style-spec?system=semantic-ui */

:root {
  /* Color */
  --semantic-blue: #2185d0; /* Primary actions */
  --semantic-teal: #00b5ad; /* Secondary accent */
  --semantic-green: #21ba45; /* Success */
  --semantic-yellow: #fbbd08; /* Warnings */
  --semantic-red: #db2828; /* Errors */
  --semantic-text: #212121; /* Body text */
  --semantic-white: #ffffff; /* Surfaces */
  --semantic-border: #d4d4d5; /* Borders */

  /* Typography */
  --font-body: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;

  /* Type scale */
  --text-h1: 28px; /* line-height 36px */
  --text-h2: 24px; /* line-height 31px */
  --text-h3: 18px; /* line-height 23px */
  --text-body: 14px; /* line-height 20px */

  /* Spacing */
  --space-1: 7px;
  --space-2: 14px;
  --space-3: 21px;
  --space-4: 28px;

  /* Radius */
  --radius-default: 4.66px (.28571429rem);

  /* Elevation */
  --shadow-card: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
}
```

## Engineering profile

- **Ships for:** CSS-only
- **Token pipeline:** Custom
- **Source model:** Open source

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Semantic UI by Semantic UI — A development framework that helps create beautiful, responsive layouts. Character: Human-readable class names and a Lato-voiced rainbow palette — the friendliest grammar the pre-React component era produced. Use a primary colour near #2185d0, the typeface "Lato" (or a close equivalent), corner radius around 4.66px (.28571429rem), a spacing rhythm on a 14px (em-based) base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Semantic UI documentation](https://semantic-ui.com/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/semantic-ui) — 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._