Brand Settings · People in the Gardens

Typography

Brand paragraph style in use

These values are taken from _PitGs.-FONT_Paragraph-style.pdf and are centralized in site.css so all pages inherit the same editorial paragraph system.

Page title / H1

Gardens by the Bay

Cormorant Garamond 600 · clamp(34px, 6vw, 52px) · line 1.1 · tracking -0.01em

Section title / H2

A photography-forward SG60 project

Cormorant Garamond 500 · clamp(26px, 3.8vw, 32px) · line 1.25

Card title / H3

Collectors and travellers

Inter 600 · 18px · line 1.4 · tracking 0.04em

Lead paragraph

A calm, elevated introduction used below page headings and feature statements.

Inter 400 · clamp(17px, 1.7vw, 20px) · line 1.55

Endorsement pull quote

“This book is a love letter to the Gardens.”

Cormorant Garamond 400 italic · clamp(20px, 2.4vw, 24px) · line 1.5

Body copy

The default body text across the site is set for long-form reading, endorsements, product details, and supporting website copy.

Inter 400 · 16px / 1.65 desktop · 15px mobile · tracking 0

Use	Font	Size	Notes
Brand lockup	Bitcheese fallback to Montserrat	`15px`	Used in the nav and footer logo wordmark.
Primary nav links	Inter / inherited body	`12px`	44px minimum nav height for touch and consistent header rhythm.
Mobile menu links	Brand wordmark stack	`28px`	Large overlay navigation on small screens.
Kicker / eyebrow	Inter 500	`15px`	Uppercase, 0.08em letter spacing, usually teal or lime.
Hero greeting kicker	Cormorant Garamond 600	`clamp(34px, 6vw, 52px)`	Homepage “Hello” line follows the H1 editorial system.
Hero greeting title	Cormorant Garamond 600	`clamp(34px, 6vw, 52px)`	Homepage rotating Gardens place-name line.
Subpage H1	Cormorant Garamond 600	`52px` desktop / `34px` mobile	Book and endorsements page titles.
Endorsement detail	Inter 400	`16px / 1.65`	Smaller supporting paragraphs inside endorsement cards.
Meta / attribution	Inter 300	`13px / 1.5`	Names, titles, notes, image captions, and small supporting metadata.
Footer links	Inter 300	`13px`	Footer headings use 14px semibold.
Attention bar	Inter 500 with bold day count	`13px` desktop / `11px` mobile	Fixed Kickstarter countdown strip. The day count inherits the same font and size, with `700` weight.

Colour

Brand colour tokens

The system is white, soft grey, dark ink, deep teal, and lime. Teal carries actions and authority; lime is reserved for campaign energy and dark-section accents.

Teal#035965 · primary action, links, endorsement labels

Lime#b7ce5c · attention bar, dark-section accent

Ink#1d1d1f · main text

Dark#202123 · dark panels and campaign pages

Parchment grey#e4e7e7 · page bands and footer

Grey#3c3c3e · supporting body text

Muted#6e6e73 · metadata and attributions

Hairline#d2d2d7 · borders and dividers

Components

Cards, buttons, nav, and shadows

Endorsement cards now use a shared shadow, while regular cards use hairline borders and restrained rounded corners.

Endorsement card

“Each image tells a story.”

Shadow: rgba(0,0,0,.16) 3px 8px 32px. Border: 1px solid #d2d2d7. Radius: 18px. Padding: 34px desktop, 24px mobile.

Primary action

Support the campaign

Buttons use teal fill, white text, pill radius, 44px minimum height, and a slightly darker hover state. The attention bar uses lime with a separate circular plus link.

19 Days to our Kickstarter Funding

Page rhythm

Homepage section colour sequence

The homepage alternates calm white, soft grey, teal, black photography, and a lighter campaign close. Keep this progression unless the section content changes significantly.

Garden VoiceClean white trust section

ExploreSoft grey project pathways

AuthorDeep teal profile moment

Photo ShowcaseBlack immersive photography

CampaignLime/parchment closing CTA

Element labels

Inspectable website label system

Visible chips below show how Open Design-facing elements are labelled with data-od-id. Use these names when pointing at sections, cards, controls, or documentation samples.

Header and primary navigation

Homepage hero

Beyond the Pages

Garden's Voices

Author profile band

Photography showcase

Campaign support CTA

Naming rules

Labels are stable, kebab-case handles for meaningful visible regions. They are meant for inspection, commenting, and future editing. Decorative wrappers, spacers, and tiny purely visual elements should stay unlabelled.

home-*Homepage sections and major homepage modules.
brand-*Site Assets page shell and hero documentation areas.
type-*Typography examples and sample cards.
swatch-*Colour token samples.
component-*Reusable component examples.
setting-*Reusable site rules and production conventions.

Label	Appears on	Purpose
`global-navigation`	All documented pages with shared chrome	Fixed desktop header and primary navigation.
`mobile-navigation`	Site Assets page	Mobile overlay navigation menu.
`site-footer`	Site Assets page	Footer brand lockup, link columns, and domain link.
`scroll-top-button`	Site Assets page	Floating return-to-top control.
`home-empty-hero`	`index.html`, `people-in-the-gardens-homepage.html`	Opening visual hero and greeting layer.
`home-pathways`	`index.html`, `people-in-the-gardens-homepage.html`	Beyond the Pages section and project pathway cards.
`home-trust`	`index.html`, `people-in-the-gardens-homepage.html`	Garden's Voices trust section, marquee, attribution, and quote grid.
`home-author`	`index.html`, `people-in-the-gardens-homepage.html`	Author profile band and portrait content.
`home-photo-showcase`	`index.html`, `people-in-the-gardens-homepage.html`	Marine South photography scrollytelling showcase.
`home-support`	`index.html`, `people-in-the-gardens-homepage.html`	Campaign support close and Founding Circle CTA.
`brand-settings-page`	`brand-settings.html`	Site Assets page main content shell.
`brand-settings-hero`	`brand-settings.html`	Site Assets page introduction.
`typography-scale`	`brand-settings.html`	Typography sample section.
`typography-table`	`brand-settings.html`	Detailed typography specification table.
`colour-system`	`brand-settings.html`	Brand colour token documentation.
`swatch-teal` to `swatch-hairline`	`brand-settings.html`	Individual colour swatches for teal, lime, ink, dark, parchment, grey, muted, and hairline.
`component-system`	`brand-settings.html`	Reusable cards, buttons, nav, and shadow examples.
`component-quote-card`	`brand-settings.html`	Endorsement card visual sample.
`component-button-card`	`brand-settings.html`	Primary action and attention-bar component sample.
`page-rhythm`	`brand-settings.html`	Homepage colour rhythm documentation section.
`homepage-rhythm-strip`	`brand-settings.html`	Five-band visual sequence for homepage section backgrounds.
`label-system`	`brand-settings.html`	This visual label guide section.
`label-visual-map`	`brand-settings.html`	Annotated diagram showing how major website regions are labelled.
`label-naming-rules`	`brand-settings.html`	Naming pattern and label family rules.
`label-inventory-table`	`brand-settings.html`	Complete current inventory of inspectable labels.
`website-settings`	`brand-settings.html`	Reusable website rules section.
`setting-domain` to `setting-accessibility`	`brand-settings.html`	Individual production, nav, logo, asset, shared CSS, card, copy, and accessibility rules.
`type-sample-*`	`brand-settings.html`	Typography sample cards for page title, section title, card title, lead, pull quote, and body copy.

Settings

Reusable website rules

These are the working site conventions to preserve when editing the People in the Gardens pages.