🎨 Setup flow, design system, and output

A visual generation skill loads a built-in design system: color tokens, a type scale, and a component library. These three pillars combine to produce every block on the page. The diagram shows how the parts of the design system converge in the output.

The skill doesn’t say "use pretty colors." It embeds a block :root with named CSS variables: backgrounds, translucent surfaces, borders, and five accents with distinct meanings — blue (primary), orange (return/warning), green (confirmed), lavender (connection), and gold (event/VIP). Each accent has a matching "glow".

:root {
  --bg: #06060a;               /* deep space black */
  --surface: rgba(255,255,255,0.05);
  --border: rgba(255,255,255,0.07);
  --accent: #5ad1ff;          /* sky blue — primary */
  --orange: #ff7a59;          /* returns / warnings */
  --green:  #7dffaa;          /* confirmations / go */
  --purple: #c084fc;          /* transit / layovers */
  --gold:   #fbbf24;          /* events / VIP */
  --radius: 16px;
}

The skill defines an explicit type scale: Inter for text (weights 300–900), one font mono for timings and codes, and sizes by role — responsive hero via clamp(), section headings, body text, and uppercase labels with letter spacing.

This is the largest section of the design system: twelve components, each described with its anatomy — what it contains, how it behaves on hover, when it expands. Hero, event banner, flight cards, day selector + schedule, hotel, pet care, SVG route map, stats bar, budget, checklists, navigation footer, and theme toggle.

The skill includes a table that maps meaning → color. The tags are uppercase pills with a translucent background in the corresponding color. It’s the “color-code everything” principle turned into a concrete rule: you can tell a flight’s status by its color alone, without reading the text.

.tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  padding: 3px 8px;
  border-radius: 999px;   /* pílula */
}

The visual effects are what take the page out of the "document" zone: orbs (fixed radial blurs in the background), glassmorphism (backdrop-filter blur + inner border), shimmer in the banners, hover-lift in the cards and the contrail animated from the airplane. Below is a mockup of the result — an illustrative recreation, not a real screenshot.

The final piece of the design system is the JavaScript patterns. They turn the page from static to live: day-to-date switching with a data attribute, a flight accordion with a max-height transition, checklists that save in localStorage, a persisted theme toggle and automatically calculated progress bars.

// item da checklist salva estado por viagem
function toggle(item, tripKey) {
  item.classList.toggle('done');
  const done = [...document.querySelectorAll('.done')]
    .map(el => el.dataset.id);
  localStorage.setItem(tripKey, JSON.stringify(done));
  updateProgress();   // recalcula a barra
}
// ao abrir: restaura o que estava marcado
const saved = JSON.parse(localStorage.getItem(tripKey) || '[]');