Design System Components
The Digital Atelier - Luxury Bespoke Furniture Design System
Typography
Display Large
Architectural Authority
Display Medium
Premium Craftsmanship
Curated Collection
Handpicked Excellence
Modern Minimalism
Geometric elegance
Body Text
This is a large body paragraph. Use this for introductory content and featured descriptions. It maintains legibility while conveying sophistication.
This is standard body text. Perfect for specifications, product descriptions, and general content. The warm charcoal prevents clinical sterility.
Small body text for supplementary information, captions, and fine print. Maintains the editorial aesthetic while keeping hierarchy clear.
Button Variants
Primary Button
Gradient brass CTA. Use for high-intent actions. Tightened letter-spacing on label.
Secondary Button
Surface container background. Subtly elevated. For secondary actions.
Tertiary Button
Text-only with brass underline. No background. For minimal emphasis.
Cards & Containers
Image Placeholder
320 × 240px
Card Title
Surface-container-lowest background. Clean elevation through tonal layering.
Image Placeholder
320 × 240px
Elevated Card
Ambient shadow for depth. Natural obstruction of light, not digital effect.
Content Block
Surface-container background. Used for secondary functional areas like filters and sidebars.
- ✓ Generous padding
- ✓ Background shift boundary
- ✓ No visible borders
Selection Components
Selection Chips
Selection Cards
Form Elements
No box. Minimal interface. Focus reveals bottom border in primary.
Subtle background on focus. Rounded corners maintain softness.
Same styling as input fields for consistency.
Glass Morphism & Overlays
Background Content
Quick View
Backdrop blur with 80% surface opacity. Keeps user grounded in the Atelier environment while focusing on details.
Grid & Asymmetric Layouts
Column 1
Asymmetric Grid
Column 2
Editorial Feel
Column 3
Offset Layout
Spacing Scale
4 - 1.4rem (22.4px) - Standard gaps
16 - 5.5rem (88px) - Content block separation
20 - 7rem (112px) - Major section spacing
24 - 8.5rem (136px) - Page gutters (luxury signal)
Color Palette
Primary (Brass)
#775a19
High-intent actions & focal points
Surface (Off-White)
#fbf9f4
Main background - warm cream
On-Surface (Charcoal)
#1b1c19
Text & primary UI elements
Surface Container Low
#f5f3ee
Background shifts for content blocks
Surface Container High
#eae8e3
Secondary functional areas
Error State
#ba1a1a
Validation & alerts (minimal iconography)
Design System Rules
✓ Do's
- ✓ Use asymmetric grids for editorial feel
- ✓ Embrace large margins (24 for page gutters)
- ✓ Mix font weights (Bold headline + Regular body)
- ✓ Use tonal layering for depth
- ✓ Treat whitespace as a premium element
✗ Don'ts
- ✗ Pure black (#000000) - use on-surface
- ✗ Full roundedness on primary buttons
- ✗ Crowding content sections
- ✗ High-contrast 100% opacity borders
- ✗ Solid 1px borders for sectioning
Reusable Page Sections
Homepage-ready sections rendered from shared template parts.
Each block below is loaded from template-parts/sections/, so this showcase and real pages stay aligned while the content remains static and ACF-ready.
Hero Sections
First-viewport options for homepage, lookbook, and campaign pages.
1 reusable variants available.
Version 02 / Split Slider (V2)
template-parts/sections/hero/split-slider.php
Story Sections
Heritage and studio-positioning blocks for homepage or About pages.
3 reusable variants available.
Version 01 / Editorial Overlap
template-parts/sections/story/editorial-overlap.php
Heritage & Craft
The Story of
Albha
Founded on the principles of architectural integrity and bespoke craftsmanship, Albha Design transforms spaces into curated galleries of living. Our philosophy treats furniture not as utility, but as structural art.
Each piece is a dialogue between raw, natural materials and precision engineering. From the selection of sustainably sourced oaks to the hand-polished brass accents, excellence is our only standard.
Version 02 / Text Panel
template-parts/sections/story/text-panel.php
Version 02 / Studio Story
Built around material judgment.
Furniture as architecture
Albha treats every piece as part of the room structure: proportion, finish, use, and placement are considered together before a quote is prepared.
A slower selection process
The studio guides clients through room details, materials, and customization needs so the final proposal feels precise.
Version 03 / Compact Stats
template-parts/sections/story/compact-stats.php
Version 03 / Compact Story
A concise heritage block for inner pages.
Use this where the page needs Albha credibility without a full editorial story section.
1994
Founded
Room
Led Selection
Quote
First Journey
History Sections
Timeline and milestone layouts for brand history.
3 reusable variants available.
Version 01 / Dark Timeline
template-parts/sections/history/dark-timeline.php
Heritage Timeline
A timeline of considered craft.
This section gives Albha a quieter, more editorial way to show history without becoming a corporate timeline. It can later pull milestones from ACF repeater fields.
Established
1994
Milestones
1994
01 / 5
A material-led beginning
Albha begins with custom furniture, timber knowledge, and an eye for pieces that belong to the architecture of a room.
2004
02 / 5
Complete room direction
The studio expands from individual pieces into composed living, dining, and private-suite selections for considered homes.
2014
03 / 5
Trade and project support
Interior designers, developers, and homeowners begin using Albha as a showroom partner for multi-room briefs.
2020
04 / 5
A guided showroom process
Material review, measurement planning, and finish consultation become central to how every request is prepared.
Today
05 / 5
Wishlist first, quote next
Clients can collect pieces, share room details, and receive proposals shaped around proportion, finish, and installation needs.
Version 02 / Light Split
template-parts/sections/history/light-split.php
Version 02 / Light Timeline
Three decades of considered rooms.
1994
Material-led custom furniture
2004
Room composition and home direction
2014
Designer and developer project support
Today
Wishlist-first furniture proposals
Version 03 / Milestone Grid
template-parts/sections/history/milestone-grid.php
Version 03 / Milestone Grid
A compact history format for About pages.
1994
Founded around furniture craft and material sensitivity.
2004
Expanded into complete room compositions.
2014
Supported designers and larger residential briefs.
Today
Wishlist-led proposals for modern homes.
Signature Spaces
Room-suite layouts for curated living, dining, and private spaces.
3 reusable variants available.
Version 01 / Editorial Stacked
template-parts/sections/signature-spaces/editorial-stacked.php
Signature Spaces
Furniture composed around the way you live.
Explore complete room directions before selecting individual products. Each suite can become a curated ACF layout later, connected to WooCommerce pieces for wishlist and quote requests.
01 / Living Suite
Low, warm, gallery-like
The Living Suite
Low-profile sofas, sculptural chairs, and media storage arranged for a room that feels composed from every angle.
Mood
Quiet luxury
Focus
Modular seating
Finish
Walnut and linen
02 / Dining Suite
Hosting, softened
The Dining Suite
Stone-led dining tables, tailored chairs, and quiet storage for homes that gather often and age beautifully.
Mood
Ceremonial calm
Focus
Table setting
Finish
Stone and brass
03 / Private Suite
Measured, restful, personal
The Private Suite
Bedroom storage, bedside pieces, and custom wardrobes shaped around calm routines and exact room conditions.
Mood
Restful order
Focus
Custom storage
Finish
Oak and boucle
Version 02 / Room Focus
template-parts/sections/signature-spaces/split-carousel.php
Version 02 / Room Focus
One complete room direction at a time.
A calmer alternative when the page needs one featured room suite instead of a long stacked layout.
Request Room Proposal
Living Suite
Low seating, storage, and lounge forms.
Mood
Quiet luxury
Focus
Modular seating
Finish
Walnut and linen
Version 03 / Compact Grid
template-parts/sections/signature-spaces/compact-grid.php
Version 03 / Compact Spaces
Room suites at a glance.
Useful for inner pages that need fast scanning before a request flow.
Living
Sofas, lounge chairs, media storage
Dining
Tables, chairs, sideboards
Private Suite
Beds, wardrobes, nightstands
Explore Categories
Product-type discovery patterns for wishlist-led browsing.
3 reusable variants available.
Version 01 / Image Grid
template-parts/sections/explore-categories/image-grid.php
Explore by Category
Start with the furniture type your room needs most.
Browse category directions first, then save the pieces that fit your room, material preference, and project brief.
Category 01
Sofas & Sectionals
Explore Category north_east
Category 02
Lounge Chairs
Explore Category north_east
Category 03
Dining Tables
Explore Category north_east
Category 04
Media Units
Explore Category north_east
Category 05
Beds & Wardrobes
Explore Category north_east
Category 06
Outdoor Furniture
Explore Category north_eastVersion 02 / Category Rail
template-parts/sections/explore-categories/horizontal-rail.php
Version 02 / Category Rail
Browse by furniture type.
Version 03 / Compact List
template-parts/sections/explore-categories/compact-list.php
Version 03 / Compact Categories
Fast category access.
Latest Pieces
WooCommerce-ready product preview layouts for wishlist and quote journeys.
3 reusable variants available.
Version 01 / Product Slider
template-parts/sections/latest-pieces/product-slider.php
Latest Pieces for Your Wishlist
Recently curated furniture ready for room-specific proposals.
Save pieces that fit your project direction, then share room measurements, finish preferences, and installation needs with the Albha studio.
Living Room
Lowline Modular Sofa
Deep seating, tailored upholstery, and configurable modules for apartments, villas, and lounges.
Request Quote arrow_forward
Accent Seating
Contour Lounge Chair
A sculptural profile with ergonomic support, designed for quiet corners and statement suites.
Request Quote arrow_forward
Dining
Monolith Dining Table
Stone, veneer, and timber top options scaled for family dining or formal entertaining.
Request Quote arrow_forward
Storage
Linear Media Cabinet
A refined storage profile for media walls, display zones, and integrated living rooms.
Request Quote arrow_forwardVersion 02 / Featured Row
template-parts/sections/latest-pieces/featured-row.php
Version 02 / Featured Piece
Lowline Modular Sofa
A hero product format for pages that need one main furniture piece with supporting suggestions.
Request Quote
Contour Lounge Chair
Monolith Dining Table
Linear Media Cabinet
Material Finish Review
Version 03 / Compact Pieces
template-parts/sections/latest-pieces/compact-carousel.php
Version 03 / Compact Pieces
Recent wishlist-ready pieces.
Sofa
favorite
Chair
favorite
Table
favorite
Cabinet
favoriteWishlist Journey
Process sections that explain the wishlist-first request flow.
3 reusable variants available.
Version 01 / Stepped Cards
template-parts/sections/wishlist-journey/stepped-cards.php
Wishlist-Led Journey
A guided selection path for considered interiors.
Furniture decisions need measurements, finishes, delivery planning, and room context. The homepage can introduce that quote-first flow now, while ACF and WooCommerce fields power it later.
Step 01
Wishlist the pieces
Save products, finishes, and room ideas without forcing a transaction.
Step 02
Share room details
Collect dimensions, inspiration, finish preferences, and customization needs.
Step 03
Receive a quote
The team confirms availability, lead time, finish options, and delivery terms.
Version 02 / Process Band
template-parts/sections/wishlist-journey/process-band.php
Version 02 / Process Band
A simple path from saved pieces to proposal.
01
Save pieces
02
Share room details
03
Receive proposal
Version 03 / Compact Checklist
template-parts/sections/wishlist-journey/compact-checklist.php
Version 03 / Compact Journey
Before we prepare a quote.
Wishlist pieces
Room measurements
Finish preferences
Explore by Room
Room-based browsing blocks for living, dining, bedroom, and outdoor needs.
3 reusable variants available.
Version 01 / Editorial Room Grid
template-parts/sections/explore-by-room/editorial-room-grid.php
Explore by Room
Composed spaces for every daily ritual.
Bedroom
Beds, nightstands, wardrobes
Soft profiles, concealed storage, and calm materials for private suites.
Workspace
Desks, shelving, meeting tables
Custom work settings that look integrated, not temporary.
Outdoor
Terrace seating and dining
Weather-ready forms for balconies, patios, and resort residences.
Version 02 / Room Spotlight
template-parts/sections/explore-by-room/spotlight-room.php
Version 02 / Room Spotlight
Start with the living room.
A focused room block for pages that need one primary room direction with a few supporting areas.
Version 03 / Compact Room Cards
template-parts/sections/explore-by-room/compact-room-cards.php
Version 03 / Compact Rooms
Rooms organized for scanning.
Material Library
Finish and material review blocks for quote precision.
3 reusable variants available.
Version 01 / Swatches Editorial
template-parts/sections/material-library/swatches-editorial.php
Material Library
Finishes that make each quote precise.
Static today, ACF-ready later: finish families, wood species, fabric grades, stone choices, and metal details can all become flexible content blocks.
Natural Timber
Walnut, oak, ash, and dark stained finishes for custom case goods and seating frames.
Tailored Upholstery
Performance fabrics, boucles, velvets, linens, and leather grades selected by usage.
Stone
Marble, travertine, quartz
For tabletops, consoles, plinths, and premium accent surfaces.
Metal
Brass, bronze, blackened steel
Used as structural detail, handle language, and refined trim.
Sizing
Made to measure options
Quote requests can capture custom dimensions before production review.
Version 02 / Sample Grid
template-parts/sections/material-library/sample-grid.php
Version 02 / Material Samples
Finish families prepared for review.
Timber
A compact material card that can later map to ACF repeater fields.
Upholstery
A compact material card that can later map to ACF repeater fields.
Stone
A compact material card that can later map to ACF repeater fields.
Version 03 / Compact Strip
template-parts/sections/material-library/compact-strip.php
Version 03 / Material Strip
Material options at a glance.
Walnut
Oak
Linen
Bronze
Trade and Showroom Support
Support blocks for project briefs, material review, delivery planning, and trade users.
3 reusable variants available.
Version 01 / Dark Support Grid
template-parts/sections/trade-showroom-support/dark-support-grid.php
For Homeowners, Designers & Developers
A showroom-backed quote process for serious projects.
Use the homepage to set expectations early: clients can save pieces, schedule a material review, or send a room brief before the team prepares a proposal.
Measurement Review
Room dimensions, access points, and placement constraints can be collected before quotation.
Finish Consultation
Clients compare woods, upholstery, stone, and hardware before finalizing the quote.
Delivery Planning
Lead time, site handling, installation needs, and white-glove service can be scoped clearly.
Trade Support
Interior designers and developers can request grouped quotes for complete rooms or projects.
Version 02 / Light Service Panel
template-parts/sections/trade-showroom-support/light-service-panel.php
Measurement Review
Finish Consultation
Delivery Planning
Trade Support
Version 03 / Compact Services
template-parts/sections/trade-showroom-support/compact-services.php
Version 03 / Compact Support
What the studio can review.
Measurements
Finishes
Lead Time
Installation
Contact Sections
WPForms-powered contact layouts for showroom visits, room briefs, and quote requests.
3 reusable variants available.
Version 01 / Editorial Contact
template-parts/sections/contact/editorial-split.php
Version 01 / Editorial Contact
Start with a room, a finish, or a piece you love.
Send the studio your project direction and we will respond with the next step for material review, measurements, and a quote-led proposal.
Studio Response
Room brief review, finish guidance, and quote preparation.
Visit
Showroom consultation by appointment
Discuss
Measurements, finishes, and project scope
Receive
A furniture proposal from the studio
Version 02 / Showroom Panel
template-parts/sections/contact/showroom-panel.php
Version 02 / Showroom Panel
Tell us what your space needs next.
A balanced contact section for service pages, About pages, or any template where showroom details and the form need equal weight.
Showroom
Visit the Albha studio
Bring room dimensions, inspiration images, or wishlist pieces for review.
Studio Hours
By appointment
The team will confirm the best time for a material or project consultation.
Version 03 / Compact Contact
template-parts/sections/contact/compact-band.php
Version 03 / Compact Contact
Have a room brief ready?
A tighter contact layout for the end of inner pages, category pages, or quote-focused landing pages.
Team Sections
Team member layouts for profile grids, editorial leadership, and carousel showcases.
3 reusable variants available.
Version 01 / Grid Cards
template-parts/sections/teams/grid-cards.php
Meet the Studio
People behind considered furniture guidance.
Connect with the Albha team for showroom visits, room planning, material review, and quote-ready product direction.
Aarav Shrestha
Studio lead focused on room planning, material coordination, and quote-ready furniture direction.
Nisha Rana
Furniture consultant supporting showroom visits, wishlist review, and finish selection.
Pranav Karki
Project coordinator for measurements, delivery planning, and installation notes.
Version 02 / Featured List
template-parts/sections/teams/featured-list.php
Studio Direction
A team built around material decisions and quote clarity.
Use this layout when one team member needs stronger emphasis while the wider studio remains easy to scan.
Featured Profile
Aarav Shrestha
Studio lead focused on room planning, material coordination, and quote-ready furniture direction.
Nisha Rana
Furniture consultant supporting showroom visits, wishlist review, and finish selection.
Pranav Karki
Project coordinator for measurements, delivery planning, and installation notes.
Version 03 / Team Slider
template-parts/sections/teams/team-slider.php
Team Carousel
Browse the people supporting your furniture decisions.
A compact team carousel for inner pages, showroom pages, and project inquiry pages.
Quote CTA
Final request actions for wishlist and proposal flows.
3 reusable variants available.
Version 01 / Centered CTA
template-parts/sections/quote-cta/centered.php
Wishlist First, Quote Next
Curate the pieces. We will prepare the proposal.
Version 02 / Split CTA
template-parts/sections/quote-cta/split-panel.php
Version 02 / Split CTA
Ready to turn saved pieces into a proposal?
Use this CTA when the page needs stronger context before the request action.
Version 03 / Compact Bar
template-parts/sections/quote-cta/compact-bar.php
Version 03 / Compact CTA