How the Site Looks

The starting point was Works in Progress, a magazine: warm paper instead of white, a serif for reading, a monospace for everything around the reading, a three-column grid, a short rule over every caption, thin lines between things instead of boxes and shadows. A club has far less to say per page than a magazine, so the type here is larger and the columns wider.

Colour

Every colour comes from the Toastmasters International palette. The light theme is paper and burgundy. The dark theme is Loyal Blue and Happy Yellow.

Every colour, with its value in both themes, is in the colour table of the design system.

Burgundy goes on the words that matter: the club name, every page title, every meeting title. That is the main reason the site reads as Toastmasters and not as a generic template. In the dark theme, Happy Yellow takes the same place.

One solid block per site. The when-and-where line on the home page (Every Tuesday, 19:15) is the only filled panel anywhere. Practical information gets the loudest element on the page.

Gold never carries text. It draws the short rule over each caption, the line beside each speech and the line over each margin note. On the light paper it is too faint to read as type.

Quiet text is the same colour, thinner. Reading text is at full strength. Introductions are at 80 per cent, dates and captions at 50, column labels at 30. These are see-through colours: the text colour written with an opacity on the end. In #241c1abf, the last two digits, bf, are the opacity in hexadecimal, 191 out of 255, which is 75 per cent. Because they are see-through, the same four text colours work on the page and on the darker recessed areas without separate values.

Three colours miss the usual bar, on purpose. Contrast is how far a colour stands out from the page, as a ratio; 4.5:1 is the usual minimum for small text. The 50 per cent text is 3.4:1 on the light page; it is kept for dates and captions, which are meant to recede. The 30 per cent text is 2.0:1 in the light theme and 2.6:1 in the dark, and is used only for labels nobody needs to read. Gold is 2.2:1 on the light page, which is why it only ever draws lines.

Type

Two families that never mix. The serif is for anything a person reads. The monospace is for everything that helps them find it: navigation, dates, meeting numbers, captions, role names, labels. If it is metadata, it is monospace.

Chinese is resized to sit beside English. Set at the same size, Chinese characters look bigger than Latin capitals. Source Serif 4’s capitals are 0.670 of the type size tall; Noto Serif SC’s characters are 0.729. 0.729 ÷ 0.670 = 1.088, so unadjusted Chinese is about 9% larger. The site scales it to 96%: 0.729 × 0.96 = 0.700, still about 4% above the Latin capitals, because Chinese at exactly cap height looks too light. The Chinese face also borrows Source Serif 4’s line spacing, so a line with Chinese in it is no taller than one without.

Chinese is never italic. Chinese type has no italic design; a browser asked for one just slants the characters, which gives the wrong shape instead of emphasis. English keeps its real italic; Chinese stays upright. Quotations are marked with a gold line instead of italics for the same reason: about one in four quotations on the site is in Chinese, and many are not tagged as Chinese, so there is no way to italicise only the English ones.

A space between Chinese and English or numbers: “2016 年”, not “2016年”; “SZTM 人物志”, not “SZTM人物志”.

Layout

Every page except two follows six rules. Each was written down after a page broke it.

1. Every page is the same width, 1240px. A page with less to say keeps the same frame. A grid that changes shape from page to page feels worse than one with a gap in it.
2. No empty columns. A column is filled with something worth reading, or it is not drawn.
3. Page heads run the full width. Label and title on the left, a four-line introduction on the right, above the side columns.
4. The left column is for getting around. It is 170px wide: links, not charts. Charts and tables go in the middle, each on its own page.
5. Show what was found, not how. Sources, cross-checks and research notes stay in the data files. A reader came for the record.
6. Navigation says what is behind the link. A page title can be written for effect. The link to it says “Distinguished Club Program”.

The exceptions are Rooms We Have Met In, which runs edge to edge and changes as you scroll, and the design system, which is laid out as a design system. They are the only two pages allowed to break the frame.

Writing

• Say what happened. Meeting write-ups are in the past tense and the third person: who spoke, on what, who hosted, what went wrong and what went well. “Cecilia hosted as Toastmaster”, not “we had an amazing host”.
• Leave gaps as gaps. A missing fact is left out or marked “we do not know”. A date worked out rather than recorded is marked as such.
• Plain English, no emoji.
• A meeting’s theme keeps its own capitals (“Life Is Like A Play”). Everything else is in sentence case.
• The club’s names are fixed: Shenzhen Toastmasters Club, 深圳国际演讲俱乐部. Nothing else.
• No phone numbers, email addresses or chat IDs, anywhere, including inside old documents.

Photographs

• Real photographs from meetings only: no stock images, no illustrations. The one drawn image on the site is the map of the rooms.
• Every caption sits under a short gold rule and says what is happening in the picture.
• Images in a member’s article go back exactly where the author put them, in the same order, with no captions added.
• QR codes, recruitment posters and screenshots are taken out of old material before it goes up.

Lines, corners and movement

• Things are separated by 1px lines, not put in boxes, and there are almost no shadows.
• Corners are barely rounded: 2 to 4 pixels.
• The only icons are the sun and moon of the theme switch. Everything else is labelled in words; an arrow (→) marks a link that leads on.
• Nothing moves except a short change of colour when the pointer is over something. Rooms We Have Met In is the exception. If your device asks for reduced motion, even that is switched off.

Every exact value, and every part a page is built from, is in the design system.

The Toastmasters logo

A Toastmasters club may not have a logo of its own, and may not combine one with the Toastmasters International logo. So the site has no club logo. The Toastmasters International logo appears on its own, on About, and the club’s name is set in type everywhere else.