Cultured Review / Literary Journal System

# Cultured Review / Literary Journal System

## Philosophy

A cultured literary journal system that treats every screen like a composed spread: issue-led, typographically authoritative, and quietly collectible. The interface should feel closer to a serious review magazine or subscription journal than a startup publication dashboard, balancing archival rigor with the intimacy of long-form reading.

### Values

- editorial hierarchy led by typography before decoration
- paper-like tactility and restrained color with memorable issue accents
- clear archival organization that treats reviews, essays, and contributors as catalogued cultural artifacts
- measured pacing that invites reading instead of conversion-heavy scanning

### Anti-Values

- newsroom urgency with loud breaking-news modules
- tech-blog UI patterns dominated by cards without typographic structure
- full-bleed marketing gradients or app-store gloss
- anonymous system-font minimalism that erases editorial character

### Visual Character

- Large high-contrast serif headlines sit inside generous paper margins while metadata uses compact uppercase monospace labels separated by fine editorial rules.
- Primary content modules are enclosed by 1px ink rules with offset inner padding, creating the feel of boxed journal sections rather than floating SaaS cards.
- Issue identity appears as vertically oriented spine labels, stamped edition chips, and narrow side columns that echo book gutters and magazine folios.
- Feature openings use drop caps, hanging deck text, and carefully measured column widths so long-form content reads like a composed print spread.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#472634` |
| secondary | `#6f7b4b` |
| accent | `#b88746` |
| background | `#f3ecdf` |
| surface | `#fbf7ef` |
| text | `#1f1a17` |
| muted | `#6d625a` |
| border | `#2c241f` |
| error | `#9b3d35` |
| success | `#47634a` |
| warning | `#a56c22` |
| info | `#5d6e86` |

### Typography

- **Heading Font**: Cormorant Garamond
- **Body Font**: Source Serif 4
- **Mono Font**: IBM Plex Mono
- **Base Size**: 16px
- **Scale Ratio**: 1.25
- **Line Height**: 1.6
- **Letter Spacing**: 0.01em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,24,32,48,64]

### Radii

- **None**: 0
- **Sm**: 4px
- **Md**: 8px
- **Lg**: 14px
- **Full**: 9999px

### Shadows

- **Sm**: 0 1px 0 rgba(31,26,23,0.06)
- **Md**: 0 10px 30px rgba(44,36,31,0.08)
- **Lg**: 0 24px 50px rgba(44,36,31,0.12)

### Surfaces

- **Treatment**: paper
- **Card Style**: warm paper panels with inset hairline rules and occasional tinted issue bands
- **Bg Pattern**: lines

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: crisp editorial ink rules, section dividers, and stamped frames that feel printed rather than industrial

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2,0.8,0.2,1)
- **Philosophy**: deliberate

## Rules

### Composition

Compose pages like a literary front page: one dominant feature, one supporting criticism column, then disciplined archive and contributor bands. Let typography and rules establish rhythm before color does.

### Hierarchy

Lead with a dramatic serif masthead and issue feature; place decks and reviewer metadata immediately beneath; reserve accent color for issue markers, calls to subscribe, and small navigation cues.

### Density

Moderate density with compact metadata and generous reading gutters. Information can be layered, but long-form text blocks must always retain calm line lengths and breathing room.

### Signature Patterns

- Section titles use uppercase monospace labels with extended letter-spacing and a full-width bottom rule so each content band reads like an indexed journal department.
- Major panels include double-framed editorial borders created with an outer 1px stroke and an inset pseudo-element rule, producing the feel of printed plate boxes.
- Issue markers and archive years are set vertically with writing-mode: vertical-rl, acting like book spines that anchor the asymmetrical grid edges.
- Lead article text begins with an oversized serif drop cap and a hanging deck paragraph whose max-width is narrower than the body column for print-like pacing.

## Layout

### Grid

Desktop uses a 12-column editorial grid with a narrow spine column, wide feature column, and balanced secondary rail. Interior modules snap to 6-column and 4-column spans to mimic magazine spreads.

### Breakpoints

1440px desktop keeps the asymmetrical three-zone composition; 768px tablet collapses to two columns with the spine labels becoming horizontal chips; 375px mobile becomes a single reading column with stacked modules and full-width controls.

### Whitespace

Use generous outer margins, 24-48px module padding, and persistent separators so the page feels curated rather than crowded.

### Responsive

- **Desktop**: 12-column editorial grid with dedicated rails
- **Tablet**: 2-column stacked editorial bands
- **Mobile**: 1-column reading stack with reordered metadata and full-width actions

## Guidance

### Do

- Use serif typography as the primary carrier of mood and authority.
- Frame major content regions with rules, folio labels, and issue metadata.
- Keep line lengths disciplined and introduce accent color sparingly as issue identity.
- Treat archive and contributor information as curated catalog entries, not dashboard widgets.

### Don't

- Do not use bright marketing gradients, glassmorphism, or playful rounded app UI.
- Do not let card shadows replace editorial borders and spacing hierarchy.
- Do not collapse all metadata into tiny gray text with no structural separators.
- Do not use generic sans-serif headings that make the journal feel like a startup blog.