Styleguide

All design tokens and components.

Color tokens

--color-bg

--color-surface

--color-surface-2

--color-border

--color-text

--color-text-muted

--color-accent-50

--color-accent-100

--color-accent-300

--color-accent-500

--color-accent-600

--color-accent-700

--color-success

--color-warning

--color-danger

--color-info

Typography

Inter (body + display, single-family) + JetBrains Mono. Cyrillic + Extended Cyrillic (Ү, Ө) дэмжинэ.

Display · Inter 700

Сайн байна уу

₮ 248.5M

Headings · Inter semibold / bold

Heading 1 · Өрнөл

Heading 2 · Хэлэлцээр

Heading 3 · Харилцагчид

Heading 4 · Үлдэгдэл

Body · Inter regular/medium/semibold

Lead paragraph — muted tone. Интер дэлгэц дээр гайхалтай.

Body 16 — энэ бол default paragraph хэмжээ. Интерын geometric хэлбэр Латин + Кирилл хоёуланг нь нэгэн адил зөөлөн харагдуулдаг.

Body 15 — table + card-д ашиглагдах default. Нягтаршил сайн.

Meta 13 · 500 · Sub-text for timestamps and labels

Caption 11 · uppercase · tracked

Weight policy

400 — body default, caption
500 — form label, sidebar active, emphasized body
600 — section heading, tab active, button label, KPI delta
700 — display font ONLY (hero, H1, KPI value)

Italic discipline

Used only on emphasis, citations, and quoted passages — never on UI labels or form fields.

Mono · JetBrains Mono 400

const deal = { code: "Q-2026-0042", mnt: 24_800_000 }

Ү Ө ү ө — Монгол кирилл кодпоинт

Buttons

Badges & chips

Default Success Warning Danger Info Accent Label

Forms

Email Role Note I agree to the terms Notifications

Alerts

Info

Default information.

Success

Saved.

Warning

Double-check inputs.

Danger

Action failed.

Table

Name	Email	Status
Bat-Erdene	bat@buildry.mn	Active
Saruul	saruul@buildry.mn	Pending
Temuulen	tem@buildry.mn	Suspended

KPI cards

Revenue

₮ 248M

+12.4%

New leads

1,284

+4.2%

Conversion

3.1%

-0.3%

Avg response

42m

-5m

Tabs

Active-tab panel content sits here.

Avatars & progress

Kanban card

Qualified 6

Gobi Cashmere renewal

₮ 82MA

Buyant Trade — Q2

₮ 34MB

Proposal 2

Shunkhlai fleet

₮ 118MC

Won 1

APU annual

₮ 56MD

Timeline

Deal moved to Proposal

Bat-Erdene · 2h ago
New note added

Saruul · 5h ago
Contact created

System · Yesterday

Drawer (static preview)

Contact detail

Bat-Erdene

bat@buildry.mn

In production the drawer slides in from the end side with a backdrop. This preview shows the panel contents only.

Empty state

Nothing here yet

Try adjusting filters or create a new record to see it appear in this list.

Charts

Phase 3 components

Industry batch 1 building blocks — used across Support, Finance, E-commerce, HR and Project pages.

metric-tile

Single large KPI block. Trend is signalled by both icon and token color (never color alone). Variants: default + .metric-tile--sm; trend via data-trend="positive|neutral|negative".

Monthly revenue

₮ 248M

+4.2% vs last month

Refund rate

2.7%

−1.8% vs last month

Active users

12,840

0.0% vs last month

progress-stack

Stacked planned vs actual track. Drive fills via the --planned and --actual custom properties; set data-overflow="true" when actual exceeds 100% to switch the actual segment to the danger token and reveal the end-edge chevron.

Marketing — Q1 (under)

Actual ₮ 7.8M of ₮ 12M planned · 65% used

Sales — Q1 (on track)

Actual ₮ 18.7M of ₮ 24M planned · 78% used

Operations — Q1 (over)

Actual ₮ 11.2M of ₮ 10M planned · 112% used

R&D — Q1 (empty)

No spend recorded yet

heatmap

Two variants share one CSS module: .heatmap--year (53×7, ~365 cells) and .heatmap--day-hour (24×7, 168 cells). Cells are <abbr> with data-tier="0..4" for the quintile scale and optional data-status for HR attendance overrides. Renderer: renderHeatmap(container, options).

Year × day-of-week — quintile scale

Less
Low
Mid
High
More

Day × hour — status overrides

Present
Remote
Leave
Holiday
Absent

gantt-bar

Timeline grid with sticky labels, scale toggle and milestones. Bars place themselves with --start and --span on a --cols grid; status via data-status="todo|in-progress|blocked|review|done"; milestones use .gantt__milestone diamonds. Renderer: renderGantt(container, options); helper gridUnit(scale).

Static markup — week scale, two project groups

Task

Apollo platform (3)

MDesign spec
MFrontend scaffold
LDocs polish

Customer portal (2)

HAuth flow
HProfile page

JS-rendered via renderGantt()

Phase 4 components

map-canvas + pin-marker variants

SVG/HTML composition with no real map tiles. Background is a palette-tinted grid plus an abstract terrain wash. Pins position by --x / --y percent. Routes draw as SVG polylines.

pin-marker (price + cluster + hub)

Three additional variants used by Real Estate listings + Logistics dispatch. Each variant respects palette tokens — no hardcoded colour, no shadow.

timeline-rail

Horizontal time rail with positioned event dots between a start and end ISO range. Severity ramps from info → warn → critical.

device-tile

IoT KPI tile distinct from .metric-tile: status dot in the head, primary metric, secondary line. Token-only colours; the dot tracks data-status.

Smart farm Selenge

42 / 44

Online · avg signal -73 dB

UB Smart City

28 / 36

8 degraded · 4 offline

Khan Plaza retail

0 / 18

Last seen 4h ago

Aurora telecom

—

Awaiting first telemetry