mstfyldz/.impeccable/design.json

{
  "schemaVersion": 2,
  "generatedAt": "2026-08-16T16:38:00Z",
  "title": "Design System: mstfyldz Journal",
  "extensions": {
    "colorMeta": {
      "primary": {
        "role": "primary",
        "displayName": "Sumi Carbon Ink",
        "canonical": "#18181B",
        "tonalRamp": ["#09090B", "#18181B", "#27272A", "#3F3F46", "#52525B", "#71717A", "#A1A1AA", "#D4D4D8"]
      },
      "neutral-bg": {
        "role": "neutral",
        "displayName": "Natural Laid Paper",
        "canonical": "#FAF7F2",
        "tonalRamp": ["#E5DFC8", "#EFE7D6", "#F3ECE2", "#F6F1E7", "#FAF7F2", "#FCFAF7", "#FEFDFB", "#FFFFFF"]
      },
      "wax-seal": {
        "role": "secondary",
        "displayName": "Sealing Wax Ruby",
        "canonical": "#E11D48",
        "tonalRamp": ["#4C0519", "#881337", "#9F1239", "#BE123C", "#E11D48", "#F43F5E", "#FB7185", "#FFE4E6"]
      },
      "amber-highlighter": {
        "role": "secondary",
        "displayName": "Highlighter Amber",
        "canonical": "#D97706",
        "tonalRamp": ["#451A03", "#78350F", "#92400E", "#B45309", "#D97706", "#F59E0B", "#FBBF24", "#FEF3C7"]
      }
    },
    "typographyMeta": {
      "display": { "displayName": "Bricolage Grotesque", "purpose": "Hero brand display and section titles." },
      "serif-body": { "displayName": "Lora", "purpose": "Literary longform reading and body notes." },
      "handwritten": { "displayName": "Caveat", "purpose": "Spontaneous marginalia, doodles, and author comments." },
      "mono": { "displayName": "JetBrains Mono", "purpose": "Timestamps, code snippets, and telemetry data." }
    },
    "shadows": [
      {
        "name": "paper-rest",
        "value": "0 4px 20px -2px rgba(28, 25, 23, 0.08), 0 1px 4px 0 rgba(28, 25, 23, 0.04)",
        "purpose": "Resting paper sheet elevation on desk."
      },
      {
        "name": "paper-lifted",
        "value": "0 14px 32px -4px rgba(28, 25, 23, 0.14), 0 4px 8px 0 rgba(28, 25, 23, 0.06)",
        "purpose": "Hover state for interactive cards."
      },
      {
        "name": "wax-seal",
        "value": "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)",
        "purpose": "3D tactile sealing wax badge."
      }
    ],
    "motion": [
      {
        "name": "spring-tactile",
        "value": "cubic-bezier(0.34, 1.56, 0.64, 1)",
        "purpose": "Physical bounce for wax seals and card lifts."
      }
    ],
    "breakpoints": [
      { "name": "sm", "value": "640px" },
      { "name": "md", "value": "768px" },
      { "name": "lg", "value": "1024px" },
      { "name": "xl", "value": "1280px" }
    ]
  },
  "components": [
    {
      "name": "Primary Action Button",
      "kind": "button",
      "refersTo": "button-primary",
      "description": "Crimson wax button for creating fresh notes.",
      "html": "<button class=\"ds-btn-wax\">+ YENİ KARALAMA</button>",
      "css": ".ds-btn-wax { background: #E11D48; color: #ffffff; padding: 8px 16px; font-weight: 700; border-radius: 8px; border: none; font-family: 'Bricolage Grotesque', sans-serif; cursor: pointer; transition: all 0.2s; } .ds-btn-wax:hover { background: #9F1239; transform: translateY(-1px); }"
    },
    {
      "name": "Wax Seal Monogram",
      "kind": "custom",
      "refersTo": "wax-seal",
      "description": "Tactile 3D wax seal displaying current mood frequency.",
      "html": "<div class=\"ds-wax-seal\"><span>M</span></div>",
      "css": ".ds-wax-seal { width: 48px; height: 48px; border-radius: 9999px; background: radial-gradient(circle at 35% 30%, #F43F5E, #E11D48 60%, #9F1239 100%); color: white; display: flex; align-items: center; justify-content: center; font-weight: 900; box-shadow: 0 6px 16px rgba(225,29,72,0.35); cursor: pointer; transition: transform 0.2s; } .ds-wax-seal:hover { transform: scale(1.05) rotate(4deg); }"
    }
  ],
  "narrative": {
    "northStar": "The Annotated Field Notebook & Living Sketchbook",
    "overview": "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.",
    "keyCharacteristics": [
      "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"
    ],
    "rules": [
      {
        "name": "The Ink-and-Paper Rule",
        "body": "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).",
        "section": "colors"
      },
      {
        "name": "The Marginalia Doctrine",
        "body": "Handwritten notes in Caveat must always serve as spontaneous human commentary or clarification, styled in vibrant ink, never used as longform body paragraphs.",
        "section": "typography"
      }
    ],
    "dos": [
      "Do treat each note format according to its physical archetype.",
      "Do preserve organic Turkish typography and authentic colloquial voice.",
      "Do ensure all text maintains WCAG AA contrast.",
      "Do support smooth atmospheric transitions and respect prefers-reduced-motion."
    ],
    "donts": [
      "Don't use generic corporate card grids or purple-on-dark SaaS gradients.",
      "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.",
      "Don't use pure cold black (#000000) or pure cold white (#FFFFFF) on primary reading surfaces."
    ]
  }
}