Opal Smoke Black-Satin & Vermilion Schedule

/opalSmokeBlacksatinVermilionSchedule
A disciplined, editorial design system blending tactile analog motifs, rigorous typographic alignment, and practical density. Prioritizes table-like structure, restrained accent use, and utilitarian elegance over superfluous embellishment or luxury emptiness.
Sep 18, 2026
Design System Content
# Opal Smoke Black-Satin & Vermilion Schedule Card

A design language for practical, highly disciplined, and elegantly scheduled interfaces.

---

## Philosophy

> "Sophistication should feel practical, structured, and inherently owner-editable."

This system creates interfaces that feel like a high-end physical ledger, an old-builder schedule, or a meticulously maintained reservation diary. The aesthetic relies on structural density, rigorous typographic alignments, and a tactile, lived-in mood. It rejects the overly spaced "luxury showroom" in favor of disciplined, table-like utility.

### Core Beliefs

1. **Typographic Discipline** — A full calendar or menu requires rigorous alignment and clear hierarchy. Text must be generous and highly readable without relying on excessive scale.
2. **Disciplined Density** — Interfaces should utilize medium gutters and tight row spacing. Showroom emptiness is wasteful; the layout must feel rich with practical data.
3. **The Dry Accent** — The vermilion accent is reserved exclusively for primary bookings and active states. It acts as a deliberate stamp of action, never as a decorative wash.
4. **Editorial Atmosphere** — Imagery carries the mood. Visuals should evoke leather diary corners, folded menus, worn wet pavement, and red lipstick, grounding the digital structure in a tactile, analog world.
5. **Utilitarian Elegance** — Addresses, schedules, and menus remain entirely unembellished. Precision in table-like structures replaces the need for badges, avatars, or generic icons.

### Strict Rules

* **Split Photo Hero** — The hero section must strictly divide photography and content.
* **Restrained Hero Scale** — The main sans-serif hero claim must never exceed `3xl`.
* **Standardized Review Proof** — Golden review stars must sit immediately beneath the hero claim, followed by a centered review-count proof.
* **No Showroom Emptiness** — Avoid vast, empty white space. Use medium gutters and disciplined, rhythmic row spacing.
* **No Badges or Avatars** — Rely purely on typography and layout for status and identity.
* **No Gradients or Beige** — Surfaces must remain flat and true to the opal-white and smoke-grey palette.
* **No Generic Icons** — Remove standard UI iconography; rely on text labels and structural lines.

---

## Color Palette

### The Schedule Scale

The palette replaces sterile whites and flat greys with tactile, physical tones: opal-white surfaces, pale smoke-grey cards, and black-satin ink. The accent is a dry, matte vermilion, explicitly restricted to primary booking actions.

```css
:root {
  /* Surfaces & Backgrounds */
  --color-opal-white: #FAFCFC;     /* Main canvas, immaculate but warm */
  --color-smoke-grey: #F1F2F3;     /* Standard card backgrounds, schedule blocks */
  --color-smoke-dark: #E4E5E6;     /* Hover states for cards, active menu rows */
  
  /* Hairlines & Borders */
  --color-graphite-light: #D1D3D4; /* Subtle dividers, inactive table boundaries */
  --color-graphite: #8C8E91;       /* Strong structural hairlines, input borders */
  
  /* The Booking Accent: Dry Vermilion */
  --color-vermilion: #C24A3D;      /* Bookings, active states, calendar selections */
  --color-vermilion-hover: #A63F34;/* Hover state for primary actions (No bright scarlet) */
  --color-vermilion-fade: #FDF4F3; /* Ultra-subtle active row backgrounds */

  /* Typography: Black-Satin Ink */
  --color-black-satin: #191A1A;    /* Primary headings, high-contrast values */
  --color-ink-faded: #4A4D4F;      /* Secondary body text, scheduled times */
  --color-ink-muted: #76797C;      /* Meta text, unembellished address details */

  /* The Proof Indicator */
  --color-gold: #C5A059;           /* Reserved entirely for review stars */
}

/* Base Utility Classes */
.bg-opal { background-color: var(--color-opal-white); }
.bg-smoke { background-color: var(--color-smoke-grey); }
.border-graphite { border-color: var(--color-graphite); }
.text-satin { color: var(--color-black-satin); }
```

---

## Typography

The typographic system pairs elegant, Humanist sans-serif headings (evoking classic editorial print) with highly legible, generous Grotesque or Geometric body fonts for dense schedule rows. 

### Font Families

```css
:root {
  /* Headings: Gill Sans Nova, Myriad Pro, or Humanist 521 */
  --font-heading: "Gill Sans Nova", "Myriad Pro", "Humanist 521", sans-serif;
  
  /* Body: Karla, Assistant, or Fira Sans */
  --font-body: "Karla", "Assistant", "Fira Sans", sans-serif;
}
```

### Font Weights

```css
.font-book      /* font-weight: 400; Standard schedules, addresses, unembellished data */
.font-medium    /* font-weight: 500; Table headers, menu row titles, standard claims */
.font-semibold  /* font-weight: 600; Only for primary booking buttons or active tabs */
/* Ultra-bold weights are entirely rejected */
```

### Font Size Scale (Restricted)

```css
.text-sm        /* 14px - Unembellished address details, table data */
.text-base      /* 16px - Generous body copy, standard menu items */
.text-lg        /* 18px - Editorial subheadings, schedule block titles */
.text-xl        /* 20px - Secondary section headers */
.text-2xl       /* 24px - Split hero secondary claims */
.text-3xl       /* 30px - MAXIMUM SIZE. Used exclusively for the Sans Hero Claim */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Font Family |
| --- | --- | --- | --- | --- |
| Sans Hero Claim | 3xl | medium | black-satin | Heading (Humanist) |
| Editorial Body | base | book | ink-faded | Body (Grotesque) |
| Menu Row Item | base | medium | black-satin | Body (Grotesque) |
| Address Details | sm | book | ink-muted | Body (Grotesque) |
| Booking Action | base | semibold | opal-white | Heading (Humanist) |

---

## Animation System

### Core Philosophy: Lived-in Physicality

Animations should mimic the turning of a heavy, high-quality page or the slight physical reveal of a folded menu. Nothing snaps; everything glides into focus deliberately.

### Page & Image Transitions (Slow Fades)

```css
.fade-enter {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-enter-active {
  opacity: 1;
}
```

### Micro-Interactions (Mild Lift & Fine Underline)

Hovering over editorial imagery causes a barely perceptible physical lift. Text links rely on extremely fine hairlines rather than background shifts.

```css
/* Mild Image Lift */
.image-editorial-hover {
  transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}
.image-editorial-hover:hover {
  transform: translateY(-2px);
}

/* Fine Underline Hover */
.link-hover {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.4s ease;
}
.link-hover:hover {
  text-decoration-color: var(--color-black-satin);
}
```

---

## UI Components

### The Split Photo Hero

A mandatory structural pattern for top-level pages.

```html
<header class="split-hero">
  <div class="hero-content">
    <h1 class="hero-claim text-3xl font-medium text-satin">Standardized Claim Text</h1>
    <div class="review-proof-lockup">
      <div class="golden-stars text-gold">★★★★★</div>
      <span class="review-count text-sm text-ink-muted">Centered Review Proof</span>
    </div>
  </div>
  <div class="hero-imagery image-heavy">
    <!-- Image must reflect tactile mood: leather, red lipstick, folded menus, wet pavement -->
    <img src="tactile-editorial.jpg" alt="Editorial scene" class="mild-lift" />
  </div>
</header>
```

```css
.split-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem; /* Medium gutter, no showroom emptiness */
  align-items: center;
}
.review-proof-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1rem;
}
```

### Table-Like Menu Rows

Schedules and menus abandon cards in favor of rigorous, horizontal table rows separated by graphite hairlines.

```css
.menu-row {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-graphite-light);
  color: var(--color-black-satin);
}
.menu-row:hover {
  background-color: var(--color-smoke-dark); /* Kept subtle */
}
```

### Unembellished Address Details

Utilitarian structural blocks with no icons, no badges, and raw typographic alignment.

```html
<address class="text-sm font-book text-ink-muted" style="font-style: normal; line-height: 1.5;">
  1400 Editorial Way<br />
  Suite 4B<br />
  Graphite District
</address>
```

---

## Component Catalog

### Navigation

```css
/* Slim Light Navbar */
.navbar-slim {
  height: 48px;
  background-color: var(--color-opal-white);
  border-bottom: 1px solid var(--color-graphite-light);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
}
```

### Cards

Used sparingly (preferring table rows), but when required, they are strictly smoke-grey with graphite borders. No shadows.

```css
.schedule-card {
  background-color: var(--color-smoke-grey);
  border: 1px solid var(--color-graphite-light);
  padding: 1.5rem;
  border-radius: 2px; /* Brutally sharp, practical corners */
}
```

### Buttons

```css
/* Booking Action (Dry Vermilion) */
.btn-booking {
  background-color: var(--color-vermilion);
  color: var(--color-opal-white);
  font-family: var(--font-heading);
  font-weight: 600;
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 0;
  transition: background-color 0.4s ease;
}
.btn-booking:hover {
  background-color: var(--color-vermilion-hover);
}

/* Secondary Action */
.btn-secondary {
  background-color: transparent;
  color: var(--color-black-satin);
  border: 1px solid var(--color-graphite);
  padding: 0.75rem 2rem;
}
```

---

## Quality Checklist

* [ ] Is the hero claim size capped strictly at `3xl` or smaller?
* [ ] Does the review lockup immediately follow the hero claim, strictly centered with golden stars above the count?
* [ ] Is the page completely devoid of badges, avatars, generic icons, gradients, and beige?
* [ ] Are the address and contact details purely typographic and entirely unembellished?
* [ ] Does the imagery evoke analog textures (leather, lipstick, wet pavement, folded paper) rather than over-polished stock photography?
* [ ] Is the red used exclusively a dry vermilion (and absolutely never a bright scarlet)?
* [ ] Are layouts tight and rhythmic with medium gutters, specifically avoiding "luxury showroom" emptiness?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Opal-white and pale smoke-grey backgrounds.
* Medium gutters and strictly disciplined row spacing.
* A single, dry vermilion accent reserved strictly for bookings or active schedule states.
* Slow fades, mild physical image lifts, and fine underline hovers.
* Dense, table-like menu rows with graphite hairlines.
* Heavy editorial imagery featuring tactile, real-world analog elements.

### ✗ Not Allowed

* Bright scarlet buttons or overly saturated interactive elements.
* "Luxury emptiness" (massive padding and exaggerated white space).
* Avatars, profile circles, or status badges.
* Gradients or beige color values anywhere in the interface.
* Generic web icons (e.g., standard map pins, phone icons, user glyphs).
* Hero typography exceeding 3xl.
* Over-polished, corporate stock photography.
Preview