name: roamdesk-design
version: alpha
description: >
  Roamdesk is a dense, editorial "advisor workspace" for a luxury travel-planning
  tool, rendered on a warm cool-grey paper (#ECEEEE) in near-black ink (#1A1814).
  It reads like a printed dossier: a three-rail desktop shell (clients · timeline
  · suppliers) bordered entirely in faint ink hairlines, zero rounded corners, and
  no shadows except one tooltip. Three faces carry the whole system — Fraunces
  serif for headings and place names (often italic), IBM Plex Mono for every label,
  code, date and number, and Inter for the rare bit of UI body text. A four-colour
  category coding (blue flight, green hotel, amber dining, red activity) plus ink
  transfers runs through left stripes, dots and budget bars. Everything is small
  (9–14px), gridded, and uppercase-mono-labelled.
colors:
  # Surface
  cream: '#ECEEEE'          # page paper / app background, light text on ink
  cream2: '#DEE0E0'         # actions bar + bottom budget strip fill
  card: '#F5F6F6'           # itinerary trip-card fill
  # Ink (text + dark surfaces)
  ink: '#1A1814'            # primary text, masthead/footer fill, active rows, buttons, Transfer code
  # Brand / category voltages
  blue: '#1B2F52'           # Flight / Rail / Arrival category
  green: '#3A7A4A'          # Hotel category, confirmed status, "Conf" badge
  amber: '#9E7F4A'          # Dining category, "Build" badge, logo mark, accent on ink
  red: '#B43A2A'            # Activity category, "Urgent" badge, issues
  # Hairlines (ink at low opacity)
  hair: 'rgba(26,24,20,0.15)'   # standard 15% ink rail/divider
  hair-10: 'rgba(26,24,20,0.10)'# 10% ink dividers inside lists/cards
  hair-12: 'rgba(26,24,20,0.12)'# trip-card border
  # Text tints
  muted: 'rgba(26,24,20,0.55)'  # mono labels, secondary text on paper
  muted-light: 'rgba(240,235,224,0.6)' # muted text inside active (ink) rows
typography:
  display:
    fontFamily: "'Fraunces', serif"
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.1
  display-card:
    fontFamily: "'Fraunces', serif"
    fontSize: 14px
    fontWeight: 400
  serif-italic:
    fontFamily: "'Fraunces', serif"
    fontSize: 11px
    fontWeight: 400
    fontStyle: italic
  label:
    fontFamily: "'IBM Plex Mono', monospace"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 1.8px
    textTransform: uppercase
  mono-data:
    fontFamily: "'IBM Plex Mono', monospace"
    fontSize: 10px
    fontWeight: 400
  mono-metric:
    fontFamily: "'IBM Plex Mono', monospace"
    fontSize: 15px
    fontWeight: 400
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 13px
    fontWeight: 600
rounded:                      # almost entirely square
  none: 0px
  kbd: 3px
  full: 9999px                # only the 6px category dots
spacing:                      # 4px base unit
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
components:
  masthead:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.cream}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '0 16px'   # h-40px / 2.5rem tall, border-b hairline
  rail:
    backgroundColor: '{colors.cream}'
    borderColor: '{colors.hair}'
    rounded: '{rounded.none}'
    padding: '12px 16px'  # left 280px / right 300px, full hairline borders
  client-row:
    backgroundColor: '{colors.cream}'   # hover rgba(26,24,20,.06); active -> ink fill, cream text
    typography: '{typography.body}'
    borderColor: '{colors.hair-10}'
    rounded: '{rounded.none}'
    padding: '12px 16px'
  card-trip:
    backgroundColor: '{colors.card}'
    borderColor: '{colors.hair-12}'
    rounded: '{rounded.none}'
    padding: '10px'   # 2.5 -> 10px, with a 3px category cat-stripe down the left edge
  badge:
    backgroundColor: '{colors.amber}'   # or green / red per status
    textColor: '{colors.ink}'           # ink on amber, cream on green/red
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '2px 6px'  # text-[9px]
  btn-ink:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.cream}'
    typography: '{typography.mono-data}'
    rounded: '{rounded.none}'
    padding: '4px 10px'  # bordered, optional ti icon
  btn-outline:
    backgroundColor: '{colors.cream}'
    borderColor: '{colors.hair}'   # border-[#1A1814]/30
    textColor: '{colors.ink}'
    rounded: '{rounded.none}'
    padding: '4px 10px'
  kbd:
    backgroundColor: '{colors.cream}'
    borderColor: 'rgba(26,24,20,0.25)'
    typography: '{typography.mono-data}'  # 10px
    rounded: '{rounded.kbd}'
    padding: '1px 5px'
  dot:
    rounded: '{rounded.full}'
    # 6px circle, fill per category (blue/ink/green/amber/red)
motion:
  cards-in: 'GSAP gsap.from(.card-trip) — autoAlpha 0, y:18, duration .5s, stagger .03, ease power3.out'
  rows-in: 'GSAP gsap.from(.client-row) — autoAlpha 0, x:-10, duration .4s, stagger .04, ease power2.out'
  budget-count: 'anime.js animate value 0 -> 37165 over 1400ms ease out(3), formatted as USD on #budget-running'
  hover: 'CSS background swap on .client-row:hover and supplier rows; tooltip toggled via group-hover'
icons:
  library: Tabler Icons (webfont, ti)
  style: outline
  sizes: { xs: 10px, sm: 11px, md: 12px, lg: 13px }
  color: '{colors.ink}'   # muted (55%) in most label rows

Roamdesk

roamdesk-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Roamdesk is the back-office cockpit of "Atlas / Advisor Workspace" — a luxury travel advisor building a multi-city itinerary. The whole screen is a single non-scrolling h-screen w-screen desktop shell: a black masthead bar across the top, then three columns — a 280px Clients rail, a fluid center with trip metadata / actions / a horizontally-scrolling day Timeline / a budget strip, and a 300px Suppliers rail. The mood is editorial dossier on warm paper: the surface is a cool cream #ECEEEE, everything is inked in near-black #1A1814, and the entire layout is partitioned by 1px ink hairlines at 10–15% opacity — there are no rounded corners (except 6px status dots) and no shadows (except one dark tooltip). Type does all the talking: Fraunces serif (with ss01, frequently italic) for trip titles, hotel names and place names; IBM Plex Mono for every label, code, date, time and price; and Inter (600) for the few client names. A tight four-colour category system — blue #1B2F52 flights/rail, green #3A7A4A hotels, amber #9E7F4A dining, red #B43A2A activities, ink transfers — appears as 3px left stripes on cards, 6px dots in the legend, and stacked segments in the build-status and budget bars. Sizes run tiny (mostly 9–13px) and uppercase-mono labels with wide tracking sit above almost every value, giving the dense, ledger-like, terminal-meets-print feel.

Colors

Surface. The page paper is cream #ECEEEE, set on body and reused as the light text colour on dark fills. Two secondary surfaces: cream2 #DEE0E0 fills the actions bar and the bottom budget strip, and card #F5F6F6 fills every itinerary trip card. Ink. ink #1A1814 is the primary text colour and also the fill for the masthead, the Cmd-K footer, the active/selected client row, the btn-ink buttons, and the Transfer category. Category voltages are four: blue #1B2F52 (Flight, Rail, Arrival), green #3A7A4A (Hotel, "Conf" badge, confirmed status, success dots), amber #9E7F4A (Dining, "Build" badge, the logo mark, the accent text inside dark panels), red #B43A2A (Activity, "Urgent" badge, issues). Hairlines are ink at low alpha: hair rgba(26,24,20,.15) is the standard rail/section divider, hair-10 (.10) is for in-list and in-card dividers, hair-12 (.12) is the trip-card border. Text tints: muted rgba(26,24,20,.55) for mono labels and secondary text; inside the active (ink) row, muted flips to rgba(240,235,224,.6).

Typography

Three families, all loaded from Google Fonts: Fraunces (opsz 9–144, weights 400/500, italic) as the serif display face with font-feature-settings:"ss01"; IBM Plex Mono (400/500/600) for all labels, codes, dates and numbers; and Inter (400–700) as the UI sans, only really used at 600 for client/section names. The base body size is an unusually small 12px. There are no bespoke faces — all three are open-source Google Fonts.

Token	Size	Weight	Line-height	Tracking	Usage
display	26px	400	1.1	—	Trip title ("Hartwell in Italia")
display-card	14px	400	tight	—	Hotel / headline card names
serif-italic	11px	400 italic	—	—	Place names, subtitles, "free evening"
label	10px	400	—	1.8px (0.18em)	Uppercase mono section labels
mono-data	10px	400	—	—	Codes, dates, times, prices, legends
mono-metric	15px	400	—	—	Metadata values (12.OCT.2025, 14 D, 2 ADT)
body	13px	600	—	—	Client names, "34 trips in build"

Note the budget running total renders at 20px mono, and some uppercase labels drop to 9px with 0.18–0.2em tracking.

Layout

Base unit 4px (Tailwind scale); common steps 8 / 10 / 12 / 16 / 24px. The page is a fixed full-viewport flex column that never scrolls as a whole. Top: a 40px (h-10) ink masthead. Body: a flex row of three regions — left aside w-[280px], center main flex-1, right aside w-[300px], each separated by full-height ink hairlines. The center stacks four bands top-to-bottom: a 12-col trip-metadata grid (grid-cols-12, divided by border-l hairlines), a cream2 actions/legend bar, the flex-1 Timeline (the only horizontal scroll region: a row of fixed w-[210px] day columns with sticky headers and stacked trip cards), and a cream2 budget strip at the bottom. The signature structural move is the rigid hairline grid: every panel, day column, metadata field and table row is boxed by thin ink rules, like a printed spreadsheet. Whitespace is minimal and deliberate — this is a high-density, information-first layout.

Elevation & Depth

Essentially flat. Depth comes from hairline borders, not shadows — ink rules at 10/12/15% opacity define every edge. Dark fills (masthead, footer, active row) provide figure/ground contrast. The 3px coloured cat-stripe on each card's left edge gives a thin tab-like accent. The only real shadow in the file is the hover tooltip on the "Issue" rail card (shadow-xl on an ink panel). A subtle tick repeating-linear-gradient utility exists for faint vertical grid lines but isn't applied to a visible element in this view.

Shapes

Hard-edged by design: radius is 0 almost everywhere — every panel, card, button, badge and input is a sharp rectangle. The only exceptions are the keyboard kbd chips at a tiny 3px radius, and the 6px category dots, which are full circles (border-radius:50%). There are no pills and no soft cards.

Components

• Masthead — ink fill, cream text; left = bordered logo mark (cream square enclosing a 6px amber square) + mono uppercase wordmark "Atlas / Advisor Workspace" + version; right = sync time, advisor name, ⌘ K kbd.
• Client row — cream, 12/16px padding, hairline bottom; flag SVG + 13px Inter name + status badge; mono date range + serif-italic city list. Hover = 6% ink wash; .active = full ink fill with cream text and dimmed muted.
• Status badge — 2x6px square chip, 9px mono uppercase; amber/ink for "Build", green/cream for "Conf", red/cream for "Urgent".
• Trip card (card-trip) — #F5F6F6 fill, 12% ink border, 3px coloured cat-stripe left edge, 10px padding; mono category label + time, serif title, mono detail line, then a hairline footer with green-dot code + price. Empty slots use a dashed 2px border on transparent ("Drop component" / "Open day").
• Buttons — btn-ink (ink fill, cream text, mono) and bordered outline buttons (border-[#1A1814]/30), all square, with optional Tabler icon; small square w-7 h-7 / w-6 h-6 add (ti-plus) buttons.
• Inputs — borderless transparent text inputs with a ti-search icon and a / kbd hint (left rail), or a thin-bordered filter box (right rail).
• Tabs — mono uppercase pill-less tabs; .active = ink fill + cream text.
• Supplier item — serif name, mono meta, square add button, phone/mail icons
  • ★ rating; "already added" variant tinted green with a green check button.
• Bars — build-status and budget bars are stacked coloured flex segments with a bordered track and absolutely-positioned 9px mono captions.
• Cmd-K footer — ink panel with amber mono label, serif-italic line, two kbd chips.

Motion

On load, GSAP fades/slides the timeline cards in (autoAlpha 0, y:18, .5s, stagger .03, power3.out) and the client rows in (x:-10, .4s, stagger .04, power2.out). anime.js (v4, via esm.sh) counts the running budget total from 0 to $37,165 over 1400ms with out(3) easing, formatting it as USD live on #budget-running. Hover states are CSS-only: client-row and supplier-row background swaps, and the group-hover tooltip on the Issue card. No looping or ambient animation.

Iconography

Tabler Icons webfont (ti ti-*), outline style, loaded from jsDelivr. Used purely as small UI glyphs at 10–13px: ti-plus, ti-search, ti-clock, ti-phone, ti-mail, ti-check, ti-send, ti-map, ti-file-text, ti-filter, ti-eye, ti-layout-grid. Default colour is ink, usually rendered muted (55%) inside label rows. Country flags are separate colour SVGs from openmoji-named-svgs shown at 16x12px next to client names. Icons are functional, never decorative or oversized.

Do's and Don'ts

• Do keep everything on the warm cream paper with near-black ink and partition with thin hairlines, not boxes-with-shadows.
• Do label values with uppercase wide-tracked IBM Plex Mono, and reserve Fraunces (often italic) for names and places.
• Do code categories strictly: blue flight/rail, green hotel, amber dining, red activity, ink transfer — in stripes, dots and bars alike.
• Do keep sizes small and the grid dense; this is a pro tool, not a marketing page.
• Don't introduce rounded corners (beyond the 3px kbd and circular dots), drop shadows, or gradients.
• Don't add new accent colours outside the four category voltages.
• Don't let body text grow large or break the hairline grid.

Known Gaps

• Padding/size values are translated from Tailwind utilities (e.g. p-2.5→10px, px-4 py-3→16/12px, h-10→40px); exact pixels depend on Tailwind's default rem scale.
• Mono letter-spacing is given as 1.8px for the common tracking-[0.18em]/ tracking-wider labels; actual tracking varies (0.18em–0.2em, tracking-wider).
• The tick repeating-gradient utility is defined but not visibly applied here.
• Status-badge backgroundColor token shows amber as the default; green and red variants are noted in prose rather than separate component tokens.