No preview available
Ice Lilac Carbon Ink & Blood-Orange Bookmark Sheet

/iceLilacCarbonInkBloodorangeBookmarkSheet
A disciplined, atmosphere-driven sheet system blending icy daylight backgrounds, carbon-violet typography, and blood-orange bookmarks for literary intrigue without gothic excess. Exclusively serifs, compact layout, and cinema-inspired cropping define its refined style.
Sep 20, 2026
Design System Content
# Ice Lilac Carbon Ink & Blood-Orange Bookmark Sheet

A design language for a refined, nocturne-in-daylight sheet system.

---

## Philosophy

> "Mystery is born of temperature and restraint, never theatrical darkness."

This system relies on the delicate tension between crisp daytime canvases and deep, evocative typography. It rejects the heavy-handed gothic aesthetic, instead pulling intrigue from icy backgrounds, subtle lilac-grey content bands, and carbon-violet ink. It evokes a cinematic evening viewed through a cold daylight lens—structured, literary, and fiercely disciplined.

### Core Beliefs

1. **Mystery through color temperature** — Depth is created through cool, icy whites clashing with deep carbon-violets, rather than relying on heavy blacks or shadows.
2. **Serif cadence** — Typography dictates the rhythm. We use elegant serifs for both headings and body text, allowing the distinct geometry of the letterforms to act as the primary visual texture.
3. **Disciplined cropping** — Imagery is sharply contained. We favor extreme intent in how images are framed, focusing on textural fragments (perfume-glass, leather, lipstick smudges).
4. **The Bookmark Accent** — The blood-orange red is used sparingly, functioning strictly as a navigational marker or a literal narrow bookmark. It never floods a large surface.
5. **Restraint** — No oversized modern typography. No decorative clutter. Compact, structured, and purposeful.

### Strict Rules

* **Maximum Display Size** — Headings never exceed `3xl`. Elegance is lost in oversized display type.
* **Image-Heavy Heros** — The first impression relies on cinematic, disciplined imagery paired with a light navbar.
* **Document-Like Menus** — Navigation and list structures mimic formal paper documents (horizontal rows, consistent row heights, top-and-bottom borders).
* **Review Stars Absolute Visibility** — Golden review stars and centered review-count proofs must be immediately visible above the fold.
* **Plain Location Information** — Addresses and location data remain purely functional and unstyled.
* **No Badges** — We do not use pill-shaped badges or status chips. Metadata is handled through simple inline text.
* **No Beige** — Warm, sandy neutrals are strictly forbidden. The system remains icy and cool.

---

## Color Palette

### The Nocturne-in-Daylight Scale

The palette eschews standard grays in favor of tinted, temperature-specific hues. The background is a stark ice-white, banding is a barely-there lilac-grey, and the text is a profound carbon-violet.

```css
/* Backgrounds */
bg-[#fcfcfd]          /* Ice-white main canvas background */
bg-[#f4f3f6]          /* Barely lilac-grey for alternating content bands */
bg-[#eceaef]          /* Slightly deeper lilac-grey for hover states */

/* Borders & Dividers */
border-[#d5d4d9]      /* Pewter dividers - cool, muted metallic grey */
border-[#e2e1e5]      /* Lighter pewter for ultra-subtle document rows */

/* Typography: Carbon-Violet (Replacing Black/Grey) */
text-[#17151c]        /* Deepest carbon-violet for primary headings */
text-[#2e2a36]        /* Carbon-violet for dense body copy */
text-[#544e61]        /* Muted carbon-violet for metadata and plain location info */

/* The Bookmark: Blood-Orange Red (Accent) */
bg-[#bd321c]          /* Narrow structural accents, active tab indicators */
text-[#bd321c]        /* Inline text links, critical text markers */
border-[#bd321c]      /* Left-border bookmarks for active states */

/* The Proof: Golden Review Stars */
text-[#d4af37]        /* Metallic golden review stars (#d4af37) */
fill-[#d4af37]        /* SVG fill for review star iconography */

```

### Common Mistakes to Avoid

```css
bg-purple-200         /* Sugary lilac - FORBIDDEN */
text-red-500          /* Neon orange-red - FORBIDDEN */
bg-[#f5f5dc]          /* Beige/warm neutrals - FORBIDDEN */
```

---

## Typography

Typography strictly combines two distinct serif families. Sans-serifs are entirely absent. Scale is heavily restricted—reliance is on tracking, line-height, and the natural elegance of the typeface.

### Font Families

```css
font-heading     /* Eczar (used moderately), Judson, or GFS Didot */
font-body        /* Spectral, Gentium Book Plus, or Alegreya */
```

### Font Size Scale (Restricted)

The scale is intentionally truncated. Oversized display type is considered a vulgarity in this system.

```css
text-xs          /* Document metadata, footnotes, plain location info */
text-sm          /* Standard document rows, secondary body text */
text-base        /* Core editorial body copy (Spectral / Alegreya) */
text-lg          /* Subheadings, lead-in paragraphs */
text-xl          /* Standard section headings */
text-2xl         /* Primary page headings */
text-3xl         /* MAXIMUM PERMITTED SIZE - Hero headings only */

/* text-4xl and above are strictly forbidden */
```

### Formatting & Cadence

```css
leading-relaxed  /* Standard body line-height for highly readable serifs */
leading-snug     /* Compact 2015-era section headings */
tracking-normal  /* We rely on the typeface's native kerning */
italic           /* Frequently used for subtle emphasis in body copy */
```

### Hierarchy Examples

| Element | Size | Font Family | Color | Characteristics |
| --- | --- | --- | --- | --- |
| Hero Heading | 3xl | font-heading | text-[#17151c] | Never larger than 3xl |
| Editorial Body | base | font-body | text-[#2e2a36] | leading-relaxed |
| Menu Row Item | sm | font-heading | text-[#17151c] | Document-like structure |
| Location Info | xs | font-body | text-[#544e61] | Unstyled, purely factual |

---

## Animation System

### Core Philosophy: The Still Image

Motion is nearly non-existent. The interface should feel like a printed sheet or an immobile pane of glass. There are no slides, springs, or bounces.

### State Transitions (Fades Only)

```tsx
/* All interactive elements strictly use simple opacity fades */
className="transition-opacity duration-300 ease-in-out"

initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.6, ease: "easeInOut" }}
```

### Micro-Interactions (Subtle Underline)

Hovers do not produce background fills or scale changes. They rely solely on color shifts and underline reveals.

```tsx
/* Link Hover */
className="text-[#17151c] hover:text-[#bd321c] underline underline-offset-4 decoration-transparent hover:decoration-[#bd321c] transition-all duration-300"
```

---

## Imagery & Framing

### Disciplined Cropping
Photography must never be generic. Images are heavily cropped, focusing on specific atmospheric textures rather than wide, brightly lit scenes.

* **Acceptable Motifs:** Perfume-glass reflections, macro black leather grain, lipstick-red smudges, wet evening windows.
* **Unacceptable Motifs:** AI-generated glossy concepts, ornate vintage frames, gothic cliché elements (skulls, ravens, dripping blood), generic sunny lifestyle shots.

```tsx
/* Standard Image Container */
className="relative w-full overflow-hidden bg-[#17151c] aspect-square object-cover grayscale-[20%] contrast-125"
```

---

## Component Catalog

### The Bookmark Accent (Instead of Buttons)

We do not use large, pillowy buttons. Calls to action are indicated by a blood-orange red structural mark—the "bookmark."

```tsx
// Primary Action (Bookmark Strip)
"inline-flex items-center text-[#17151c] font-heading text-lg relative before:absolute before:-left-4 before:top-0 before:h-full before:w-[2px] before:bg-[#bd321c] hover:opacity-70 transition-opacity"

// Selected Tab/State (Hanging Bookmark)
"relative border-t-2 border-[#bd321c] pt-2 text-[#17151c] font-heading"
```

### Document-Like Menu Rows

Navigation and data lists mimic formal ledgers. Compact 2015-era spacing.

```tsx
// Standard Menu Row
"flex justify-between items-center py-3 border-b border-[#d5d4d9] text-[#17151c] font-heading text-sm hover:bg-[#f4f3f6] transition-colors"

// Location Information (Plain)
"block text-xs font-body text-[#544e61] mt-1"
```

### The Centered Review-Count Proof

A mandatory element for primary entities. Must be perfectly centered and immediately visible above the fold.

```tsx
// Review Proof Container
<div className="flex flex-col items-center justify-center space-y-1 my-6">
  {/* Golden Review Stars */}
  <div className="flex space-x-1 text-[#d4af37]">
    <StarIcon className="w-4 h-4 fill-current" />
    <StarIcon className="w-4 h-4 fill-current" />
    <StarIcon className="w-4 h-4 fill-current" />
    <StarIcon className="w-4 h-4 fill-current" />
    <StarIcon className="w-4 h-4 fill-current" />
  </div>
  {/* Centered Proof Text */}
  <span className="text-xs font-body text-[#544e61] uppercase tracking-wide">
    Based on 1,429 verifiable proofs
  </span>
</div>
```

### Alternating Editorial Sections

Bands of content alternate subtly between the ice-white canvas and the barely lilac-grey to delineate sections without heavy drop shadows or aggressive lines.

```tsx
// Section A (Ice-White)
"w-full bg-[#fcfcfd] py-12 px-6"

// Section B (Barely Lilac-Grey)
"w-full bg-[#f4f3f6] py-12 px-6 border-y border-[#d5d4d9]"
```

### Compact Layout Grids

```tsx
// 2015-Era Compact Grid (Avoid excessive modern gap scaling)
"grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"
```

---

## Quality Checklist

* [ ] Is the maximum font size on the page strictly `text-3xl` or smaller?
* [ ] Are the review stars visually prominent, golden (`text-[#d4af37]`), and centered?
* [ ] Did you restrict animations exclusively to opacity fades?
* [ ] Is the blood-orange accent (`#bd321c`) used only as a structural marker/bookmark rather than a large background fill?
* [ ] Are all UI borders using the pewter tone (`border-[#d5d4d9]`)?
* [ ] Are badges entirely absent from the interface?
* [ ] Did you alternate editorial section backgrounds between ice-white and barely lilac-grey?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Icy, cool white backgrounds (`#fcfcfd`).
* Serif fonts exclusively (e.g., Eczar, GFS Didot, Spectral).
* Narrow, vertical accents in blood-orange red.
* Tightly cropped, atmospheric photography (leather, glass, wet windows).
* Compact, document-like list structures with uniform row heights.
* Plain, unembellished text for location data.

### ✗ Not Allowed

* Typography larger than `3xl`.
* Rounded UI badges or status pills (use plain inline text instead).
* Warm tones, beige, or sugary/sweet purples.
* Slide, spring, or bounce animations.
* Theatrical darkness (e.g., large blocks of solid black background).
* Ornate visual frames, gothic design clichés, or AI-generated visual motifs.
* Sans-serif fonts in any capacity.
Preview