Start a Goal
Interactor design system · v1

브랜드에 맞는 Interactor 인터페이스 만들기

Interactor 화면 뒤에 있는 시각 언어 — 밝은 오프화이트 운영체제 캔버스, 초록색 프라이머리, 모노스페이스 정보 레이어. 토큰, 서체, 컴포넌트, 브랜드를 당신의 제품에 바로 넣을 수 있게 준비했습니다.

Plain CSS variablesNo build stepMIT-friendlyLight canvas + dark bands
시작 · 설치

토큰을 넣고, 그 위에 만드세요

이 시스템은 순수 CSS 커스텀 프로퍼티입니다 — 프레임워크도, 빌드 단계도 없습니다. 폰트와 토큰 파일 두 개를 불러온 뒤 변수를 참조하세요. 이 페이지의 모든 것이 그 변수로 만들어졌습니다.

app.css
/* 1 · fonts — Archivo, Open Sans, JetBrains Mono */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* 2 · tokens — load first, then the component layer */
@import 'colors_and_type.css';  /* color · type · radii · spacing */
@import 'interactor.css';       /* buttons · cards · nav · inputs */

/* 3 · build on the tokens */
.cta {
  background: var(--lime);
  color: var(--navy);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
}

포함된 것

Light canvas + dark bandsGreen primaryMono info layer8-pt spacingCompact radiiStroked 24-grid icons
기초 · 색상

밝은 캔버스, 유일한 에너지는 초록

따뜻한 오프화이트 바탕, 네 단계의 높이, 거의 검은색에 가까운 텍스트 램프, 그리고 유일한 채도 높은 색인 초록. 스와치를 클릭하면 토큰이 복사됩니다.

브랜드 — 일반적인 사용에서 채도가 있는 색은 초록뿐입니다 — 동작, 상태, 브랜드 순간에만 아껴 씁니다.

캔버스와 높이 — 깊이는 그림자가 아니라 조금 더 진한 오프화이트 색조로 표현합니다.

텍스트 램프 — 거의 검은색은 글자에만 씁니다. 제목부터 비활성까지 네 단계.

의미 색 — 상태 표시 전용 — 성공은 같은 초록입니다.

기초 · 서체

세 서체, 하나의 정돈된 목소리

Archivo가 디스플레이 영역을, Open Sans가 본문과 UI를 맡고, JetBrains Mono는 시그니처 정보 레이어입니다 — 아이브로우, 태그, 상태, 메타데이터를 넓은 자간의 대문자로 표시합니다.

Aa
Archivo
Display · headings
wght 400–700 · −0.025 to −0.04em
Aa
Open Sans
Body · UI
wght 400–700 · line-height 1.55
Aa
JetBrains Mono
The info layer
wght 400–500 · +0.04 to +0.12em

타입 스케일

.t-display-1Archivo 500 · clamp 44–76 · −0.035em
Intelligence at work
.t-display-2Archivo 500 · clamp 32–44 · −0.025em
Three modes, one conversation.
.t-h2Archivo 600 · 34 · −0.025em
Build on the foundation
.t-titleArchivo 600 · 22 · −0.02em
Self-host on day one
.t-body-lOpen Sans 400 · 17 · 1.55
Switch between pure chat, a split workspace, or a full app — without losing context, source or thread.
.t-bodyOpen Sans 400 · 15 · 1.55
Talk to your stack. Move beyond LLM wrappers.
.t-monoJetBrains Mono 400 · 12 · +0.04em
claude-sonnet-4.5 · auto-mode · 1.4s
.t-eyebrowJetBrains Mono 500 · 11 · +0.12em · UPPER
FOUNDATIONS · TYPOGRAPHY
기초 · 간격과 모서리

8pt 리듬, 작은 모서리

간격은 8pt 단위로 커지고, 56px 컬럼 리듬이 마케팅 레이아웃을 이끕니다. 모서리는 의도적으로 작게 — 완전히 각지지도, 풍선처럼 둥글지도 않게.

간격 스케일

4px--space-1
8px--space-2
12px--space-3
16px--space-4
24px--space-5
32px--space-6
48px--space-7
64px--space-8

모서리 반경

6px · controls / buttons
--r-sm
10px · inputs / small cards
--r-md
14px · cards / composer
--r-lg
20px · hero / CTA
--r-xl
999px · chips / badges
--r-pill
기초 · 높이

헤어라인이 일을 하고, 글로우 하나만 신성합니다

대부분의 표면은 테두리로 구분합니다. 안쪽 헤어라인과 모달용 부드러운 그림자 하나 — 그리고 에이전트 진입점에만 쓰는 민트 글로우.

Elev 1
--elev-1
Elev 2
--elev-2
Elev 3
--elev-3
Glow
--elev-glow
기초 · 아이콘

24 그리드 스트로크 세트 하나

단일 커스텀 세트 — 1.5~1.7px 스트로크, 둥근 끝, 채움 없음, currentColor로 그려서 모든 글리프가 부모의 색을 물려받습니다. 아이콘 폰트도, 이모지도 없습니다.

arrow
send
plus
spark
chev
chart
book
code
check
star
paperclip
bolt
link
share
eye
flask
grid
user
refresh
lock
play
구축 · 컴포넌트

핵심 키트

버튼, 칩, 상태, 배지, 카드, 입력 — 모두 토큰에서 바로 만들어졌습니다. 호버 시 테두리가 밝아지고, 누르면 1px 움직이며, 포커스 링은 민트로 바뀝니다.

버튼

칩, 상태, 배지

auto-mode indexed pending deniedNew — agent is liveBetaPending

카드와 입력

Automation engine

기본 카드 하나 — elev-1 표면, 1px 헤어라인, 14px 반경. 역할은 그 위에 쌓고, 색상 강조는 쓰지 않습니다.

구축 · 어조

자신 있게, 기술적으로, 담백하게

빌더가 빌더에게 말하듯. 문장형 대소문자 헤드라인, "you / your", 결과는 사실로 서술. 모노 정보 레이어가 시스템의 시그니처를 담습니다.

대소문자

헤드라인과 본문은 문장형 대소문자를 씁니다. 정보 레이어 — 아이브로우, 태그, 상태, 메타데이터 — 는 넓은 자간의 대문자 모노스페이스입니다.

✓ Three modes, one conversation.
✓ FOUNDATIONS · TYPOGRAPHY
✗ Three Modes, One Conversation

가운뎃점

· 가운뎃점은 정보 레이어의 연결 조직입니다 — 모델 이름, 모드, 지연 시간, 버전, 상태를 시스템 로그 같은 리듬으로 이어 줍니다.

claude-sonnet-4.5 · auto-mode · 1.4s
MIT · v2.4 · updated 2026-05-20