Skip to content

Design system

Sections. The building blocks for composing pages.

Every page is assembled from these components. Drop them into a PageLayout. See DESIGN_SYSTEM.md for full props.

Sections

FeatureShowcase

components/sections/FeatureShowcase.astro

Staggered two-column story: eyebrow + title + image carousel, and a tall image + paragraph + button. Props: subtitle, title, paragraph, action, image, carousel.

Why choose our property?

Discover the story behind this beautiful property.

  • Living upgrades

    Simplify daily life with smart home automation that gives you full control from the palm of your hand.

  • Smart home integration

    Enhance your lifestyle by connecting every smart home control to your fingertips.

  • Energy efficiency

    Cut costs and footprint with intelligent systems that adapt to how you live.

Control every corner of your home effortlessly through voice commands or mobile apps. From climate control to smart locks, redefine your lifestyle with cutting-edge technology.

Gallery Overview

FeatureGrid

components/sections/FeatureGrid.astro

Three-up value cards on the frost surface: icon pinned top, white pill tag + title + paragraph at the bottom. Props: items=[{ icon, tag, title, text }].

Data driven

We base every decision on insights, analytics and measurable outcomes

FlatWhite uses data and analytics to guide strategy and deliver tangible results.

Hands on

We work closely with teams to turn strategy into real results

We collaborate with client teams to ensure solutions are practical and effective.

Future focused

We help organizations anticipate change and scale what works

We design strategies that adapt to change and support sustainable growth.

FeatureList

components/sections/FeatureList.astro

Compact icon feature callouts (icon · title · short line) — lighter than FeatureGrid. Optional eyebrow/title. Props: features=[{ icon, title, text }], cols (2|3|4). Icons: floor, grill, kitchen, freight, light, people.

Key features

Second-floor loft

Stair and freight-elevator access.

Rooftop + BBQ

Shared roof deck with a grill.

Kitchenette

For prep and catering.

Freight elevator

Easy load-in and out.

StatementSplit

components/sections/StatementSplit.astro

Two-column statement: eyebrow + heading on the left, paragraphs + optional link on the right. Omit title for a lighter label/body block. Props: eyebrow, title?, paragraphs[], action?.

About

Design that stands for clarity and purpose.

Pearl is a design studio defined by a minimal yet human-centered philosophy. Guided by years of collective expertise, we approach every project with rigor, precision, and creativity.

Our practice spans brand, product and motion — blending technical craft with cultural awareness to create work that respects context, enhances function, and resonates with the people who use it.

About us

ContentGrid

components/sections/ContentGrid.astro

Eyebrow + heading + intro, then a numbered two-column grid (index · title · hairline · description). Props: eyebrow, title, intro?, items=[{ title, text }].

Services

Discover the full range of services that shape lasting work.

From early strategy to detailed delivery, we combine expertise and vision to ensure every project feels cohesive, intentional, and built to last.

(01)

Brand & identity

We craft thoughtful identities that integrate form, voice, and meaning across every touchpoint.

(02)

Product design

We design tailored digital products with careful attention to flow, detail, and the people using them.

(03)

Motion & animation

We bring stories to life with motion that clarifies, delights, and gives a brand its rhythm.

(04)

Strategy & consultancy

We provide research, direction, and long-term advisory, ensuring work is delivered to the highest standard.

ImageGrid

components/sections/ImageGrid.astro

n-up image grid built on Media (uniform aspect, scroll-reveal, lazy). Props: images[], cols (2|3), aspect.

ImageCarousel

components/sections/ImageCarousel.astro

Full-bleed photo gallery — one image per view, click prev/next to step through. Props: images[], aspect, label.

CardStack

components/sections/CardStack.astro

Scroll-stacking cards (sticky). Each StackCard has a title, paragraph, feature pills and an image — scroll to see them pile on top of each other. Props: cards=[...].

  • Living room

    The living room is the heart of the home—a space designed for comfort, relaxation, & gathering.

    • 250 m2
    • Bed Room
    • White

  • Kitchen

    The kitchen blends function and warmth — built for cooking, hosting, and everyday moments.

    • 60 m2
    • Open Plan
    • Oak

  • Bedroom

    A calm retreat designed for rest, with soft light and considered finishes throughout.

    • 40 m2
    • En-suite
    • Warm Grey

CtaBand

components/sections/CtaBand.astro

Label · two-tone heading · pill CTA. Heading goes in the slot.

Designing Success

See how we’ve turned ideas into reality. Dive into the stories of successful product designs.

Our Work

ProjectCard

components/sections/ProjectCard.astro

Image card with hover zoom + arrow chip. Props: client, title, img, href.

Dazzle © Branding

Dazzle Inc.

Dazzle © Branding
Healthcare Mobile App

CareSunset

Healthcare Mobile App

ServicesAccordion

components/sections/ServicesAccordion.astro

Expandable list. Props: services=[{ title, items[] }]. Click a row to toggle.

  • Logo Design
  • Brand Guidelines
  • Collateral Design
  • User Research
  • Wireframing
  • Interface Design

Primitives

Heading

components/ui/Heading.astro
size="display"

The quick brown fox

size="heading"

The quick brown fox

size="title"

The quick brown fox

size="card"

The quick brown fox

Button

components/ui/Button.astro
primary Get for free
secondary Our Work
light (on dark)
Let’s talk

Eyebrow

components/ui/Eyebrow.astro

Branding · Product Design

Media

components/ui/Media.astro

Framed, clipped image with placeholder background. Reveals on scroll.