# Meridian prototype, design system and build notes

Static marketing-site prototype. Plain HTML5, vanilla CSS custom properties,
vanilla JS. No framework, no build step, no package manager.

Run it: `python3 -m http.server 8000` from this folder, open
`http://localhost:8000`.

Everything below reflects the build as it stands. It supersedes any earlier
brief. Where the live site (meridianworkspaces.com) and the original spec disagree, the
resolution is recorded under **Open questions**.

---

## 1. Brand palette

Sampled directly from the logo file (`assets/logo/meridian-mark.svg`). These four
are the entire palette. The mark is mostly ink with a coral eastern half, and the
site is built to roughly that same ratio.

| Token | Hex | In the logo | Used for |
|---|---|---|---|
| `--ink` | `#14161C` | ring and wordmark | all text, dark sections, footer |
| `--coral` | `#FF7A5C` | eastern half | primary CTA fill, accent rules, chips, highlights |
| `--amber` | `#F79E4B` | warm longitude | hover states, Singapore branch colour |
| `--sky` | `#8FB8FF` | cool longitude | Copenhagen branch colour, link underlines, washes |

`--sunflower`, `--ember` and `--teal` survive as aliases of `--coral`, `--amber`
and `--sky` so the component layer did not need a 2,000-line rename. New work
should use the names in the table.

### The one rule that matters

**Coral, amber and sky are fills, strokes and shapes. They are never text
colour on a light background.** All three fail WCAG AA as text on paper
(2.30:1, 1.89:1, 1.80:1 respectively).

When you want a coloured accent carrying words, invert it: put `--ink` text on
a solid accent fill. Ink on coral is 7.05:1, ink on amber 8.57:1, ink on
sky 9.01:1. All three accents are deliberately light enough to take ink text,
because every one of them is used as a chip or a fill somewhere on the site.

This rule has been broken twice during the build and caught both times by the
contrast audit. Check any new accent-coloured text against it.

### Surfaces

| Token | Hex | Notes |
|---|---|---|
| `--offwhite` | `#F5F2EC` | page background. Never pure white, it reads cold |
| `--surface` | `#FCFAF6` | card faces, one step above the page |
| `--surface-sunk` | `#EDE9E1` | alternating section bands, image letterboxes |
| `--warmgrey` | `#6C6A73` | muted and secondary text. 4.76:1 on offwhite |
| `--line` | `rgba(20,22,28,.10)` | hairlines |
| `--line-strong` | `rgba(20,22,28,.18)` | input borders, ghost buttons |

### Washes, for large soft fills

`--sunflower-wash` `rgba(255,122,92,.14)` · `--ember-wash` `rgba(247,158,75,.14)`
· `--teal-wash` `rgba(143,184,255,.20)`

Ink on any wash is 17:1 or better. Warmgrey on a wash is 4.9 to 5.2:1, which
passes but leaves little headroom, so do not go lighter than warmgrey on one.

---

## 2. Typography

```
--font-head: 'Hanken Grotesk'   headings, numbers, prices
--font-body: 'Inter'            body copy, labels, UI
```

**These are stand-ins.** The live site serves **Galano Grotesque** (headings)
and **Apercu** (body), confirmed from its own `@font-face` declarations. When
the licensed files arrive, change the two tokens in `css/tokens.css` and the
`<link>` in each page head. Nothing else needs touching.

### Scale

| Token | Value | Used for |
|---|---|---|
| `--display` | `clamp(3rem, 7.5vw, 6rem)` | page-defining headlines |
| `--h1` | `clamp(2.4rem, 5vw, 4rem)` | |
| `--h2` | `clamp(1.8rem, 3.5vw, 2.75rem)` | section headings |
| `--statement` | `clamp(1.5rem, 3.2vw, 2.5rem)` | manifesto and pull-quote type |
| `--num` | `clamp(2rem, 4.5vw, 3.5rem)` | large numerals |
| `--h3` | `1.35rem` | |
| `--body` | `1.0625rem` | |
| `--kicker` | `.8125rem` | uppercase eyebrow, +10% tracking, warmgrey. No leading rule: the tracking does that work |
| `--micro` | `.75rem` | labels, meta, notes |

Headings run `font-weight: 700`, `line-height: 1.08`, `letter-spacing: -0.02em`,
tightening to `-0.035em` at display sizes. Body is `line-height: 1.6`.

The hero on the homepage scales on **both axes**,
`clamp(2.5rem, min(7.2vw, 10.5vh), 6rem)`, so a short landscape monitor shrinks
the headline instead of overflowing it.

### The tittle swap

The dot on the **first lowercase "i" in every `<h1>`** is replaced by the
coral fill from the logo mark.

- `js/main.js` wraps that one letter in
  `<span class="tittle"><span class="tittle__g">i</span><span class="tittle__t"></span></span>`.
- `.tittle__g` carries a CSS mask that **cuts the dot off the glyph** at
  `.30em` from the top of its 1em inline box. That figure was measured against
  Hanken Grotesk 700, not guessed. Re-measure it if the heading font changes.
- `.tittle__t` is a sibling, not a pseudo-element, because a mask applies to an
  element's whole subtree and would erase the triangle too.
- Masking rather than covering is deliberate: the headline often sits on a
  photograph, so a coloured patch over the dot would show its edges.
- The real `i` stays in the DOM, so copy-paste, find-in-page and screen readers
  are unaffected.

**First occurrence only.** A long headline can hold five or six lowercase i's
and marking all of them reads as noise. Opt a heading out entirely with
`data-no-tittle` on the `h1` or any ancestor. **Article pages are opted out** and
use normal letters.

---

## 3. Other tokens

```
--maxw       1200px          container width
--gap        clamp(1rem, 2.5vw, 2rem)
--section-y  clamp(4rem, 9vw, 7rem)
--radius     16px      --radius-sm 10px   --radius-lg 24px   --radius-pill 999px
--ease       cubic-bezier(.22,.61,.36,1)
--ease-out   cubic-bezier(.16,1,.3,1)
--dur-fast   140ms     --dur 200ms        --dur-slow 380ms
```

Shadows are **warm-tinted, never neutral grey**: `--shadow-sm`, `--shadow-md`,
`--shadow-lg`.

Focus rings are double-stroke so they read on any ground: `--focus` on light,
`--focus-on-ink` inside `.on-ink` containers.

---

## 4. File layout

```
/
  index.html                     homepage
  services.html                  services hub
  service-coworking.html         \
  service-dedicated-desk.html     |
  service-serviced-office.html    |  6 service pages
  service-virtual-office.html     |
  service-event-space.html        |
  service-meeting-room.html      /
  locations.html                 locations hub
  location-salcedo.html          \
  location-legazpi.html           |  3 location pages
  location-rockwell.html         /
  news.html                      news archive
  article.html                   single article template
  contact.html                   contact
  css/tokens.css                 palette, type scale, rhythm. Edit this first
  css/base.css                   reset, typography, layout primitives
  css/components.css             everything else, ~2400 lines
  js/main.js                     all behaviour, ~250 lines
  assets/logo/                   4 logo variants
  assets/icons/                  23 brand line-icons
  assets/img/                    photography
```

There are no partials or includes. **Nav and footer markup is duplicated in
every page.** When you change either, change it everywhere, or regenerate the
pages from one another with a script.

---

## 5. Layout primitives

| Class | Does |
|---|---|
| `.wrap` | centred container, `--maxw`, responsive gutter |
| `.section` | vertical rhythm band, `--section-y` |
| `.section--tight` | 62% of that |
| `.section--sunk` | `--surface-sunk` background, for alternating bands |
| `.section--ink` | ink background, light text |
| `.on-ink` | switches focus rings to the light variant |
| `.sec-head` | kicker + h2 on the left, optional link on the right |
| `.split` | two-column editorial pair, collapses at 900px |
| `.measure` | 62ch cap for long-form copy |
| `.grid-2/3/4` | equal columns, collapse at 960 then 640 |

---

## 6. Component inventory

### Global

- **`.nav`** fixed, transparent over photo heroes, turns to glass on scroll.
  Add **`.nav--onlight`** on any page that opens on a light background, or the
  white links vanish against off-white. Add `.nav--solid` to start glassy.
  `z-index: 130`, above the drawer, so the close button stays reachable.
- **Nav dropdowns** `.nav__item--has-menu` with `.nav__toggle` and `.nav__menu`.
  Two menus: Services (two columns, prices inline) and Locations (branch dots in
  logo colours). Hover or click on desktop, click-accordion in the mobile
  drawer. Escape closes, click-outside closes, tabbing out closes,
  `aria-expanded` mirrors state.
- **`.nav__drawer`** mobile slide-in, reuses the same dropdown markup.
- **`.booking-fab`** floating glass pill, appears past 520px of scroll, carries
  the logo's stacked circle pair.
- **`.footer`** ink, four columns, three addresses, newsletter, socials.

### Buttons

`.btn` plus one of `--primary` (coral fill, ink text), `--ink`,
`--ghost`, `--ghost-light` (for photo backgrounds). Sizes `--sm`, `--lg`,
`--block`. All pill-radius.

### Cards and content blocks

| Class | Where |
|---|---|
| `.tile` + `.bento` | homepage services grid, six items in six unequal cells |
| `.room` + `.rooms` | event space and meeting room rate cards |
| `.rooms--wide` | two columns with the photo alongside, for content-heavy cards |
| `.plan` + `.plans` | dedicated desk and serviced office, per-branch pricing |
| `.ptable` | plan comparison tables, coworking and virtual office |
| `.svcrow` + `.rows` | index rows, services hub and location pages |
| `.row` | numbered hairline rows, homepage "Why Meridian" |
| `.loccard` + `.loccards` | location cards with glass caption panels |
| `.locindex` | homepage locations band, three-column index over a photo |
| `.amen` + `.amengrid` | 20 amenities, each with its own brand icon |
| `.biz` + `.bizgrid` | business solutions, services hub |
| `.setup` + `.setups` | event space layout options |
| `.post` + `.postgrid` | news archive cards, `.post--lead` for the featured one |
| `.cmethod` | contact methods, colour-coded left border |
| `.branchmap` | map plus address, contact page |

### Heroes

- **`.hero`** homepage only. Full-bleed photo, `min-height: 100svh` so it fills
  exactly one viewport on any monitor. `svh` not `vh`, so mobile browser chrome
  cannot push the CTAs below the fold. Content vertically centred, with heavier
  top padding than bottom so it centres in the space *below* the overlaid nav.
  Drops out of full-screen under 640px viewport height.
- **`.svchero`** every other page. Photo band, `min(66svh, 620px)`, breadcrumbs,
  h1, lead, optional `.availpill`. Both heroes close with a three-colour rule in
  coral, sky and amber.

### Glass

Frosted glass appears on exactly four things: the sticky nav, the floating
booking pill, panels sitting over a real photograph, and the nav dropdowns.
**Never glass over a flat background with nothing behind it.**

Every glass surface has a `@supports not (backdrop-filter: ...)` solid fallback,
and tint climbs on small screens where the crop behind is busier.

The booking form on the CTA band is **ink-tinted glass at 72%**, not light. A
light frost there sits over the coral wedge and drops its labels below AA.

### Motion

`.reveal` fades and lifts on scroll via IntersectionObserver.
`[data-reveal-group="60"]` staggers children by that many ms.

`.reveal` starts at `opacity: 0`, so a **2 second failsafe** in `main.js` shows
anything the observer never reported on. Without it, a missed callback would
leave content invisible for good.

All motion collapses under `prefers-reduced-motion`. The perks marquee stops and
rewraps into a readable list rather than freezing mid-scroll.

---

## 7. Page architecture

The homepage deliberately uses **eight different layout families in eight
sections**, because an earlier draft used the same kicker-heading-grid shape
throughout and read as templated.

| # | Section | Family |
|---|---|---|
| 1 | Hero | full-bleed photo, bottom-anchored two-part composition |
| 2 | Manifesto | centred type statement, no image, no grid |
| 3 | Spaces | asymmetric bento, six items in six cells |
| 4 | Locations | full-bleed panorama with an overlaid three-column index |
| 5 | Why Meridian | hairline rows with colour chips, no cards |
| 6 | Perks | marquee, the only one on the site |
| 7 | Quote | single large pull quote |
| 7b | Testimonials | hairline three-column quote row under the pull quote |
| 8 | CTA | full-bleed ink, photo background, coral wedge, glass form |

Two conventions worth keeping:

- **Eyebrow budget.** At most one `.kicker` per three sections. The homepage has
  three across eight sections. They multiply easily and flatten the rhythm.
- **No decorative dots.** Coloured dots are used only where they carry meaning,
  the branch colour coding, never as ornament.

---

## 8. Accessibility

- **Every colour pair in the build has been checked.** Roughly 120 combinations
  across all components, including glass composited over both dark and bright
  photo crops. All pass WCAG AA. Re-run the check when adding a coloured
  surface, and remember the fills-not-text rule in section 1.
- Alt text on every image. Decorative images carry `alt=""`.
- Focus visible everywhere, double-stroke so it reads on any ground.
- Semantic landmarks, real `<a>` and `<button>`, skip link on every page.
- `color-scheme: light` on `html`, so native date and select controls do not get
  dark-styled when the OS is in dark mode. The site is light-only by design.
- Nav dropdowns are keyboard operable and `aria-expanded` tracks state.
- Breakpoints checked at 375, 768, 1366, 1440 and 1920.

### Verification loop used during the build

Headless Chrome for screenshots, plus a script that checks every page for tag
balance, missing alt text, duplicate ids, unresolved `aria-controls`, broken
internal links, missing asset paths, and em dashes. Run it after any change.

Note: Chrome headless clamps its window width around 500px, so mobile
screenshots have to be taken by loading the page in a 375px `<iframe>` inside a
wider harness page. Screenshotting at `--window-size=375` gives a misleading
result.

---

## 9. Copy conventions

- **No em dashes or en dashes anywhere.** Not in copy, headings, titles or
  code comments. Use commas, full stops, or restructure the sentence.
- Sentence case for headings.
- Prices always carry their unit: "$29 / day pass", not "$29".
- Meridian is a fictional brand built for this prototype. Every name, address,
  price, capacity, phone number and testimonial on the site is invented and
  written to be plausible, not sourced. Treat all of it as sample content and
  replace it with real figures before anything goes live. Source-level HTML
  comments flag the places where that matters most.

---

## 10. Assets

### Logos

The wordmark is not a bitmap. In the pages it is an inline SVG mark beside live
HTML text (`.nav__logo` / `.footer__logo`), so it inherits the nav colour and
needs no light/dark image pair. Standalone files are for everything off-site.

| File | Use |
|---|---|
| `meridian-mark.svg` | mark only, ink ring. Also the favicon |
| `meridian-mark-inverse.svg` | mark only, off-white ring, for ink backgrounds |
| `meridian-lockup.svg` | mark plus wordmark, horizontal. Wordmark is live text, outline it before print |

The mark is a globe cut on its meridian: an ink ring, the eastern half filled
coral, an inner vertical lens for the meridian line. It holds at 26px, which is
the size it runs at in the nav.

### Icons

23 line icons in `assets/icons/`, 120x110 (200x170 for `icon-discount`). 20 map
to the amenity list, 9 to the business-solutions block, with overlap. They are
neutral dark line drawings and carry no brand colour, which is why they survived
the rebrand unchanged.

### Photography

Every photograph on the site is licensed Unsplash stock standing in for a shoot
that has not happened. `assets/img/stock/CREDITS.txt` lists each file against its
source ID.

| Folder | Contents |
|---|---|
| `assets/img/stock/` | 5 homepage images |
| `assets/img/stock/loc/` | 12 location images, 4 per city |
| `assets/img/stock/svc/` | 8 service page images |
| `assets/img/stock/ev/` | 6 event photographs |
| `assets/img/stock/news/` | 6 article thumbnails |

Sized to a 1400 to 2000px long edge and served as JPEG at q68 to q72.

**Two rules when swapping any of these out.** Check the frame for a competing
brand's signage before you commit to it, which cost one round on the Lisbon
hero. And check what the type sits on: the photo tiles and heroes carry white
text over an ink gradient, so a bright, busy crop needs a heavier scrim rather
than a different headline.

---

## 11. Real business facts

There are none. Meridian does not exist. The figures below are the internally
consistent set the prototype uses, so if you change one, change it everywhere.

**Contact.** `connect@meridianworkspaces.com`, plus `lisbon@`, `copenhagen@` and
`singapore@` on the location pages. All three addresses open Monday to Friday,
9am to 6pm local, with 24/7 keycard access for monthly members.

**Addresses.**
Lisbon, Rua da Escola Politécnica 42, Príncipe Real, 1250-100.
Copenhagen, Sønder Boulevard 68, Vesterbro, 1720 København V.
Singapore, 21 Duxton Road, Tanjong Pagar, 089604.

**Phone numbers are invented and correctly formatted for their country.** They
are almost certainly somebody's real line. Replace them before launch.

**Availability.** Studio Suite does not run in Copenhagen. The Gallery does not
run in Singapore. Everything else runs everywhere. The compare table on
`locations.html` is the source of truth for this.

**Community leads.** Sofia Marchetti in Lisbon, Anders Holm in Copenhagen,
Priya Raman in Singapore. Invented, and used on the location pages and in the
homepage location index.

**Pricing.**

| Service | Rates |
|---|---|
| Open Studio | Day Pass $29 · Flex 10 $249 (10 visits / 3 months) · Resident $290 (unlimited monthly) · Team of Four $990 |
| Anchor Desk | Lisbon $349/mo · Copenhagen $395/mo · Singapore $420/mo |
| Studio Suite | 2 to 4 from $1,450/mo · 5 to 9 from $3,100/mo · 10 to 20 by quotation |
| Registered Address | Address $49/mo · Address and Calls $89/mo · Full Presence $149/mo |
| The Boardroom | $18 to $34 weekday hourly, $24 to $42 weekend |
| The Gallery | Lisbon $95 and $70 hourly · Copenhagen $85 hourly, with half day, full day and evening blocks |

Boardroom hours are bundled into Resident (5/mo), Team of Four (12/mo), Anchor
Desk (10/mo) and Studio Suite (15 to 30/mo). The hourly rates apply once those
run out, and to non-members.

Currency is US dollars everywhere, deliberately, so one membership reads as one
price rather than three. If the client wants local currency per city, the
compare tables are where that decision lands hardest.

---

## 12. Testimonials and article copy

The four homepage testimonials and all six articles are written sample copy.
They are flagged in HTML comments at each site, not on the page itself, because
the visible placeholder chips were removed at the client's request. Anyone
picking this up should assume none of it is quotable.

---

## 13. Provenance

This site began as an Acceler8 prototype, a boutique coworking group in Makati.
It was rebranded to Meridian in full: palette, logo, names, addresses, currency,
services, articles and every photograph. The original Acceler8 logo files and
photography are kept, unreferenced, in `_archive-acceler8/` at the project root.
Nothing in `assets/`, `css/` or any page still points at them.

---

## 14. Known gaps

- Forms are markup only. Nothing is wired to a mail handler or booking system,
  and the notes that used to say so on the page have been removed.
- `news.html` lists six articles. All six link to `article.html`, which holds the
  lead piece in full. There is no archive pagination and the category filters are
  visual only.
- Newsletter and social links go nowhere.
- Favicon is `meridian-mark.svg`. No OG images, no sitemap, no robots.txt.
- Not tested in Safari or Firefox. Chrome only so far.