# GitHub Dark

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

- taxonomy: cinematic-dark · dark-native, developer-platform, green-cta, hero-gradient, glow-effects, marketing-landing · complexity=high
- page types: landing, marketing
- best for: 개발자 도구·플랫폼 마케팅 랜딩, 오픈소스 커뮤니티 히어로 페이지, 다크 네이티브 SaaS 랜딩, 임팩트 있는 제품 발표 페이지
- avoid for: 밝은 이커머스 사이트, 따뜻한 에디토리얼 블로그, 미니멀 포트폴리오, 유아/키즈 서비스
- provenance: website (GitHub · Change is constant. GitHub keeps you ahead.) — confidence: colors=computed-css, typography=computed-css, radius=computed-css, color_roles=vision-inferred, taxonomy=vision-inferred, motion=vision-inferred, dark=computed-css, light=vision-inferred

## Design rules

# GitHub Dark — Design Specification

## Overview
GitHub's homepage is a cinematic dark landing built on deep navy-black (#0d1117). Green CTAs (#2ea043) drive conversion while ambient purple/blue glow effects create dramatic hero sections. The design balances trustworthiness with visual excitement through alternating tinted sections and generous whitespace.

## Color Architecture
### Dark Mode (Canonical)
- **Canvas**: oklch(0.176 0.014 258.4) — deep navy-black
- **Card**: oklch(0.188 0.012 155.9) — green-tinted dark surface
- **CTA Green**: oklch(0.543 0.163 146) — GitHub green for buttons
- **Decorative**: oklch(0.843 0.093 234) — light blue for links and highlights
- **Hero glow**: Radial purple/blue gradient as ambient decoration

## Typography
**Mona Sans** (proprietary). Fallback: **Inter**. Hero titles go up to 4rem/600 weight with -0.03em tracking. Body is 1rem/400 with 1.6 line-height for readability.

## Layout
12-column responsive grid, 1280px max-width. Generous section gaps (80px). Hero section is full-width with floating particle effects.

## Agent Prompt Guide
> Deep navy-black canvas, green CTA buttons, ambient glow hero effects. Large bold typography, generous whitespace, alternating tinted sections.

## Known Gaps
- Mona Sans is proprietary (Inter fallback)
- Animated particle/glow effects are simplified
- Light mode is synthesized from GitHub's actual light theme colors


## Tokens (theme.css — use these values verbatim, do not re-derive)

```css
/* GitHub Dark — theme.css (generated, do not edit) */
:root {
  --radius: 12px;
  --radius-selector: 6px;
  --radius-field: 6px;
  --font-sans: Mona Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  --spacing: 8px;
  --shadow: 0px 1px 100px 0px color-mix(in oklab, oklch(0 0 0) 50%, transparent);
  --ks-display-weight: 600;
  --ks-display-tracking: -0.02em;
  --background: oklch(1.000 0.000 0);
  --foreground: oklch(0.176 0.014 258.4);
  --card: oklch(0.985 0.000 0);
  --card-foreground: oklch(0.176 0.014 258.4);
  --popover: oklch(1.000 0.000 0);
  --popover-foreground: oklch(0.176 0.014 258.4);
  --primary: oklch(0.543 0.163 146.0);
  --primary-foreground: oklch(1.000 0.000 0);
  --secondary: oklch(0.933 0.010 155.1);
  --secondary-foreground: oklch(0.300 0.010 250);
  --muted: oklch(0.933 0.010 155.1);
  --muted-foreground: oklch(0.500 0.005 250);
  --accent: oklch(0.543 0.163 146.0);
  --accent-foreground: oklch(1.000 0.000 0);
  --destructive: oklch(0.577 0.215 27.3);
  --border: oklch(0.880 0.010 250);
  --input: oklch(0.880 0.010 250);
  --ring: oklch(0.543 0.163 146.0);
}

.dark {
  --background: oklch(0.176 0.014 258.4);
  --foreground: oklch(1.000 0.000 0);
  --card: oklch(0.188 0.012 155.9);
  --card-foreground: oklch(0.933 0.010 155.1);
  --popover: oklch(0.200 0.010 258);
  --popover-foreground: oklch(1.000 0.000 0);
  --primary: oklch(0.543 0.163 146.0);
  --primary-foreground: oklch(1.000 0.000 0);
  --secondary: oklch(0.250 0.012 258);
  --secondary-foreground: oklch(0.843 0.093 234.0);
  --muted: oklch(0.250 0.012 258);
  --muted-foreground: oklch(0.600 0.010 258);
  --accent: oklch(0.543 0.163 146.0);
  --accent-foreground: oklch(1.000 0.000 0);
  --destructive: oklch(0.577 0.215 27.3);
  --border: oklch(0.300 0.010 258);
  --input: oklch(0.300 0.010 258);
  --ring: oklch(0.543 0.163 146.0);
}
```

## Golden example (exemplar.html — match this structure and token usage)

```html
<section class="hero" style="background: var(--background); color: var(--foreground); padding: 6rem 2rem; text-align: center;">
  <h1 style="font-size: 4rem; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 1rem;">The future of building<br>happens together</h1>
  <p style="color: var(--muted-foreground); font-size: 1.25rem; margin-bottom: 2.5rem; max-width: 600px; margin-left: auto; margin-right: auto;">Tools and trends evolve, but collaboration endures.</p>
  <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
    <input type="email" placeholder="Enter your email" style="padding: 0.875rem 1.25rem; border-radius: 6px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); font-size: 1rem; width: 280px;">
    <a href="#" style="display: inline-block; background: var(--primary); color: var(--primary-foreground); padding: 0.875rem 1.5rem; border-radius: 6px; font-weight: 600; font-size: 1rem; text-decoration: none;">Sign up for GitHub</a>
    <a href="#" style="display: inline-block; background: transparent; color: var(--foreground); padding: 0.875rem 1.5rem; border-radius: 6px; font-weight: 600; font-size: 1rem; text-decoration: none; border: 1px solid var(--border);">Try GitHub Copilot</a>
  </div>
</section>
```

## Apply

- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/github.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `<style>` tag and follow the exemplar's markup pattern.
- dark mode: toggle the `.dark` class (both variants are in the tokens above).
- before finishing: re-check every Don't in the Design rules section above against your output.