BARO.Design Systemv2.0
heybaro.com →
  • Overview
  • Color
  • Type
  • Foundations
  • Components
  • Patterns
  • AI States
  • Rules
  • Overview
  • Color
  • Type
  • Foundations
  • Components
  • Patterns
  • AI States
  • Rules
Design System v2.0

One system.
Two surfaces.

The visual language of Baro. Tokens, components, and patterns that power heybaro.com and the Baro product.

10
Tonal scales
43
Semantic tokens
18
Components
6
Patterns
Marketing · Dark
--bg
--bg-alt
--surface-alt
--fg
--fg-muted
--accent
--accent-text
Merchant · Light
--bg
--bg-alt
--surface-alt
--fg
--fg-muted
--accent
--accent-text

Color

Three tonal ramps and a semantic palette.

Midnight

50
#eef2f8
100
#d6dfec
200
#aebed8
300
#7d93b7
400
#4e6b95
500
#1E3E62=slate
600
#15304e
700
#0B192C=midnight
800
#07111f
900
#030811

Sunrise

50
#fff3ea
100
#ffe1c8
200
#ffc291
300
#ffa25a
400
#FF8C42=coral
500
#FF6500=sunrise
600
#d65400
700
#a34000
800
#702d00
900
#3d1900

Neutral

0
#ffffff
50
#F8F9FA=off-white
100
#f1f2f4
200
#e4e6ea
300
#cbced4
400
#a8acb4
500
#6C757D=muted-text
600
#4e545a
700
#373c41
800
#22262a
900
#111316

Semantic Palette

success
50 · 500 · 700
warning
50 · 500 · 700
danger
50 · 500 · 700
info
50 · 500 · 700

Typography

Inter for English, Pretendard for Korean.

TokenWeightSample
text-5xlextraboldCross the Pacific.
text-4xlboldYour US co-founder, powered by AI
text-3xlboldFDA registration is complete
text-2xlsemiboldConnect your Kakao channel
text-xlsemiboldReview compliance findings
text-lgmediumUpload product specification sheet
text-basenormalThe ingredient list contains unverified allergens.
text-smnormalLast synced 2 hours ago
text-xsmediumREQUIRED ACTION

Bilingual Pairing

Inter (EN)

We leverage cutting-edge technology to collapse months of work into weeks.

Pretendard (KR)

우리는 최첨단 기술을 활용하여 수개월의 작업을 수주로 단축합니다.

Foundations

Space, radius, shadow, and motion.

Spacing (4pt grid)

sp-1
sp-2
sp-3
sp-4
sp-5
sp-6
sp-7
sp-8
sp-9

Radius

xs
sm
★
md
lg
xl
pill

Shadow

shadow-xs
shadow-sm
shadow-md
shadow-lg

Motion

quick120ms · out
base180ms · out
slow320ms · in-out
cinematic600ms · emphasized

Components

Button variants, inputs, badges, and cards.

Buttons

Inputs

Password is too short.

Badges

DefaultAccentSuccessWarningDanger

Cards & Toasts

FDA Registration

Your facility registration is active and compliant.

Document uploaded

Label proof saved to the compliance packet.

Dismissed

Removed from the active queue.

Patterns

Ask Baro chat, waypoints, and compliance status.

Ask Baro Chat

미국 FDA 등록 절차를 시작하고 싶습니다.
B
I can help you with your FDA registration. First, I need to know if you are manufacturing a food, cosmetic, or medical device.
FDA 등록을 도와드릴 수 있습니다. 먼저 제조하시는 제품이 식품, 화장품, 의료기기 중 어느 것인지 알려주세요.

Pattern styles adapt to the active mode.

Waypoints

Entity Formation
FDA Registration
Customs Clearance

Pattern styles adapt to the active mode.

Compliance Status

Facility Registration
Active
Product Listing
Pending
Label Review
Failed
Prior Notice
Not Started

AI States

Thinking, streaming, citing, and uncertainty indicators.

Thinking
Analyzing formulation...
Streaming
FDA 규정에 따르면 화장품 라벨에는 성분 목록이 포함되어야 합니다
Citing
Voluntary registration of cosmetic product establishments is outlined in§ 21 CFR Part 710.
Uncertain
!
This ingredient (Centella Asiatica) may require additional safety substantiation depending on the extract concentration.

Rules

Do's and Don'ts for applying the system.

✓
Use Midnight for primary text and backgrounds to establish trust.
✕
Avoid pure black (#000000) except for deep shadows.
✓
Use Sunrise sparingly for primary actions and the brand period.
✕
Do not use Sunrise for large background areas or body text.
✓
Pair Inter (EN) and Pretendard (KR) for bilingual interfaces.
✕
Do not mix font weights indiscriminately within the same sentence.

Ready to build?

The tokens are wired into Tailwind v4 across the monorepo.

Read the Integration Guide
Baro Design System · v2.0
Back to heybaro.comIntegration Guide