Baseline Design & Engineering Conference

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

# Baseline — Design & Engineering Conference Template

A premium multi-page website template for a fictional two-day design & engineering conference, built in a bold **Neo-Brutalist** design system. Tailwind CSS (via CDN) + vanilla HTML + scoped vanilla JS. No frameworks, no build step, no local asset directories.

Brand used in the template: **Baseline** — a fictional conference in Lisbon, May 14–15, 2026.

## Design language

Neo-Brutalism — the polar opposite of a soft-glass SaaS template:

- Cream paper background (`#FFFDF5`) with near-black ink (`#111111`)
- Hard `border-2 border-black` hairlines everywhere
- Offset drop shadows `shadow-[8px_8px_0_0_#000]` that "press down" on hover
- Flat bright accents: yellow `#FFE600`, pink `#FF4FA3`, lime `#00E676`, cyan `#00C2FF`
- Archivo display type + JetBrains Mono for labels and numbers
- Generous spacing, sharp corners, oversized headlines
- Press-down hover on buttons/cards (translate + shadow shrink)

## Structure

```
baseline-conference/
├── pages/
│   ├── index.html          # Home: hero, stats, tracks, speakers preview, schedule teaser, sponsors, register CTA
│   ├── speakers.html       # Speakers hero, track filter chips, speaker grid (scoped JS filter)
│   ├── schedule.html       # Two-day schedule with day tabs + session cards (scoped JS tabs)
│   ├── venue.html          # Venue hero, CSS map illustration, venue info, travel & accessibility
│   ├── register.html       # Ticket tiers, order summary, registration form with validation
│   └── conduct.html        # Code of conduct: long-form article with quick-nav
├── preview.html            # Template gallery shell: overview + pages index + design-system summary
├── metadata.json
└── README.md
```

No `assets/`, `css/`, `js/`, or `images/` directories — all visuals are Tailwind, inline SVG, and CSS shapes. Avatars are initials in colored blocks.

## Pages

| # | Page | Purpose |
|---|------|---------|
| 01 | Home | Full landing: hero, stats, tracks, speakers preview, schedule teaser, sponsors, CTA |
| 02 | Speakers | Track filter chips + responsive speaker grid |
| 03 | Schedule | Day 1 / Day 2 tabs + session timetable |
| 04 | Venue | CSS map illustration, venue details, travel & accessibility |
| 05 | Register | Ticket tiers, order summary, validated registration form |
| 06 | Code of Conduct | Long-form policy article with quick-nav |

## Responsiveness

Mobile-first, tested from 320px through 1920px+. Fluid type via Tailwind responsive prefixes, responsive nav (hamburger → mobile menu below `lg`), grids that reflow (`grid-cols-1 sm:grid-cols-2 lg:grid-cols-3/4`), schedule that stacks on mobile, forms that stay usable on small screens. No horizontal overflow.

## Accessibility

Semantic landmarks (`header`, `nav`, `main`, `footer`), ARIA on the mobile menu and schedule tabs (`aria-expanded`, `role="tablist"`, `role="tab"`, `role="tabpanel"`), visible focus rings, `sr-only` labels on icon-only controls, and a `prefers-reduced-motion` guard that disables hover press animation.

## Usage

Open any page in `pages/` directly in a browser. All links use relative paths so the template works from the file system. Tailwind is loaded via CDN — no install required.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

# AGENTS.md — Baseline Conference

Guidance for an AI agent adapting this template. Read this before editing.

## What this template is

A premium multi-page website template for a fictional two-day design & engineering conference (**Baseline**, Lisbon, May  ́14–15, 2026), built in a bold **Neo-Brutalist** design system. Tailwind CSS (via CDN) + vanilla HTML + scoped vanilla JS. No frameworks, no build step, no local asset directories.



## Design system

Neo-Brutalism — the polar opposite of a soft-glass SaaS template: cream paper background (`#FFFDF5`), near-black ink (`#111111`), hard `border-2 border-black` hairlines, offset drop shadows `shadow-[8px_8px_0_0_#000]` that "press down" on hover, flat bright accents(yellow `#FFE600`, pink `#FF4FA3`, lime `#00E676`, cyan `#00C2FF`), Archivo display type + JetBrains Mono for labels/numbers, sharp corners, oversized headlines, press-down hover on buttons/cards (translate + shadow shrink).



## File layout

```
baseline-conference/
├── pages/
│   ├── index.html        # Home: hero, stats, tracks, speakers preview, schedule teaser, sponsors, CTA
│   ├── speakers.html     # Track filter chips + speaker grid (scoped JS filter)
│   ├── schedule.html     # Two-day schedule with day tabs + session cards (scoped JS tabs)
│   ├── venue.html        # CSS map illustration, venue info, travel & accessibility
│   ├── register.html     # Ticket tiers, order summary, validated registration form
│   └── conduct.html      # Code of conduct: long-form article
├── preview.html          # Template gallery shell
├── metadata.json
└── README.md
```

No `assets/`, `css/`, `js/`, or `images/` directories — all visuals are Tailwind, inline SVG, and CSS shapes. Avatars are initials in colored blocks.



## How to adapt it

1. **Swap the event**: replace the Baseline branding, dates, speakers, schedule slots, sponsors,and copy across the pages.
2. **Re-theme**: edit the color values in each page's inline `tailwind.config` (cream, ink, accent ramp), keeping the hard border + offset shadow geometry.
3. **Add a page**: duplicate a `pages/*.html`, keep the shared navbar + footer,and swap the `<main>` content. Register it in `preview.html`'s page index.



## Do not

- Do not introduce a framework or a build step. Tailwind CDN + vanilla JS only.
- Do not soften the Neo-Brutalist geometry (hard 2px borders, offset shadows, press-down hover) — it is the design language.
.


## Quality bar

Semantic landmarks (`header`, `nav`, `main`, `footer`), ARIA on the mobile menu and schedule tabs (`aria-expanded`, `role="tablist"`, `role="tab"`, `role="tabpanel"`), visible focus rings, `sr-only` labels on icon-only controls, `prefers-reduced-motion` guard that disables hover press animation. Validate with `python3 scripts/tooling/validators/validate.py` after changes.