Newport Social Society
A site for a private social society — where the design job is to be selective in public without being smug about it.
- Engagement
- Client project
- Role
- Web Design & Front-End
- Platform
- Responsive web, 390px → desktop
- Sector
- Private membership, Newport Beach
- Scope
- 6 pages
- Build
- Next.js App Router, Tailwind CSS
Exclusivity is the product here, and it is the hardest thing to put on a public website. Say too little and the site is a mood board that converts nobody; say too much and the society sounds like it is selling access, which is precisely what its members are paying not to be part of. The resolution I designed around is that specificity does the work vagueness is usually asked to do. A page that says membership begins at $249 a month and requires two sponsoring members is more credible than one that says "membership is by invitation" — because a real bar has numbers, and only a marketing bar has adjectives. So the site states its terms, enumerates what a member actually gets, and lets the tone stay quiet.
Selective in public, without the smugness.
Every page of a members' club site is walking a line between aspiration and condescension, and the copy is only half of it — the typography, the pacing and the amount of empty space decide the tone before a word is read. The site closes on "This Isn't for Everyone, And That's the Point", which only survives as a line because everything before it has been matter-of-fact.
- Key jobs
- Assess, Aspire, Apply
- Session
- Minutes, pre-application
- Differentiator
- Terms stated up front
The Bar Is A Number, Not An Adjective
"Membership begins at $249 per month. The application process is sponsor driven — all prospective members require two sponsors." Both facts sit at the top of the membership page rather than behind the form. A prospect who can't clear that bar self-selects out before writing a personal statement, which is better for them and for the partners reading the applications.
Benefits Are Counted, Not Evoked
Seven numbered entries — directory, private LinkedIn group, three events a month, guest privileges, partner discounts, the lapel pin, a podcast appearance. Numbering makes the list visibly finite, which is the point: a bounded list of real things reads as an offer, while an unbounded list of atmospheres reads as a brochure.
The Society Names Its Own Ceiling
"Membership is intentionally limited to maintain the integrity of each experience." Scarcity is stated once, as a reason, and never repeated as pressure. There is no counter, no waitlist theatre, and no countdown — devices that would make a society founded on discretion look like a funnel.
Restraint Is Enforced By The Grid, Not The Copywriter
Long measure, generous leading and wide vertical rhythm mean each section can only hold a couple of sentences before it looks wrong. The layout does the editing, which is why the tone holds across six pages rather than drifting after the home page.
Promote the evening, withhold the address.
A private event has a genuine conflict: the society needs the page indexed and shareable to attract the right people, and needs the venue unpublished so the room stays the room. Most sites resolve this by publishing nothing until you email someone, which loses the search traffic entirely.
- Key jobs
- Discover, Assess, Register
- Session
- Days before the event
- Differentiator
- Location behind a gate
"Register To Unlock Location"
The date, the hours and the character of the evening are public; the venue is the one field replaced by the gate. It is stated in the same slot the address would occupy, so the withholding reads as a deliberate policy rather than as missing information the site forgot to fill in.
Sponsors Sit With The Event, Not In A Sidebar
Each evening lists the businesses backing it. On a members' site the sponsors are social proof of a specific kind — they say which local operators consider the room worth being in — so they belong on the event that earned them rather than pooled into a generic partners strip.
Registration Is A Message, Not A Checkout
Name, email, an optional phone, a subject and a message. There is no ticketing, no seat count and no payment: the society decides who attends, and a checkout would imply otherwise. "Guests are welcome by request" is the one line that sets expectations about bringing someone.
Fifteen rooms doing the arguing.
A society that has run since 2022 has the one asset a new one can't fake, and photographs of a good room persuade in a way that no amount of copy about curation does. The past-events page is where the site stops describing itself and shows its evidence.
- Key jobs
- Browse, Recognise, Trust
- Session
- Scroll-led, low intent
- Differentiator
- Captioned by room
Every Image Is Described For Screen Readers
Each thumbnail's control announces "View image 4 of 15: Members at an NSS reception" — position, count and subject in one string. A gallery is the easiest place on a site to ship fifteen unlabelled buttons, and the count is what tells someone not seeing the grid how much is left.
Captions Name The Room, Not The Date
Estate event, black-tie evening, dinner service, excursion, mixer. A prospect is looking for the kind of evening they'd want to be at; a date tells them nothing, and a stale one actively works against the page.
The Lightbox Is Keyboard-Complete
Arrow keys move between images, escape closes, and the background scroll is locked while it's open. The shortcuts are armed by the lightbox existing and released by it unmounting, so there is no listener left bound to a closed modal.
Brass on midnight, and nothing borrowed.
The category has a visual default — black, gold, a thin serif, a stock photo of a whisky glass — and matching it would have made a real society look like a template. The palette is built from Newport Beach itself: harbour blues at dusk, brass rather than gold, and linen instead of white.
- Key jobs
- Read, Browse, Believe
- Session
- Every page
- Differentiator
- Photography of real nights
Three Midnights, Not One Black
Deep, base and soft variants of the same harbour navy let sections separate by depth instead of by rule lines. Pure black would have flattened the photography, which is mostly shot in low, warm interior light and needs a surface with some blue in it to sit against.
Brass Is Reserved For Accents Only
The metallic reads as eyebrows, rules, list numerals and button borders — never as body copy. It is a brand colour rather than a legible one, so nothing a visitor needs to read depends on it.
Playfair Over Montserrat, By Tag
The display serif carries every heading and the sans carries everything read rather than looked at. Both are loaded through next/font, so the pairing arrives as one request and self-hosted rather than as a render-blocking call to a font CDN.
The Hero Rotates Through Six Real Photographs
Balboa palms, Corona del Mar, the harbour at dusk and in gold light, the pier, a Pacific sunset. Six stills served responsively beat a video: no autoplay, no multi-megabyte download on a phone, and every frame is a place a member would recognise.
Reveals that respect a reduced-motion setting.
The site's one piece of motion is a per-word blur-in on headings, driven by IntersectionObserver rather than by a timeline library. It is the kind of effect that is cheap to add and easy to get wrong, so it is gated in two directions.
- Key jobs
- Load, Read, Submit
- Session
- Every page
- Differentiator
- No animation dependency
No Animation Library At All
The reveals are CSS transitions triggered by an observer. Skipping a timeline library keeps the animation code to a few lines and keeps a substantial dependency out of the first-load bundle for an effect that plays once per element.
prefers-reduced-motion Is Honoured
A visitor who has asked their OS for less motion gets the headings already in place rather than a shorter version of the same animation. The content is never gated behind the effect — the reveal is the decoration, not the delivery.
Forms Validate Against One Schema
Both the enquiry and the membership application post to a single route that validates with Zod and returns the visitor-facing message per bad field. The client runs the same rules so a typo never costs a round trip, and the server runs them because a client isn't a trust boundary.
A Honeypot Instead Of A Captcha
A hidden "Company website" field catches the bulk of automated submissions at zero cost to a real applicant. A members' club application form is exactly the wrong place to make a qualified human prove they are one.
Process
I started from the membership page, because every other page on this site is an argument for reaching it and none of them could be written until the terms were settled. Once the rate and the sponsor requirement were on the page as plain statements, the tone of everything else followed: there was no longer any need to imply exclusivity, because the site had already demonstrated it. The event gate came out of the same session — the partners needed the page public and the venue private, and naming the gate in the address slot turned a limitation into a statement of policy. Copy was drawn from how the partners describe the society themselves, kept short, and reduced wherever a sentence was doing atmosphere rather than work. I built it as a Next.js front-end so the six pages, the gallery lightbox and both forms could be tested at real widths instead of asserted in a mockup.
Research methods
- Sessions with the partners on who the society is actually for and who it turns down
- Review of the membership terms — rate, sponsor requirement, and what a member receives — to settle what could be published
- Scan of private-club and members'-society sites, and their invitation-only, price-on-request norm
- Photography review across fifteen past evenings to set the gallery and the surface palette
- Newport Beach location shoot review for the six hero stills
Deliverables
- Six-page responsive site: home, events, past events, membership, team, contact
- Published membership terms — rate, sponsor requirement, and seven enumerated benefits
- Event registration flow with the venue gated behind sign-up
- Fifteen-image past-events gallery over a keyboard-complete lightbox
- Brass-on-midnight visual system, Playfair Display and Montserrat, self-hosted
- Validated enquiry and application routes with honeypot spam protection
- Built and deployed front-end at newportsocialsociety.com
The site
6Responsive — 390px
7Next project
One Corporate Wellness