182 lines
8.5 KiB
Markdown
182 lines
8.5 KiB
Markdown
---
|
||
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.
|