Page title / H1
Gardens by the Bay
Cormorant Garamond 600 · clamp(34px, 6vw, 52px) · line 1.1 · tracking -0.01em
Website system
Brand & Website Settings
A living reference for the People in the Gardens type scale, colour tokens, card styles, buttons, navigation, spacing, and page rhythm.
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.
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 + Cormorant Garamond strong | 13px desktop / 11px mobile | Fixed Kickstarter countdown strip. |
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
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.
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
Settings
Reusable website rules
These are the working site conventions to preserve when editing the People in the Gardens pages.
- Production domainUse
peopleinthegardens.comas the public domain. Canonical URLs usehttps://peopleinthegardens.com/for the homepage and page-specific paths for subpages. - Global navFixed 44px nav below the 36px Kickstarter attention bar. Desktop links are 12px; mobile overlay links are 28px.
- LogoUse
logo-mark.pngfor header and footer marks. Footer logo should not use a dark filter. - Book imageBook hero uses
book-cover-hero.jpg, sized up to about 460px desktop andmin(78%, 360px)mobile, with no shadow. - Asset namesUse lowercase kebab-case by purpose:
book-cover-hero.jpg,hero-national-day-panorama.png,insider-guidebook-card-background.png,human-story-card-background.png,pitgs-website-blueprint.pdf. Avoid upload hashes, spaces, and generated timestamps unless the date is part of the source. - Shared CSSUse
site.cssas the central stylesheet for tokens, typography, paragraph rhythm, buttons, cards, footer/nav basics, and responsive defaults. Page-level CSS should only handle page-specific layout. - CardsStandard cards use 18px radius and hairline border. Endorsement quote cards also use the shared card shadow.
- Copy toneRefined, photography-forward, and collector-friendly. Avoid generic filler and keep endorsements faithful to the provided source copy.
- InteractionButtons and nav links keep at least 44px touch height. Mobile menu locks body scroll while open and closes after navigation.