styles
← 갤러리

GitHub Dark

딥 네이비(#0d1117) 위에 그린 CTA(#08872b)와 보라 글로우가 어우러진 개발자 생태계의 대표 다크 랜딩 — 신뢰감과 활력이 공존한다.

cinematic-dark dark-nativedeveloper-platformgreen-ctahero-gradientglow-effectsmarketing-landing
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

GitHub 홈페이지에서 추출한 다크 네이티브 마케팅 랜딩. 네이비 블랙(#0d1117)이 캔버스이고, 그린(#08872b→#2ea043)이 CTA와 브랜드를 담당하며, 보라/블루(#8dd6ff)가 장식 글로우로 쓰인다. 히어로 타이포는 화이트에 대형(48px+), body는 회색(#8b949e). 하단 섹션은 그린 틴트(#0f1511)로 변주한다. 라이트 모드는 GitHub의 실제 라이트 테마(화이트+파란 링크)를 기반으로 합성했다.

타입 스케일

hero Ag 스타일 견본 Style Specimen
h1 Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
h3 Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
caption Ag 스타일 견본 Style Specimen

골든 예제 (exemplar)

The future of building
happens together

Tools and trends evolve, but collaboration endures.

Do

  • Use deep navy-black (#0d1117) as base
  • Green for CTAs and success states only
  • Add ambient glow effects to hero sections
  • Use large, bold serif-less typography with tight tracking
  • Alternate section backgrounds with subtle color tints

Don't

  • Don't use pure black — keep the navy tint
  • Don't overuse the decorative glow — keep it to hero
  • Don't make body text pure white — use muted grey for readability
  • Don't skip the green CTA — it's essential to the brand identity

컴포넌트 노트

button
Rounded (6px), green primary (#2ea043) with white text, white outline ghost variant. Hover darkens/lightens.
card
Dark surface (12px radius), subtle glow on hover. Often contains code snippets or product screenshots.
input
Rounded field with dark bg, lighter border on focus.
nav
Top fixed nav with transparent bg, blurs on scroll.