폰트는 라틴 Geist + 한글 Pretendard/시스템 폴백 기준이며, 이 미리보기는 폴백 폰트로 표시될 수 있습니다. 수치(크기·행간·굵기)는 스펙 값 그대로입니다.
3.1 · on-brand 규칙
데브스랩 브랜드 cyan(#06B6D4)은 밝은 색상이라 흰 텍스트의 대비가 2.3:1로 WCAG AA에 미달합니다. 그래서 DDS의 primary 버튼은 색 배경 + 흰 글자 관성을 버리고 zinc.950 텍스트(대비 약 8:1)를 올립니다 — 홈페이지의 다크 배경 + cyan 액센트와 같은 무드입니다.
비교: 흰 텍스트 on cyan.500 = 2.3:1 (실패) · zinc.950 on cyan.500 ≈ 8:1 (통과)
3.1 · 컬러
3층 컬러 구조: 원시 팔레트(50–900) → 알파 스케일 → 시맨틱 토큰.
브랜드 기준색은 데브스랩 홈페이지(devslab.kr)에서 추출한 cyan과
zinc 뉴트럴입니다. 컴포넌트는 이 팔레트를 직접 참조하지 않습니다.
라이트 위에서
다크 위에서
3.1 · 컬러
컴포넌트가 참조하는 유일한 레이어. 라이트/다크 매핑이 처음부터 1급으로 함께 정의됩니다 —
다크 모드는 이 매핑 교체만으로 얻고, 컴포넌트에 if (dark) 분기가 생기면 토큰 설계가 잘못된 것입니다.
| 토큰 | 라이트 | 다크 | 용도 |
|---|
3.2 · 타이포그래피
8단계 고정 세트 — 크기와 행간은 분리해서 조정하지 않습니다. 웹은 px(=rem 환산), RN은 같은 숫자를 pt로 씁니다. 스케일 밖의 크기가 필요하면 스케일에 추가하는 PR이 먼저입니다.
3.3 · 간격
허용값 12개. 홀수·임의 값이 필요해 보이면 디자인을 스케일에 맞춥니다 — 스케일을 디자인에 맞추지 않습니다.
3.4 · 라운드
3.5 · 그림자
웹 box-shadow와 RN elevation 값을 토큰이 함께 정의합니다. 플랫폼별로 따로 만들지 않습니다.
3.6 · 모션
카드에 마우스를 올리거나 키보드 포커스를 주면 해당 토큰의 속도로 움직입니다. OS의 모션 감소 설정을 켜면 즉시 완료됩니다.
4 · 컴포넌트
아래 두 패널은 페이지 테마와 무관하게 각각 라이트/다크 시맨틱 매핑에 고정되어 있습니다. 같은 컴포넌트 코드가 토큰 교체만으로 두 테마를 얻는 것을 보여줍니다.
Light
Dark
Light
Dark
Light
방문자가 가장 많이 물어본 주제는 채용 절차였습니다.
수정된 회사 소개 문서가 즉시 답변에 반영됩니다.
Dark
방문자가 가장 많이 물어본 주제는 채용 절차였습니다.
수정된 회사 소개 문서가 즉시 답변에 반영됩니다.