큐레이션 · 오픈 · 무료

Gitpod

백그라운드 에이전트를 위한 플랫폼.

01

디자인 DNA

자율적 AI 소프트웨어 에이전트를 위한 엔터프라이즈급 오케스트레이션 플랫폼.

02

컬러

미묘한 회색 단계를 사용하는 고대비 단색 기본값과 주요 링크에는 다크 그린 강조색을 사용합니다.

03

타이포그래피

transitional-serif · neo-grotesque-sans · monospace

• display72px · 400
• body18px · 400
• caption12px · 400

에디토리얼적 권위를 전달하기 위해 큰 표시 타이포그래피에는 전환형 세리프를 사용합니다. · 최대 가독성을 위해 모든 UI 요소와 본문에는 네오그로테스크 산세리프를 사용합니다. · 큰 표시 텍스트에는 촘촘한 자간을 유지하여 응집력 있는 블록을 만듭니다.

04

여백

8px 그리드

05

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

1px solid rgba(10,14,25,1.0)

0px 0px 120px 0px rgba(0,0,0,0.07) · 0px 0.0346895px 0.208137px 0px rgba(0,0,0,0)

06

레이아웃

넉넉한 여백과 고정된 상단 내비게이션 바를 갖춘 중앙 정렬된 콘텐츠.

07

모션과 인터랙션

메뉴 및 UI 상태 변화를 위한 부드러운 투명도 트랜지션. · hover 시 미묘한 배경 및 테두리 색상 트랜지션.

텍스트와 테두리의 부드러운 색상 트랜지션. · 투명도 또는 배경 변화를 통한 미묘한 시각적 피드백.

08

컴포넌트

• button 흰색 텍스트가 있는 어두운 단색 채우기 또는 어두운 테두리와 텍스트가 있는 흰색 채우기.
• card 미묘한 테두리와 8px 반경을 가진 깔끔한 컨테이너.
• chip 태그 또는 상태 표시기를 위한 작은 둥근 컨테이너.
• input 명확한 포커스 상태를 가진 표준화된 텍스트 필드.
• hero 산세리프 부제와 함께 사용되는 큰 에디토리얼 스타일 세리프 헤드라인.

09

보이스와 금지 목록

• 톤 권위적이고 전문적이며 매우 기술적입니다.
• 헤드라인 세리프 서체를 사용한 굵고 단정적인 진술.
• CTA 직설적이고 행동 지향적인 것으로, '시작하기' 또는 '데모 요청'과 같습니다.

• 네온색 또는 고채도 강조색을 사용하지 마세요 — 스크린샷은 무채색 다크 그린 강조색을 보여줍니다.
• 지나치게 장식적인 산세리프 글꼴을 사용하지 마세요 — 스크린샷은 표시용 전환형 세리프와 본문용 깔끔한 네오그로테스크를 보여줍니다.
• 무거운 드롭 섀도우를 사용하지 마세요 — 스크린샷은 최소화된 큰 반경의 박스 섀도우 또는 아예 없는 것을 보여줍니다.
• 주요 텍스트에 저대비를 사용하지 마세요 — 스크린샷은 흰색 배경에 매우 어두운(#0A0E19) 잉크색을 보여줍니다.
• 복잡하고 지나치게 바쁜 배경 패턴을 사용하지 마세요 — 스크린샷은 깔끔하고 단색 배경을 보여줍니다.
• 가장자리가 날카로운 사각형을 사용하지 마세요 — 스크린샷은 8px에서 12px의 일관된 border-radius 사용을 보여줍니다.
• 피하기: 지나치게 캐주얼한 은어
• 피하기: 과도한 느낌표
• 피하기: 맥락 없는 모호한 기술 전문 용어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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