큐레이션 · 오픈 · 무료

GitLab

GitLab은 DevSecOps를 위한 지능형 오케스트레이션 플랫폼으로서, 엔터프라이즈 소프트웨어 배포를 위한 안전하고 올인원 솔루션으로 자리매김합니다.

01

디자인 DNA

소프트웨어 배포를 위한 엔터프라이즈 명령 센터

02

컬러

주로 밝은 배경 위에 강렬한 주황색 강조를 사용하는 깔끔한 고대비 UI로, 강조를 위해 어두운 표면을 활용합니다.

03

타이포그래피

geometric-sans · monospace

• display96px · 660
• display-lg64px · 660
• display-md32px · 660
• body16px · 400
• body-sm14px · 400

크기 표시용 텍스트에는 좁은 자간을 적용하여 강렬하고 모던한 느낌을 줍니다. · 제목에는 높은 글꼴 굵기(660)를 사용하여 강한 시각적 계층을 구축합니다. · 본문 텍스트에는 일관된 행간(1.5)을 유지하여 가독성을 유지합니다.

04

여백

요소와 레이아웃을 위한 표준 공간 진행 단계를 갖춘 4px 기본 격자

05

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

1px solid #E8E7EB

0px 3px 7px 0px rgba(0, 0, 0, 0.05) · 0px 13px 13px 0px rgba(0, 0, 0, 0.04) · 0px 29px 17px 0px rgba(0, 0, 0, 0.03)

06

레이아웃

중앙 정렬 컨테이너와 유연한 콘텐츠 블록을 갖춘 다단식 격자 레이아웃

07

모션과 인터랙션

인터랙티브 요소(버튼, 링크)를 위한 탄성/오버슈트 이징 · 표준 배경색 전환(0.2초) · transform 기반 hover 효과(0.3초)

배경색 변경 또는 transform(오버슈트 이징) · 배경색 전환을 통한 즉각적인 피드백

08

컴포넌트

• button 배경 채워진 기본 버튼(검정 배경, 흰색 텍스트)과 테두리가 있는 보조 버튼(투명 배경, 검정 텍스트)
• card 어두운 배경(#1F1C2E)과 흰색 텍스트를 사용하며, 기능 하이라이트 및 상태 업데이트에 사용됩니다.
• chip 채팅 위젯 인터페이스 내의 인터랙티브 작업 칩
• input 전용 전송 아이콘이 있는 부유형 채팅 입력 필드
• hero 돋보이는 그라데이션 배경(핑크/오렌지), 큰 타이포그래피, 그리고 기본 CTA를 갖춘 전체 폭 섹션

09

보이스와 금지 목록

• 톤 자신감 있고 권위적이며 직접적인 어조
• 헤드라인 간결하고 임팩트 있으며 혜택 중심적 (예: 'Ship faster. With trust.')
• CTA 행동 지향적이고 명확한 (예: 'Try for free', 'Request a demo')

• 저대비 텍스트를 사용하지 마세요 — 스크린샷은 최대 가독성을 위해 검정(#171321)을 흰색(#FFFFFF) 위에 선명하게 보여줍니다.
• 장난스럽거나 둥근 타이포그래피를 사용하지 마세요 — 스크린샷은 구조화된 기하학적 고딕 시스템을 보여줍니다.
• 모든 상태에 단일 색상에 의존하지 마세요 — 스크린샷은 검정과 흰색 옆에 주황색(#FC6D26) 강조를 절제 있게 사용하는 것을 보여줍니다.
• 과도한 그림자를 사용하지 마세요 — 스크린샷은 카드와 팝업에 매우 미세하고 레이어링된 상자 그림자만 사용하는 것을 보여줍니다.
• 모든 것에 엄격한 격자를 사용하지 마세요 — 스크린샷은 전체 폭 히어로 섹션을 수용하는 유연한 격자를 보여줍니다.
• 기능 하이라이트에 밝은 배경을 사용하지 마세요 — 스크린샷은 시각적 대비와 초점을 만들기 위해 어두운(#1F1C2E) 표면을 사용하는 것을 보여줍니다.
• 피하기: 맥락 없는 전문 용어
• 피하기: 지나치게 형식적인 기업 언어
• 피하기: 애매하거나 수동적인 어조

10

팩 안의 실제 스크린샷

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

11

System Prompt

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