brand guide

§ 01the mark

The wordmark is live text, not a picture — set in Archivo, the same way it appears in this sentence. That is the whole idea: the logo is a word you can write, not an icon you have to trace. Where a platform demands a raster image — the favicon, the profile picture — it is still that same word, Archivo 700, exported once from a canvas. No separate drawn letterform stands in for it.

a77

The wordmark. Archivo, weight 700. This is the actual logo — text, set, never an image.

a77

Outline. Same weight, used on a light ground or over a photograph.

Profile picture. The drawn mark, centred with a 10% side margin. Telegram, Instagram — anywhere a platform demands a raster image.

rules

• The wordmark is always lowercase, always "a77", never abbreviated. Not "A77", not "77" alone — even where space is tight.
• Only two colourways for the drawn mark: white on black, black on white. No outlines, shadows, gradients or rotation.
• Never redraw or trace the live wordmark — set it in Archivo and let the browser do it.
• The drawn mark is always centred, never cropped to one corner; nothing else enters its clear space.

files

§ 02colour

Two colours, full stop. No accent — nothing on this site is coloured to draw attention. What would normally be a coloured "live" tag or a coloured link instead inverts: black becomes white, white becomes black. Dark is the brand's default reading; light is the same system with the two roles swapped.

rules

• No third colour, ever. Not a tint, not a brand red, not a status green. If a value needs a colour to explain itself, redesign the value instead.
• "Live" and interactive states are shown by inversion — a filled swap of ink and paper — never by hue.
• Muted text is the foreground colour at reduced opacity (56%), not a separate grey.
• Both themes are true neutral greys — equal red, green and blue channels. No warm or cool tint, in either direction.

§ 03type

Archivo — Google Fonts, open licence — is the only typeface, at its normal (non-expanded) width. Weight 700 for the wordmark and display sizes, 600 for headings, 400–500 for body and meta. Nothing thinner than 400 appears anywhere; nothing bolder than 700 is needed.

rules

• Display type is lowercase. It reads calmer and matches the wordmark; the two should never feel like different alphabets.
• Meta and labels are the only place letter-spacing opens up (0.08–0.16em) and the only place capitals are allowed.
• Flush left, ragged right. No centred paragraphs, no justification.
• One width axis only — Archivo's normal width. The expanded axis used in an earlier version of this system is retired.

§ 04graphic language

There is no photography on a77.ch — nothing to photograph yet. Instead, every section carries exactly one quiet line-art mark, hairline weight, never filled, always at reduced opacity. They are vector paths — cheap to ship, cheap to render, nothing to download. One per section, never more.

the hero background

Contour lines and a set of concentric rings sit behind the hero wordmark at 16–22% opacity — a topographic field, not a texture pulled from a stock library. Both are static: no parallax, no drift.

rules

• One motif per section, never two. A page with a motif in every corner stops reading as restraint.
• Hairline stroke only (1.4 of a 64-unit grid) — never filled, except the single accent dot each motif carries.
• Motifs sit at 50% opacity in context; only in this guide are they shown at full strength.
• No photography, no stock icons, no emoji. If a new section needs a mark, draw one line-art piece in the same hand.

§ 05layout and motion

• No cards, no boxes, no shadows. Sections are separated by a single hairline rule and generous whitespace — structure comes from typography and space, not containers.
• Square corners everywhere. Nothing on the site is rounded, including buttons, tags and the countdown cells.
• One rule weight, 1 px, used for everything from section dividers to table rows — no second, heavier rule exists.
• Content maxes out at 1240 px; padding scales 20 → 64 px.
• The site is static by default. The only things that move are hover states, the theme swap, and the countdown's digits — nothing scrolls, drifts or auto-plays.
• Hover on a link row floods it with the inverse colour and slides the arrow 12 px in 150 ms. That is the one signature interaction — keep it exact.
• prefers-reduced-motion collapses every transition to near-zero.

§ 06do and don't

§ 07tokens

Paste this into any new page and the system comes with it.

:root {
  --bg: #101010;   /* dark ground, the default */
  --fg: #f4f4f4;

  --line: color-mix(in srgb, var(--fg) 14%, transparent);
  --line-strong: color-mix(in srgb, var(--fg) 30%, transparent);
  --muted: color-mix(in srgb, var(--fg) 56%, transparent);
  --wash: color-mix(in srgb, var(--fg) 6%, transparent);

  --pad: clamp(20px, 4vw, 64px);
  --maxw: 1240px;
  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html[data-theme="light"] {
  --bg: #f4f4f4;
  --fg: #101010;
}

/* the font — self-hosted, one variable file covers weights 400-700 */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-400-700.woff2") format("woff2");
}
/* no local copy of the file yet? this loads the same weights from Google: */
/* @import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap"); */