← Back to the library

Landing page · Developer tools

Ghostty — ASCII terminal landing

Sign in to save

A single-screen dark terminal-emulator landing centered on a faux native terminal window with an animated ASCII globe and two understated resource actions.

Visit original website ↗Captured Oct 17, 2026 · 1440px wide

Build with this design

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.

Download DESIGN.md ↓
View DESIGN.md
---
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.

Full screenshot of Ghostty — ASCII terminal landing

Design belongs to its original creator. Use this example for inspiration, not as a licensed template.

A little more taste in your inbox.

A weekly selection of standout designs, useful UI elements, and fresh inspiration from TastefulKit.