Design Style Showcase

Style Gallery

One set of content, fifteen layouts. Every version below is a complete website demo - identical content, different design. Each card carries a detailed description, a pick-recommendation and a live interactive preview.

Quick Finder

Play it safe, avoid mistakes→V1 Tech-ModernContent-rich, reading-first→V2 Editorial / V7 MuseumcoreGuests should feel cared for→V3 WellnessMust read credible to banks and chambers→V4 Corporate / V13 Trust & DataSell premium, lift price perception→V5 LuxuryDesign-forward, razor clarity→V6 SwissMany info types, one scan→V8 Bento GridReal prices, sell products→V9 E-commerceNeighbourhood business, easy to find→V10 Local BusinessEnrolment / courses / programmes→V11 SaaS ProductAwards / pageants / galas→V12 Event SpectacleMedical / advisory / trust-first→V13 Trust & DataPersonal brands / creators→V14 Creative PortfolioFloral / natural / organic→V15 Nature Inspired
V1 · Open full demo →

V1Tech-Modern Cards

The design currently powering the live site

Glass cardsGradientDependable
Design language
Light purple-tinted glass cards, rounded components, gradient CTA bands. Balanced density, restrained motion - the dependable house standard: bold hero, numbered purpose cards, photo walls, enquiry bands.
Pick this when
The safe default: zero learning curve, best fit with existing materials, simplest maintenance.
Best fit
Universal - especially clients familiar with the current site
Best for
HKBIU itself / Care Link Business / Modern Beauty HK
V2 · Open full demo →

V2Editorial Magazine

Serif masthead, hairline rules, print rhythm

Serif typePrint rhythmLong-form
Design language
Serif masthead, double rules, pull quotes, front-page list layouts. A reading-first rhythm; generous line-height keeps long-form copy comfortable.
Pick this when
When story and copy lead, this makes text the hero. First pick for cultural institutions, academies, publishers.
Best fit
Content-driven / cultural / education / publishing
Best for
College HK / SSI / AI Training (content-heavy)
V3 · Open full demo →

V3Wellness

Soft rounded cards, generous photos, calm spacing

SoftLarge photosWhitespace
Design language
Six-rem breathing whitespace, soft rounded cards, large portraits. Quiet colour lets photos and words speak; visitors relax the moment they land.
Pick this when
Guests should feel cared for, not sold to. The natural home for beauty, spa and health services.
Best fit
Beauty / spa / health / care
Best for
MULAN Spa HK / treatment pages / care brands
V4 · Open full demo →

V4Corporate

Structured banner, information-first, enterprise trust

StructuredTrustB2B
Design language
Dark banner hero, stat-style notice cards, squared info cards, crisp section structure. Everything serves organisational credibility.
Pick this when
For brands that must read established to banks, chambers and government. B2B, chambers, corporate groups.
Best fit
Corporate / chambers / B2B / groups
Best for
BNI / Care Link Business / Veribel (corporate face)
V5 · Open full demo →

V5Luxury

Serif display, gold hairlines, generous whitespace

GoldWhitespacePremium
Design language
Gold hairline frames around generous whitespace, slow serif display. Elements rest like museum pieces - luxury comes from less, not more.
Pick this when
Brands that sell expensive: premium treatments, bespoke services, luxury retail. Perceived price tier rises immediately.
Best fit
High-end / bespoke / premium
Best for
Premium treatments / Miss Modern Beauty pages / bespoke services
V6 · Open full demo →

V6Swiss International

Modular grid, sans type, red utility accent

GridRed accentEfficient
Design language
International Typographic Style: strict modular grid, black hairlines, a single red used only functionally. Zero decoration, maximum efficiency.
Pick this when
For design-literate visitors to nod, with razor clarity. Design, consulting, young professional brands.
Best fit
Design / consulting / professional services
Best for
AI Training / consultancies / young professional brands
V7 · Open full demo →

V7Museumcore

Ink display type, placard frames, roman numerals

CuratedSerifQuiet
Design language
Serif headings site-wide, placard frames, roman-numeral labels, an ink screening-room band. Content is curated like exhibits - quiet, weighty.
Pick this when
Brands with works to show: photography, art, craft, achievements. For slow looking and remembering.
Best fit
Art / photography / showcase
Best for
Awards retrospectives / pageant coverage / portfolio content
V8 · Open full demo →

V8Bento Grid

Modular tiles, varied sizes, scannable

ModularScannableModern
Design language
The Apple-popularised bento: asymmetric tile arrays, varied sizes in strict order. One point per tile - scan once, get everything.
Pick this when
Many information types (services + fees + events + video) scanned in one pass. SaaS, multi-product brands.
Best fit
SaaS / product / multi-info homepages
Best for
AI service lines / multi-service brand homes
V9 · Open full demo →

V9E-commerce

Product cards, price tags, trust points

PricingConversionRetail
Design language
Retail-conversion DNA: price tags, product card arrays, category rail, orange promo CTA. Engineered for the order.
Pick this when
Brands with real prices to publish. Prices stated upfront; conversion first.
Best fit
Retail / e-commerce / priced services
Best for
Be shop / Flower shop SG / priced treatment menus
V10 · Open full demo →

V10Local Business

Contact card first, menu-style list, friendly

Contact-firstFriendlyMenu-style
Design language
Photo hero with welcome card, contact details above the fold, menu-style service list. A neighbourhood shop card: warm, direct, no frills.
Pick this when
When customers are neighbours and business comes from walk-ins. Just how to find you and when.
Best fit
Local shops / F&B / storefront services
Best for
GIG cafe / street shops / neighbourhood clinics
V11 · Open full demo →

V11SaaS Product

Trust blue, feature cards, enrol CTA

Trust blueFunnelEnrolment
Design language
Trust-blue hero, feature array, social proof, enrolment funnel. The decades-proven SaaS rhythm - right for courses and services alike.
Pick this when
Brands selling courses or programmes. One guided path from discovery to enrolment.
Best fit
Education / courses / service sales
Best for
College HK / SSI / AI Training (enrolment pages)
V12 · Open full demo →

V12Event Spectacle

Dark stage, gold spotlight, image drama

DarkGoldDramatic
Design language
A dark stage site-wide, gold spotlight CTAs, full-bleed hero. The first dark variant: awards-red-carpet drama on arrival.
Pick this when
Events that need drama: awards, pageants, galas. Equally striking on mobile.
Best fit
Events / awards / shows
Best for
Miss Modern Beauty / Modern Voice / Top100 awards
V13 · Open full demo →

V13Trust & Data

Finance-grade blue-white, data cards, transparent pricing

DataTransparentReassuring
Design language
Finance-grade blue-white structure: data cards, transparent pricing tables, security cues. V4 sells organisational image; V13 sells precision.
Pick this when
Medical, financial, advisory: visitors must trust before they hand over body or money.
Best fit
Medical / advisory / certification
Best for
Veribel Medical / certification / professional advisory
V14 · Open full demo →

V14Creative Portfolio

Bold borders, oversized type, work grid

Bold framesAttitudePersonal
Design language
Neo-brutalist portfolio vocabulary: 2px borders, oversized uppercase display, work-grid array, mono CTA. Personality with attitude.
Pick this when
Personal brands, creators, indie studios that want to stand out. Bold by choice.
Best fit
Personal brand / creators / studios
Best for
Care Lee (personal) / coaches / indie studios
V15 · Open full demo →

V15Nature Inspired

Natural green, floral pink, organic forms

GreenOrganicWarm
Design language
Natural green with floral-pink accents, two-rem rounding, organic shapes. Like walking into a shop with flowers: warm, alive.
Pick this when
Florists, natural products, organic brands - gentle to earth and body.
Best fit
Floral / natural / organic
Best for
Flower shop SG / natural skincare / organic brands