브랜드

로고

앱 아이콘

밝은 배경

DuoVault워드마크 결합

내려받기 · 512 · 192 · 128 · 64

쓰는 법

아이콘의 모서리를 다시 깎지 않는다. 이미 둥글게 마스킹돼 있다.
아이콘 위에 글자를 얹거나 색을 덮지 않는다.
워드마크와 붙일 때 아이콘 높이만큼의 여백을 좌우에 둔다.
"DuoVault" 는 한 단어이고 V가 대문자다. Duovault·duoVault로 쓰지 않는다.

색

배경

상태

텍스트

그라디언트

지켜야 할 규칙

violet은 커플 금고 전용이다. 개인 금고 화면에는 쓰지 않는다 — 개인은 "아무도 못 본다"는 보안이고, 커플은 "둘만 본다"는 관계다. 두 감정을 같은 색으로 그리지 않는다.
CTA 그라디언트 위의 흰 라벨은 대비가 3.15:1이라 17pt Bold 이상에서만 쓴다 (WCAG large-text).
텍스트 4단계는 #0B0F1C 위에서 실측한 값이다. 다른 배경에 그대로 옮기지 않는다.

서체

IBM Plex Sans KR. 서브셋을 앱에 넣는다. 설치 전에는 시스템 폰트로 폴백한다.

견본	토큰	크기	굵기	자간	행간
다정한 Aa	`display`	33pt	Bold	-0.02em	1.28
다정한 Aa	`h1`	27pt	Bold	-0.02em	1.2
다정한 Aa	`h2`	25pt	Bold	-0.02em	1.35
다정한 Aa	`h3`	22pt	SemiBold	-0.01em	1.4
다정한 Aa	`h4`	18pt	SemiBold	-0.01em	1.35
다정한 Aa	`cta`	17pt	Bold	-0.01em	—
다정한 Aa	`section`	14pt	SemiBold	—	—
다정한 Aa	`bodyStrong`	13.5pt	Medium	—	1.4
다정한 Aa	`body`	13pt	Regular	—	1.45
다정한 Aa	`bodyLight`	12pt	Light	—	1.62
다정한 Aa	`legal`	11pt	Light	—	1.6
다정한 Aa	`tabLabel`	10pt	Medium	—	—

모노 — 숫자·코드·메타

견본	토큰	크기	굵기	자간	행간
0123 Aa	`groupHeader`	11pt	Medium	0.14em	—
0123 Aa	`meta`	11pt	Regular	0.05em	—
0123 Aa	`badge`	11pt	Medium	0.16em	—
0123 Aa	`keypad`	25pt	Regular	—	—
0123 Aa	`codeSlot`	25pt	SemiBold	—	—

초대 코드·금고 암호·용량·시각은 모두 모노다. 자릿수가 흔들리면 읽는 사람이 다시 센다.

간격 · 라운드

xxs5

xs7

sm11

md14

lg20

xl26

xxl30

huge38

레이아웃

토큰	값	쓰는 곳
`screenH`	22	금고·설정·이력 좌우 패딩
`screenHWide`	24	초대·이별
`screenHCenter`	30	온보딩·잠금
`topInset`	70	상태바 아래 첫 요소
`tabBarInset`	130	탭바 있는 화면 하단 여백
`minTapTarget`	44	이보다 작은 히트 영역을 만들지 않는다

모서리

icon9

iconLg12

codeSlot12

tile13

card18

key18

fab19

cardLg20

mark22

cardXL24

pill999

그림자

토큰	CSS
`cta`	`0 14px 34px rgba(255,79,126,.32)`
`fab`	`0 14px 30px rgba(255,79,126,.40)`
`mark`	`0 24px 60px rgba(124,92,255,.45)`
`stackTop`	`0 20px 44px rgba(0,0,0,.45)`

SwiftUI의 shadow(radius:)는 CSS blur의 절반이다. 옮길 때 두 배로 환산한다.

모션

토큰	곡선	이유
`blurReveal`	`easeOut 0.35s`	잠금 해제 흐림 걷힘
`dotFill`	`easeInOut 0.18s`	암호 입력 점
`press`	`easeOut 0.12s`	버튼 눌림
`selection`	`spring(0.34, 0.82)`	선택 모드 — 목록이 밀리는 움직임이라 spring이 손에 붙는다
`progress`	`easeOut 0.25s`	진행 막대 — 튕기면 진행률이 뒤로 간 것처럼 보여 spring을 쓰지 않는다
`unlockDelay`	`0.52s`	복호화가 일어나는 시간을 체감시키는 지연

prefers-reduced-motion을 존중한다. 의미 없는 움직임은 넣지 않는다.

말투

기능이 아니라 상황을 쓴다. "AES-GCM 암호화" 보다 "담는 순간 기기에서 암호화됩니다".
되돌릴 수 있는 것과 없는 것을 먼저 말한다. 암호를 잊으면 복구가 안 되고, 이별 모드는 7일 안에 되돌릴 수 있다. 둘 다 앞에서 말한다.
장르어를 쓰지 않는다. 숨기기·비밀앨범·hide·secret. 이 앱은 사진 숨김 앱이 아니라 둘을 위한 금고다.
"금고"는 vault다. 공간·보관함으로 바꿔 쓰지 않는다.

출처

이 문서의 값은 아래 파일에서 옮겼습니다. 코드가 바뀌면 이 문서도 함께 고칩니다.

DuoVault/Core/Design/DVTheme.swift
DuoVault/Core/Design/DVTypography.swift
DuoVault/App/VaultTone.swift