Ice-Vellum Black Leather & Rouge Schedule Ledger

/icevellumBlackLeatherRougeScheduleLedger
A tactile, diary-inspired design system. Prioritizes grid structure, editorial serif typography, authentic photography, and restrained luxury through disciplined color use and analog UI elements.
Sep 18, 2026
Design System Content
# Ice-Vellum Black Leather & Rouge Schedule Ledger

A design language for elegant, structured, and highly tactile diary-inspired interfaces.

---

## Philosophy

> "Refinement is born of maintained structure; restraint is the ultimate luxury."

This system rejects digital artifice in favor of physical analog truths. It creates interfaces that feel like opening a pristine, high-end leather diary. The layout relies on structural honesty, relying exclusively on typographical rhythm and strict grid alignment. It is utterly devoid of modern UI tropes like glowing gradients, floating avatars, or illustrative icons. 

### Core Beliefs

1. **Refinement comes from maintained structure** — Grids are inflexible and reliable. We use compact 2014-builder modules with perfectly aligned gutters.
2. **Legible serif rhythm** — Typography is not meant to shout; it is meant to be read. We rely on classic serif pairings to create a cadence of authority and permanence.
3. **Honest photography anchors the page** — Imagery is grounded in reality and texture, completely replacing iconography or vector illustrations.
4. **Restraint governs priority** — White space (ice-vellum) is the default. Accents are applied with surgical precision. 

### Strict Rules

* **No Icons, Badges, or Avatars** — Use pure typography and authentic photography instead.
* **No Beige or Gradients** — Backgrounds remain strictly flat ice-vellum or pale pewter.
* **Capped Typography** — Headlines are strictly serif and never exceed `is-size-3` (3xl). Oversized luxury type is a cliché and is forbidden.
* **Image-Led Heroes** — The top of the interface is always anchored by honest, textured photography.
* **Stars Immediately Below Claim** — Golden review stars anchor directly underneath the primary serif headline, followed immediately by a centered review-count section.
* **Direct Location Details** — Metadata like addresses and locations are presented directly and honestly in table-like rows.

---

## Color Palette

### The Diary Scale & Accents

The palette mimics the physical materials of a high-end ledger. It rejects pure digital white and jet black, opting instead for paper, pewter, and ink. Bulma SASS variables are overridden to enforce these strict physical tones.

```scss
/* Bulma SASS Variables Overrides */

/* Backgrounds & Surfaces */
$ice-vellum:       #FBFBF9; /* Main canvas background - paper texture implies */
$pale-pewter:      #E6E7E9; /* Secondary panels, alternating table rows */
$body-background-color: $ice-vellum;

/* Borders */
$silver-hairline:  #C4C6C9; /* 1px strict grid lines and table borders */
$border:           $silver-hairline;

/* Typography: Blue-Black Leather Ink */
$blue-black:       #0A111C; /* Primary text, serif headlines, active tabs */
$blue-black-muted: #3B424D; /* Secondary body copy, metadata */
$text-strong:      $blue-black;
$text:             $blue-black-muted;

/* The Accents */
$rouge-lipstick:   #9B1C31; /* CTAs, active nav, single proof lines. NO CANDY RED. */
$golden-star:      #C5A059; /* Exclusively for review stars */
$primary:          $rouge-lipstick;
$warning:          $golden-star;

/* System Rejections (Variables set to null or repurposed to prevent usage) */
$success:          #0A111C; /* Forces reliance on structure, not color */
$danger:           #9B1C31; 
$info:             #3B424D;
```

---

## Typography

The typographic system is built entirely on premium Serifs. We reject sans-serif uniformity in favor of the rhythmic legibility of editorial ledgers. 

### Font Families

```scss
/* Bulma Typography Overrides */
$family-heading: 'Rosarivo', 'Sorts Mill Goudy', 'Linden Hill', serif;
$family-body:    'Literata', 'Spectral', 'Alegreya', serif;
$body-size:      17px; /* Strict 17-18px range for honest legibility */
```

### Font Size Scale & Rules

```scss
/* Allowed Size Classes */
.is-size-3 /* MAX SIZE (2rem). Hero headlines. */
.is-size-4 /* Sub-claims, prominent review counts. */
.is-size-5 /* High-level menu rows, section titles. */
.is-size-6 /* Standard body copy, 17-18px base. */
.is-size-7 /* Micro-ledger details, direct location data. */

/* FORBIDDEN: .is-size-1, .is-size-2 */
```

### Hierarchy & Rhythm

| Element | Bulma Class | Font Family | Color | Characteristics |
| --- | --- | --- | --- | --- |
| Headline | `title is-size-3` | Heading Serif | `$blue-black` | Never bold, standard tracking. |
| Proof Line | `subtitle is-size-5`| Heading Serif | `$rouge-lipstick` | Single use per view. |
| Body Copy | `content is-size-6` | Body Serif | `$blue-black-muted`| 17-18px base, ample line-height. |
| Location Data | `is-size-7` | Body Serif | `$blue-black-muted`| Utilitarian, aligned strictly to grid. |

---

## Spacing, Grid & Motion

### Spacing Philosophy: 2014-Builder Modules
The layout structure embraces compact, highly reliable grid modules. Everything sits on a strict baseline. We use aligned gutters and enforce consistent row heights across all tables and menus. 

### Motion System: Utmost Restraint
Spring animations and complex translates feel digital and cheap. Motion in this system must emulate ink absorbing into paper or an eye shifting focus.

```css
/* Permitted Animations Only */

/* Opacity Fades (For page loads and modal entries) */
.fade-in {
  animation: inkFade 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) forwards;
}

@keyframes inkFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Fine Underline Hovers (For active nav and text links) */
.rouge-hover-link {
  position: relative;
  text-decoration: none;
}
.rouge-hover-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: transparent;
  transition: background-color 0.2s ease;
}
.rouge-hover-link:hover::after {
  background-color: #9B1C31; /* Rouge-lipstick */
}
```

---

## Imagery Framework

Honest photography replaces all vector artwork, icons, and avatars. Photography should feel tactile, grounded, and slightly moody.

**Approved Subjects & Textures:**
* Bound black leather diaries.
* Macro shots of wet glass (condensation, rain on panes).
* Neatly folded paper receipts.
* Tarnished silver spoons or high-end cutlery.

**Forbidden Imagery:**
* Perfume ad clichés (hyper-glossy, soft-focus models).
* Floating isometric graphics.
* User avatars (use typographic initials or pure names in table structures).

---

## Component Catalog

### Navigation
The navbar is uncompromisingly light and slim. It acts as a structural border rather than a heavy header.

```html
<!-- Slim, Ice-Vellum Navbar -->
<nav class="navbar is-transparent border-bottom-hairline" role="navigation">
  <div class="navbar-brand">
    <a class="navbar-item is-family-heading is-size-4 has-text-blue-black" href="/">
      Ledger.
    </a>
  </div>
  <div class="navbar-menu">
    <div class="navbar-end">
      <!-- Active state uses Rouge-Lipstick fine underline -->
      <a class="navbar-item rouge-hover-link is-active">Chronicle</a>
      <a class="navbar-item rouge-hover-link">Locations</a>
    </div>
  </div>
</nav>
```

### Image-Led Hero & Review Anchors
The hero must feature a tactile image, a max-3xl headline, and golden stars *immediately* followed by a centered review count.

```html
<section class="hero is-medium has-background-ice-vellum">
  <!-- Honest Photography Header -->
  <figure class="image is-3by1 border-bottom-hairline mb-5">
    <img src="wet-glass-texture.jpg" alt="Condensation on glass">
  </figure>
  
  <div class="hero-body has-text-centered pt-2">
    <!-- Capped 3xl Serif Headline -->
    <h1 class="title is-size-3 is-family-heading has-text-blue-black mb-2">
      The Evening Standard
    </h1>
    
    <!-- Stars Immediately Below Claim -->
    <div class="is-flex is-justify-content-center mb-1">
      <span class="has-text-warning">★★★★★</span>
    </div>
    
    <!-- Centered Review-Count Section -->
    <p class="is-size-7 has-text-blue-black-muted is-family-body is-uppercase tracking-wide">
      Based on 142 documented receipts
    </p>

    <!-- One Proof Line in Rouge -->
    <p class="subtitle is-size-5 is-family-heading has-text-primary mt-4">
      An exercise in quiet permanence.
    </p>
  </div>
</section>
```

### Table-Like Menu Rows
We reject floating cards and cramped data representations. Menus are structural, utilizing pale pewter backgrounds and silver hairlines.

```html
<!-- Consistent Row Height, Table-Like Structure -->
<table class="table is-fullwidth is-hoverable has-background-ice-vellum ledger-table">
  <tbody>
    <!-- Pale Pewter Hover States -->
    <tr class="border-bottom-hairline">
      <td class="is-vcentered py-4">
        <h3 class="is-size-5 is-family-heading has-text-blue-black">Black Leather Folio</h3>
        <p class="is-size-7 has-text-blue-black-muted mt-1">Direct Location: Vault 04, Row B</p>
      </td>
      <td class="is-vcentered has-text-right py-4">
        <button class="button is-outlined is-primary is-radiusless">
          Request
        </button>
      </td>
    </tr>
    <!-- Additional Rows Maintain Exact Gutter/Height -->
  </tbody>
</table>
```

### Call to Action (CTA)
Buttons are sharp, relying on the rouge-lipstick accent for action. No rounded pills.

```html
<!-- Rouge-Lipstick CTA -->
<button class="button is-primary is-radiusless is-family-heading is-size-6 px-6">
  Confirm Entry
</button>

<!-- Secondary Action -->
<button class="button is-ghost has-text-blue-black rouge-hover-link is-radiusless">
  Review Ledger
</button>
```

---

## Quality Checklist

* [ ] Is the primary headline strictly `is-size-3` or smaller?
* [ ] Are the golden review stars positioned immediately underneath the headline?
* [ ] Is the review count centered below the stars?
* [ ] Is the active navigation state indicated *only* by a fine rouge underline?
* [ ] Did you use actual photography (wet glass, leather, receipts) instead of icons?
* [ ] Are lists formatted as expansive, table-like rows rather than cramped grid cards?
* [ ] Is the rouge-lipstick accent applied carefully (CTA, one proof line, active nav) rather than painted indiscriminately?
* [ ] Are all UI borders set to the precise 1px silver hairline?

---

## Allowed vs Not Allowed

### ✓ Allowed
* Compact, aligned grid modules mirroring 2014-era structural stability.
* Serif fonts for both headings and body, ensuring a continuous reading rhythm.
* Pale pewter (`#E6E7E9`) to alternate table rows or define utility panels.
* Direct, highly specific location details printed plainly on the page.
* Opacity-based fade-ins.

### ✗ Not Allowed
* Candy red (hex `#FF0000` or similar). Rouge must remain controlled and grounded (`#9B1C31`).
* Oversized luxury type (`is-size-1` or `is-size-2`). 
* Avatars, vector illustrations, badges, or emojis of any kind.
* Drop shadows, background blurs, or gradients.
* Beige hues. Keep the background in the cool ice-vellum/pewter spectrum. 
* Spring physics or translate-based motion.
Preview