The Travel Tech Digital Design System.

Three alignment presets for a cover. Clean: amber eyebrow + one hook, nothing else on the art. The background texture is a parameter (swap any from the library below). The hook stays the hero, the overlay keeps it legible. Pick the alignment that should be the default.

The brand feels spacious and clean first. Color is punctuation, not decoration: roughly 65% white/neutrals, 25% dark gray, 8% teal, 2% CTA. Teal #2691A3 is the single anchor. Functional and segment colors appear only in thumbnails and badges, never in general UI.

Built on the existing color system. Two sets: directional gradients over the core colours, and on-brand graphics (network, mesh, circuit, waves) for covers and dark sections. Pick one, copy it.

Travel Tech Digital uses Open Sans for everything: headings, body, navigation, buttons, captions. Hierarchy comes from weight and size, never from a second face. Weights 300 to 800; avoid 100/200/900. A heading differs from body in at least two of: size, weight, color.

One font, used expressively. Identity stays single-font (Open Sans); range comes from weight (300 to 800), italic, underline, caps, colour (teal / amber), size jumps and position. This applies to any medium: a post, a slide, a lesson, a cover. Compose from these treatments, do not improvise a second font.

The content atoms that carry structure inside a post, slide, article or document. Markers and indices are teal, never a second color. Lists stay short and scannable: one idea per item, no buried clauses. The blockquote uses a teal rule; the pull-quote is the media variant for covers and slides.

Callout is the editorial highlight used inside an article, post or document. Four tones: teal (neutral note or core benefit), green (good practice), amber (watch out), and dark (the premium product world). It is distinct from the app Alert in section 19, which is a toast with an icon.

The expand/collapse version of the FAQ. Click a question to open its answer. CSS-only (no build) so it works live in HTML pages, presentations and lessons. For static export (PNG/PDF) it renders in its current open/closed state. The static FAQ above is for when every answer must be visible at once.

For content the reader copies: a prompt, a snippet, a template. The label says what it is, the button copies the full text to the clipboard with one click. Light for docs and articles, dark for the premium product world.

Act as a tourism marketing strategist.
Write five social hooks for a boutique hotel.
Tone: clear and grounded, opportunity not fear.
No hype, no FOMO, no em dashes.

PRESET=guide INPUT_MD=content/sample.md \
  OUTPUT=guide.html node build-doc.mjs

The signature blog block: turn the article into action. A teal-framed box with a title, a one-line setup, the ready-to-use prompt, a Copy Prompt button, and a note that it works with any AI assistant. This is the live-site pattern, now a reusable atom.

You are a tourism business strategist.
Ask me three questions about my operation.
Identify the biggest opportunity you can see.
Suggest three actions I can take this month.
Recommend one simple task I can do this week.
Keep it clear, practical and focused on execution.

A numbered index that jumps to each section. Distinct from the summary: the summary gives the key points, the contents help the reader navigate a long article. Links open the target section.

Source: platform creator guidelines, 2026 · internal By-media spec

Numbers that circulate without a primary source are kept as narrative, never stated as fact (Zero Invention).

A content-agnostic two-column contrast. Use it for tone, design, process or code: anything that teaches faster as "this, not that". The voice say/don't boxes are one application of this same atom.

Every spacing decision is a multiple of 4px. This keeps vertical rhythm consistent. Reaching for a value off the scale (20px, 45px) is a signal to revisit the layout, not to add a token. Radii are soft (4/8/12): approachable, not brutalist.

The system prefers hairline borders and whitespace over heavy shadows. Three elevation levels: a card always gets sm, a floating panel md, a modal lg. In dark mode, shadows give way to elevated borders.

Animation does one of three things: communicate state change, guide attention, or give feedback. If it does none, it is noise. Three durations only: 150 / 300 / 500ms. Hover for the curve demos. The full motion runtime arrives in Wave 5.

Content maxes at 1200px for breathing room on wide screens while keeping reading lines comfortable. Twelve columns, 24px gutter. Common spans: 12 (full), 8+4, 6+6, 4+4+4, 3+9 (sidebar).

Pick the button by the type of action, not by look. Default orange is the workhorse (80%+ of buttons). Conversion teal is the high-value commit, exactly one per page. Brand teal is for links and secondary, never transactional. Color never carries meaning alone: every button has descriptive text.

Badges communicate segment, function, or state at a glance. Segment badges use the segment color at a tint with full-color text. Status badges show dashboard state. Square badges carry inline metadata.

Three card types. Product cards group a thumbnail, segment badge, title and price. Feature cards are minimal: icon, title, description, no shadow. All cards lift 2px on hover with a shadow upgrade.

Inputs are 44px tall with a hairline border and a teal focus ring. Labels sit above the field in semibold. Error state turns the border red with a message below. Checkboxes and radios fill teal when active.

Icon (globe + AI circuit) always sits left of the wordmark. "TRAVEL TECH" dominant, "DIGITAL" in teal. Four variations cover light, dark, favicon, transparent. Minimum clear space equals one icon height on every side. Never recolor, rotate, stretch, or box the logo.

Horizontal · light

Horizontal · dark

Favicon · icon only

One line style: 24px grid, 2px stroke, round caps and joins, drawn with currentColor so an icon inherits teal, amber or white from its context. Scalable SVG for buttons, lists, feature blocks, slides and lessons. Two vocabularies: core (AI and operations) and tourism.

Source: Lucide (MIT, lucide.dev). Real library icons embedded as inline SVG, not redrawn. Pick the Lucide name when you need one not shown here.

We sell opportunity, not fear. Friendly, clear, grounded, conversational. No hype, no guru talk, no FOMO. Line breaks as pauses. No em dashes: real people do not write with them, and they are the clearest "AI wrote this" tell.

Fifteen diagram formats for when a post, slide, article or document needs to show a process, a choice or a journey. Sober editorial language: ink line work, the teal accent kept rare for focus, colour only where it carries meaning. Each node can carry a title and a one-line subtitle, each figure an italic gloss and a one-line synthesis. All static on-brand SVG: zero library, zero interactivity, renders crisp to PNG, shown here full width as it appears in real material.

Big numbers carry the headline metric. One number per card, a short label above, context below. Tabular numerals keep figures aligned. Use the dark accent card to spotlight the single most important number on a page.

Charts are SVG and CSS, zero dependencies, vector-crisp in slides, PDF and web. The brand teal leads; the orange CTA color is the contrast pair. Functional/segment colors only when the data is segment-coded.

Radar compares a subject across dimensions. Heatmap shows a matrix at a glance (teal scale = intensity). Gauges read readiness or score, color-coded by threshold.

Built on the same zero-dependency SVG approach as the charts above, so every one renders crisp in slides, PDF and PNG. The technique is reconstructed on-brand from Chart.js (data-labels on every series) and TradingView lightweight-charts (candlestick, area). For live, interactive charts in an app, see the charts playground (Chart.js + lightweight-charts, real libraries).

Tables use a tinted header, hairline row separators (no vertical borders), and a teal hover wash. Number and currency columns are right-aligned with tabular figures in Open Sans, the single brand font. Comparison tables spotlight the recommended column with a teal tint.

Evidence components for audit reports and dashboards. Risk register pairs each risk with likelihood and impact pills. Quality gates show pass/warn/fail verdicts. Low-key by default, color only on the state.

Tabs switch between views in the same context: a teal underline marks the active one. Segmented controls are a compact choice for 2 to 4 mutually exclusive options. The toggle is a single on-off switch. All work live in HTML (interactive presentations, lessons, dashboards) and render in their current state for static export.

Alerts are inline, persistent messages with a semantic left rule. Toasts are transient, float over content on a dark surface, and auto-dismiss. Color comes from the semantic status system, never decorative.

Empty states guide the next action, never leave a blank screen. For loading, prefer skeleton screens that match the real layout (shimmer left-to-right at 1.5s) over spinners. Spinners only where a skeleton would be too complex.

Modals interrupt for one focused decision: a scrim with blur, a centered card with soft corners, actions bottom-right (primary last). The command palette is the keyboard-first launcher: fuzzy search, grouped results, teal active row.

Two interactive atoms for teaching content: a diagnostic quiz with per-answer feedback that locks once answered and scores at the end, and a process simulator that steps through a scripted loop with real brakes (turn limit, budget ceiling). Both are vanilla JS, theme-bound, and reusable across post, article and course material.

A single script (ttd-motion.js) materialises the motion specs as live behaviour. Attach a pattern with a data-attribute, no config. The scroll-progress bar at the very top of this page is the runtime too. Everything collapses to instant under prefers-reduced-motion. Press replay to re-trigger the scroll reveals.

The product ships in seven languages. Six are left-to-right; Arabic is right-to-left and the most demanding case, so preparing for AR covers every switch. Use the language switch in the header to flip the whole page: watch the layout mirror, the font become Noto Sans Arabic, and the accents move to the inline-start side. The rule: never hardcode left/right, use logical properties (margin-inline, text-align:start). This applies across the storybook, the shadcn product components, the slides, and Remotion video.

Animation scales in three tiers; always reach for the cheapest that delivers. All of them read the same timing tokens (tokens.motion.js): the same durations and easings power web, decks and Remotion video, so the brand moves the same everywhere.

Every piece type, built on the same tokens. Three families: slides (present or explore), documents (proposal to media kit, markdown → PDF), and social (fixed-canvas → PNG). Click any card to open the live example. All are multilingual and RTL-ready, with the brand guardrails baked in (em-dash sanitizer, amber eyebrows, logo per context).

One engine (documents/build-doc.mjs), five presets. Outputs are generated on demand (not committed). Build any preset from the terminal:

# proposal · report · guide · sop · media-kit
PRESET=guide INPUT_MD=content/sample-guide.md \
  OUTPUT=guide.html node build-doc.mjs
node render-pdf.mjs guide.html guide.pdf