One set of tokens, one set of classes. Four documents, each deciding a different layer.토큰 한 벌, 클래스 한 벌. 네 문서가 각각 한 층을 결정한다.
Colour, type, spacing, shape, motion, focus, layout, icons, images, wordmark, favicon, voice. The values shown are read from the live CSS. 색, 타입, 간격, 형태, 모션, 포커스, 레이아웃, 아이콘, 이미지, 워드마크, 파비콘, 보이스. 화면에 보이는 값은 실제 CSS에서 읽어온다.
13 core, 8 form, 4 feedback, 3 navigation, 2 deck. Live example and markup side by side, with a copy button. 코어 13, 폼 8, 피드백 4, 내비 3, 덱 2. 예시와 마크업이 나란히 있고 복사 버튼이 붙어 있다.
Four portfolio screens (home, case, writing, about) and four console screens (dashboard, list, detail, settings). Same tokens, different density. 포트폴리오 4장(홈, 작업, 글, 소개)과 콘솔 4장(대시보드, 목록, 상세, 설정). 토큰은 같고 밀도만 다르다.
32 layouts. Frame coordinates are the same on every slide, and the corner furniture sits on its own layer. 레이아웃 32장. 프레임 좌표는 모든 장에서 같고, 네 코너 항목은 본문과 분리된 층에 있다.
In light mode the mint green fails contrast as text or a 1px line.라이트 모드에서 민트 그린을 글자나 1px 선에 쓰면 대비가 부족하다.
A border or background shorthand resets every longhand a modifier set.border나 background shorthand는 modifier가 설정한 longhand를 전부 리셋한다.
Boxes, chips and bands alike. No exceptions.박스, 칩, 밴드 모두 같다. 예외는 없다.
One child fills, or the content distributes and ends in a footer. Mixing them leaves empty space at the bottom.자식 하나가 채우거나, 분산 후 푸터로 끝난다. 섞으면 바닥에 빈 공간이 남는다.
A fourth stops reading as emphasis.네 번째부터는 강조로 읽히지 않는다.
Colour, size and spacing all go through var(). If a value is missing, run the three questions.색, 크기, 간격 모두 var()로 쓴다. 값이 없으면 토큰 추가 3문항을 통과해야 한다.