---
name: mstfyldz Journal
description: Annotated Field Notebook & Ink Marginalia design system
colors:
  primary: "#18181B"
  neutral-bg: "#FAF7F2"
  desk-surface: "#F0ECE1"
  card-dark: "#1E232D"
  wax-seal: "#E11D48"
  amber-highlighter: "#D97706"
  sage-botany: "#059669"
  cyan-fountain: "#0284C7"
  lavender-sketch: "#7C3AED"
typography:
  display:
    fontFamily: "Bricolage Grotesque, system-ui, sans-serif"
    fontSize: "clamp(2rem, 5vw, 3.5rem)"
    fontWeight: 800
    lineHeight: 1.1
  headline:
    fontFamily: "Bricolage Grotesque, system-ui, sans-serif"
    fontSize: "1.5rem"
    fontWeight: 700
    lineHeight: 1.25
  serif-body:
    fontFamily: "Lora, Georgia, serif"
    fontSize: "1rem"
    fontWeight: 400
    lineHeight: 1.65
  handwritten:
    fontFamily: "Caveat, cursive"
    fontSize: "1.25rem"
    fontWeight: 700
    lineHeight: 1.2
  mono:
    fontFamily: "JetBrains Mono, monospace"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1.4
rounded:
  xs: "2px"
  sm: "6px"
  md: "12px"
  lg: "16px"
  full: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "32px"
components:
  button-primary:
    backgroundColor: "{colors.wax-seal}"
    textColor: "#ffffff"
    rounded: "{rounded.sm}"
    padding: "8px 16px"
  button-secondary:
    backgroundColor: "{colors.neutral-bg}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: "8px 16px"
  card-notebook:
    backgroundColor: "{colors.neutral-bg}"
    rounded: "{rounded.md}"
    padding: "24px 28px"
---

# Design System: mstfyldz Journal

## Overview

**Creative North Star: "The Annotated Field Notebook & Living Sketchbook"**

The visual language of `mstfyldz` rejects sterile corporate card grids and generic dark-mode developer templates in favor of a warm, tactile personal field notebook. The interface celebrates human presence through ink density, rubber date stamps, washi tape pins, authentic handwritten marginalia, and dynamic atmospheric mood shifting.

The space feels like opening a cherished, dog-eared sketchbook on a wooden worktable in Kadıköy: spontaneous thoughts, long essays, code scraps, polaroid photographs, and voice memos coexist naturally without corporate pretense.

**Key Characteristics:**
- Tactile paper surfaces (`#FAF7F2`) over warm desk grain (`#F0ECE1`).
- Bold sumi carbon typography paired with warm literary serifs and organic cursive marginalia.
- Mood-adaptive atmospheric shifts governed by an interactive live frequency wave and tactile crimson wax seal.
- Physical ephemera: washi tape strips, binder clips, rubber stamps, and marker ink highlights.

## Colors

The palette is anchored on organic stationery materials, carbon ink, and jewel-toned accent inks.

### Primary
- **Sumi Carbon Ink** (`#18181B`): Primary body text, titles, brand identity, and structural ink lines.
- **Natural Laid Paper** (`#FAF7F2`): Primary notebook sheet canvas with subtle micro-dot grid texture.

### Secondary
- **Sealing Wax Ruby** (`#E11D48`): Primary action buttons, active wax seal badge, live broadcast status indicator, and hand-drawn marginalia arrows.
- **Highlighter Amber** (`#D97706`): Sticky note post-it cards, focus mood indicators, and warm highlight markers.

### Tertiary
- **Field Sage Green** (`#059669`): Calm mood tags, approved stamp marks, and botanical notes.
- **Fountain Cyan** (`#0284C7`): Audio scrap accents and polaroid memory margin notes.
- **Night Lavender** (`#7C3AED`): Late-night mood frequency markers and philosophical musings.

### Neutral
- **Desk Surface** (`#F0ECE1`): Surrounding worktable background with subtle tactile grid dots.
- **Aged Manila Kraft** (`#EFE7D6`): Cassette cards, active scrollbar tracks, and divider surfaces.
- **Obsidian Carbon** (`#1E232D`): Dark terminal code cards and syntax containers.

### Named Rules
**The Ink-and-Paper Rule.** Surfaces are physical paper sheets or index cards resting on a desk surface. White is never pure `#FFFFFF`; it always carries the warmth of natural paper grain (`#FAF7F2`).

## Typography

**Display Font:** `Bricolage Grotesque` (with system sans-serif fallback)
**Body Font:** `Lora` (with Georgia serif fallback)
**Handwritten Font:** `Caveat` (with cursive fallback)
**Label/Mono Font:** `JetBrains Mono` (with monospace fallback)

**Character:** A literary and eccentric pairing that balances typographic clarity and editorial authority with whimsical, human hand-drawn marginalia.

### Hierarchy
- **Display** (`800`, `clamp(2rem, 5vw, 3.5rem)`, `1.1`): Hero titles and brand identity.
- **Headline** (`700`, `1.5rem`, `1.25`): Section headings and post card titles.
- **Body** (`400`, `1rem`, `1.65`, `max 68ch`): Longform essay reading and narrative thoughts.
- **Handwritten** (`700`, `1.25rem`, `1.2`): Marginalia notes, arrow annotations, and humorous commentary.
- **Label / Mono** (`600`, `0.75rem`, `0.1em tracking`, `uppercase`): Stamped dates, telemetry timestamps, and tag chips.

### Named Rules
**The Marginalia Doctrine.** Handwritten notes in Caveat must always serve as spontaneous human commentary or clarification, styled in vibrant ink (`#E11D48`, `#D97706`, `#0284C7`), never used as longform body paragraphs.

## Layout

The spatial model simulates an open desk workspace with an expansive notebook spread:
- **Container Width:** Max 1152px (`max-w-6xl`), centered with fluid 16–28px horizontal gutters.
- **Grid Structure:** Asymmetric 1-column on mobile (<768px), 2-column on tablet (768–1024px), 3-column masonry editorial layout on desktop (>1024px).
- **Rhythm & Density:** Generous 24–32px gaps between cards to allow physical washi tape and binder clip details to breathe.

## Elevation & Depth

Depth is conveyed through physical paper layering, soft diffuse shadows, and tactile embossed seals rather than glowing colored halos.

### Shadow Vocabulary
- **Paper Sheet at Rest** (`box-shadow: 0 4px 20px -2px rgba(28, 25, 23, 0.08), 0 1px 4px 0 rgba(28, 25, 23, 0.04)`): Grounded card elevation.
- **Lifted Paper Sheet** (`box-shadow: 0 14px 32px -4px rgba(28, 25, 23, 0.14), 0 4px 8px 0 rgba(28, 25, 23, 0.06)`): Hover state on interactive cards.
- **Embossed Wax Seal** (`box-shadow: 0 6px 16px rgba(225, 29, 72, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.4), inset 0 -3px 6px rgba(0, 0, 0, 0.3)`): Tactile 3D sealing stamp.

## Shapes

- **Notebook Sheets:** Medium 12–16px rounded corners (`rounded-xl`), 1px subtle carbon stroke (`rgba(24, 24, 27, 0.08)`).
- **Washi Tape:** Translucent textured strip with dashed edges (`rgba(200, 185, 160, 0.6)`), tilted slightly (-2° to +2°).
- **Rubber Stamps:** Monospaced uppercase text with 2px solid border, 4px radius, and radial mask texture.
- **Wax Seal:** Perfect 48px circle with metallic radial reflection and 4° interactive rotation on hover.

## Components

### Buttons
- **Primary (Sealing Wax CTA):** Crimson background (`#E11D48`), white text, 8px radius, subtle hover lift and color deepening (`#9F1239`).
- **Secondary (Paper Action):** Cream background (`#FAF7F2`), carbon border (`rgba(24, 24, 27, 0.15)`), carbon text, hover background shift to `#F0ECE1`.

### Chips & Index Tabs
- **Style:** Small pill tabs with subtle colored backgrounds corresponding to mood/tag roles.
- **Side Index Tabs:** Fixed notebook edge tabs with colored border and 4px rightward slide on hover.

### Cards / Containers
- **Field Notebook:** Natural cream sheet with top binder clip and ruled/dotted paper background.
- **Post-It Sticky:** Warm amber background (`#FEF3C7`), washi tape top center, -1° rotational offset.
- **Polaroid Memory:** White photo frame, 4:3 aspect ratio, handwritten caption area.
- **Obsidian Code Scrap:** Dark carbon container (`#1E232D`), colored window controls, syntax highlighting.
- **Cassette Audio Scrap:** Manila card with top binder clip, black cassette body, animated sound wave equalizer.

## Do's and Don'ts

### Do:
- **Do** treat each note format according to its physical archetype (sticky notes tilt slightly, notebook pages carry clips, polaroids have tape).
- **Do** preserve organic Turkish typography and authentic colloquial voice in copy and notes.
- **Do** ensure all text maintains WCAG AA contrast (≥4.5:1 for body copy).
- **Do** support smooth atmospheric transitions and respect `prefers-reduced-motion`.

### Don't:
- **Don't** use generic corporate card grids, purple-on-dark SaaS gradients, or sterile white dashboard boxes.
- **Don't** use colored left-border stripes (`border-l-2`) on cards as decorative shortcuts.
- **Don't** use raw unicode emojis as an icon system; use crisp SVG iconography from Lucide.
- **Don't** use pure cold black (`#000000`) or pure cold white (`#FFFFFF`) on primary reading surfaces.
