No preview available
Ice-Lilac Paper Carbon Ink & Rouge-Bookmark Café Sheet

/icelilacPaperCarbonInkRougebookmarkCafSheet
A restrained editorial system evoking a high-end café broadsheet; prioritizes icy palettes, rigid structure, and minimal rouge accents while excluding web clichés for severe, rhythmic, and image-driven interfaces.
Sep 17, 2026
Design System Content
# Ice-Lilac Paper Carbon Ink & Rouge-Bookmark Café Sheet

A delicate but severe design language for editorial interfaces, prioritizing rhythm, color temperature, and rigid structure over decorative emptiness.

---

## Philosophy

> "Mystery is born from color temperature, rigid cropping, and typographic rhythm—never from theatrical styling or hollow luxury."

This system creates interfaces that feel like a high-end physical café broadsheet or an independent editorial publication. It is deliberately restrained. The design rejects the emptiness of modern "luxury" web design and the heavy-handedness of gothic styling. Instead, it relies on ice-cold canvases, carefully structured HTML-style tables, and a single, razor-thin stroke of rouge red to guide the reader.

### Core Beliefs

1. **Temperature dictates mood** — True whites are cooled to ice; greys are tinted with barely-there lilac; blacks are deep carbon-violet. 
2. **Structure over styling** — Menus are formatted like careful, primitive HTML tables. Spacing follows repeatable, strict 2015-era modular grids. 
3. **The Accent is a bookmark, not a flood** — Rouge red is used exclusively as a narrow bookmark: a single fine underline, an active navigation state, or one editorial proof link.
4. **Imagery provides the texture** — The interface itself is flat and severe. Texture comes exclusively from photography: black leather, perfume-like glass reflections, folded menus, and wet pavement.
5. **Absolute refusal of app-clichés** — No badges, no avatars, no gradients, no icons, no beige.

### Strict Rules

* **Hero Capped at 3XL** — Giant, fashionable display typography is forbidden. The hero heading must never exceed the 3xl (`is-size-3`) scale.
* **Review Stars Placement** — Golden yellow stars exist *only* directly beneath the primary claim, never floating in structural voids.
* **Centered Proof Section** — Social proof and review counts must be center-aligned in a dedicated block.
* **Alternating Rows** — Editorial image and text rows must strictly alternate.
* **Location/Opening Rows** — Displayed simply, structurally, and without decorative icons.

---

## Color Palette

### The Temperature Scale

Built for Bulma SCSS variable overrides. The palette relies on icy highlights, lilac-grey structural blocks, and deep carbon-violet ink.

```scss
/* Canvas & Structural Backgrounds */
$scheme-main: #fcfcfd;        /* Ice-white pages (Base background) */
$background: #f4f3f7;         /* Barely lilac-grey (Content blocks, alternate table rows) */
$white-bis: #f8f7fa;          /* Subtle hover states for interactive rows */

/* Borders & Rules */
$border: #b8b8c0;             /* Cool pewter rules (Table borders, fine dividers) */
$border-light: #d1d1d6;       /* Micro-dividers */

/* The Carbon-Violet Ink (Typography) */
$text-strong: #1a1829;        /* Primary headings, hero text, active text */
$text: #2c2a3b;               /* Standard editorial body copy */
$text-light: #524f6b;         /* Muted editorial captions, table metadata */

/* Accents (Strictly Limited) */
$primary: #9b1b30;            /* Rouge-Bookmark Red (CTAs, fine underlines, 1 proof link) */
$warning: #e8b004;            /* Golden Yellow (Strictly for review stars only) */
```

---

## Typography

Typography relies on historical, literary serif faces. We avoid default system sans-serifs and fashionable, over-stylized display clichés.

### Font Stacks

```scss
$family-primary: 'Cardo', 'Vollkorn', 'Alegreya', serif;  /* Body and general reading */
$family-secondary: 'Eczar', 'Judson', serif;              /* Headings and primary claims */
$family-accent: 'Grenze', serif;                          /* Minimal, strictly limited use */
```

### Font Size Scale (Bulma Overrides)

Heading sizes are intentionally capped. We disable Bulma's `is-size-1` and `is-size-2` equivalents to enforce the 3xl maximum rule.

```scss
$size-1: 1.75rem; /* Capped: Maps to 3xl max. Hero headings only. */
$size-2: 1.5rem;  /* Section titles, alternating row headers */
$size-3: 1.25rem; /* Table category headers, proof section claims */
$size-4: 1.1rem;  /* Standard editorial leading text */
$size-5: 1rem;    /* Core body copy (16px) */
$size-6: 0.875rem;/* Captions, simple location/opening rows */
$size-7: 0.75rem; /* Tiny metadata, review counts */
```

### Letter Spacing & Transforms

```css
.is-tracked-normal { letter-spacing: 0; }
.is-tracked-wide { letter-spacing: 0.05em; } /* Used only for tiny all-caps metadata */
.is-uppercase { text-transform: uppercase; } /* Restricted to narrow use cases */
```

### Hierarchy Examples

| Element | Bulma Class | Font Family | Color | Characteristics |
| --- | --- | --- | --- | --- |
| Hero Claim | `is-size-1` | Eczar/Judson | `$text-strong` | Capped at 3xl, `has-text-weight-medium` |
| Proof Link | `is-size-6` | Cardo | `$primary` | Fine underline, rouge-bookmark red |
| Body Text | `is-size-5` | Cardo/Alegreya| `$text` | Medium gutters, strict 2015-era leading |
| Menu Item | `is-size-5` | Cardo | `$text-strong` | Displayed inside careful HTML tables |
| Metadata | `is-size-7` | Alegreya | `$text-light` | `is-uppercase`, `is-tracked-wide` |

---

## Animation System

### Core Philosophy: The Still Frame

Motion is barely perceptible. There is absolutely no parallax, no bouncy springs, and no 3D transforms. Interactions should feel like turning a thin, delicate page.

### Opacity Reveals & Fine Underlines

```css
/* Page / Image Reveals */
.fade-reveal {
  opacity: 0;
  animation: opacityReveal 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes opacityReveal {
  to { opacity: 1; }
}

/* Rouge-Bookmark Interaction */
.rouge-link {
  position: relative;
  color: $text-strong;
  transition: color 0.3s ease;
}

.rouge-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: $primary; /* Rouge-Bookmark Red */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.rouge-link:hover {
  color: $primary;
}

.rouge-link:hover::after {
  transform: scaleX(1);
}
```

---

## UI Components & Structure

### Slim Light Navbar

A severe, unembellished top navigation bar. No heavy shadows, no logos acting as large avatars.

```html
<nav class="navbar is-transparent has-border-bottom-pewter pt-2 pb-2">
  <div class="navbar-brand">
    <a class="navbar-item is-size-4 is-family-secondary has-text-weight-normal has-text-carbon">
      Café Title
    </a>
  </div>
  <div class="navbar-menu">
    <div class="navbar-end">
      <!-- Active navigation gets the rouge-bookmark red -->
      <a class="navbar-item rouge-link is-active has-text-primary">Menu</a>
      <a class="navbar-item rouge-link">Location</a>
    </div>
  </div>
</nav>
```

### The Hero & Centered Proof

Image-heavy, capped heading, with golden yellow stars *directly* beneath the claim.

```html
<section class="section is-medium has-background-ice-white">
  <div class="container is-max-desktop has-text-centered">
    <h1 class="title is-1 is-family-secondary has-text-carbon">
      A delicate severity.
    </h1>
    
    <!-- Golden Yellow Stars directly beneath claim -->
    <div class="stars-container mb-4">
      <span class="has-text-warning is-size-5">★★★★★</span>
    </div>

    <!-- Centered Proof Link in Rouge -->
    <a href="#reviews" class="rouge-link is-size-6 is-family-primary">
      Read the 124 editorial reviews
    </a>
  </div>
  
  <!-- Image Heavy Cropping -->
  <figure class="image mt-6 fade-reveal">
    <img src="wet-pavement-reflection.jpg" alt="Wet pavement outside café" />
  </figure>
</section>
```

### Careful HTML Table Menus

Menus refuse modern "card" layouts. They are rendered like meticulous HTML tables using cool pewter rules and barely lilac-grey backgrounds for structure.

```html
<table class="table is-fullwidth is-hoverable has-background-transparent menu-table">
  <thead>
    <tr>
      <th class="has-text-weight-normal is-size-6 has-text-light-carbon has-border-bottom-pewter">Pour</th>
      <th class="has-text-weight-normal is-size-6 has-text-light-carbon has-border-bottom-pewter has-text-right">Vol.</th>
    </tr>
  </thead>
  <tbody>
    <!-- Lilac-grey on hover via Bulma overrides -->
    <tr>
      <td class="is-family-primary is-size-5 has-text-carbon has-border-bottom-pewter-light">Carbon Espresso</td>
      <td class="is-family-primary is-size-5 has-text-carbon has-border-bottom-pewter-light has-text-right">3 oz</td>
    </tr>
    <tr>
      <td class="is-family-primary is-size-5 has-text-carbon has-border-bottom-pewter-light">Lilac Drip</td>
      <td class="is-family-primary is-size-5 has-text-carbon has-border-bottom-pewter-light has-text-right">8 oz</td>
    </tr>
  </tbody>
</table>
```

### Alternating Editorial Rows

Text and image rows alternate predictably, following strict 2015-era modular spacing and medium gutters.

```html
<div class="columns is-vcentered is-variable is-6 editorial-row my-6">
  <div class="column is-half">
    <figure class="image is-square">
      <img src="black-leather-texture.jpg" alt="Black leather seating" />
    </figure>
  </div>
  <div class="column is-half has-background-lilac-grey p-6">
    <h2 class="title is-2 is-family-secondary">Interior architecture</h2>
    <p class="is-size-5 is-family-primary">
      Simple text describing the room. No icons. No badges. 
    </p>
  </div>
</div>
<!-- Next row reverses the column order -->
```

### Simple Location/Opening Rows

```html
<div class="is-flex is-justify-content-space-between has-border-bottom-pewter py-3">
  <span class="is-size-6 is-family-primary has-text-carbon">Monday — Thursday</span>
  <span class="is-size-6 is-family-primary has-text-carbon">07:00 — 16:00</span>
</div>
```

---

## Imagery Guidelines

The absence of UI styling places immense pressure on photography to provide atmosphere. Images must strictly adhere to the following thematic constraints:

* **Black Leather:** Deep, rich shadows, extreme close-ups of seating or binding.
* **Perfume-like Glass Reflections:** High-contrast, sharp light hitting water glasses, windows, or extraction vessels.
* **Folded Menus:** Crisp paper edges, physical typography, macro photography of grain.
* **Wet Pavement:** Exterior context shown exclusively through rain, moody reflections, and severe environmental cropping.

---

## Quality Checklist

* [ ] Is the hero heading capped at `is-size-3` (or Bulma's overridden `is-size-1` max)?
* [ ] Are the golden yellow stars placed *immediately* under the primary claim?
* [ ] Is there exactly *one* rouge-bookmark red proof link in the hero?
* [ ] Are the menu items formatted in an HTML `<table class="table">` rather than flexbox cards?
* [ ] Are the borders strictly colored in cool pewter (`$border` / `#b8b8c0`)?
* [ ] Did you entirely avoid sans-serif fonts?
* [ ] Is the page completely devoid of badges, icons, and avatars?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Icy true-whites and barely lilac-grey backgrounds for alternating content blocks.
* Typography rendered in deep carbon-violet ink (`$text-strong`).
* Fine, 1px underlines on hover (rouge-bookmark red).
* Image arrays featuring black leather, glass reflections, and wet pavement.
* Structured, primitive HTML tables for data/menus.

### ✗ Not Allowed (Common Mistakes)

* **Sugary Lilac:** Pushing the lilac-grey background into a sweet, pastel purple. It must remain primarily grey.
* **Theatrical Perfume References:** Over-styling the UI to look like a fashion magazine. The interface should be severe; the *photography* provides the perfume aesthetic.
* **Excessive Rouge:** Using the rouge red for large buttons, banners, or multiple links. It is a narrow bookmark only.
* **Cluttered Rows:** Breaking the strict 2015-era modular spacing or medium gutters.
* **Badges & Icons:** Including decorative UI elements, location pin icons, or "New" pill badges.
* **Gradients & Beige:** Warming up the canvas with beige or applying any form of background gradient.
* **Default Sans / Gothic Styling:** Falling back to Arial/Inter or over-compensating with heavy, illegible blackletter fonts.
Preview