# Airship One Design

> Airship One UI and visual design guardrails for square-viewport composition, rem-based sizing, and 24-row text rhythm. Use when this capability is needed.

- Skill: `tomevault-io/airship-one-design` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/airship-one-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/airship-one-design/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/airship-one-design

---


# Airship One Design Skill

Use this skill whenever implementing or changing UI layout/styling.

## Design Baseline

- Entire playable composition fills the browser client area (`game-square` spans full viewport).
- No UI should live outside that full-viewport container.
- Page should naturally avoid scrollbars by layout design.

## Sizing System (Required)

- Use `rem` for sizing values in styles.
- Avoid `px` and `em` for UI sizing.
- Use runtime scale tokens set on `.game-square`:
  - `--u` for pixel-outline rhythm,
  - `--row` for 24-row vertical rhythm,
  - `--text-size` for readable baseline typography.
- Recompute these tokens on viewport resize so text stays readable as users resize browser windows.

## Typography Rules

- Target 24-row text rhythm for on-screen text layout.
- Keep text size consistent; prefer emphasis through:
  - weight (`font-weight`),
  - style (`italic`),
  - decoration (`underline`),
  - case transforms and spacing.
- Bias toward readability for older eyes: avoid tiny text defaults.
- Do not use emoji in UI copy, labels, or iconography.

## Theme Rules (Victorian)

- Support both `light` and `dark` theme modes.
- Keep palette grounded in desaturated, worn tones:
  - wood browns,
  - paper creams,
  - green velvet,
  - red velvet accents.
- Theme changes should be variable-driven (token swap), not per-component hardcoded rewrites.

## UI Placement Rules

- Overlay UI belongs in `.ui-layer` inside `.game-square` only.
- Avoid external page chrome around the full-viewport play area.
- Keep focus outlines and borders tied to `--u`.

## Top Bar Rules (Required)

- Keep a persistent full-width top bar at the top of `.game-square`.
- Left control is an SVG hamburger button for opening/closing pause/main menu overlays.
- Center content is the title text: `Airship One`.
- Right control is an icon-only SVG theme switcher (system/light/dark), no text label in button body.
- Do not add placeholder/dummy informational panels on the menu screen.

## Validation Checklist

- `./dev-test.sh` passes.
- `./dev-build.sh` passes.
- Validate visual design on the live Pages URL: `https://timelessp.github.io/airshipone/`.
- At common viewport sizes, no page scrollbars appear.
- Text remains readable and visually consistent.
- Button and panel outlines scale with `--u`.

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/timelessp) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->