Snow-Glass Ink Leather & Bitter-Raspberry Receipt Folio

/snowglassInkLeatherBitterraspberryReceiptFolio
A luxurious, tactile design system inspired by curated physical portfolios—juxtaposing crisp whites, dark ink, real photography, and deliberate structure for a minimalist, feminine document and booking UI.
Sep 17, 2026
Design System Content
# Snow-Glass Ink Leather & Bitter-Raspberry Receipt Folio

A design language for a sharp, feminine document-folio system.

---

## Philosophy

> "Elegance comes from restraint, and structure comes from the careful hand."

This system creates interfaces that feel like a curated, high-end physical portfolio. It relies on the tactile contrast between crisp snow-glass white pages and pale blue-grey receipt panels, grounded by heavy black-leather ink. It is built to feel manually assembled by a meticulous designer, avoiding the automated, mass-produced look of modern web apps.

### Core Beliefs

1. **Elegance through Restraint** — True luxury does not shout. The absence of decorative fluff elevates the content.
2. **Readable Hierarchy** — Typography is king. Baselines are steady, and scale dictates flow without relying on heavy weights or loud colors.
3. **Real Images** — Photography must feel tangible, raw, and atmospheric. No illustrations, no vectors.
4. **Manual Precision** — Layouts emulate physical paper documents, receipts, and folios. Alignment and rules must feel deliberate.

### Strict Rules

* **Capped Typography** — Hero serif headings are strictly capped at `is-size-3`. No oversized luxury type or "perfume clichés."
* **No Icons or Avatars** — Pure typography and structural layout replace generic UI icons and user avatars. 
* **Zero Badges** — Labels are handled through clean text layout, never contained in pill-shaped badges.
* **No Beige or Gradients** — Backgrounds are strictly solid snow-glass white or pale blue-grey. Gradients are entirely forbidden.
* **Review Stars Instantly Visible** — Golden yellow review stars and a centered review-count block must be immediately prominent.
* **Plain Location Rows** — Location data is presented in strictly plain, unembellished textual rows.
* **The Accent Rule** — Bitter-Raspberry is used exclusively for booking actions, active navigation states, and a single proof line. It is a utility, not a decoration.

---

## Color Palette

### The Folio Materials (Bulma SCSS Variables)

The palette rejects modern SaaS defaults, mapping physical folio materials directly to Bulma's overarching theme variables. 

```scss
/* Background Materials */
$scheme-main: #ffffff;           /* Snow-Glass White: Core page background */
$background: #eef1f4;            /* Pale Blue-Grey: Receipt panels, secondary columns */
$white-ter: #f8f9fa;             /* Subtle document layers */

/* Typography & Inks */
$text: #111111;                  /* Black-Leather Ink: Core body text */
$text-strong: #000000;           /* Pure Black: Headings and proof lines */
$text-light: #5a5f66;            /* Muted Ink: Secondary metadata */

/* Structural Rules */
$border: #c9ced2;                /* Cool Nickel: Dividers, menu rules, table borders */
$border-light: #e0e4e8;          /* Subtle nickel for delicate separations */

/* The Accent: Bitter-Raspberry */
/* Strictly NOT candy red; a deep, biting raspberry */
$primary: #8b1e3f;               /* Booking actions, active nav */
$primary-hover: #701631;         /* Tactile hover states for booking */

/* The Review Gold */
$warning: #d4af37;               /* Golden Yellow: Exclusively for review stars */
```

---

## Typography

Typography pairs classic, feminine serifs with highly legible, modern serif body copy. The rhythm mimics a compact 2014-builder era: steady baselines, aligned gutters, and strict sizing caps.

### Font Families

```scss
/* Heading Stack (Bulma: $family-secondary) */
/* Rosarivo, Fanwood Text, or Goudy Bookletter 1911 */
$family-heading: "Rosarivo", "Fanwood Text", "Goudy Bookletter 1911", serif;

/* Body Stack (Bulma: $family-primary) */
/* Literata, Alegreya, or Source Serif 4 */
$family-primary: "Literata", "Alegreya", "Source Serif 4", serif;
```

### Font Size Scale & Rules

```scss
/* Body text is strictly locked at 17-18px for maximum legibility */
$size-normal: 18px; 

/* Bulma Sizing Overrides */
$size-1: forbidden;              /* Oversized luxury type is banned */
$size-2: forbidden;              /* Banned */
$size-3: 2rem;                   /* Absolute maximum size. Hero headings only. */
$size-4: 1.5rem;                 /* Section headers */
$size-5: 1.25rem;                /* Item titles, menu categories */
$size-6: 1.125rem;               /* Body copy (18px) */
$size-7: 0.875rem;               /* Metadata, plain location rows */
```

### Hierarchy Examples

| Element | Bulma Class | Font Family | Size/Color | Application |
| --- | --- | --- | --- | --- |
| Hero Heading | `is-size-3 is-family-heading` | Rosarivo | Black-Leather | Split hero panels |
| Section Title | `is-size-4 is-family-heading` | Rosarivo | Black-Leather | Menu sections |
| Main Body | `is-size-6` | Literata | Black-Leather | Document text, 18px |
| Location Row | `is-size-7 has-text-grey` | Literata | Muted Ink | Contact/location lists |
| Booking Action| `button is-primary` | Literata | Bitter-Raspberry | Primary CTAs only |

---

## Animation System

### Core Philosophy: Soft Paper Reveals

Motion is strictly limited to opacity changes. Elements appear softly, like an image developing or ink setting on a page. No sliding, no scaling, no blurs, no physics-based spring animations.

### Opacity Reveals

```css
/* Standard component entrance */
.folio-reveal {
  opacity: 0;
  animation: softFadeIn 0.8s ease-in-out forwards;
}

/* Hover States for interactives */
.button.is-primary, 
.navbar-item {
  transition: opacity 0.3s ease;
}

.button.is-primary:hover {
  opacity: 0.85; /* Soft opacity dimming, no transforms */
}

@keyframes softFadeIn {
  to { opacity: 1; }
}
```

---

## Imagery & Composition

Photography is paramount and replaces all illustrative or iconographic UI elements. 

* **Required Textures:** Black leather sleeves, crisp paper receipts, pure porcelain, rainlit glass.
* **Hero Composition:** The Hero must be a rigid split layout. Half photographic, half typographic content.
* **No Overlays:** Text must sit on snow-glass white or pale blue-grey, never overlaid directly on images.

---

## Component Catalog (Bulma)

### Light Slim Navbar

Ultra-minimal. No heavy shadows, no icons. Active states use a single Bitter-Raspberry proof line.

```html
<nav class="navbar is-transparent" role="navigation">
  <div class="navbar-brand">
    <a class="navbar-item is-size-4 is-family-heading has-text-black" href="#">
      Folio.
    </a>
  </div>
  <div class="navbar-menu">
    <div class="navbar-end">
      <!-- Active state utilizes Bitter-Raspberry -->
      <a class="navbar-item has-text-primary" style="border-bottom: 1px solid #8b1e3f;">
        Reservations
      </a>
      <a class="navbar-item has-text-black">
        Locations
      </a>
    </div>
  </div>
</nav>
```

### Split Photographic Hero

Rigid half-and-half layout. The heading is strictly capped at `is-size-3`.

```html
<div class="columns is-gapless folio-reveal">
  <!-- Image Left -->
  <div class="column is-half">
    <figure class="image is-5by4">
      <img src="rainlit-glass.jpg" alt="Atmospheric rainlit glass window">
    </figure>
  </div>
  <!-- Content Right (Snow-Glass White) -->
  <div class="column is-half has-background-white is-flex is-flex-direction-column is-justify-content-center p-6">
    <h1 class="title is-size-3 is-family-heading has-text-black">
      The porcelain standard.
    </h1>
    <p class="subtitle is-size-6 mt-4 has-text-black">
      A curated experience bound in black leather and defined by meticulous restraint.
    </p>
    <div class="mt-5">
      <button class="button is-primary is-radiusless">
        Book an Appointment
      </button>
    </div>
  </div>
</div>
```

### Centered Review-Count Block

Golden yellow stars immediately visible. Centered strictly.

```html
<div class="has-text-centered my-6 folio-reveal">
  <div class="is-size-5 has-text-warning mb-2" style="letter-spacing: 0.2em;">
    ★★★★★
  </div>
  <p class="is-size-7 has-text-grey">
    Based on 1,402 independent reviews
  </p>
</div>
```

### Ruled Menu Table

Compact 2014-builder rhythm. Cool nickel rules (`has-border-grey-light`). Uncramped, generous vertical padding.

```html
<div class="has-background-light p-5">
  <table class="table is-fullwidth has-background-transparent">
    <tbody>
      <!-- Row with bottom nickel rule -->
      <tr style="border-bottom: 1px solid #c9ced2;">
        <td class="py-4 is-size-6 has-text-black">Black Leather Sleeve Setup</td>
        <td class="py-4 is-size-6 has-text-black has-text-right">$120</td>
      </tr>
      <tr style="border-bottom: 1px solid #c9ced2;">
        <td class="py-4 is-size-6 has-text-black">Porcelain Polish & Binding</td>
        <td class="py-4 is-size-6 has-text-black has-text-right">$85</td>
      </tr>
    </tbody>
  </table>
</div>
```

### Plain Location Rows

Unembellished, strictly text-based structure. No map pins or location icons.

```html
<div class="is-flex is-flex-direction-column gap-2 mt-4">
  <div class="is-size-7 has-text-black">41° 24' 12.2" N / 2° 10' 26.5" E</div>
  <div class="is-size-7 has-text-grey">142 Document Street, Glass District</div>
  <div class="is-size-7 has-text-grey">Open Tuesday through Sunday</div>
</div>
```

---

## Quality Checklist

* [ ] Is the hero serif heading strictly capped at `is-size-3`? 
* [ ] Are the review stars instantly visible in golden yellow (`$warning`) and centered?
* [ ] Is the Bitter-Raspberry (`$primary`) accent strictly reserved for active states, booking buttons, and single proof lines?
* [ ] Did you avoid using Bulma's `.tag` or any form of badges?
* [ ] Are icons entirely absent from the interface?
* [ ] Are the menu table rows vertically spacious and divided only by cool nickel lines (`1px solid $border`)?
* [ ] Is the body font set to 17-18px?
* [ ] Is the motion strictly limited to soft opacity reveals (no sliding or scaling)?

---

## Allowed vs Not Allowed

### ✓ Allowed
* Snow-glass whites and pale blue-grey receipt panel backgrounds.
* Sharp, high-contrast black-leather ink for body copy.
* Bitter-Raspberry red for direct booking actions.
* Real photography focusing on texture (leather, porcelain, glass, receipts).
* Plain textual data rows for locations and metadata.

### ✗ Not Allowed
* Candy raspberry red (must be dark/bitter).
* Oversized luxury type (sizes 1 and 2 are banned).
* Perfume clichés (ultra-thin sans-serifs, excessive letter-spacing on massive text).
* Cramped menu rows (tables must have breathing room).
* Avatars, UI icons, or SVG illustrations.
* Pill-shaped badges or status tags.
* Beige backgrounds or CSS gradients of any kind.
Preview