INDEX 00
DOCUMENTATION
Style guide.
Everything a buyer needs: the colour system, the type scale, every component, and honest instructions for making this template yours.
The Index is built on one idea — the living directory. Numbering, editorial labels, catalogue rows and a collectible membership card give the template its identity; warm bone and deep ink keep it calm; oxblood and acid do the talking. Square corners throughout: this is print, not glass.
SG 01
COLOUR
Seven styles, two rules.
Ink
#11110F
Bone
#F0ECE3
Paper
#E3DDD1
Oxblood
#641F28
Acid
#DFFF4F
Muted Grey
#A9A59D
White
#FAFAF7
SG 02
TYPOGRAPHY
Three voices, one register.
Display XL
Newsreader 500 · 108 → 42px · h1
Display L
Newsreader 500 · 68 → 34px · h2
Display M
Newsreader 500 · 40 → 26px · h3
Heading S
Manrope 600 · 20px · h4
Body Large
Manrope 400 · 19px · p
Body
Manrope 400 · 16px · p
Label
Manrope 600 · 13px uppercase
Index Label
League Gothic 400 · 17px uppercase
Index Number
League Gothic 400 · 96px
Spacing runs on a loose 4px rhythm: 10 / 14 / 20 / 24 / 28 / 40 / 52 for gaps, 130px vertical padding for standard sections, 40px page gutters inside a 1240px content frame. Grids are 3-up with 24px gutters and collapse to 1 column on phones.
SG 03
BUTTONS & BADGES
States included.
SG 04
CARDS
Four card systems, one hover language.
MEMBER
042
“The most valuable conversations are usually the ones you didn’t schedule.”
Convening a supper
Mara Okafor
Founder
London
SG 05
TIERS, CARD & ACCORDION
The set pieces.
01
Local
£95
per month, billed annually
For people rooted in one city who want a second home for their work.
Access to all three rooms
The full events programme
Member directory and introductions
Guest privileges at dinners
Two references or one existing member. Applications reviewed monthly.
How do applications work?
Tell us what you are building, exploring or hoping to contribute. Every application is read by the membership team and a current member; most hear back within two weeks.
Image ratios — Event cards 400×230, member portraits 3:4 (360×420), space panels 16:9-ish (720×420 and 1240×560), journal features 620×440, article thumbnails 4:3. Framer crops automatically; centre your subjects and everything works.
Owner’s manual.
01 — Changing colours
Every colour in the template is a shared Colour Style: Ink, Bone, Paper, Oxblood, Acid, Muted Grey and White, plus two rule colours. Open Assets → Colour Styles, edit a value once, and it updates across all sixteen pages. Start with Oxblood and Acid — swapping those two re-brands the whole site while Bone and Ink keep it grounded.
02 — Changing fonts
Type is controlled by Text Styles. Newsreader carries display headlines, Manrope carries UI and body copy, League Gothic carries the index numbering. To swap a family, edit the Text Style (for example Display XL) and every heading follows. If you replace League Gothic, choose another condensed face — the numbering system depends on its narrow width.
03 — Editing navigation and footer
The navigation and footer live in the Main Layout template, so you edit them once. The Navigation component has Desktop, Compact, Phone and Phone Open variants — edit link labels in the Desktop variant and the drawer follows. The status pill is the Status Badge component; change its text on the instance.
04 — Adding events
Open the CMS → Events and add an item: title, date, times, location, type, capacity, availability, an image and a description. It appears automatically on the homepage (next three by date) and the Programme page, and gets its own detail page at /programme/your-slug. Set Availability to Open, Waitlist or Full — the text shows on each card.
05 — Adding journal articles
CMS → Journal. Each article takes a category, author, date, reading time, image, excerpt and body. The newest article becomes the featured story on the homepage and Journal page automatically. Use Heading 2 and Heading 3 blocks inside the body — they’re styled by the Article Heading and Article Subheading text styles.
06 — Editing membership tiers
Tiers are instances of the Membership Tier component on the homepage and Membership page. Select an instance to edit price, audience, benefits (six slots — leave one empty and its row hides) and requirements. The oxblood treatment is the Featured variant; switch it in the variant control, no glowing borders involved.
07 — Connecting the application form
Both forms use Framer’s native form submissions — open Site Settings → Forms to route them to your email or a webhook. The submit button already has Loading, Success and Error variants wired. To use a service like Formspark or Basin instead, replace the form container’s settings; the fields and styling carry over.
08 — Custom code, honestly
09 — Image licensing
All photography is sourced from Unsplash under the Unsplash licence, which permits commercial use without attribution. If you republish this template with the sample images, no action is needed — but you should replace the portraits with your own members. The rotating seal and barcode are original vector assets included with the template.
10 — Support
Questions, bugs or customisation requests: support placeholder — replace this with your email or help desk before listing. Include your project URL and a screenshot; most questions get answered within two working days.
11 — Changelog
Version 1.0 — August 2026. Initial release: sixteen pages, four CMS collections, twenty-plus components, full responsive breakpoints and this documentation.