Porcelain Fog Black-Satin & Redcurrant Star Register

/porcelainFogBlacksatinRedcurrantStarRegister
A measured, document-inspired design system blending porcelain and fog-grey surfaces, strict serif rhythm, and functional redcurrant/golden star accents to establish credibility, clarity, and a calm, physically-grounded user experience.
Sep 17, 2026
Design System Content
# Porcelain Fog Black-Satin & Redcurrant Star Register

A design language for a cool morning-register system built on structural credibility, photographic honesty, and strict editorial rhythm.

---

## Philosophy

> "Credibility is created through visible structure and excellent serif cadence."

This system creates interfaces that feel like a rigorously maintained, high-end ledger. It eschews the digital aesthetic of floating elements and artificial decorations in favor of physical, document-like reality. Built from porcelain-white surfaces and fog-grey panels, the design relies on absolute structural alignment and photographic honesty to build immediate trust.

### Core Beliefs

1. **Document-Like Maintenance** — The interface should feel entered into a physical, ongoing ledger. Table alignments must be immaculate.
2. **Visible Structure over Invisible Containers** — Pale steel hairlines provide calm, clear boundaries for all information. 
3. **The Restrained Accent** — A dry redcurrant serves purely as a functional indicator for primary actions and selected active states. It is never decorative.
4. **Immediate Star Proof** — Golden yellow review stars serve as the core metric of trust, placed prominently and immediately in the hierarchy.
5. **Calm Information Architecture** — Three-column layouts provide breathing room and logical pacing for complex location and register details.

### Strict Rules

* **Restrained Typography** — Serif claims must be no larger than Bulma's `is-size-3`. Giant headings are strictly forbidden.
* **No Artificial Embellishments** — Refuses avatars, system badges, icons, AI florals, or decorative café motifs.
* **No Beige** — Warm, muddy backgrounds are banned in favor of cool fog-grey and pure porcelain-white.
* **Unembellished Details** — Location details and menu rows must be presented with bare, factual clarity.
* **Natural Imagery Only** — Photography must reflect physical reality (e.g., black leather diary corners, china cups, receipt books, rainy windows).

---

## Color Palette

### The Register Scale (Bulma SASS Variables)

The palette is rooted in cool, crisp morning light. Backgrounds are stark and clean, borders are delicate, and text is rendered in deep, satin black. 

```scss
/* Base Surfaces */
$white:        #ffffff !default; /* Porcelain-white surfaces */
$white-ter:    #f4f5f6 !default; /* Light fog-grey panels */
$grey-lighter: #e3e6e8 !default; /* Fog-grey backgrounds for calm columns */

/* Pale Steel Hairlines (Borders) */
$border:       #d1d6da !default; /* Document divider lines */
$border-hover: #b0b5ba !default; /* Subtle hover boundaries */

/* Black-Satin Body Ink (Typography) */
$black-bis:    #1a1c1e !default; /* Primary text, serif claims */
$grey-darker:  #3b4045 !default; /* Secondary information, location details */
$grey:         #7a8288 !default; /* Meta information, review counts */

/* Core Accents */
$warning:      #d4af37 !default; /* Golden yellow review stars ONLY */
$primary:      #8c2b2b !default; /* Dry redcurrant for primary actions/active states */

/* Destructive / Error (Strictly muted) */
$danger:       #6b2121 !default; /* Darker redcurrant variant */
```

### Applying the Palette

```html
<!-- Porcelain White Surface with Fog-Grey Panel -->
<div class="box has-background-white is-shadowless border-steel">
  <div class="has-background-white-ter p-4">
    <!-- Content -->
  </div>
</div>
```

---

## Typography

Typography pairs elegant, traditional serif headings with highly legible serif body copy to emulate a printed register. The baseline-led rhythm requires a standard 17–18px body size.

### Font Families

```scss
/* SASS Font Variables */
$family-serif-heading: 'Libre Caslon Text', 'Sorts Mill Goudy', 'Ovo', serif;
$family-serif-body: 'Spectral', 'Literata', 'Gentium Book Plus', serif;

$family-primary: $family-serif-body;
$family-secondary: $family-serif-heading;
```

### Font Size Scale & Rules

Giant headings are considered a common mistake and are disallowed. `is-size-3` is the maximum allowed size.

```scss
/* Bulma Size Overrides (Base 17-18px) */
$size-1: 2.5rem !default;    /* FORBIDDEN */
$size-2: 2rem !default;      /* FORBIDDEN */
$size-3: 1.75rem !default;   /* Maximum Restrained Serif Claim */
$size-4: 1.5rem !default;    /* Secondary claims, layout headers */
$size-5: 1.25rem !default;   /* Column headers, menu row titles */
$size-6: 1.125rem !default;  /* Base body size (18px) */
$size-7: 0.95rem !default;   /* Unembellished location details, review counts */
```

### Hierarchy Examples

| Element | Bulma Class | Font Family | Color | Characteristics |
| --- | --- | --- | --- | --- |
| Hero Claim | `is-size-3` | `$family-secondary` | `$black-bis` | Restrained, max size |
| Review Count | `is-size-7` | `$family-primary` | `$grey` | Centered paragraph |
| Section Header | `is-size-4` | `$family-secondary` | `$black-bis` | Tidy, flush-left |
| Body Copy | `is-size-6` | `$family-primary` | `$grey-darker` | Baseline-led rhythm |
| Menu Rows | `is-size-5` | `$family-primary` | `$black-bis` | Tabular alignment |

---

## Animation & Motion

### Core Philosophy: The Slow Document

Motion is practically non-existent. There are no bouncy springs, no sliding panels, and no heavy transformations. Interactions rely on slow fades and subtle link darkening to maintain the illusion of a static, printed register.

### CSS Transitions

```css
/* Global interaction rules */
a, .button, .document-row {
  transition: background-color 0.4s ease-in-out, 
              color 0.4s ease-in-out, 
              border-color 0.4s ease-in-out;
}

/* Subtle Link Darkening Only */
a:hover {
  color: #1a1c1e; /* Shifts to black-satin */
}

/* Slow Fades for State Changes */
.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 0.6s ease-in;
}
```

---

## Imagery Strategy

Photography acts as a textural anchor. Images must be raw, natural, and grounded in physical reality.
* **Required Subjects:** Black leather diary corners, china cups, receipt books, rainy windows.
* **Prohibited:** AI-generated florals, sterile vector illustrations, stylized café motifs, avatars.

```html
<!-- Natural Hero Photograph Container -->
<figure class="image is-3by1 border-steel">
  <img src="rainy-window-ledger.jpg" alt="Rain on window overlooking ledger" style="object-fit: cover; filter: grayscale(10%);">
</figure>
```

---

## UI Components (Bulma Implementation)

### The Light Horizontal Navbar

A strictly utilitarian navigation bar acting as the document's header.

```html
<nav class="navbar is-white border-bottom-steel" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item has-text-black-bis is-family-secondary is-size-4">
      Register
    </a>
  </div>
  <div class="navbar-menu">
    <div class="navbar-end">
      <a class="navbar-item">Index</a>
      <a class="navbar-item">Directory</a>
    </div>
  </div>
</nav>
```

### Immediate Star Proof & Review Paragraph

Golden yellow stars paired with a centered review-count paragraph.

```html
<div class="has-text-centered my-5">
  <div class="is-flex is-justify-content-center mb-2">
    <!-- Golden Yellow Stars -->
    <span class="has-text-warning is-size-5">★★★★★</span>
  </div>
  <p class="is-size-7 has-text-grey">
    Derived from 1,204 authenticated ledger entries.
  </p>
</div>
```

### Three Calm Information Columns

Compact but breathable sections with tidy old-builder gutters.

```html
<div class="columns is-variable is-6 my-5">
  <div class="column is-4">
    <h3 class="is-size-5 is-family-secondary has-text-black-bis mb-3">Provenance</h3>
    <p class="is-size-6 has-text-grey-darker">Documented evidence of structural integrity and origin.</p>
  </div>
  <div class="column is-4 border-left-steel">
    <h3 class="is-size-5 is-family-secondary has-text-black-bis mb-3">Condition</h3>
    <p class="is-size-6 has-text-grey-darker">Maintained securely within fog-grey atmospheric parameters.</p>
  </div>
  <div class="column is-4 border-left-steel">
    <h3 class="is-size-5 is-family-secondary has-text-black-bis mb-3">Location</h3>
    <p class="is-size-6 has-text-grey-darker">Row 4, Section B.</p>
  </div>
</div>
```

### Document-Like Menu Rows

Weak table alignment is a critical failure. Rows must be absolute and unembellished.

```html
<div class="box is-shadowless has-background-white-ter border-steel p-0">
  <table class="table is-fullwidth is-hoverable has-background-transparent mb-0">
    <tbody>
      <tr>
        <td class="has-text-black-bis is-size-6 py-4 pl-5">Morning Register Volume I</td>
        <td class="has-text-right has-text-grey py-4 pr-5">08:00 AM</td>
      </tr>
      <tr>
        <td class="has-text-black-bis is-size-6 py-4 pl-5 border-top-steel">Morning Register Volume II</td>
        <td class="has-text-right has-text-grey py-4 pr-5 border-top-steel">09:30 AM</td>
      </tr>
    </tbody>
  </table>
</div>
```

### Primary Action (Dry Redcurrant)

```html
<!-- Only used for the absolute primary action -->
<button class="button is-primary is-radiusless has-text-weight-normal px-6">
  Enter Record
</button>
```

---

## Quality Checklist

* [ ] Is the hero heading restricted to `is-size-3` (or smaller) with a serif typeface?
* [ ] Does the page use exact pale steel (`#d1d6da`) hairlines instead of box-shadows?
* [ ] Is the layout utilizing exactly three calm information columns for metadata?
* [ ] Are the review stars immediately visible and colored golden yellow?
* [ ] Are all icons, badges, and avatars completely removed from the interface?
* [ ] Is the primary accent color a dry redcurrant, firmly avoiding bright/sugary reds?
* [ ] Are the gutters and table alignments strictly maintained on a horizontal baseline?

---

## Allowed vs Not Allowed

### ✓ Allowed
* Porcelain-white and fog-grey backgrounds to establish physical panels.
* Sharp, 1px pale steel borders.
* Slow CSS opacity fades on hover states.
* Golden yellow specifically and exclusively for review stars.
* Dry redcurrant restricted to primary active button states or selected tabs.
* Raw, moody photography (rainy windows, ledger books, black leather).

### ✗ Not Allowed
* Any heading larger than `1.75rem` (Bulma `is-size-3`).
* Sugary, bright reds (e.g., standard `#FF0000`).
* Decorative café motifs, AI florals, or beige color washes.
* Weak, staggered, or floating table alignments.
* User avatars, standard web icons (like gear, bell, or hamburger icons—use text instead).
* Box shadows, glowing effects, or spring animations.
Preview