Shenzhen
Toastmasters

Shenzhen Toastmasters Club (深圳国际演讲俱乐部, club #594537, chartered 2003) keeps its website as a meeting journal: a record of what happened each week, not a brochure. Every visual choice serves reading that record. Warm paper, a serif for reading, a monospace layer for everything that is metadata, and hairlines instead of boxes.

Content fundamentals

• It is a record first. Lead with what happened: who spoke, on what, who hosted, what was said. Promotion comes last or not at all.
• Never invent to fill a gap. A missing fact stays missing. Write “we don’t know” rather than guess. If two sources disagree, show both. Label claims confirmed or inferred where it matters.
• Show results, not process. Sources and research notes belong in data files, not on the page.
• Plain, direct English. Third person, past tense for meeting accounts (“Cecilia hosted as TME”). No emoji. Sentence case for titles unless the meeting theme is written otherwise (“Life Is Like A Play” keeps its capitals).
• Navigation labels say what the page is. “Officers and presidents”, “Rooms we have met in”, “Distinguished Club Program”. A page title may have some flair; a nav label may not.
• Names: full name is “Shenzhen Toastmasters Club” / “深圳国际演讲俱乐部”. Never “深圳英文演讲俱乐部” and never the internal nickname “Monsters”.
• No personal contact details anywhere: no phone numbers, emails or WeChat/QQ IDs.
• Captions describe, they don’t identify unless the source identifies. Interview photos (People) carry no captions at all.

Chinese text

• Never italic. Han has no italic face; body sets font-synthesis-style: none, so Latin keeps its true italic and Han stays upright. Blockquotes and em inside reproduced Chinese articles are upright.
• A space between Chinese and Latin letters or digits: “SZTM 人物志”, “2016 年”, “10 月”.
• Full-width Chinese punctuation inside Chinese sentences.

Visual foundations

Colour

Two themes built from the Toastmasters International palette (tm-burgundy #772432, tm-loyal-blue #004165, tm-happy-yellow #f2df74).

• Light: cream paper bg, near-black warm text, and burgundy accent on the core type: the site name, page titles, meeting titles, kickers, meeting numbers and links. Burgundy on the headlines is what makes the site read as Toastmasters and not a generic template. Keep it there.
• Dark: a Loyal Blue bg and Happy Yellow accent in the same roles.
• Text layers step down by opacity: text (reading), text-80 (standfirsts, secondary copy), text-50 (mono metadata), text-30 (uppercase labels only).
• gold is for hairlines only: the 24px rule over every caption, the 3px rule beside a speech, the top rule of a sidenote, blockquote rules, outing labels. Never set text in gold on the light theme (2.2:1).
• bg-panel (solid burgundy with on-panel text) appears once: the when/where chip on the home page.
• bg-sunk marks recessed areas and hover fills.
• Known contrast gaps, kept as the site has them: text-50 is 3.4:1 on the light bg (passes in dark at 4.6:1), and text-30 is 2.0:1 light, 2.6:1 dark. Use text-30 only for labels a reader does not need; never for content.
• Focus ring: 2px solid accent, offset 2px. 9.3:1 on light bg, 11.5:1 on dark.

Type

• Source Serif 4 (Google Fonts, opsz 8–60, 400/700 with italics) for all reading and display. Chinese falls back to Noto Serif SC, loaded as “Noto Serif SC Adj”: scaled to 96% with Source Serif 4’s line metrics so mixed lines sit level. Only weight 400 of the Chinese face is loaded; bold Han is synthesised.
• IBM Plex Mono (400/500) is the UI layer: nav, dates, numbers, captions, labels, facts. If it is metadata, it is mono.
• Display styles (wordmark, page-title, entry-title) are bold, tightly tracked (-0.02 to -0.03em), and in accent. They are fluid with clamp(); the sizes listed are the desktop maximums.
• Reading text is body: 19px/1.68, measure 62ch. It drops to 16px under 480px.
• Uppercase appears only in mono labels, always tracked 0.07 to 0.14em.

Layout

• Every page is the same width (width-page 1240px, space-gutter 40px sides). Never narrow a page because it has less content.
• The reading grid is three columns: a 170px left rail (width-rail), the text, a 230px notes column (width-notes), with 48px gaps. The rail is navigation only; charts and content go in the middle column, each on its own page.
• Don’t render an empty column. Fill it with something worth reading or leave it out.
• Page heads are left-aligned and full width: kicker and title on the left, a 150–175 character standfirst on the right, across the top of the rail. Never indent them for the sidebar.
• Under 1080px the rail goes; under 820px everything stacks to one column with 22px gutters, and the rail moves to the page end.
• Two pages are exceptions: Rooms We Have Met In, a full-bleed scrolling map, and this page, which is laid out as a design system. None of these layout rules apply to them, and neither layout should be copied elsewhere.

Borders, radii, shadows

• Structure is drawn with 1px divider hairlines between entries and around fact bands. No cards around content, no coloured left-border cards (the link card’s gold rule is the single exception).
• Radii are small: radius-xs 2px on stream photos, radius-sm 3px on controls and most images, radius-md 4px on the when chip and hero photos.
• Shadows are almost absent: shadow-lift on the one card that floats over the venue map, and shadow-offset (a hard 6px offset in divider) on a hovered poster tile.

Imagery

• Real photographs from meetings only. No stock, no illustration.
• Every figure caption is mono 12px in text-50 under a 24px gold rule.
• Interview (People) images go back exactly where the original author placed them, in the original order, with no captions. QR codes, promotional posters and screenshots are removed.

Motion

• Colour and background transitions of 0.12s on hover. Nothing else animates outside /venues/. prefers-reduced-motion turns all transitions off.

Iconography

The site uses almost no icons. The only glyphs are the sun and moon in the theme toggle (15px inline SVG, currentColor in text-50) and typographic arrows (→) in links. Do not add icon sets or emoji; label with words.

Brand compliance

• The club may not have its own logo, and may not combine any club mark with the Toastmasters International logo. Use the TI logo (under Logos) alone, and set the club name in type.
• Any page that shows the TI logo carries the trademark notice (see the Footer component).