---
version: alpha
name: Ghostty — dark documentation overview
colors:
  primary: '#4D5FFF'
  surface: '#0F0F11'
  text: '#F0F0F4'
typography:
  primaryRole:
    fontFamily: pretendardStdVariable, "pretendardStdVariable Fallback"
    fontSize: 35px
    fontWeight: 500
    lineHeight: 42px
  supporting:
    fontFamily: pretendardStdVariable, "pretendardStdVariable Fallback"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 22.4px
omitted:
- section: spacing
  reason: Per-reference geometry is recorded in Layout; a global spacing scale was
    not inferred.
- section: rounded
  reason: Observed shape roles are described in Shapes, without inventing a universal
    radius scale.
- section: components
  reason: The individual pattern is specified in prose, not an inferred component
    API.
---

## Overview

A dark documentation overview with persistent desktop topic navigation, onboarding actions and a small grid of featured documentation cards.

Captured from https://ghostty.org/docs at 2026-10-17T06:04:21.351944+00:00. This reference preserves the complete public page.

## Colors

Primary accent `#4D5FFF`, surface `#0F0F11` and principal text `#F0F0F4` describe visible roles. These are reference-local colors, not an exhaustive brand system. Match the screenshot where gradients or image colors differ.

## Typography

- h1 “Ghostty Docs”: pretendardStdVariable, "pretendardStdVariable Fallback"; 35px, weight 500, line height 42px.
- h2 “Get Started”: pretendardStdVariable, "pretendardStdVariable Fallback"; 25px, weight 500, line height 30px.
- h3 “Installation Instructions”: pretendardStdVariable, "pretendardStdVariable Fallback"; 18px, weight 500, line height 21.6px.
- h2 “Featured Documentation”: pretendardStdVariable, "pretendardStdVariable Fallback"; 25px, weight 500, line height 30px.
- p “Ghostty is a fast, feature-rich, and cross-platform terminal emulator
”: pretendardStdVariable, "pretendardStdVariable Fallback"; 16px, weight 400, line height 22.4px.

These are measured computed styles; rendered font availability and platform-specific fallback can affect exact glyph shapes. Do not apply the primary-role token indiscriminately to every text level.

## Layout

Use a top utility header, fixed-width left topic rail and a readable main column. Start with a breadcrumb and title/intro, then Get Started installation actions, a two-column featured-doc grid and an Edit on GitHub link. Topic groups have small disclosure chevrons.

Desktop primary image: 1440 × 1279px at a 1440px viewport and device scale 1. Mobile evidence: 390 × 844px at a 390px viewport. The primary screenshot is the complete page; mobile evidence covers only the opening 844px viewport.

At 390px the left topic rail disappears from the opening view, the global nav becomes a hamburger control and the main content uses 24px side insets. Installation buttons stack vertically. The first mobile viewport ends at the Featured Documentation heading; lower mobile grid behavior is not claimed.

## Elevation & Depth

Thin low-contrast dividers separate major content groups. A saturated blue selected topic contrasts with restrained near-black cards.

## Shapes

Small rounded topic highlights, outlined rectangular buttons and softly rounded documentation cards avoid decorative noise.

## Components

Featured categories include Keybindings, Color Theme, Configuration and Terminal API. The captured selected state is Ghostty Docs. Disclosure, menu and deep-link behavior were not tested.

## Do’s and Don’ts

Keep the reading column comfortable and active-topic contrast clear. Do not infer sidebar state persistence, search behavior or hidden mobile navigation contents.

Use only observed source content. Sizes above are measured; unquantified visual treatments are qualitative observations. No forms were submitted, accounts created, trials started or purchases made.