ONYX style guide
Every primitive and module in the design system, rendered live. Sentence case throughout. Use only the tokens and components shown here.
Gaps in the system
- 01No chip, tab, or avatar primitive exists in the system. The radius demo renders them inline with rounded-full.
- 02No skeleton/loading primitive exists. The States section builds one inline with bg-sand + animate-pulse.
- 03No empty-state or error-state primitive exists. The States section builds them inline.
- 04No shared SEO meta injector. noindex is implemented per-page via direct document.head manipulation, the same pattern used by StudentMembership, SummerPoolPass, EventsPage, and Longevity. A shared useDocumentMeta hook would remove the duplication.
Colour
Grounds and type are site-wide. Accent is sage. Lime is restricted to /game routes only.
--chalk--paper--sand--voidType
--ink--graphite--mistAccent
--accent--accent-deepGame routes only
--limeType
Plus Jakarta Sans for display, Inter for body. Sentence case everywhere. No all-caps.
.t-display-xlJakarta 800 / clamp 2.75-5.5rem / -0.025em.t-display-lJakarta 700 / clamp 2-3.5rem / -0.02em.t-display-mJakarta 700 / 1.5rem / -0.01em.t-body-lInter 400 / 1.125rem / 1.6.t-bodyInter 400 / 1rem / 1.65.t-eyebrowInter 600 / 0.75rem / 0.18em uppercaseRadius rule
Interactive elements are fully round. Structural elements are square. No middle value.
Interactive - rounded-full
Structural - square
Shadow
Three elevation steps. Use soft for resting cards, lift on hover.
Spacing
Real band heights at mobile and desktop. The band after a hero uses band-tight.
Primitives
Every Button variant at every size, ClubPill both sizes, Eyebrow, SectionHeading, PortraitMedia at all three ratios.
Button - solid / outline / text
Button - frost + solidInverse (over void)
ClubPill
Eyebrow
SectionHeading
A direct, one-on-one relationship with every member.
At ONYX you are family. We specialize in custom programs tailored to your individual goals.
PortraitMedia
Form controls
Brand primitives: square 52px, hairline border, inset focus-visible ring (box-shadow, never clipped by overflow:hidden), #B4463C error on chalk / #EE9186 on void. Label/hint/error colours inherit from --label-fg/--hint-fg/--error-fg, a dark panel just adds .on-dark. Native select on coarse pointers, Radix on fine. Tab through both grounds to verify focus and contrast.
10 digits, no dashes
Please enter a valid 10-digit phone number
Same fields on void (.on-dark)
Inherited tokens: one .on-dark on the panel adapts every descendant, no per-field prop. Error colour here is #EE9186 (clears ~7.2:1 on void; #B4463C fails at 3.4:1).
10 digits, no dashes
Please enter a valid 10-digit phone number
Modules
One live instance of each module with placeholder content.
Statement block. A single large declarative line, optional text CTA.
Two-column media and copy.
Flippable. Media on one side, eyebrow, title, body and CTA on the other.
Pool - Lap and leisure
A grouped offer with primary benefits.
Primary benefits render as a media grid, secondary benefits behind an expandable list.
Benefit one
Short copy.
Benefit two
Short copy.
Benefit three
Short copy.
“Cleanest gym I have ever been a member of. The staff actually knows your name.”
“My trainer completely changed how I work out. Down 22 lbs in 3 months.”
“Luxury feel without the luxury price. 24/7 access fits my crazy schedule.”
Hours
Hudson
- MondayOpen 24 hours
- TuesdayOpen 24 hours
- WednesdayOpen 24 hours
Pool
Lap and leisure
Tennis
Six courts
Recovery
Sauna and cold plunge
Strength
Free weights
Frequently asked questions
Book a free consultation and we will build a plan.
Start your journey.
No commitment. Tell us your goals and we will build a plan.
“Cleanest gym I have ever been a member of. The staff actually knows your name.”
“My trainer completely changed how I work out. Down 22 lbs in 3 months.”
“Luxury feel without the luxury price. 24/7 access fits my crazy schedule.”
Terms and conditions apply. See your home club for details.
States
Loading, empty, and error. These are built inline, no primitive exists yet - see GAPS.
Nothing here yet.
Something went wrong.
Try again