---
version: alpha
name: Ghostty — native-chrome ASCII terminal panel
colors:
  primary: '#4D5FFF'
  surface: '#0F0F11'
  text: '#FFFFFF'
typography:
  primaryRole:
    fontFamily: pretendardStdVariable, "pretendardStdVariable Fallback"
    fontSize: 16px
    fontWeight: 400
  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

An isolated faux native terminal panel combining charcoal window chrome, tiny utility glyphs and a blue-and-gray animated ASCII globe.

Captured from https://ghostty.org/ at 2026-10-17T06:05:01.396417+00:00. This reference isolates `section`.

## Colors

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

## Typography

- section “👻 Ghostty

                                                           ”: pretendardStdVariable, "pretendardStdVariable Fallback"; 16px, weight 400, line height normal.
- p “👻 Ghostty”: pretendardStdVariable, "pretendardStdVariable Fallback"; 14px, weight 800, line height 19.6px.

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

Crop the terminal wrapper only, excluding the page description and download actions. Use a shallow top bar with a centered Ghostty title, small left utility mark and right window controls. Center ASCII artwork in the large dark body.

Desktop primary image: 1024 × 725px at a 1440px viewport and device scale 1. Mobile evidence: 376 × 414px at a 390px viewport. The selected element measured 1024.00 × 724.59px desktop and 376.00 × 413.00px mobile. Both crops use current document coordinates measured after a warm-up full-page screenshot; integer rounding adds at most one pixel at each edge.

The measured panel changes from about 1024 by 725px at desktop to 376 by 413px at 390px. The title shrinks from 14px to 12px and the globe’s character scale decreases; proportions remain window-like rather than retaining a fixed desktop width.

## Elevation & Depth

Use a subtle single-pixel window outline and a charcoal title bar on a near-black body. Avoid a bright elevated card shadow.

## Shapes

Rounded outer corners and tiny geometric window-control glyphs imitate native desktop chrome. ASCII art must retain monospaced spacing.

## Components

The screenshot records one frame of the animated globe. No terminal input or title-bar control behavior was tested. Keep any rebuilt animation optional and provide a static reduced-motion version.

## Do’s and Don’ts

Retain exact character spacing and the title/body separation. Do not attach page-level CTA content to this isolated panel or invent interactive terminal output.

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.