Amred Design System

foundation + 11 components, Figma-synced

Typography

Heading

heading/2xl — 36 bold

heading/xl — 30 bold

heading/lg — 24 bold

heading/md — 20 bold

heading/sm — 18 bold

heading/xs — 16 bold

Body

body/lg — 18 regular

body/lg_strong — 18 semibold

body/md — 16 regular

body/md_strong — 16 semibold

body/sm — 14 regular

body/sm_strong — 14 semibold

body/xs — 12 regular

body/xs_strong — 12 semibold

body/2xs — 10 regular

body/3xs — 9 regular

Label
label/lg — 16 semiboldlabel/md — 14 semiboldlabel/sm — 12 semiboldlabel/xs — 10 semibold
Caption
caption/md — 12 regularcaption/sm — 10 regular
Colors

primary · 기본 텍스트

secondary · 보조 텍스트

tertiary · 약한 텍스트

brand · 브랜드 컬러

success · 성공

warning · 경고

danger · 위험

disabled · 비활성

Icon

14 icons
chevron_backward
chevron_forward
keyboard_arrow_down
keyboard_arrow_up
more_vert
arrow_back_ios_new
arrow_forward_ios
search
close
add
remove
arrow_circle_up
unfold_less
unfold_more
Sizes
Colors

Button

solid · md
border · md
subtle · md
ghost · md
sizes (solid)
IconButton

Chip

types · md
with icons
sizes
shapes
disabled

Badge

types · md
solidbordersubtleelevation
sizes
lgmdsmxs
solid colors
graybrandrosepinkfuchsiapurplevioletindigoblueskycyantealemeraldgreenlimeyellowamberorangered
subtle colors
graybrandrosepinkfuchsiapurplevioletindigoblueskycyantealemeraldgreenlimeyellowamberorangered
system
successwarningdangersuccesswarningdanger
CountBadge
3129912059

Input

outlined

Enter your email

필수 입력입니다

filled

Textarea

variants

도움말 텍스트

필수 입력

Select

medium
Label

설명 텍스트

small

Checkbox

states

Tab

filled

예약 현황 패널

fixed

프로젝트 공통 컴포넌트

amred DS를 조합해 만든 도메인 특화 컴포넌트 (15개)

CategoryColor (17 tints)

all tints
rose-tint
pink-tint
fuchsia-tint
purple-tint
violet-tint
indigo-tint
blue-tint
sky-tint
cyan-tint
teal-tint
emerald-tint
green-tint
lime-tint
yellow-tint
amber-tint
orange-tint
red-tint

RoomBadge (35 rooms)

4F
AMRED4층 시술실14층 시술실2진료실1진료실2상담실1상담실2
2F
2A2M2R2E2DAbove2층 시술실2층 상담실
GF
GAGMGRGEGDHorizonGF 레이저실GF 시술실
LF
LALMLRLELDL2L3시술실VIP 진료실1VIP 진료실2

CustomerLevelBadge

4 levels
VNGI

CustomerStatusBadge

8 statuses
대기중 1분대기중 10분시술 대기중 1분시술 대기중 10분상담중 1분예약 11:30AM시술종료귀가

Consultant / Dr Status

Consultant
공실 10분고객 배정됨상담중 1분
Dr
원장 호출원장 상담중 1분

Procedure / Memo Status

Procedure

울쎄라피 100샷

울쎄라피

시술중 11:40AM~

레이저 제모

10:10AM~11:30AM

Memo
일반 메모
취소된 메모

ProcedureList / MemoList

Procedure list

울쎄라피

시술중 11:40AM~

레이저 제모

10:10AM~11:30AM

피부과진료

Memo list
일반 메모입니다
취소된 메모
또 다른 메모

DrItem

default × default
대기중김원장
default × focused
대기중김원장
assigned_consultation × default
상담중 - 상담실 1김원장
assigned_consultation × focused
상담중 - 상담실 1김원장
assigned_prosedure × default
시술중 - 4F_A 홍길동김원장
assigned_prosedure × focused
시술중 - 4F_A 홍길동김원장
off
박원장

CustomerItem

checkin_done
VN

홍길동

대기중 1분
울쎄라피 프라임 100샷
레이저 제모
보톡스
consultation_done
G

김서연

대기중 10분
울쎄라피
reservation
VI

박지민

예약 11:30AM

ConsultingRoomItem

default (공실)
A 상담실
공실 31분
assigned (고객 배정됨)
A 상담실김탈라
고객 배정됨
consulting
A 상담실김탈라
상담중 10분
dr_call
A 상담실김탈라
상담중 10분원장 호출
dr_consulting
A 상담실김탈라
상담중 10분원장 상담중 1분

CustomerCard

4 variants
예약 11:30AM
홍길동

울쎄라피

시술중 11:40AM~

레이저 제모

민감성 피부
예전 메모
김서연

울쎄라피

10:10AM~11:30AM

VIP 고객
귀가 3:30PM

ChatItem

with room + doctor + checkIn + unread

체크인 11:00AM

VN
홍길동
시술 대기중 1분
GF 시술실김원장
이코디고객님 상담 완료되었습니다.
1:40AM10
no room, no unread

체크인 11:00AM

G
김서연
예약 11:30AM
박코디내일 오전 11시 예약 확인 부탁드립니다.
어제

Dialog

trigger