Skip to content
StrictThemes

Themes / 15

Passage

A clear, airy theme for travel and booking. Pale-water paper, deep navy ink, and one hue of blue from light to dark.

Install into a shadcn project
npx shadcn@latest add https://strictthemes.com/r/passage.json

01 / Preview

Stock shadcn components, this theme.

Passage

Ship the page, keep the system.

Every color, corner and typeface in this box comes from the theme's tokens. The components are stock shadcn.

NewDraftv1.2.0Failed
Invite a reviewer
They get read access to this project.
Colors on token96%
x
Spacing on scale88%
x
Type on scale100%
x

02 / Page prompts

Paste one into your agent. Get that page.

Each prompt is a full brief for one page in this theme: its sections, layout, behavior, and a checklist the agent goes through before it says it is done. The rules in every prompt are generated from the theme's strict block. Each preview is the page built from the prompt, shown as it came out.

  • Search

    The home page of a ferry line, with a journey search form in a white card on the page, popular routes with their fares, and three reasons to sail with the line.

    42.5k characters

    Strict Check 100%

    Preview the Search pageRead the prompt: Search

  • Results

    The sailings for one route and day, with a summary of the search, a list of journeys that can be sorted, each with its times, duration, state and fare, and a summary of the chosen sailing.

    40.9k characters

    Strict Check 100%

    Preview the Results pageRead the prompt: Results

  • Passenger details

    The step before payment in a ferry booking, with each passenger's details and the extras in white cards, a fare summary beside them on a wide screen, and checks in code.

    41.9k characters

    Strict Check 100%

    Preview the Passenger details pageRead the prompt: Passenger details

  • Ticket

    The confirmation of a ferry booking, with a boarding pass as a ticket card with a dashed tear line, the booking reference, the journey, the passengers, a drawn boarding code and what to bring.

    40.8k characters

    Strict Check 100%

    Preview the Ticket pageRead the prompt: Ticket

  • Departures

    A live departures board for one ferry port, with a notice about a cancelled sailing, a table of the day's sailings with time, destination, ship, berth and state, a destination filter, and the port's practical details.

    40.6k characters

    Strict Check 100%

    Preview the Departures pageRead the prompt: Departures

03 / Colors

Every color the theme allows.

  • primary

    #023E8A / #48CAE4

  • on-primary

    #FFFFFF / #03045E

  • secondary

    #03045E / #CAF0F8

  • on-secondary

    #CAF0F8 / #03045E

  • tertiary

    #00B4D8

  • on-tertiary

    #03045E

  • neutral

    #35527A / #90E0EF

  • background

    #CAF0F8 / #02033B

  • surface

    #FFFFFF / #03045E

  • foreground

    #03045E / #E6F8FC

  • border

    #90E0EF / #023E8A

  • error

    #B3261E / #FF9B93

  • success

    #0B6B4F / #6FD9B4

Left: light mode. Right: dark mode.

04 / Typography

Five sizes. Nothing in between.

  • display

    Overpass · 56px · weight 800 · line 1.05

    The quick brown fox

  • h1

    Overpass · 36px · weight 800 · line 1.15

    The quick brown fox

  • h2

    Overpass · 24px · weight 700 · line 1.25

    The quick brown fox

  • body

    Karla · 16px · weight 400 · line 1.55

    The quick brown fox

  • label

    Overpass Mono · 12px · weight 500 · line 1.3

    The quick brown fox

05 / Shape and space

Corners and spacing.

  • sm

    6px

  • md

    10px

  • lg

    18px

  • xs

    4px

  • sm

    8px

  • md

    12px

  • lg

    20px

  • xl

    32px

  • 2xl

    64px

06 / Rules

What the strict block enforces.

Contrast
WCAG AA
Colors
Tokens only, within 0.02 of a token
Spacing
Scale only, plus 0, 1px, 2px
Corners
Scale only, full rounds up to 64px
Type
Scale only, declared fonts only
purple gradient
Not allowed
emoji icons
Not allowed
nested cards
Flagged
glow shadows
Not allowed

07 / Guidance

What your agent reads.

Overview

Passage is for getting people from one place to another: a ferry line, an airline, a rail operator, a tour company, a hotel's booking pages. It borrows from departure boards and boarding passes. The page is pale water, cards are white, and every color on it is one blue at a different depth.

Colors

  • Primary (#023E8A) is deep sea blue, for the one main action on a screen: "Search", "Continue", "Pay". Links in running text use it too.
  • Secondary (#03045E) is navy ink for secondary buttons and headings.
  • Tertiary (#00B4D8) is bright cyan, with navy text on it, for one badge: "Direct", "Lowest fare", "Boarding".
  • Neutral (#35527A) sets times of day, fare rules and captions.
  • Background (#CAF0F8) is pale water. Surface (#FFFFFF) is the white of a card or a ticket.
  • Success (#0B6B4F) marks "On time" and "Confirmed", always with the word. Error (#B3261E) is for "Cancelled" and form errors, always with a message.

Typography

Overpass sets headings: it was drawn from road signs, and reads at a glance. Karla sets body text at 16px. Overpass Mono sets labels: times, port and airport codes, booking references, seat numbers, prices. Times and prices use tabular figures, and a time is always written in 24 hours.

Layout

A 12-column grid, 1120px at its widest, with 20px gutters. A booking page is one column of white cards on the water, with a summary beside it on a wide screen. Spacing comes from the scale (4, 8, 12, 20, 32, 64): 20px inside a card, 64px between sections. A journey is always read left to right: where from, when, where to.

Elevation & Depth

Flat. A white card on the pale page needs no shadow, only its 1px border. A ticket is a card with one dashed rule where it would tear. Menus and dialogs float on one short, blue-tinted shadow.

Shapes

Rounded like a boarding pass: 6px for badges and checkboxes, 10px for buttons and inputs, 18px for cards and tickets. Avatars and switches are fully round.

Components

  • Buttons: deep blue for the one main action, navy for the rest. Sentence-case mono labels.
  • Cards: white, 18px corners, 20px padding, a 1px border.
  • Badges: cyan with navy text, one or two words.
  • Journeys: a mono time and a place on the left, the same on the right, and a 1px line between them with the duration above it.
  • Icons: 1.5px stroke line icons. Never emoji.

Do's and Don'ts

  • Do keep to the one hue: depth of blue is how this theme says what matters.
  • Do give a state a word as well as a color: "On time", "Delayed 20 min".
  • Do put the price where the eye ends its line, on the right, in mono figures.
  • Don't add a second accent color, a gradient or a photograph behind text.
  • Don't write a time without its place, or a price without its currency.
  • Don't introduce a color, size or radius that is not a token above.