Design System Preview: Slack

01 / Visual Hero

비주얼 히어로Visual hero

Visual Hero

상단 대면적 배경 실측 — 원본 규칙 그대로Measured top-area background — original rule, as-is

02 / Text Hero

텍스트 히어로Text hero

Extracted Type Scale

타이포가 말하는
브랜드의 위계Typography speaks
the brand hierarchy

위 문장들은 실측 스케일 32px · 24px · 23px · 18px · 16px · 15px 그대로 렌더된 것입니다 — 크기 관계가 곧 브랜드의 목소리 톤입니다.These lines are rendered on the measured scale 32px · 24px · 23px · 18px · 16px · 15px — the size relationships are the brand’s tone of voice.

03 / Colors

컬러 팔레트Color palette

역할Roles

Primary#4a154bCTA · 핵심 강조 · 링크CTA · key emphasis · linksconf 0.85 · declared

Accent#1264a3하이라이트 · 뱃지 · 보조 강조highlights · badges×285 · conf 0.65 · inferred

Background#ffffff페이지 배경page background×692 · conf 0.94 · cross-validated

Ink#000000본문 · 헤딩body · headings×603 · conf 0.94 · cross-validated

Muted#696969보조 텍스트 · 캡션secondary text · captions×262 · conf 0.7 · inferred

Surface#f9f0ff카드 · 패널cards · panels×177 · conf 0.7 · inferred

관측 팔레트Observed palette 빈도순by frequency

#481a54×206 · background-color, color

#ebeaeb×197 · border-color, background-color

#611f69×175 · background-color, color

#1d1d1d×168 · color, border-color

#454245×50 · color, border-color

#730394×50 · color, background-color

#f9edff×44 · background-color

#36c5f0×35 · color, border-color

#9602c7×32 · color

#5e5d60×32 · color

#2f8ab7×26 · background-color

#717274×22 · color, border-color

04 / Typography

타이포그래피 스케일Type scale

생각을 현실로, 디자인의 힘Ideas made real, by design

DISPLAY — 32px · ×32

모든 화면에 일관된 브랜드 경험A consistent brand on every screen

H1 — 24px · ×208

작은 디테일이 완성도를 만듭니다Small details make the difference

H2 — 23px · ×34

본문은 편안하게 읽히는 크기와 행간을 유지합니다. 실제 서비스 문장을 그대로 담아도 리듬이 무너지지 않아야 합니다.Body copy stays comfortable to read. Real product sentences should keep their rhythm at this size.

H3 — 18px · ×263

캡션과 각주는 조용히 정보를 보탭니다Captions add context, quietly

BODY-LG — 16px · ×474

보조 텍스트는 본문을 방해하지 않는 크기로Secondary text stays out of the way

BODY — 15px · ×40

법적 고지와 메타 정보는 가장 작게, 그러나 읽히게Legal and meta stay smallest, yet legible

BODY-SM — 14px · ×667

생각을 현실로, 디자인의 힘Ideas made real, by design

CAPTION — 12px · ×78

Font Families

Salesforce-Sans ×747

Salesforce-Avant-Garde ×338

NotoSansJP ×4

arial ×3

NotoSansKR ×3

NotoSansSC ×3

05 / Buttons

버튼Buttons

Primary

Soft Fill

Outline

Link

Hover

Focus

Disabled

실측 변형Measured

실측 4회measured ×4 · primary #4a154b

08 / Badges & Chips

뱃지 · 칩Badges & chips

실측 Badge Soft NEW Accent Chip 실측 ×2

09 / Spacing

간격 스케일Spacing

16px×1439

8px×591

24px×326

32px×304

6px×276

4px×157

12px×142

2px×132

10px×129

48px×114

10 / Radius

라운드 스케일Radius

16px ×250

4px ×216

8px ×82

48px ×30

90px ×16

3px ×9

60px ×4

12px ×2

11 / Elevation

그림자 깊이Elevation

실측된 그림자 단계를 카드·버튼·패널 등 실제 요소에 입혀 확인합니다Measured shadow steps, worn by real elements — cards, buttons, panels

기본 카드CardLevel 1 · ×104

떠 있는 패널Floating panelLevel 3 · ×26

툴팁·팝오버TooltipLevel 4 · ×24

모달 상단Modal topLevel 5 · ×16

최상위 표면TopmostLevel 6 · ×14

12 / States & Motion

상태 · 모션States & motion

올려보세요 — 실측 전환Hover me — measured timing 0.42s

보더 전환Border transition

:hovercolorborder-color

:focuscolorborder-color

전환 0.42s · 0.2s · .42s 관측transitions 0.42s · 0.2s · .42s

A1 / CSS Variables

선언된 토큰Declared tokens

사이트가 스스로 선언한 커스텀 프로퍼티 — 고신뢰 부록Custom properties declared by the site — high-confidence appendix

--article-theme-primary: #4a154b

--article-theme-secondary: #fff

--font-family-heading: "Salesforce-Avant-Garde", system-ui, -apple-system, blinkmacsystemfont, "Segoe U

--font-family-body: "Salesforce-Sans", system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", rob

--font-family-monospace: "Monaco", "Menlo", "Consolas", "Courier New", monospace

--font-family-heading: "Tazugane-Info-Heavy", system-ui, -apple-system, blinkmacsystemfont, "Segoe UI",

--font-family-body: "NotoSansJP", system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto,

--font-family-heading: "SeolSansHeavy", system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", robot

--font-family-body: "NotoSansKR", system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto,

--font-family-heading: "MXiangHeHeiTCBold", system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", r

--font-family-body: "NotoSansTC", system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto,

--font-family-heading: "MXiangHeHeiSCProBold", system-ui, -apple-system, blinkmacsystemfont, "Segoe UI"

--font-family-body: "NotoSansSC", system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto,

--screen__content: not(.o-content-container),.o-hero--slideshow__content:not(.o-content-container)

--screen: before

--larger: lang(de),.o-hero__header__headline--jumbo:lang(de)

--jumbo: lang(de),.o-hero__header__headline--jumbo:lang(es-419),.o-hero__header__headline

--jumbo: lang(es),.o-hero__header__headline--jumbo:lang(fr),.o-hero__header__headline--ju

--jumbo: lang(pt)

--screen: after

--add-a-fade: after

--feature__copy: last-child

--feature__stats__headline: lang(de),.o-section--feature__stats__headline:lang(ja),.o-section--feature__stat

--feature__stats__headline: lang(zh-CN),.o-section--feature__stats__headline:lang(zh-TW),.o-section--feature

--feature__stats__value: lang(de),.o-section--feature__stats__value:lang(ja),.o-section--feature__stats__

--feature__stats__value: lang(zh-CN),.o-section--feature__stats__value:lang(zh-TW),.o-section--feature__s

--feature__link: before

--feature__link: after

--download: after

--reverse: before

--reverse: after

--white: before

--white: after

--feature__link: after

--feature__link: lang(de),.o-section--feature__link:lang(ja),.o-section--feature__link:lang(ko),.

--feature__link: lang(ru),.o-section--feature__link:lang(zh-CN),.o-section--feature__link:lang(zh

--feature__link: before

--feature__link: after