Getting Started

시작하기

빌드 도구가 필요 없습니다. CSS 한 줄이면 TheNoun 룩을 얻습니다.

1. 토큰 로드

<link rel="stylesheet" href="https://design.thenoun.ai/tokens.css">

또는 tokens.css 내려받기 후 프로젝트에 복사 (오프라인·내부망용).

2. 최소 예제

Example

보안 파일 전송

암호화 연결로 직접 전달됩니다.

코드 보기

<div class="tn-card">
  <div class="tn-eyebrow">Example</div>
  <h3>보안 파일 전송</h3>
  <p class="tn-sub">암호화 연결로 직접 전달됩니다.</p>
  <button class="tn-btn tn-btn-primary">전송</button>
</div>

3. 지켜야 할 것 3가지

토큰만 참조

색·radius를 하드코딩하지 않는다. var(--primary)만 쓴다.

파랑은 인터랙션에만

기본 상태는 흑백. hover·포커스·강조에서만 파랑이 등장한다.

문구는 담백하게

과잉 안내·이모지 금지. 격식 있는 한국어 한 줄이면 충분하다.

AI 에이전트와 쓰기

에이전트(Claude Code·Cursor 등)로 화면을 생성한다면 AGENTS.md를 컨텍스트에 넣어주세요. 토큰 규칙·컴포넌트 목록·금지 패턴이 기계가독 형태로 정리돼 있습니다.