Page title / H1
Gardens by the Bay
Montserrat 700 · clamp(42px, 7vw, 82px) · line 1.04-1.07
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
Current font sizes in use
These values are taken from the live site files. Large titles use responsive clamp() values, so they scale between mobile and desktop instead of staying fixed.
Section title / H2
A photography-forward SG60 project
Montserrat 700 · clamp(34px, 5vw, 58px) · line 1.07
Card title / H3
Collectors and travellers
Montserrat 700 · clamp(24px, 3vw, 34px) · line 1.1
Lead paragraph
A calm, elevated introduction used below page headings and feature statements.
Open Sans 400 · clamp(20px, 2.4vw, 28px) or clamp(21px, 3vw, 30px) · line 1.22
Endorsement pull quote
“This book is a love letter to the Gardens.”
Montserrat 700 · clamp(28px, 4vw, 46px) · line 1.08
Body copy
The default body text across the site is set for long-form reading, endorsements, product details, and supporting website copy.
Open Sans 400/500 · 17px / 1.47 · mobile body falls to 16px on the homepage
| Use | Font | Size | Notes |
|---|---|---|---|
| Brand lockup | Bitcheese fallback to Montserrat | 15px | Used in the nav and footer logo wordmark. |
| Primary nav links | Open Sans / 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 | Open Sans 700 | 12px | Uppercase, 0.1em-0.14em letter spacing, usually teal or lime. |
| Hero greeting kicker | Montserrat 600 | clamp(28px, 4vw, 52px) | Homepage “Hello” line. |
| Hero greeting title | Montserrat 700 | clamp(38px, 6vw, 80px) | Homepage rotating Gardens place-name line. |
| Subpage H1 | Montserrat 700 | clamp(42px, 7vw, 76-82px) | Book and endorsements page titles. |
| Endorsement detail | Open Sans 500 | clamp(15px, 1.4vw, 18px) | Smaller supporting paragraphs inside endorsement cards. |
| Meta / attribution | Open Sans | 14px | Names, titles, notes, and small supporting metadata. |
| Footer links | Open Sans | 13px | Footer headings use 14px semibold. |
| Attention bar | Open Sans 700 + Montserrat 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.
- 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
people_in_the_gardens_transparent-1.png, sized up to about 460px desktop andmin(78%, 360px)mobile, with no shadow. - 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.