큐레이션 · 오픈 · 무료

Linear

개발자 도구를 위한 어둡고, 정밀 중심의 SaaS 디자인 시스템.

01

디자인 DNA

소프트웨어 팀을 위한 하이엔드 시계 계기—어둡고, 정밀하며, 장식이 제로.

02

컬러

집중을 위한 극도의 대비, 미세한 노이즈와 반투명 레이어로 깊이감을 만듭니다.

03

타이포그래피

geometric-sans · humanist-sans · monospace

• display64px · 400
• body16px · 400
• mono13px · 400

대형 헤드라인에는 타이트한 네거티브 트래킹을 사용합니다. · 본문 텍스트는 인터페이스를 가볍게 유지하기 위해 400 굵기를 유지합니다. · 기술적 참조와 식별자에는 전용 모노 폰트를 사용합니다.

04

여백

타이트한 컴포넌트 간격을 가진 엄격한 4px 그리드.

05

표면 (라운드 / 그림자 / 경계선)

1px solid rgba(255,255,255,0.08)

0px 1.2px 0px 0px rgba(0,0,0,0.03) · 0px 2px 4px 0px rgba(0,0,0,0.4) · inset 0px 0px 12px 0px rgba(0,0,0,0.2)

06

레이아웃

중첩된 상승 패널을 가진 조밀하고 풀폭의 어두운 캔버스.

07

모션과 인터랙션

hover 시 미세한 페이드 인 및 필터 전환. · 부드러운 배경색 변화. · 커서 및 focus 상태의 마이크로 인터랙션.

약간의 밝기 증가 또는 배경 불투명도 변화. · 미세한 스케일 또는 색상 피드백을 통한 즉각적인 상태 변화.

08

컴포넌트

• button 투명한 배경과 얇은 테두리를 가진 둥근(필)형 또는 약간 둥근 직사각형.
• card 미세한 1px 내부 테두리와 부드러운 드롭 섀도우를 가진 상승형 어두운 패널.
• chip 태그와 상태 표시에 사용되는 작고 둥근 직사각형.
• input 최소한의 테두리 스타일링을 가진 어둡고 반투명한 배경 필드.
• hero 대담하고 굵은 산세리프 헤드라인에 깔끔한 서브헤더와 대형 제품 목업이 결합된 형태.

09

보이스와 금지 목록

• 톤 기술적이고, 정밀하며, 자신감 있는 어조.
• 헤드라인 직설적이고, 행동 지향적이며, 권위적인 스타일.
• CTA 미니멀하고 명확하며, 종종 단순한 텍스트 링크 또는 저강조 버튼.

• 고채도 색상을 사용하지 마세요—스크린샷은 엄격히 무채화/화이트 팔레트를 보여줍니다.
• 둥글고 장난스러운 형태를 사용하지 마세요—스크린샷은 날카롭거나 매우 미세하게 둥근 모서리를 보여줍니다.
• 세리프 또는 장식용 폰트를 사용하지 마세요—스크린샷은 깨끗하고 기하학적인 산세리프를 보여줍니다.
• 밝고 다채로운 그라데이션을 사용하지 마세요—스크린샷은 어둡고 평탄하며 질감이 있는 배경을 보여줍니다.
• 두껍고 무거운 테두리를 사용하지 마세요—스크린샷은 가느다란 1px 구분선을 보여줍니다.
• 복잡하고 다층적인 섀도우를 사용하지 마세요—스크린샷은 오직 미세하고 낮은 불투명도의 드롭 섀도우만 보여줍니다.
• 피하기: 마케팅성 과장
• 피하기: 모호하거나 불명확한 용어
• 피하기: 과도한 느낌표
• 피하기: 장난스럽거나 캐주얼한 언어

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko