Ghostty — dark documentation overview
Other · Developer tools
Landing page · Developer tools
A single-screen dark terminal-emulator landing centered on a faux native terminal window with an animated ASCII globe and two understated resource actions.
Download DESIGN.md into your project and ask your coding agent to follow it alongside this reference. Review inferred values against the original before implementation.
---
version: alpha
name: Ghostty — ASCII terminal landing
colors:
primary: '#4D5FFF'
surface: '#0F0F11'
text: '#F0F0F4'
typography:
primaryRole:
fontFamily: pretendardStdVariable, "pretendardStdVariable Fallback"
fontSize: 14px
fontWeight: 800
lineHeight: 19.6px
supporting:
fontFamily: pretendardStdVariable, "pretendardStdVariable Fallback"
fontSize: 14px
fontWeight: 800
lineHeight: 19.6px
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 single-screen dark terminal-emulator landing centered on a faux native terminal window with an animated ASCII globe and two understated resource actions.
Captured from https://ghostty.org/ at 2026-10-17T06:02:53.270237+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
- p “👻 Ghostty”: pretendardStdVariable, "pretendardStdVariable Fallback"; 14px, weight 800, line height 19.6px.
- p “Ghostty is a fast, feature-rich, and cross-platform terminal emulator ”: pretendardStdVariable, "pretendardStdVariable Fallback"; 16px, weight 400, line height 22.4px.
- a “Download”: pretendardStdVariable, "pretendardStdVariable Fallback"; 16px, weight 400, line height normal.
- a “Documentation”: pretendardStdVariable, "pretendardStdVariable Fallback"; 16px, weight 400, line height normal.
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
Vertically center a 1024px-wide terminal demonstration in a dark viewport. Put a short centered product description immediately below the window, then adjacent Download and Documentation buttons. Keep the composition focused rather than adding invented marketing sections.
Desktop primary image: 1440 × 1000px 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 terminal shrinks to about 376px wide and 413px high, the descriptive sentence wraps into three lines, and both buttons remain side by side. ASCII text becomes smaller while the window chrome stays legible. Captured imagery shows one animation frame.
## Elevation & Depth
A fine outline separates the terminal from the near-black page. The charcoal native-style title bar provides the only substantial surface change.
## Shapes
Use soft window corners, small title-bar glyphs and slightly rounded outlined actions; reserve blue for ASCII outlines and the primary button border.
## Components
The terminal illustration is the core demonstration, with faux native chrome around a centered globe. Header glyph controls were not operated, and the illustration does not prove real terminal input behavior.
## Do’s and Don’ts
Preserve monospace alignment and high-contrast ASCII edges. Respect reduced motion in a reproduction; do not claim source animation timing or easing was measured.
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.
If copying fails, download the file or select the text above.
Design belongs to its original creator. Use this example for inspiration, not as a licensed template.