Freemasonry in Sydney.
Design System Reference
Lodge Southern Cross digital style guide.
A practical reference for page sections, buttons, cards, forms, imagery, hover states, and responsive behaviour across the website.
Foundation
The site should feel formal, warm, and Sydney grounded.
Use the same visual rhythm everywhere: strong blue hero sections, cream story sections, gold for action, real lodge imagery, generous spacing, and full-card hover states that make links obvious.
Lodge Blue#06164a
Section Blue#0b1d5b
Gold Action#edc96f
Warm Cream#f5eedc
Text Ink#101524
Typography
Use type for structure, not decoration.
The site uses bold, compact headings with restrained body copy. Keep headings short, preserve line breaks, and avoid oversized titles inside small cards.
A lodge with history.
What the evening feels like.
Meet the lodge
Use clear, human sentences. Most paragraphs should be one to three lines on desktop.
Since 1881
Explore the history
Hero Variations
Heroes should anchor the story immediately.
Left-align hero copy on the same content rail used by the following sections. Keep imagery real, inspectable, and large enough to carry the page.
Page Hero
For About, Lodge Life, Contact, and Join pages.
Use when the page needs an immediate emotional signal and a clear first action.
Story Hero
For history, news, and member story pages.
Use when the page should feel more editorial, quieter, and easy to read.
Post-Hero Panel
The shadowed intro panel is an approved page opener.
Use directly under a hero when the page needs a calm explanation before the main content begins. This is the pattern used well on Lodge Life and About-style pages.
Best forAbout, Lodge Life, Become a Mason, Contact, and longer narrative pages.
StructureOne clear heading, one short paragraph, and a compact signal list or next-step summary.
AvoidDo not use it as another hero. Keep it quieter than the hero above it.
Path Cards
Cards must read as one clickable object.
The whole card is the link. Standard card hover is a full-surface lift: 8px radius, soft shadow, gold border/arrow accent, and no exposed table edge.
Understand
What is Freemasonry?
A plain guide to the values, structure, privacy, and common questions around the Craft.
Begin with the basics BelongWho are Southern Cross?
Meet the lodge, its story, its rhythm, and the men who keep it showing up.
Visit the About page ReflectWould this suit me?
A more personal look at commitment, values, friendship, and service.
Consider the fit EnquireCan I ask privately?
A quiet first step for men who want a conversation before deciding anything.
Start a conversation
Image Section
Use real lodge photography wherever possible.
Images should be cropped to preserve people, faces, regalia, and context. Avoid decorative cropping that hides the subject.
Subsections
Alternate section shapes to avoid repetition.
Not every section needs a grid. Use image plus narrative, newsroom cards, stepper blocks, lists, and quieter editorial layouts to keep long pages from feeling mechanical.
More Section Layouts
Use different shapes for different jobs.
These are approved subsection patterns for breaking up long pages without creating a new visual language.
Editorial Pair
Image plus concise narrative.
Use when a section needs context and atmosphere, but not another large hero. Good for history, lodge room, charity, or visiting content.
Use this for a Master’s message, a principle, or a short reflection that deserves weight.Keep it human, brief, and clearly attributed.
Compact CTA
Start a conversationOne next step, not a campaign block.
Use between sections when a page needs a gentle prompt without a full image banner.
Steppers And Questions
Interactive pieces should feel calm and deliberate.
Use steppers for processes and accordions for genuinely optional detail. Keep motion subtle, avoid sudden layout jumps, and make active states visible.
Send an enquiry
The first action should feel private, simple, and low pressure.
A member replies
Set expectations clearly, without over-explaining the process.
Ask questions
Give people permission to understand the commitment first.
Visit when ready
The page should guide toward conversation, not pressure.
Is this the correct FAQ pattern?
Yes. One question should open at a time on live pages, with a plus changing to a minus and a subtle border/background shift when expanded.
How much animation should be used?
Enough to soften the change. Avoid bounce, elastic motion, or layout jolts.
News And Articles
News cards should show the image, not crop it into confusion.
Use consistent image ratios, preserve the subject, show the content type label, and keep the smaller cards compact enough to scan.
Forms
Forms should feel integrated, not pasted on.
Use the Become a Mason layout as the reference: a centred form card, a useful side panel where needed, clear fields, and a single primary submit button.
Motion And Polish
Movement should support confidence.
Use motion for hover confidence, accordion clarity, and gentle scroll reveal. Do not animate width, height, margins, or large page layout shifts unless carefully controlled.
Hover Lift
Small transform, soft shadow, no hard jump.
Active State
Use gold and border changes where users need orientation.
Scroll Rhythm
Sections should flow by tone, not abrupt colour cuts.
Use
- One content rail across hero and page body.
- Gold only for active states and primary action.
- Full-card links with visible hover and focus states.
- Real photos with mobile-safe focal points.
Avoid
- Table-like boxes unless presenting structured data.
- Repeated page titles inside every section.
- Overlong explanations before forms or cards.
- White footer gaps from leftover Elementor spacing.
Reference selectors:
.lsc-ds__rail content width
.lsc-ds__button primary and secondary actions
.lsc-ds__card full-card link pattern
.lsc-ds__faq accordion visual pattern
.lsc-ds__news featured/news card layout
.lsc-ds__form-demo form plus side-panel layout