Event Landing Page

Build a complete landing page for "Signal 27", a two-day, single-track front-end conference in Lisbon. Match my project's existing stack, conventions, and design tokens. If there are none, output a single HTML file with inline CSS and a small amount of JavaScript, with zero dependencies.

The goal: loud, confident color blocking. Cobalt, cream, and ink in full-bleed bands, enormous uppercase type, square corners, and a rotating sticker. It should feel like a gig poster, not a SaaS page.

TOKENS
- Colors: cobalt #1F3BFF, cream #F4F1EA, ink #0E0E10, sand #E3DCCB, coral #FF7A59, cream muted rgba(244, 241, 234, 0.72), ink muted #55534E, cream hairline rgba(244, 241, 234, 0.16), ink hairline rgba(14, 14, 16, 0.14).
- Font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif. Display: weight 800, uppercase, letter-spacing -0.04em. Body: weight 400 to 600. All numbers tabular.
- Container: max-width 1240px, centered, horizontal padding clamp(20px, 4vw, 40px).
- Corners: 0 everywhere except pill buttons (999px) and the round sticker.
- Buttons: pill, 15px weight 700, padding 14px 22px. Solid variant and 2px outline variant, colors per band. Focus ring 3px coral, offset 3px.

1. TOP BAR (cobalt band, cream text, height 72px)
- Left: wordmark "SIGNAL 27" 18px weight 800 letter-spacing -0.02em.
- Center: "June 3–4, 2027 · Lisbon" 14px cream muted (hidden under 900px).
- Right: links Speakers, Schedule, Tickets (15px weight 600, 24px gap; hidden under 760px), then a solid cream pill "Get tickets" with cobalt text (14px, padding 10px 18px).

2. HERO (same cobalt band, padding 48px 0 96px, position relative, overflow hidden)
- Kicker: "June 3–4, 2027 · LX Factory, Lisbon" 14px weight 600 uppercase letter-spacing 0.14em cream muted.
- h1, 20px below, two lines: "SIGNAL" in solid cream, then "27" as an outline: fill it with cobalt (the background color), add a 4px cream -webkit-text-stroke, and set paint-order: stroke fill. The fill covers the inner half of the stroke and any overlapping contours inside the glyphs, leaving a clean 2px outer outline. Never use a transparent fill here; system fonts build some numerals from overlapping shapes, and the stroke would trace those overlaps. clamp(88px, 19vw, 300px), weight 800, line-height 0.82, letter-spacing -0.06em.
- Sticker: a 168px cream circle, absolutely positioned at top 48px and right max(20px, 4vw), rotated by a CSS animation 360deg over 24s linear infinite. Inside, an SVG with a circle path and textPath text "ONE TRACK · 24 TALKS · 600 PEOPLE · " in cobalt 13px weight 800 letter-spacing 0.12em, and a centered static 40px cobalt "↘" that does not rotate (put it outside the rotating element). Give the textPath textLength="400" and lengthAdjust="spacing" so the phrase closes the circle exactly. Under 760px the sticker is 112px; the SVG scales with it.
- 48px below the h1, a two-column row (1.2fr / 1fr, 48px gap; stacked under 860px), aligned to the bottom:
  - Left: "Two days, one track, 24 talks on building interfaces people love. No sponsor talks. No parallel sessions. Just the room." 20px line-height 1.5 cream, max-width 44ch. Then 28px below, a solid cream pill "Get tickets" (cobalt text) and an outline cream pill "See the schedule", 12px gap.
  - Right: a countdown, role="timer", aria-label "Time until Signal 27 opens". Four equal cells with a 1px cream hairline on top and 14px padding-top: a value clamp(36px, 4.4vw, 56px) weight 800 tabular line-height 1, and a label 11px weight 600 uppercase letter-spacing 0.12em cream muted, 8px below. Labels: Days, Hours, Minutes, Seconds. Values are two digits (days may be three).
- Countdown JavaScript: target is 2027-06-03 at 09:00 Lisbon time, which is Date.UTC(2027, 5, 3, 8, 0, 0). Update every second with textContent. When the time has passed, show 00 in every cell and change the kicker to "Happening now · LX Factory, Lisbon". Stop the interval when the tab is hidden and restart it on visibilitychange.

3. SPEAKERS (cream band, ink text, padding 112px 0)
- Header row, space-between, aligned to the baseline: h2 "SPEAKERS" clamp(48px, 8vw, 112px) display style line-height 0.9; on the right "More announced in March" 15px ink muted.
- 48px below, a grid of 8 speakers: 4 columns, 32px column gap, 48px row gap (2 columns under 860px).
- Each speaker: a square portrait block (aspect-ratio 1) with the person's initials centered at 30cqw weight 800 letter-spacing -0.05em (the block is a container), then the name 18px weight 700 14px below, then the role 15px ink muted 4px below.
- Portrait colors cycle: 1 cobalt with cream initials, 2 ink with cream, 3 sand with ink, 4 coral with ink, then repeat.
- Every portrait has a subtle diagonal texture: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 10px) over its color. On hover the initials shift up 4px (200ms).
- People: Ines Duarte, Design Engineer at Halcyon / Kofi Mensah, Staff Engineer at Parallel / Hana Sato, Type Designer at Moji Type / Ada Novak, Accessibility Lead at Kite / Marcus Lind, Creative Technologist at Northwind / Priya Raman, Staff Engineer at Northwind / Tomás Ribeiro, Founder of Ostra Labs / Leo Fischer, Motion Designer at Lumen.

4. SCHEDULE (ink band, cream text, padding 112px 0)
- h2 "SCHEDULE" same size as SPEAKERS.
- 40px below, a tab list (role="tablist", aria-label "Conference days") with two tabs: "Day 1 · Thu June 3" and "Day 2 · Fri June 4". Tabs are pills, 15px weight 700, padding 12px 20px, 8px apart. Selected: cream background, ink text. Unselected: transparent with a 2px cream hairline border, cream text. Full keyboard support: Left and Right arrows move between tabs and select them, Home and End jump to the first and last, roving tabindex, aria-selected, aria-controls, and the panels use role="tabpanel" with aria-labelledby and hidden.
- Each panel is a list of rows, 32px below the tabs: a grid of 120px / 1fr / auto (time / title / speaker), 24px gap, padding 22px 0, 1px cream hairline on top of each row. Time 15px tabular cream muted; title clamp(18px, 2vw, 24px) weight 600; speaker 15px cream muted, right aligned. Break rows (Doors, Coffee, Lunch, Party) show the title in cream muted weight 400 and no speaker. Under 600px the speaker drops under the title (grid 72px / 1fr).
  Day 1: 09:00 Doors and coffee / 09:45 The interface is the product, Ines Duarte / 10:30 Variable fonts in production, Hana Sato / 11:30 Coffee / 12:00 Motion with meaning, Leo Fischer / 13:00 Lunch / 14:30 Accessible by default, Ada Novak / 15:30 Design systems at scale, Kofi Mensah.
  Day 2: 09:30 Coffee / 10:00 The browser is a canvas, Marcus Lind / 11:00 Performance is a feature, Priya Raman / 12:00 Lunch / 13:30 Small teams, big products, Tomás Ribeiro / 14:30 What we'd build next, All speakers / 16:00 Closing party.

5. TICKETS (cream band, ink text, padding 112px 0)
- h2 "TICKETS" same size, then 48px below three cards in a row (stacked under 860px), 20px gap, each with a 2px ink border, padding 32px, flex column, square corners:
  - "Early bird": name 15px weight 700 uppercase letter-spacing 0.08em; price "€290" clamp(48px, 5vw, 64px) weight 800 with a 4px ink line-through; a coral "Sold out" tag (13px weight 800 uppercase, ink text, coral background, padding 4px 10px) beside the name; includes list; no button, the whole card at 0.55 opacity.
  - "Standard" (featured): cobalt background, cream text, cobalt border. Price "€390". Solid cream pill "Buy standard" (cobalt text) at the bottom.
  - "Team": price "€330" with "/ person" 16px weight 600 ink muted; a line "5 or more tickets" 15px ink muted; solid ink pill "Buy for your team" (cream text).
  - Includes list on every card, 24px below the price, 15px, 10px row gap, each row starting with a 6px square bullet in currentColor: "Both conference days" / "Lunch and coffee" / "Closing party". Buttons sit at the bottom with margin-top auto, 28px above.

6. FOOTER (cobalt band, cream text, padding 96px 0 40px)
- "SEE YOU IN LISBON." clamp(48px, 10vw, 152px), display style, line-height 0.86.
- 64px below, a row with a 1px cream hairline on top and 20px padding-top, space-between, wrapping, 14px: "© 2026 Signal Conference" cream muted, and links Code of conduct, Travel, Contact (24px gap).

MOTION
- Hero: kicker, h1 lines, and the two-column row fade in and rise 20px, 800ms cubic-bezier(0.2, 0.7, 0.2, 1), staggered 90ms. The sticker spins continuously.
- Everything else is still. No scroll-triggered animation.
- prefers-reduced-motion: no entrance, no sticker spin, no hover shift. The countdown keeps updating (it is information, not decoration).

ACCESSIBILITY
- One h1 ("SIGNAL 27", with an aria-label so it reads as "Signal 27"). Band headings are h2s; speaker names and ticket names are h3s.
- Uppercase is CSS text-transform where the source text is in sentence case, except the h1 and the band headings, which are typed in capitals.
- The sticker is aria-hidden. Initials portraits are aria-hidden; the names are real text.
- Cream on cobalt and cream on ink both pass 4.5:1. Coral is only used with ink text on it.

NEVER
- Rounded cards, drop shadows, gradients (other than the portrait texture), or glassmorphism.
- Stock headshots, illustrations of people, emoji, or sponsor logo walls.
- A purple, teal, or second blue accent. Coral only for the sold-out tag, the focus ring, and the fourth portrait color.
- Lorem ipsum or em dashes in the copy.