MustBreak Design System

Colors

Brand lime + orange accent over a neutral ramp, with semantic and surface aliases that re-map under the dark theme.

Brand — Lime

Primary identity. --lime-500 (#72e506) drives primary actions.

--lime-50#f4ffe5
--lime-100#e6ffc7
--lime-200#cdff95
--lime-300#adff57
--lime-400#8ef625
--lime-500#72e506
--lime-600#52b000
--lime-700#3f8605
--lime-800#35690b
--lime-900#2d590e
--lime-950#143201

Accent — Orange

--accent-500 (#ff8800) — highlights, badges, focus moments.

--accent-100#ffe2cc
--accent-200#ffcb99
--accent-300#ffac5c
--accent-500#ff8800
--accent-600#db7100
--accent-700#a85500

Neutrals

White → greys → ink #020316 — most surfaces live here.

--white#ffffff
--grey-50#fafafa
--grey-100#f1f1f1
--grey-200#e3e3e3
--grey-300#cbcbcb
--grey-400#b3b3b3
--grey-500#8a8a8a
--grey-600#737373
--grey-700#4d4d4d
--grey-900#1a1a1a
--ink#020316

Semantic

Information · Success · Warning · Error — solid + soft pair.

--info#93c5fd
--info-soft#e8f1fe
--success#70d5cc
--success-soft#e2f6f4
--warning#ffdb1b
--warning-soft#fff8d4
--error#f87171
--error-soft#fde6e6

Semantic surfaces

Surface · On Surface · On Surface Variant — the same roles re-map under the dark theme.

light mode

Surface

Default color for backgrounds

--white

On SurfaceInk · #020316
On Surface VariantGrey-600 · #737373
On Surface Variant 2Grey-200 · #e3e3e3
dark mode

Surface

Default color for backgrounds

--grey-900

On SurfaceGrey-50 · #f4f4f5
On Surface VariantGrey-500 · #808080
On Surface Variant 2Grey-700 · #4d4d4d

Typography

Pretendard UI scale (4px-snapped px), weights, unitless per-level line heights with :lang() localization overrides, tracking, and multilingual stacks.

Multilingual scripts

Pretendard (EN/KO/VI) · Noto Sans SC/TC · Noto Sans Arabic — weights per script.

English · Korean · Vietnamese — Pretendard
Regular 400Breaking barriers · 언어의 장벽을 · Phá vỡ rào cảnMedium 600Breaking barriers · 언어의 장벽을 · Phá vỡ rào cảnBold 700Breaking barriers · 언어의 장벽을 · Phá vỡ rào cản
Simplified Chinese — Noto Sans SC
Regular 400打破语言障碍，实现无缝沟通Medium 500打破语言障碍，实现无缝沟通Bold 700打破语言障碍，实现无缝沟通
Traditional Chinese — Noto Sans TC
Regular 400打破語言障礙，實現無縫溝通Medium 500打破語言障礙，實現無縫溝通Bold 700打破語言障礙，實現無縫溝通
Arabic — Noto Sans Arabic
Regular 400كسر حواجز اللغة وتحقيق التواصل السلسMedium 500كسر حواجز اللغة وتحقيق التواصل السلسBold 700كسر حواجز اللغة وتحقيق التواصل السلس

Weights

Aa--weight-regular
Aa--weight-medium
Aa--weight-bold

Type scale

Each level rendered per script and per weight (regular/medium/bold) in its CSS font, weight, and line-height tokens. Medium remaps 600→500 on Noto (zh/ar); regular 400 and bold 700 are shared. Base line-height applies to en/ko; :lang() bumps vi/zh/ar.

--text-3xl36px · Bold 700 · −0.02em · --leading-display · LH 1.222
EN · LatinLH 1.222 · no override
Regular · 400Breaking barriers
Medium · 600Breaking barriers
Bold · 700Breaking barriers
KO · HangulLH 1.222 · no override
Regular · 400언어의 장벽을 넘어
Medium · 600언어의 장벽을 넘어
Bold · 700언어의 장벽을 넘어
VILH 1.222 → 1.4
Regular · 400Phá vỡ mọi rào cản
Medium · 600Phá vỡ mọi rào cản
Bold · 700Phá vỡ mọi rào cản
ZH · SCLH 1.222 → 1.55
Regular · 400打破语言障碍
Medium · 500打破语言障碍
Bold · 700打破语言障碍
ARLH 1.222 → 1.65
Regular · 400كسر حواجز اللغة
Medium · 500كسر حواجز اللغة
Bold · 700كسر حواجز اللغة
--text-2xl28px · Bold 700 · −0.015em · --leading-heading-1 · LH 1.143
EN · LatinLH 1.143 · no override
Regular · 400Breaking barriers
Medium · 600Breaking barriers
Bold · 700Breaking barriers
KO · HangulLH 1.143 · no override
Regular · 400언어의 장벽을 넘어
Medium · 600언어의 장벽을 넘어
Bold · 700언어의 장벽을 넘어
VILH 1.143 → 1.4
Regular · 400Phá vỡ mọi rào cản
Medium · 600Phá vỡ mọi rào cản
Bold · 700Phá vỡ mọi rào cản
ZH · SCLH 1.143 → 1.55
Regular · 400打破语言障碍
Medium · 500打破语言障碍
Bold · 700打破语言障碍
ARLH 1.143 → 1.65
Regular · 400كسر حواجز اللغة
Medium · 500كسر حواجز اللغة
Bold · 700كسر حواجز اللغة
--text-xl24px · SemiBold 600 · −0.01em · --leading-heading-2 · LH 1.167
EN · LatinLH 1.167 · no override
Regular · 400Breaking barriers
Medium · 600Breaking barriers
Bold · 700Breaking barriers
KO · HangulLH 1.167 · no override
Regular · 400언어의 장벽을 넘어
Medium · 600언어의 장벽을 넘어
Bold · 700언어의 장벽을 넘어
VILH 1.167 → 1.4
Regular · 400Phá vỡ mọi rào cản
Medium · 600Phá vỡ mọi rào cản
Bold · 700Phá vỡ mọi rào cản
ZH · SCLH 1.167 → 1.55
Regular · 400打破语言障碍
Medium · 500打破语言障碍
Bold · 700打破语言障碍
ARLH 1.167 → 1.65
Regular · 400كسر حواجز اللغة
Medium · 500كسر حواجز اللغة
Bold · 700كسر حواجز اللغة
--text-lg20px · Regular 400 · 0 · --leading-body-large · LH 1.4
EN · LatinLH 1.4 · no override
Regular · 400Breaking barriers
Medium · 600Breaking barriers
Bold · 700Breaking barriers
KO · HangulLH 1.4 · no override
Regular · 400언어의 장벽을 넘어
Medium · 600언어의 장벽을 넘어
Bold · 700언어의 장벽을 넘어
VILH 1.4 → 1.55
Regular · 400Phá vỡ mọi rào cản
Medium · 600Phá vỡ mọi rào cản
Bold · 700Phá vỡ mọi rào cản
ZH · SCLH 1.4 → 1.55
Regular · 400打破语言障碍
Medium · 500打破语言障碍
Bold · 700打破语言障碍
ARLH 1.4 → 1.65
Regular · 400كسر حواجز اللغة
Medium · 500كسر حواجز اللغة
Bold · 700كسر حواجز اللغة
--text-base16px · Regular 400 / Medium 500 · +0.005em · --leading-body · LH 1.5
EN · LatinLH 1.5 · no override
Regular · 400Breaking barriers
Medium · 600Breaking barriers
Bold · 700Breaking barriers
KO · HangulLH 1.5 · no override
Regular · 400언어의 장벽을 넘어
Medium · 600언어의 장벽을 넘어
Bold · 700언어의 장벽을 넘어
VILH 1.5 → 1.55
Regular · 400Phá vỡ mọi rào cản
Medium · 600Phá vỡ mọi rào cản
Bold · 700Phá vỡ mọi rào cản
ZH · SCLH 1.5 → 1.55
Regular · 400打破语言障碍
Medium · 500打破语言障碍
Bold · 700打破语言障碍
ARLH 1.5 → 1.65
Regular · 400كسر حواجز اللغة
Medium · 500كسر حواجز اللغة
Bold · 700كسر حواجز اللغة
--text-sm14px · Regular 400 · +0.0075em · --leading-sm · LH
EN · LatinLH · no override
Regular · 400Breaking barriers
Medium · 600Breaking barriers
Bold · 700Breaking barriers
KO · HangulLH · no override
Regular · 400언어의 장벽을 넘어
Medium · 600언어의 장벽을 넘어
Bold · 700언어의 장벽을 넘어
VILH → 1.55
Regular · 400Phá vỡ mọi rào cản
Medium · 600Phá vỡ mọi rào cản
Bold · 700Phá vỡ mọi rào cản
ZH · SCLH → 1.55
Regular · 400打破语言障碍
Medium · 500打破语言障碍
Bold · 700打破语言障碍
ARLH → 1.65
Regular · 400كسر حواجز اللغة
Medium · 500كسر حواجز اللغة
Bold · 700كسر حواجز اللغة
--text-xs12px · Regular 400 / Medium 500 · +0.01em · --leading-caption · LH 1.333
EN · LatinLH 1.333 · no override
Regular · 400Breaking barriers
Medium · 600Breaking barriers
Bold · 700Breaking barriers
KO · HangulLH 1.333 · no override
Regular · 400언어의 장벽을 넘어
Medium · 600언어의 장벽을 넘어
Bold · 700언어의 장벽을 넘어
VILH 1.333 → 1.55
Regular · 400Phá vỡ mọi rào cản
Medium · 600Phá vỡ mọi rào cản
Bold · 700Phá vỡ mọi rào cản
ZH · SCLH 1.333 → 1.55
Regular · 400打破语言障碍
Medium · 500打破语言障碍
Bold · 700打破语言障碍
ARLH 1.333 → 1.65
Regular · 400كسر حواجز اللغة
Medium · 500كسر حواجز اللغة
Bold · 700كسر حواجز اللغة
--text-xs12px · Bold 700 · +0.03em · --leading-badge · LH 1.333
EN · LatinLH 1.333 · no override
Regular · 400Breaking barriers
Medium · 600Breaking barriers
Bold · 700Breaking barriers
KO · HangulLH 1.333 · no override
Regular · 400언어의 장벽을 넘어
Medium · 600언어의 장벽을 넘어
Bold · 700언어의 장벽을 넘어
VILH 1.333 → 1.55
Regular · 400Phá vỡ mọi rào cản
Medium · 600Phá vỡ mọi rào cản
Bold · 700Phá vỡ mọi rào cản
ZH · SCLH 1.333 → 1.55
Regular · 400打破语言障碍
Medium · 500打破语言障碍
Bold · 700打破语言障碍
ARLH 1.333 → 1.65
Regular · 400كسر حواجز اللغة
Medium · 500كسر حواجز اللغة
Bold · 700كسر حواجز اللغة

Tracking

--tracking-tighter · -0.03emMustBreak headline
--tracking-tight · -0.015emMustBreak headline
--tracking-normal · 0MustBreak headline
--tracking-wide · 0.02emMustBreak headline

Spacing & Elevation

4px-base spacing, three-step rounding, quiet layered shadows, and motion tokens.

Spacing scale

--space-14px0.25rem
--space-28px0.5rem
--space-312px0.75rem
--space-416px1rem
--space-624px1.5rem
--space-832px2rem
--space-1248px3rem
--space-1664px4rem
--space-2080px5rem
--space-64256px16rem

Radius

4px
8px
16px
20px
pill

Elevation

xs
sm
md

Icon sizes

sm16px
md20px
lg24px

Responsive

Layout breakpoints. Tiers map onto Tailwind's default screens, so responsive corrections use the md: / lg: prefixes inline — no custom screens needed.

Active tier

Resize the window to watch this switch across the 768px and 1024px breakpoints.

Mobile · < 768px

Breakpoints

TierRangePrefixLayout
Mobile< 768pxbaseStack — single column
Tablet768 – 1024pxmd:2-column grid
Desktop> 1024pxlg:3+ columns · sidebar exposed

Notes

Tailwind v3.4.18; default breakpoints already match the requested tiers: md = 768px, lg = 1024px. Only one custom screen exists (control-bar-shrink: 1170px, unrelated). No new screens needed.

Primary targets are tablet, desktop, and the desktop app; mobile is a graceful vertical stack.

Components & Brand

Each component shows the full variant/state set from its design-system card. Use the header toggle to see dark mode.

Buttons

Style × size × icon placement (from the card), plus the brand interaction states.

Variants · light
Sizes
xs · 4·8
sm · 8·16
md · 12·16
lg · 16·16
Icon placement · 4px gap
no icon
icon left
icon right
icon only
Interaction states
active · pulse
hover · lift
press · shrink

Text fields

Outlined · 8px radius — states, variants & sizes.

States · medium
Default
Hovered
Focused
Disabled
Variants · medium
Text only
With label
Icon · left
Icon · right
Error
Helper text
Error + helper text
Sizes
Medium · 40px
Large · 48px

Dropdown

Select field + action menu.

Select field
Default
Select membership
Focused
Free
Selected
Premium
Disabled
Free
Error
Select membership
Please choose a membership.
Helper text
Premium
Sets translation minutes for the room.
Open
Select · open
Premium
Free
Premium
Pro
Enterprise
Action menu · room ⋯
Edit
Share
Delete
Size
Medium · 40px
Premium
Large · 48px
Premium

Controls

Toggle · Checkbox · Radio — all states.

Toggle
Default off
Small
Large · room settings
Default on
Small
Large · room settings
Disabled off
Disabled on
Checkbox
DefaultAuto-generate password
CheckedAgree to terms
IndeterminateSelect all
Disabled offNot available
Disabled onAlways enabled
Radio Button
Group · name scope
For this sentenceFor this room
Disabled unselectedNot available
Disabled selectedAlways on

Display — Badge & Avatar

Badge
OwnerUpcomingFreeDefault
Avatar — sizes
DKMedium · 40
DKSmall · 28
Avatar — types
DKSingle unit
JPCLMT+
Merged units

Card

Styles — Glassmorphism · Filled · Filled white · Outlined.

Styles
Glassmorphism
Product Sync
EN ⇄ KO · Live
Filled
Product Sync
EN ⇄ KO · Live
Filled (white)
Product Sync
EN ⇄ KO · Live
Outlined
Product Sync
EN ⇄ KO · Live

Chips

Room-mode filter pills — tone follows the active theme.

Light mode
Filter row — interactive
States
Icon placement

Tabs

Rounded segmented control — two sizes.

Sizes

Product

The live translation surface.

Transcript bubble
DKDora Kim
Let's review the launch timeline together.
출시 일정을 함께 검토해 봅시다.
MTMai Tran
Sounds good — I'll share the deck in a moment.
좋아요 — 제가 곧 자료를 공유할게요.
Mic & soundwave