Design

Three colours. One typeface. Hard edges.

This identity is inherited from the International Graduates Club Linz, which ran from 2008 to 2022. It is deliberately narrow: the constraints are what make a poster made by a volunteer in ten minutes still look like it belongs to the club.

Colour

Yellow

#FFDD00 · var(--yellow)

The ground. Full bleed, always.

Ink

#1D1D1B · var(--ink)

All type. Warm near-black, never pure #000.

Paper

#FFFFFF · var(--paper)

Knockout boxes only.

Ink on yellow

12.54:1

The default. Every page.

Paper on ink

16.88:1

The inverted bar. Use sparingly.

Ink on paper

16.88:1

Inside a white box.

All three combinations pass WCAG AA for body text (4.5:1) and AAA for large text (3:1). Computed on this page, so they cannot drift out of date.

Type

Aleo by Alessio Laiso — a slab serif, used at three weights and nothing else. Self-hosted, never loaded from Google's CDN.

300 Light — the counter-line

400 Regular — body copy on screen

700 Bold — every heading

700 Bold Italic — the aside

Board Game Night

Here are the games.

The signature move: Bold and Light at the same size, locked together with no gap. Taken directly from the 2015 IGCL posters. If you only remember one thing from this page, this is it.

Hagenberg

.mega · var(--t-mega)

Reserved. Print sheets and one-word statements.

Hagenberg

.display · var(--t-display)

Page-opening headline.

Hagenberg

.title · var(--t-title)

Sub-headline, card heading.

Hagenberg

.section-title · var(--t-section)

Section heading, usually in a white box.

Hagenberg

.lead · var(--t-lead)

Standfirst. Light weight.

Hagenberg

.small · var(--t-small)

Supporting copy.

Hagenberg

.micro · var(--t-micro)

Metadata, captions, footer.

The lockup

Four words, four lines, weights descending 700 / 400 / 300 / 300 — the exact structure of the IGCL mark, which IACH inherits word for word. Always in a white box, always left-aligned, never recoloured or rotated.

size="sm"

size="md"

size="lg"

The two devices

There are exactly two containers in this system. Everything else is type sitting on the yellow.

The white box

For anything that has to be found: a heading, a card, a set of rules, a form. It sitson the yellow — it never has a border, and never a shadow.

.box · .box-heading

The inverted bar

For the single most important thing on a page. One per screenful at most — its power is entirely a function of how rarely it appears.

.bar · .btn

Do and don't

Do

  • Let the yellow run to every edge of the page.
  • Pair a Bold line directly with a Light line at the same size.
  • Leave far more empty space than feels comfortable.
  • Put a heading in a white box when it needs to be found.
  • Use the inverted ink bar for the one thing that matters most on a page.

Don't

  • Add a fourth colour, or tint the yellow.
  • Round a corner, add a shadow, or use a gradient.
  • Letterspace a heading — tighten it instead.
  • Set long body copy in Bold on screen.
  • Use more than one inverted bar per screenful.

The full written guide, including the reasoning behind each value, is indocs/design-language.md. The original IGCL print pieces are indocs/igcl-old/, and the sheets built from this system are at/print.