SmartHR — A design system for expressing SmartHR's character — usable by anyone, efficient, and without second-guessing.
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 SmartHR Design System’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)Main
Primary brand colour; MAIN resolves to the BLUE_100 primitive.
--smarthr-color-main
Exactly what ships in smarthr-design-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 smarthr.design and kufu/smarthr-ui, links last checked 2026-09-16. The file lists its sources and method in a provenance block at the top.
# SmartHR Design System — 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/smarthr-design
sources:
- https://smarthr.design/
- https://github.com/kufu/smarthr-ui/blob/master/packages/smarthr-ui/src/themes/createColor.ts
- https://github.com/kufu/smarthr-ui
```
> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by SmartHR. "SmartHR Design System" 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:** SmartHR Design System
**Owner:** SmartHR
**Official documentation:** https://smarthr.design/
---
## Summary
A design system for expressing SmartHR's character — usable by anyone, efficient, and without second-guessing.
_Editorial confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product. Colour only, read from the theme factory in smarthr-ui. 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=smarthr-design)
## Color tokens
| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Main | `#0077c7` | `--smarthr-color-main` | Primary brand colour; MAIN resolves to the BLUE_100 primitive. |
## Quick start (CSS)
```css
/* SmartHR Design System — 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://smarthr.design/
Reference scope: Colour only, read from the theme factory in smarthr-ui.
Field evidence: https://www.designsystems.one/api/style-spec?system=smarthr-design */
:root {
/* Color */
--smarthr-color-main: #0077c7; /* Primary brand colour; MAIN resolves to the BLUE_100 primitive. */
}
```
## 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 SmartHR Design System by SmartHR — A design system for expressing SmartHR's character — usable by anyone, efficient, and without second-guessing. Use a primary colour near #0077c7. Match the intent, not the pixels; adapt it to my product rather than cloning it.
## Official reference
- [SmartHR Design System documentation](https://smarthr.design/)
---
_Generated by [designsystems.one](https://www.designsystems.one/design-systems/smarthr-design) — 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?
SmartHR Design System doesn’t have a full editorial breakdown yet — those cover origin, governance, token decisions, and the components worth studying. Thirty-seven anchor systems do.