본문으로 건너뛰기

색

색은 우유 마크에서 시작합니다. 화면의 파랑은 마크의 hue(251)를 그대로 쓰고, 채도는 면적에 반비례시킵니다.

넓은 면일수록 옅게, 버튼처럼 중간 크기의 면은 그 명도에서 낼 수 있는 채도의 89%, 상태 아이콘 · 밑줄 같은 작은 표시만 또렷하게 씁니다. 글자는 회청색 슬레이트로 두어 파랑이 누를 수 있는 곳에만 남게 합니다. 면은 반투명 · blur · 그라데이션 없이 단색이고, 높이는 면의 명도 차와 두께 · 그늘로 나타냅니다.

컴포넌트는 램프 값이 아니라 역할 토큰(--uyoo-*)만 씁니다. 다크는 .dark · .uyoo-dark · [data-tone="dark"] 범위 클래스 하나로 모든 값이 바뀝니다. 아래 스와치는 왼쪽이 라이트, 오른쪽이 다크입니다.

// 새 코드는 카톤 토큰(--uyoo-*)을 Tailwind 임의 값으로 쓴다
<section className="bg-(--uyoo-card) text-(--uyoo-fg) shadow-(--uyoo-shadow-card)">
  <p className="text-(--uyoo-muted)">보조 설명</p>
</section>

// v1 이름(bg-background · text-muted-foreground · border-border)은 호환 층이 카톤 값으로 돌린다
<p className="text-muted-foreground">그대로 동작합니다</p>

마크의 색

로고 · 일러스트에만 씁니다. 화면 요소에 그대로 쓰지 않습니다. #248ce1 은 흰 글자 대비가 3.55:1 이라 버튼 면이 될 수 없어서, 같은 hue 에서 명도만 낮춘 #2374c0 이 primary 입니다.

--uyoo-brand
라이트
#248ce1
다크
#248ce1

마크 앞면

--uyoo-brand-light
라이트
#9ad6f1
다크
#9ad6f1

마크 옆면 · 다크 강조색의 원색

--uyoo-brand-ink
라이트
#3e4758
다크
#3e4758

로고 글자. 본문 글자색과 같습니다

면 — 높이 순서

바닥 → 파임 → 카드 → 솟음 → 뜸 순서로 가까울수록 밝습니다(다크도 같습니다). 면은 반투명 · blur · 그라데이션 없이 단색입니다.

--uyoo-bg
라이트
#e3eff3
다크
#0d1423

0 바닥. 페이지 · 상단 바

--uyoo-well
라이트
#ebf1f5
다크
#131b28

1 파임. 입력 트랙 · 표 헤더 · 사이드바

--uyoo-card
라이트
#f9fbfc
다크
#1a2230

2 카드. 내용을 담는 면

--uyoo-raised
라이트
#ffffff
다크
#2a3343

3 솟음. 키캡(버튼 · 선택 칸)

--uyoo-input
라이트
#ffffff
다크
#111926

입력칸 안. 라이트는 흰색, 다크는 파인 면보다 어둡습니다

--uyoo-float
라이트
#ffffff
다크
#283040

4 뜸. 메뉴 · 팝오버 · 토스트 · 대화상자

--uyoo-scrim
라이트
rgba(13, 20, 35, 0.32)
다크
rgba(5, 9, 18, 0.6)

대화상자 · 드로어 뒤 가림막

글자 — 4단계

강조 · 본문 · 보조 · 흐림 네 단계입니다. 흐림(faint)은 힌트 · placeholder 처럼 읽지 않아도 되는 글자에만 써서 3:1 을, 나머지는 면 사다리 전체에서 4.5:1 을 맞춥니다. 비활성 글자는 대비 기준에서 빠집니다.

라이트 · 카드 위 대비

가 Aafg-strong #252e3e · 13.15:1 · 제목 · 현재 항목 · 강조
가 Aafg #3e4758 · 9.00:1 · 본문. 로고 글자색과 같습니다
가 Aamuted #646c7b · 5.09:1 · 보조 설명 · 라벨
가 Aafaint #78818c · 3.80:1 · 힌트 · placeholder(3:1)
disabled-fg #99a2ae · 대비 기준 예외 · 비활성 글자. opacity 대신 이 색을 씁니다

다크 · 카드 위 대비

가 Aafg-strong #f0f2f5 · 14.23:1 · 제목 · 현재 항목 · 강조
가 Aafg #dde2e6 · 12.24:1 · 본문. 로고 글자색과 같습니다
가 Aamuted #9ca5b1 · 6.41:1 · 보조 설명 · 라벨
가 Aafaint #858f9b · 4.87:1 · 힌트 · placeholder(3:1)
disabled-fg #5f6873 · 대비 기준 예외 · 비활성 글자. opacity 대신 이 색을 씁니다

선

면 사이 헤어라인은 옅게, 조작 요소의 경계는 바닥 · 뜬 면 위에서도 3:1 이상입니다(WCAG 1.4.11).

--uyoo-line
라이트
rgba(13, 20, 35, 0.07)
다크
rgba(255, 255, 255, 0.07)

행 구분 · 면 사이 헤어라인(7%)

--uyoo-line-strong
라이트
rgba(13, 20, 35, 0.12)
다크
rgba(255, 255, 255, 0.12)

헤더 · 사이드바 경계(12%)

--uyoo-control-border
라이트
#7c8691
다크
#7b8590

입력 · 체크박스 · 칩의 경계(3:1+)

강조

primary 는 마크의 hue(251) 그대로입니다. hover 에 밝게 하면 흰 글자가 4.18:1 로 떨어져 hover 는 색을 바꾸지 않고 1px 솟는 것으로만 나타냅니다. 다크의 강조색은 마크의 밝은 면을 한 단계 낮춘 색이고 그 위 글자는 남색입니다.

--uyoo-primary
라이트
#2374c0
다크
#90c6e3

기본 버튼 면 · 탭 밑줄 · 체크 면

--uyoo-primary-press
라이트
#1968b0
다크
#7eb3d0

누른 primary

--uyoo-primary-side
라이트
#17497b
다크
#3a637b

primary 키캡의 옆면(두께)

--uyoo-on-primary
라이트
#ffffff
다크
#0d1423

primary 면 위 글자

--uyoo-primary-soft
라이트
#e3f2fa
다크
#283646

선택된 행. 상태는 체크박스가 말하고 틴트는 거듭니다

--uyoo-link
라이트
#1f6bb3
다크
#90c6e3

링크. 바닥 · 파인 면 위에서도 4.5:1

--uyoo-focus
라이트
#2374c0
다크
#90c6e3

키보드 포커스 링(2px)

상태 5톤

톤마다 아이콘(카드 위 3:1+) · 글자(틴트 위 4.5:1+) · 틴트 세 값이 있습니다. 빨강(bad)은 오류와 되돌릴 수 없는 동작에만 씁니다. 상태는 색만으로 말하지 않고 아이콘 모양과 글자가 함께 갑니다.

톤견본(라이트 · 다크)아이콘 / 카드글자 / 틴트
ok
완료완료
3.92 · 7.246.17 · 5.31
warn
주의주의
3.57 · 8.505.82 · 6.06
bad
오류오류
4.96 · 6.405.88 · 4.89
info
정보정보
4.67 · 8.655.78 · 6.10
neutral
중립중립
5.09 · 6.416.56 · 8.08

보관 · 숨기기처럼 되돌릴 수 있는 동작은 빨강이 아니라 기본 글자색입니다. 반려는 사람의 결정이지 오류가 아니라서 중립 톤에 모양을 더하고, 나빠진 지표는 주의색으로 씁니다.

--uyoo-ok
라이트
#438c60
다크
#75be8f

완료 아이콘

--uyoo-ok-text
라이트
#1f613c
다크
#75be8f

완료 글자

--uyoo-ok-tint
라이트
#e1ede8
다크
#293b3f

완료 배지 면

--uyoo-warn
라이트
#ab7c35
다크
#e0b771

주의 아이콘

--uyoo-warn-text
라이트
#785214
다크
#e0b771
--uyoo-warn-tint
라이트
#efeae2
다크
#3a3a3a
--uyoo-bad
라이트
#b14f46
다크
#e58c84

오류 아이콘 · 위험 버튼 면

--uyoo-bad-text
라이트
#923b34
다크
#e58c84

오류 글자 · 필드 오류

--uyoo-bad-tint
라이트
#f0e5e4
다크
#3a333d
--uyoo-info
라이트
#2374c0
다크
#90c6e3

정보 아이콘

--uyoo-info-text
라이트
#165a98
다크
#90c6e3
--uyoo-info-tint
라이트
#dde9f4
다크
#2d3c4d
--uyoo-neutral
라이트
#646c7b
다크
#9ca5b1

중립 아이콘

--uyoo-neutral-text
라이트
#4b5665
다크
#c2c9d2
--uyoo-neutral-tint
라이트
#edf1f4
다크
#262f3d
--uyoo-on-bad
라이트
#ffffff
다크
#0d1423

되돌릴 수 없는 동작의 버튼 글자

--uyoo-bad-side
라이트
#6e2e29
다크
#7a3d38

위험 버튼의 옆면(두께)

--uyoo-progress
라이트
#507fa7
다크
#779eba

진행 막대 채움. 상태 구분은 아이콘이 맡고 막대는 한 색입니다

지표 면

지표 타일의 앞면 하나와 옆면들입니다. 넓은 면이라 마크의 밝은 면을 채도를 낮춰 씁니다. 앞면 위에는 전용 글자색만 씁니다.

진행 중
9
완료
12
검토 대기
3
평균 처리
2.4일
--uyoo-face-front
라이트
#b0dcf2
다크
#214c67

지표 앞면

--uyoo-face-front-fg
라이트
#1b3450
다크
#e8f4fb

앞면 위 글자

--uyoo-face-front-muted
라이트
#33506b
다크
#c5dbe8

앞면 위 보조 글자

--uyoo-face-side
라이트
#e5f3fa
다크
#2a3848

지표 옆면

--uyoo-face-side-muted
라이트
#4f5868
다크
#a9b2bf

옆면 위 보조 글자

아이덴티티 12색

사람 · 조직 · 프로젝트를 서로 구분하는 데만 쓰는 색입니다. 상태 색과 별개라 의미가 없어야 해서 채도를 0.07 로 고정하고 hue 만 30° 간격으로 나눴습니다. 다크에서는 명도만 낮춰 같은 대상이 같은 색으로 보입니다.

라이트

1
2
3
4
5
6
7
8
9
10
11
12

다크

1
2
3
4
5
6
7
8
9
10
11
12

숫자는 이니셜 글자색(--uyoo-identity-fg)으로 그렸습니다. Avatar 가 id 해시로 고릅니다. 직접 지정하는 색이 아닙니다.

하이라이트 컬러

콘텐츠 안에서 시선을 모아야 하는 위치를 표시하는 노랑입니다. primary(파랑)는 링크 · 버튼 · 선택처럼 누를 수 있는 요소에만 씁니다.

텍스트 아래쪽 약 40% 만 칠하는 마커 스타일입니다. 줄이 바뀌어도 줄마다 칠하고, 그 위 글자는 가장 진한 글자색(--uyoo-fg-strong)으로 올립니다. 다크 마커 위에서 본문색은 4.5:1 에 못 미칩니다.

검색 매치

월 결제 한도는 관리자 설정에서 정하며, 한도를 넘으면 결제 버튼이 비활성화됩니다.

변경 내역(diff)의 추가된 텍스트

월 결제 한도는 관리자 설정에서 정하며, 한도를 넘으면 결제 버튼이 비활성화되고 그 이유를 버튼 옆에 표시합니다.

앵커 링크로 이동했을 때

월 결제 한도는 관리자 설정에서 정하며, 한도를 넘으면 결제 버튼이 비활성화됩니다.

왼쪽부터 520ms 동안 칠하고, 약 2초 유지한 뒤 700ms 동안 페이드아웃합니다. 동작 줄이기 설정에서는 처음부터 칠해 두고 페이드아웃만 합니다.

// 검색 매치. <mark> 의 기본 노란 배경은 uyoo-marker 가 지운다.
<mark className="uyoo-marker">한도</mark>

// diff 에서 추가된 텍스트. 기본 밑줄은 지운다.
<ins className="uyoo-marker no-underline">{added}</ins>

// 앵커 링크 · 알림으로 이동한 대상. 다시 재생하려면 key 를 바꿔 새로 마운트한다.
<span key={hash} className="uyoo-marker uyoo-marker-sweep">{sentence}</span>
쓰는 경우
검색어와 일치하는 텍스트, 변경 내역(diff)에서 추가된 텍스트, 앵커 링크 · 알림으로 이동했을 때의 대상 텍스트에 씁니다. diff 에서 삭제된 텍스트는 취소선으로 남기지 않고 접어 둡니다. 이동 대상은 uyoo-marker-sweep 으로 잠시만 표시합니다.
쓰지 않는 경우
상태 표시에는 시맨틱 컬러(성공 · 경고 · 오류)를, 선택 · 활성 상태에는 primary 를 씁니다. 문장을 꾸미려고 칠하지 않습니다. 강조는 굵기나 타이포그래피로 처리합니다.
uyoo-doc-glow 와의 차이
uyoo-marker 는 인라인 텍스트에 씁니다. 표 · 코드 블록처럼 인라인으로 감쌀 수 없는 블록 전체를 표시할 때만 uyoo-doc-glow 를 씁니다.
토큰라이트다크
--uyoo-markeroklch(0.93 0.12 96 / 0.78)oklch(0.64 0.14 88 / 0.66)

손을 올린 · 누른 면

글자색을 섞어 어느 면 위에서나 같은 만큼 짙어집니다. 그 위 글자는 fg 로 올립니다(muted 는 hover 위 4.16 · press 위 3.84 로 4.5:1 미달).

--uyoo-hover
라이트
rgba(62, 71, 88, 0.07)
다크
rgba(221, 226, 230, 0.07)

손을 올린 면(글자색 7%)

--uyoo-press
라이트
rgba(62, 71, 88, 0.12)
다크
rgba(221, 226, 230, 0.12)

누른 면 · 열린 트리거(글자색 12%)

--uyoo-skeleton
라이트
rgba(62, 71, 88, 0.09)
다크
rgba(221, 226, 230, 0.09)

뼈대(Skeleton). 파인 면은 카드 위에서 거의 안 보여 글자색을 섞습니다

--uyoo-skeleton-strong
라이트
rgba(62, 71, 88, 0.14)
다크
rgba(221, 226, 230, 0.14)

뼈대의 진한 줄

--uyoo-hover-row
라이트
rgba(62, 71, 88, 0.04)
다크
rgba(221, 226, 230, 0.04)

목록 행에 손을 올린 면(글자색 4%). 행이 많아 hover 보다 옅다

대비

모든 값은 토큰에서 계산했고, CI 의 대비 검사(scripts/check-contrast.ts, 섞은 색은 oklab)와 같은 숫자입니다. 조합은 scripts/contrast-pairs.ts 에 있고 pnpm gen 이 이 표를 다시 만듭니다.

글자 × 면 · 라이트

글자 \ 면바닥파임카드솟음입력뜸지표 옆면선택 행
fg-strong11.6411.9813.1513.6513.6513.6512.0411.94
fg7.978.209.009.359.359.358.258.18
muted4.514.645.095.295.295.294.664.62
faint (3:1)3.373.473.803.953.953.953.493.45

글자 × 면 · 다크

글자 \ 면바닥파임카드솟음입력뜸지표 옆면선택 행
fg-strong16.4015.4114.2311.3315.7211.8010.7010.97
fg14.1013.2512.249.7413.5210.149.209.43
muted7.396.946.415.107.085.314.824.94
faint (3:1)5.615.274.873.875.374.033.663.75

경계 · 상태 · 면 위 글자

조합역할기준라이트다크
face-front-fg / face-front글자4.5:18.698.18
face-front-muted / face-front글자4.5:15.746.40
face-side-muted / face-side글자4.5:16.335.61
ok-text / ok-tint상태 글자4.5:16.175.31
warn-text / warn-tint상태 글자4.5:15.826.06
bad-text / bad-tint상태 글자4.5:15.884.89
info-text / info-tint상태 글자4.5:15.786.10
neutral-text / neutral-tint상태 글자4.5:16.568.08
bad-text / card상태 글자4.5:16.986.40
on-primary / primary글자4.5:14.859.96
on-primary / primary-press글자4.5:15.768.10
on-bad / bad글자4.5:15.157.37
link / card링크4.5:15.318.65
link / bg링크4.5:14.709.96
link / well링크4.5:14.849.36
link / float링크4.5:15.517.17
control-border / input컨트롤 경계3:13.704.70
control-border / card컨트롤 경계3:13.564.26
control-border / well컨트롤 경계3:13.254.61
control-border / bg컨트롤 경계3:13.154.91
control-border / raised컨트롤 경계3:13.703.39
control-border / float컨트롤 경계3:13.703.53
focus / well포커스 링3:14.269.36
focus / input포커스 링3:14.859.55
bad / input오류 경계3:15.157.07
ok / float상태 아이콘3:14.076.00
warn / float상태 아이콘3:13.717.05
bad / float상태 아이콘3:15.155.30
info / float상태 아이콘3:14.857.17
bad-text / float상태 글자4.5:17.255.30
fg-strong / marker마커 위 글자4.5:111.525.09
focus / bg포커스 링3:14.139.96
focus / card포커스 링3:14.678.65
primary / cardprimary 면3:14.678.65
primary / bg탭 밑줄3:14.139.96
on-primary / primary체크 표시3:14.859.96
progress / well진행 채움3:13.746.08
bad / raised오류 경계3:15.155.09
primary / raised체크 표시3:14.856.88
primary / float체크 표시3:14.857.17
ok / card상태 아이콘3:13.927.24
warn / card상태 아이콘3:13.578.50
bad / card상태 아이콘3:14.966.40
info / card상태 아이콘3:14.678.65
neutral / card상태 아이콘3:15.096.41
primary / primary-soft켠 칩 경계3:14.246.66
bad-text / raised상태 글자4.5:17.255.09
bad / raised상태 아이콘3:15.155.09
ok / primary-soft상태 아이콘3:13.565.58
ok / raised상태 아이콘3:14.075.76
warn / primary-soft상태 아이콘3:13.246.55
warn / raised상태 아이콘3:13.716.76
bad / primary-soft상태 아이콘3:14.514.93
bad / raised상태 아이콘3:15.155.09
info / primary-soft상태 아이콘3:14.246.66
info / raised상태 아이콘3:14.856.88
ok-text / face-side상태 글자4.5:16.545.44
warn-text / face-side상태 글자4.5:16.156.39
ok-text / card상태 글자4.5:17.147.24
warn-text / card상태 글자4.5:16.718.50
bad-text / face-side상태 글자4.5:16.404.81
bad / face-side상태 아이콘3:14.554.81
bad / well상태 아이콘3:14.526.93
identity-fg / identity-1이니셜4.5:19.614.91
identity-fg / identity-2이니셜4.5:19.664.96
identity-fg / identity-3이니셜4.5:19.855.04
identity-fg / identity-4이니셜4.5:110.025.10
identity-fg / identity-5이니셜4.5:110.085.23
identity-fg / identity-6이니셜4.5:110.155.23
identity-fg / identity-7이니셜4.5:110.075.22
identity-fg / identity-8이니셜4.5:110.015.12
identity-fg / identity-9이니셜4.5:19.855.05
identity-fg / identity-10이니셜4.5:19.644.94
identity-fg / identity-11이니셜4.5:19.594.90
identity-fg / identity-12이니셜4.5:19.574.88
info-text / bg손글씨4.5:16.079.96
ok-text / bg상태 글자4.5:16.328.34
ok-text / raised상태 글자4.5:17.415.76
warn-text / bg상태 글자4.5:15.949.80
warn-text / raised상태 글자4.5:16.966.76
bad-text / bg상태 글자4.5:16.187.37
bad-text / raised상태 글자4.5:17.255.09
focus / face-front포커스 링3:13.324.96
bg / fg-strong툴팁 글자4.5:111.6416.40
focus / float포커스 링3:14.857.17
fg / ok-tint알림 글자4.5:17.788.98
ok / ok-tint상태 아이콘3:13.395.31
primary / ok-tintprimary 면3:14.046.35
fg / warn-tint알림 글자4.5:17.808.72
warn / warn-tint상태 아이콘3:13.106.06
primary / warn-tintprimary 면3:14.056.16
fg / bad-tint알림 글자4.5:17.589.35
bad / bad-tint상태 아이콘3:14.184.89
primary / bad-tintprimary 면3:13.936.61
fg / info-tint알림 글자4.5:17.588.63
info / info-tint상태 아이콘3:13.936.10
primary / info-tintprimary 면3:13.936.10
link / primary-soft링크4.5:14.826.66
fg-strong / marker찾은 말4.5:111.525.09
card / ok체크 표시3:13.927.24
fg / hover글자4.5:18.358.43
fg / hover글자4.5:18.0610.26
primary / well말하는 중 띠3:14.269.36
warn / bg품질 막대3:13.169.80
bad / bg품질 막대3:14.397.37
fg-strong / press눌린 피드백4.5:110.8310.36
fg-strong / marker일치 표시4.5:111.624.75
ok / well상태 아이콘3:13.577.83
warn / well상태 아이콘3:13.259.20
warn-text / well상태 글자4.5:16.119.20
primary / well슬라이더 채움3:14.269.36
fg / hover글자4.5:18.0610.26
muted / hover연필 아이콘3:14.565.37
control-border / primary-soft컨트롤 경계3:13.243.28
progress / card진행 채움3:14.105.61
progress / bg진행 채움3:13.636.47
progress / skeleton-strong진행 채움3:13.273.86
fg / press글자4.5:17.428.91
link / input링크4.5:15.519.55
focus / input포커스 링3:14.859.55
muted / hover-row글자4.5:14.785.82

기준은 WCAG 2.2 입니다. 글자 4.5:1(1.4.3), 조작 요소의 경계 · 상태 아이콘 · 포커스 링 3:1 (1.4.11). 흐림(faint)은 힌트 · placeholder 처럼 읽지 않아도 되는 글자에만 써서 3:1 로 둡니다. 비활성은 WCAG 예외라 재지 않고, 두께를 없애고 평평한 면으로 바꿔 모양으로도 구분합니다. 새 조합은 scripts/contrast-pairs.ts 에 더합니다.

옛 이름 호환

v1 의 의미 이름을 카톤 토큰으로 돌립니다. 소비자 앱이 bg-background · text-muted-foreground 같은 Tailwind 유틸리티를 많이 쓰므로 v2 에서도 이 이름들은 남깁니다(값만 카톤). 새 코드는 --uyoo-* 를 씁니다.

옛 이름카톤 토큰메모
--radius--uyoo-radius
--background--uyoo-bgbg-background 는 바닥, 카드 안쪽은 bg-card
--foreground--uyoo-fg
--foreground-deep--uyoo-fg-strong
--quiet-foreground--uyoo-muted
--faint-foreground--uyoo-faint
--paper--uyoo-card
--card--uyoo-card
--card-foreground--uyoo-fg
--popover--uyoo-float
--popover-foreground--uyoo-fg
--primary--uyoo-primary
--primary-foreground--uyoo-on-primary
--secondary--uyoo-raised
--secondary-foreground--uyoo-fg
--muted--uyoo-well
--muted-foreground--uyoo-muted
--accent--uyoo-hover메뉴 항목 강조 면
--accent-foreground--uyoo-fg-strong
--destructive--uyoo-bad
--border--uyoo-line-strong
--input--uyoo-control-borderv1 보다 진해져 3:1 을 넘깁니다
--ring--uyoo-focus
--status-ok--uyoo-ok
--status-warn--uyoo-warn
--status-bad--uyoo-bad
--chart-1--uyoo-primary
--chart-2--uyoo-ok
--chart-3--uyoo-identity-10
--chart-4--uyoo-warn
--chart-5--uyoo-bad
--sidebar--uyoo-well
--sidebar-foreground--uyoo-fg
--sidebar-primary--uyoo-primary
--sidebar-primary-foreground--uyoo-on-primary
--sidebar-accent--uyoo-hover
--sidebar-accent-foreground--uyoo-fg-strong
--sidebar-border--uyoo-line
--sidebar-ring--uyoo-focus
--identity-1--uyoo-identity-1
--identity-2--uyoo-identity-2
--identity-3--uyoo-identity-3
--identity-4--uyoo-identity-4
--identity-5--uyoo-identity-5
--identity-6--uyoo-identity-6
--identity-7--uyoo-identity-7
--identity-8--uyoo-identity-8
--identity-9--uyoo-identity-9
--identity-10--uyoo-identity-10
--identity-11--uyoo-identity-11
--identity-12--uyoo-identity-12

포커스 링 · 선택 영역 · 스크롤바

클래스 없이 전역 스타일로 적용됩니다. Tab 키로 이동하고, 글자를 끌어 선택하고, 목록을 스크롤해 확인합니다.

포커스 링

primary 컬러 2px 아웃라인, offset 2px. 마우스로 클릭할 때는 표시하지 않습니다(:focus-visible).

선택 영역

이 문장을 끌어서 선택합니다. 브라우저 기본 파랑 대신 primary 틴트 배경을 쓰고 텍스트 컬러는 그대로 둡니다.

스크롤바

  • 행 1
  • 행 2
  • 행 3
  • 행 4
  • 행 5
  • 행 6
  • 행 7
  • 행 8
  • 행 9
  • 행 10
  • 행 11
  • 행 12
  • 행 13
  • 행 14

OS 기본 대신 텍스트 컬러 22% 의 얇은 막대입니다.