Design system

Block & component gallery

Admin-only reference for every CMS picker block, seeded with homepage (Perfect) styles — section titles, cyan CTAs, and dark-band surfaces. Linked from the site admin bar.

Button systems

Buttons

Unified Perfect styling for every storefront button class — CMS Button presets (page-block-btn), React / CTA links (site-btn), and form submits (page-block-wallet-submit).

Button block presets (`page-block-btn`)

Learn more

React / CTA buttons (`site-btn`)

Primary action

Form submit (`page-block-wallet-submit`)

Layout primitives

Containers

Flex group (`flexGroup`)

Nested text inside a flex group.

Primary CTA

Layout (columns) (`layout`)

Column one

Column two

Slider (`slider`)

Tab panel (`tabPanel`)

Burger menu (`burgerMenu`)

Collapsible group (`collapseGroup`)

Revealed content inside a collapsible group.

Content primitives

Content

Text (`text`)

Body copy on the dark homepage band. Keep paragraphs short and readable against navy.

Links (`links`)

Navigation (`navigation`)

Live widgets

Interactive

Competitions list (`competitionsListDisplay`)

Countdown (`countdown`)

Content primitives

Content

Social icons (`socials`)

Icon (`icon`)

FAQ (`faq`)

FAQs

Homepage-adjacent accordion

What is this page?

An admin-only design system that seeds every CMS block type with homepage styling.

Who can see it?

Site admins only (accessLevel: admin). Linked from the admin bar.

Image (`image`)

Hero (`hero`)

Design system

Homepage-styled primitives for Perfect sites

Button (`button`)

Browse competitions

Member auth

Auth

Sign in form (`signIn`)

Register form (`register`)

Commerce & account

Commerce

Wallet deposit (`walletDeposit`)

Wallet withdraw (`walletWithdraw`)

Cart / Checkout (`checkout`)

Billing details (`billingDetails`)

My orders (`purchaseHistory`)

My wallet (`walletTransactions`)

My tickets (`accountTickets`)

My wins (`accountWins`)

Play Safe (`accountPlaySafe`)

Timeout (`accountTimeout`)

Payouts (`accountPayout`)

Support (`accountSupport`)

Order confirmation (`orderConfirmation`)

Withdrawal confirmation (`withdrawConfirmation`)

Deposit complete (`depositComplete`)

Withdraw confirm (`withdrawConfirm`)

DNA awaiting payment (`dnaAwaitingPayment`)

Cashflows awaiting payment (`cashflowsAwaitingPayment`)

TrueLayer awaiting withdraw (`truelayerAwaitingWithdraw`)

FumoPay awaiting withdraw (`fumopayAwaitingWithdraw`)

Member auth

Auth

Notifications (`notifications`)

Commerce & account

Commerce

Add to cart (`competitionTickets`)

Live widgets

Interactive

Competitions carousel (`competitionsCarousel`)

Commerce & account

Commerce

Entry list (`entryList`)

Competition banner (`competitionBanner`)

Competition header (`competitionHeader`)

Competition countdown (`competitionCountdown`)

Competition prizes (`competitionPrizes`)

Competition description (`competitionDescription`)

Competition draw (`competitionDraw`)

Competition availability (`competitionAvailability`)

Related products (`competitionRelatedProducts`)

Instant win game (`instantWin`)

Instant win prizes (`instantWinPrizes`)

Content primitives

Content

Recent winners (`recentWinners`)

Live widgets

Interactive

Winners ticker (`winnersTicker`)

Content primitives

Content

Header categories (`headerCategories`)

Live widgets

Interactive

Carousel (`carousel`)

Content primitives

Content

Markdown (`markdown`)

Markdown sample

Use markdown for structured copy, emphasis, and lists.

First item
Second item
Third item

HTML (`html`)

Custom HTML

Markdown + HTML (`rich`)

Section

Your content here.

Call to action (`cta`)

View all winners

Account profile (`accountProfile`)

Account referral (`accountReferral`)

Leaderboard privacy (`accountLeaderboardPrivacy`)

Wins notifications (`headerInstantWinAction`)

Order confirmation hero (`orderConfirmationHero`)

Order confirmation items (`orderConfirmationItems`)

Order confirmation totals (`orderConfirmationTotals`)

Order confirmation links (`orderConfirmationLinks`)

Gallery (`gallery`)

ID verification (`accountIdVerification`)

Physical prize journey

Physical prize claim

Customer progress chips and ops status colours for the ship journey. Address confirmed / preparing uses violet so it is distinct from Processing.

Customer — preparing shipment

Choose
Address confirmed
Processing
Shipped
Delivered

Address confirmed — we're preparing your shipment.

Ops status chips

Awaiting choice Address confirmed Processing Shipped Delivered

Forgot password form (`forgotPassword`)

Reset password form (`resetPassword`)

Custom component (`customComponent`)

Contact

Contact