---
version: alpha
name: Cityboat
description: Calm, precise product UI. Neutral surfaces, three bright accents.
colors:
  ink: "#18181B"
  muted: "#71717A"
  surface: "#FAFAFA"
  card: "#FFFFFF"
  border: "#E4E4E7"
  teal: "#60C0C0"
  coral: "#E0A080"
  purple: "#604080"
typography:
  h1:
    fontFamily: Hanken Grotesk
    fontSize: 1.875rem
    fontWeight: "600"
    letterSpacing: "-0.02em"
  h2:
    fontFamily: Hanken Grotesk
    fontSize: 1.125rem
    fontWeight: "600"
  body-md:
    fontFamily: Hanken Grotesk
    fontSize: 1rem
    fontWeight: "400"
    lineHeight: "1.5"
  label:
    fontFamily: Hanken Grotesk
    fontSize: 0.75rem
    fontWeight: "500"
  mono:
    fontFamily: IBM Plex Mono
    fontSize: 0.75rem
    fontWeight: "300"
rounded:
  sm: 6px
  md: 12px
spacing:
  sm: 8px
  md: 16px
  lg: 32px
components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "#FFFFFF"
    rounded: "{rounded.sm}"
    padding: 12px
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 12px
---

## Overview

Cityboat is calm and precise: a zinc neutral field, white cards, and three accents (teal, coral, purple) used sparingly, never as full-bleed rainbow UI.

People check it in a hurry, so type is large, contrast is high and every screen does one job.

## Colors

| Token | Hex | Role |
|-------|-----|------|
| Ink | #18181B | Headlines, primary buttons, wordmark |
| Muted | #71717A | Supporting copy, labels |
| Surface | #FAFAFA | Page background |
| Card | #FFFFFF | Panels, inputs, tickets |
| Border | #E4E4E7 | Card and field strokes |
| Teal | #60C0C0 | Brand accent, highlights |
| Coral | #E0A080 | Warm emphasis, charts |
| Purple | #604080 | Links, focus, dark sections |

## Typography

| Role | Face | Weight | Size |
|------|------|--------|------|
| Display / H1 | Hanken Grotesk | Semibold 600 | 1.875rem, slight negative tracking |
| Section / H2 | Hanken Grotesk | Semibold 600 | 1.125rem |
| Body | Hanken Grotesk | Regular 400 | 1rem / 1.5 |
| Labels | Hanken Grotesk | Medium 500 | 0.75rem |
| Monospace | IBM Plex Mono | Light 300 | 0.75rem (times, numbers) |

## Layout

- **Max width:** 1280px for app grids, 1024px for single-column pages
- **Cards:** 12px radius, zinc-200 border, white fill
- **One job per section:** one headline, one short line, then the content

## Components

- **Primary Button:** Ink fill, white label, 6px radius. Hover zinc-800.
- **Secondary Button:** White ground, zinc-300 border, ink text.
- **Chips:** Rounded-full. Selected = ink fill.
- **Accents:** Teal, coral or purple for small marks: dots, chart series, focus rings.

## Do's and Don'ts

- Do keep backgrounds zinc-50 and cards white.
- Do use monospace for times and numbers.
- Don't use pure black (#000000). Ink is #18181B.
- Don't use gradients, glow or emoji clusters. Content carries the page.