큐레이션 · 오픈 · 무료

Retool

내부 도구 구축을 위한 개발자 중심 플랫폼입니다.

01

디자인 DNA

엔터프라이즈급 IDE에 해당하는 내부 도구입니다.

02

컬러

따뜻한 무채색 중성색과 쿨 블루 액센트를 사용한 고대비 유틸리티 팔레트입니다.

03

타이포그래피

grotesque-sans · humanist-sans · monospace

• display72px · 380
• display-248px · 380
• body24px · 400
• body-216px · 400
• mono14px · 400

04

여백

일관된 4px 기본 단위와 24px 거터, 그리고 여유를 위한 넉넉한 수직 패딩을 사용합니다.

05

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

미세한 구분선을 위한 1px solid rgba(233, 235, 223, 0.12); 활성 상태를 위한 1px solid rgb(233, 235, 223).

0px 1px 2px rgba(0, 0, 0, 0.12) · 0px 68px 116px rgba(0, 0, 0, 0.35)

06

레이아웃

전체 너비의 다크 배경에 중앙 정렬된 제한된 콘텐츠 영역.

07

모션과 인터랙션

hover 상태에서의 부드러운 불투명도 및 transform 전환. · 텍스트 요소를 위한 단계적 입장 애니메이션. · UI 컴포넌트를 위한 미세한 패럴랙스 또는 떠 있는 효과.

버튼과 상호작용 요소를 위한 미세한 배경색 변화 또는 약간의 상향 이동. · 색상이나 불투명도 변화를 통한 즉각적인 시각적 피드백, 종종 내비게이션 전환으로 이어짐.

08

컴포넌트

• button 주요 작업(무료로 시작하기)을 위한 단단한 화이트/라이트 배경과 보조 작업(데모 예약)을 위한 투명 테두리 배경을 사용한 알약 형태의 버튼.
• card 제품 인터페이스를 선보이기 위해 미세한 테두리나 배경 차이를 적용한 깔끔하고 약간 둥근 모서리의 컨테이너.
• chip 기술적 개념을 나타내는 모노스페이스 텍스트를 포함하는 경우가 많으며, 최소한의 패딩을 사용한 작고 둥근 태그 또는 레이블.
• input 검색이나 명령 입력을 위한 깔끔한 테두리와 라이트 배경을 가진 둥근 입력 필드.
• hero 미세한 그라디언트 배경 위에 떠 있는 제품 UI 데모와 함께 제공되는 거대한 중앙 정렬 헤드라인 쌍.

09

보이스와 금지 목록

• 톤 직설적이고, 기술적이며, 자신감 있는.
• 헤드라인 짧고, 강렬하며, 행동을 유도하는 스타일 (예: '원하는 방식으로 구축. 믿을 수 있는 플랫폼으로 배포.')
• CTA 접근 용이성이나 전문가 상담을 강조하는 명확하고 혜택 중심적인 문구.

• 고채도 네온 색상을 사용하지 마세요 — 스크린샷은 따뜻한 그레이, 다크 배그, 단일한 쿨 블루 액센트로 구성된 팔레트를 보여줍니다.
• 장식용 세리프 폰트를 헤드라인에 사용하지 마세요 — 스크린샷은 큰 디스플레이 텍스트를 위해 깔끔하고 기능적인 grotesque-sans를 사용합니다.
• 메인 컨테이너에 날카로운 90도 모서리를 사용하지 마세요 — 스크린샷은 부드럽고 큰 둥글기(알약 형태 또는 20px 이상의 곡선)를 선호합니다.
• 바쁘고 질감 있는 배경을 사용하지 마세요 — 스크린샷은 매끄러운 그라디언트와 깔끔하고 단색의 다크 표면을 보여줍니다.
• 좁고 비좁은 레이아웃을 사용하지 마세요 — 스크린샷은 명확한 계층 구조를 위해 넉넉한 간격과 큰 타이포그래피를 보여줍니다.
• 경쟁하는 악센트 색상을 여러 개 사용하지 마세요 — 스크린샷은 특정 그래픽 컨텍스트에서만 절제된 블루와 따뜻한 오렌지/레드의 사용을 보여줍니다.
• 피하기: 불필요한 수식어
• 피하기: 기업형 유행어
• 피하기: 불명확한 약속
• 피하기: 과도한 감탄사
• 피하기: 수동태
• 피하기: 지나치게 복잡한 문장

10

팩 안의 실제 스크린샷

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

11

System Prompt

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