Redeye Passport

About Redeye Passport

Overview

Redeye Passport is for planning and tracking journeys on phones and laptops late at night, when the screen is the brightest thing in the room. Dark mode is the primary mode. Surfaces use the neutral ramp, a slate tinted toward the brand teal, and a single aqua accent (brand.400) marks the one main action per view. Light mode is supported and is built from the same ramps: background neutral.50, cards #ffffff, primary brand.700.

Color

Brand is an aqua-teal ramp (OKLCH hue about 170–178). Chroma peaks at brand.400–500 and tapers evenly toward 50 and 950. Neutrals sit at hue about 205 with low chroma (about 0.01–0.02), shifted toward the brand so dark surfaces carry a faint teal cast. Destructive (danger, hue about 5) is a magenta-crimson far from the teal primary (ΔE2000 > 40 in both modes). Success is a leafy green at hue about 135 and warning a clean amber at hue about 75. Warning steps 300–500 were re-saturated to remove the muddy olive mid-tones. Checked pairs: primary-foreground on primary is 5.5:1 in light and 8.0:1 in dark. muted-foreground (neutral.600 light, neutral.300 dark) is ≥ 6:1 on both background and muted. ring is 3.5:1 in light and 9.8:1 in dark against the background.

Typography

The scale is a major third (1.25) from 16px up to 24px, then a perfect fourth (1.333): 12, 14, 16, 18, 20, 24, 32, 42, 56. Familjen Grotesk sets heading-md (24px, 500) through display-lg (56px, 700). Tracking tightens with size: −0.008em at 24px, −0.015em at 32px, −0.022em at 42px, −0.03em at 56px. Rubik (400/500/600) sets heading-sm and all functional text: forms, tables, buttons, itinerary rows. Body line height is 1.5–1.6. JetBrains Mono (400/500) at code size 14px is reserved for booking references, flight numbers, coordinates and timestamps.

Layout

Comfortable density on a 4px base grid. Itinerary and map-side cards use 24px padding (space.6). Gaps between sections are 16–24px (space.4–space.6). Content columns cap at 1120px so long destination guides keep a readable measure on wide monitors. Buttons and inputs share a 40px height so they align in a row.

Elevation

Depth comes from tonal layering first. In dark mode, background is neutral.950, card and popover are neutral.900, and secondary and muted are neutral.800, each one step lighter. Borders are neutral.800, so they separate cards without adding glare. Shadows are dark and diffuse: sm for inputs, md for cards. Only shadow.lg adds a faint aqua glow, and it is limited to the hero destination card and the active map pin.

Shapes

Rounding is soft and generous: 6px (radius.sm) on checkboxes and tags, 12px (radius.md) on buttons and inputs, 18px (radius.lg) on cards, 24px (radius.xl) on hero panels. radius.full is reserved for badges and map chips. No surface uses radius.none.

Do

• Design dark mode first: background {color.neutral.950}, card and popover {color.neutral.900}, secondary and muted {color.neutral.800}. Then check light mode.
• Use primary ({color.brand.400} dark, {color.brand.700} light) for one main button per view, such as Book or Save trip. Style other actions as secondary or ghost.
• Show focus as a 2px ring in the ring token, offset 2px, on every button, input, map chip and itinerary row.
• Set Familjen Grotesk only at heading-md (24px) and above, using the weight and negative letterSpacing defined for each style (e.g. display-lg 56px/700/−0.03em).
• Set flight numbers, booking references, coordinates and times in JetBrains Mono at code (14px, 400) with tabular figures, so columns align in itinerary tables.
• Apply shadow.lg (with the aqua glow) only to the hero destination card and the active map pin.

Don’t

• Don't use brand teal for errors, cancellations or delays. Use destructive for errors and cancellations, and warning for delays and schedule changes.
• Don't use pure black (#000000) surfaces or pure white (#ffffff) text in dark mode. Use neutral.950 and neutral.50.
• Don't set more than one line of body-md or smaller on accent surfaces (brand.100 light, brand.900 dark). Keep accent for selected itinerary items and short labels.
• Don't use Familjen Grotesk below 24px or in all caps. Use Rubik heading-sm (20px, 600) for smaller headings.
• Don't use muted-foreground for text smaller than caption (12px) or for disabled-looking primary actions. Use the disabled state at 50% opacity instead.
• Don't combine shadow.md and shadow.lg on one surface. In dark mode, separate layers with neutral.950 → neutral.900 → neutral.800 first.