China-Cabinet White & Mulberry Shadow Cards

/chinacabinetWhiteMulberryShadowCards
A design system for elegant, intimate, and restrained afternoon-tea site interfaces—focusing on immaculate whites, muted mulberry accents, clear boundaries, and classic UI cards with subtle shadows.
Sep 27, 2026
Design System Content
# China-Cabinet White & Mulberry Shadow Cards

A design language for intimate, restrained, and elegant afternoon-tea website-builder interfaces.

---

## Philosophy

> "Refinement is anchored by readable hierarchy; elegance requires restraint."

This system creates interfaces that feel like stepping into a well-kept, close-family dining room—immaculate, intentionally structured, and quietly beautiful. The aesthetic relies on the pristine purity of white spaces supporting pale, cool-grey structural elements. It avoids overwhelming the senses, favoring modest typography and strict alignment over flashy modern trends. 

### Core Beliefs

1. **Refinement through readable hierarchy** — Clarity is elegance. A clear, scannable structure prevents visual fatigue and respects the user's attention.
2. **Owner-editable blocks** — Components must have distinct, defined boundaries so creators know exactly where their content begins and ends.
3. **Restrained photographic elegance** — Imagery provides the atmosphere; the UI provides the frame. The interface must never compete with the content.
4. **Purposeful accents** — Color is used strictly to guide action, highlight current state, and provide moments of measured emphasis.

### Strict Rules

* **Light Navbar** — The top navigation must always remain bright, weightless, and structurally simple.
* **80% Centered Wrapper** — Content lives within a strictly centered container occupying exactly 80% of the viewport width.
* **Modest Serif Hero** — Hero text must be a dignified serif, constrained in size. No oversized, dominating luxury typography.
* **Paired Square CTAs** — Actions come in distinct, unrounded pairs, providing clear primary and secondary choices without playful corner radiuses.
* **Raised 2014-Style Cards** — Containers use a classic, deliberate drop shadow with minimal rounding to distinctly separate them from the pure white canvas.
* **Simple Ruled Menu Rows** — Navigation and list items are separated by clean, horizontal, pale-grey borders.

---

## Color Palette

### Base, Canvas & Graphite Scale

The palette rejects warm beiges entirely, utilizing pure white canvases offset by pale cool-grey structural shells. Typography acts as the graphite anchor—deep, cool, and highly legible. 

```css
/* Canvas & Shells */
bg-white              /* Pure white master canvas (#ffffff) */
bg-slate-50           /* Pale cool-grey card shells and secondary blocks */
bg-slate-100          /* Hover backgrounds for simple ruled rows */
bg-slate-200          /* Distinct structural borders and simple rules */

/* Typography (Graphite) */
text-slate-900        /* Primary graphite headers, modest hero text */
text-slate-800        /* Standard body copy */
text-slate-600        /* Metadata, subtle captions, input placeholders */
text-slate-400        /* Disabled states, inactive UI elements */

/* Golden Yellow (Exclusively for Reviews) */
text-amber-400        /* Review stars, rating indicators only */

/* Dry Mulberry (Accent) */
/* Must be a dry, sophisticated tone—never sugary or bright purple */
bg-rose-900           /* Primary square CTAs */
text-rose-900         /* Active navigation links, single pull quote, text links */
border-rose-900       /* Secondary paired CTA borders, active state underlines */
```

---

## Typography

Typography pairs classic, dignified Serif headers (Cormorant Garamond, Lora, or Libre Baskerville) with highly readable Sans Serif body copy (Lato, PT Sans, or Source Sans Pro). 

### Font Philosophy & Sizing

The body text is locked into a highly readable 17–18px scale. Hero text remains distinctly modest.

```css
/* Font Families */
font-serif       /* Headers, pull quotes, modest hero titles */
font-sans        /* Body copy, buttons, metadata, UI text */

/* Font Size Scale */
text-sm          /* Utilities, simple menu metadata (14px) */
text-base        /* Standard UI labels (16px) */
text-[17px]      /* Primary body copy - Core philosophical requirement */
text-lg          /* Secondary body copy / Intro text (18px) */
text-xl          /* Standard card headers */
text-2xl         /* Section block titles */
text-4xl         /* Modest Hero (Maximum allowed header size) */
```

### Weights & Spacing

```css
font-normal      /* Standard body copy and secondary headers */
font-medium      /* Active navigation items, button text */
font-semibold    /* Card titles, strong emphasis */

tracking-normal  /* Consistent, default spacing across all text */
```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Spacing |
| --- | --- | --- | --- | --- | --- |
| Modest Hero | Serif | 4xl | normal | slate-900 | normal |
| Pull Quote | Serif | 2xl | normal | rose-900 | normal |
| Section Title | Serif | 2xl | semibold | slate-900 | normal |
| Body Text | Sans | [17px] | normal | slate-800 | normal |
| CTA Button | Sans | base | medium | white | normal |
| Review Stars | Icon | base | n/a | amber-400 | normal |

---

## Spacing & Layout

### Core Philosophy: Structured Intimacy

Unlike sparse luxury sites with massive showroom gaps, this system relies on narrow gutters and consistent baselines. Content feels close, connected, and familial.

```css
/* Structural Layout */
w-[80%] mx-auto  /* The mandatory 80% centered wrapper */

/* Grid & Gutter Philosophy */
gap-4            /* Narrow, intimate spacing between sibling elements */
gap-6            /* Standard gap for card arrays */
gap-8            /* Maximum vertical rhythm between owner-editable blocks */

/* Padding (Avoid oversized gaps) */
py-8             /* Standard vertical section padding */
py-12            /* Maximum hero padding */
```

---

## Animation System

### Core Philosophy: Strict Simplicity

Motion is virtually non-existent to preserve a grounded, physical feel. The UI responds strictly through opacity fades and underline hovers. No scaling, no spring physics, no blurs.

### Fades & Hovers

```tsx
/* Standard Hover Fades */
transition-opacity duration-200 ease-in-out hover:opacity-80

/* Navigation/Text Link Hovers */
hover:underline decoration-rose-900 underline-offset-4
```

---

## UI Components

### The 80% Centered Layout Wrapper

All page content must be housed within this strict boundary to maintain the structured afternoon-tea aesthetic.

```tsx
<main className="w-[80%] mx-auto bg-white min-h-screen">
  {/* Content blocks */}
</main>
```

### Light Navbar & Simple Ruled Rows

```tsx
// Light Navbar
"w-full bg-white border-b border-slate-200 py-4 flex items-center justify-between"

// Simple Ruled Menu Row
"w-full py-3 border-b border-slate-200 text-slate-800 font-sans text-[17px] hover:bg-slate-50 transition-colors"
```

### The Mulberry Pull Quote

The only place the accent color is used purely for typographic impact.

```tsx
<blockquote className="font-serif text-2xl text-rose-900 border-l-2 border-rose-900 pl-4 my-6">
  "Refinement is poured, not painted."
</blockquote>
```

---

## Component Catalog

### Cards (Raised 2014-Style)

No diffuse modern shadows. Cards have defined boundaries, pale cool-grey backgrounds, distinct drop shadows, and sharp corners.

```tsx
// 2014-Style Raised Shell Card
"bg-slate-50 border border-slate-200 shadow-md rounded-none p-6"

// Compact Contact Block
"bg-slate-50 border border-slate-200 shadow-md rounded-none p-4 flex flex-col gap-4 max-w-sm"
```

### Paired Square CTAs

Always presented together (Primary and Secondary), completely square, utilizing the Dry Mulberry accent.

```tsx
<div className="flex gap-4">
  {/* Primary Square CTA */}
  <button className="bg-rose-900 text-white font-sans font-medium text-base px-6 py-3 rounded-none hover:opacity-80 transition-opacity">
    Primary Action
  </button>
  
  {/* Secondary Square CTA */}
  <button className="bg-transparent border-2 border-rose-900 text-rose-900 font-sans font-medium text-base px-6 py-3 rounded-none hover:bg-rose-900 hover:text-white transition-colors">
    Secondary Action
  </button>
</div>
```

### Review Displays

Golden yellow is strictly reserved for this element.

```tsx
// Golden Yellow Review Stars
<div className="flex gap-1 text-amber-400">
  <StarIcon className="w-5 h-5 fill-current" />
  <StarIcon className="w-5 h-5 fill-current" />
  <StarIcon className="w-5 h-5 fill-current" />
</div>
```

---

## Imagery & Content Directives

*   **Subject Matter:** Photography must feature china cups, cake stands, floral tablecloth fragments, or silver spoons.
*   **Aesthetic:** Restrained elegance, highly curated, deeply domestic but immaculately presented.

---

## Quality Checklist

* [ ] Is the page content entirely constrained within an `w-[80%] mx-auto` wrapper?
* [ ] Are all standard body texts strictly sized between 17–18px (`text-[17px]` or `text-lg`)?
* [ ] Are buttons perfectly square (`rounded-none`) and presented in pairs?
* [ ] Is the hero typography modest (`text-4xl` maximum) and using a serif font?
* [ ] Does all interactive motion rely *only* on opacity fades and underline hovers?
* [ ] Are card shells utilizing the pale cool-grey (`bg-slate-50`) with a defined 2014-style shadow (`shadow-md`)?
* [ ] Are all review stars utilizing the singular golden yellow (`text-amber-400`)?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Pure white backgrounds paired with pale cool-grey elements.
* Deep graphite text for exceptional contrast and readability.
* Distinct, clear container borders and raised classic shadows.
* Narrow spacing gaps to maintain a connected visual structure.
* Imagery focused on elegant, domestic afternoon-tea elements.

### ✗ Not Allowed

* **Beige or warm backgrounds** (Violates the pure white/cool-grey rule).
* **Sugary purple** (Accent must remain a dry, sophisticated mulberry).
* **Oversized luxury headings** (Hero text must remain modest and dignified).
* **Random, modern, or diffuse card shadows** (Shadows must be deliberate and classic 2014-style).
* **Weak contrast** (Graphite text must remain dark and readable).
* **Showroom gaps** (Do not use massive vertical whitespace; keep spacing intimate).
* **Stickers, ornate borders, avatars, or gradients** (Completely forbidden; breaks the restrained photographic elegance).
Preview