first commit
This commit is contained in:
mstfyldz
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"buildPath": "comp"
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
{
|
||||
"title": "Choose the visual world for mstfyldz",
|
||||
"question": "The roll assigned Celestial Mood Logbook & Chrono-Atlas (Seed 6a22c7e2). Keep it, choose an alternate, or steer.",
|
||||
"options": [
|
||||
{
|
||||
"id": "assigned",
|
||||
"label": "Celestial Mood Logbook & Chrono-Atlas",
|
||||
"kicker": "THE ROLL",
|
||||
"lineage": "17th-century astronomical chart & celestial navigation log",
|
||||
"thesis": "Thoughts, whimsical notes, and moods charted as celestial orbits, atmospheric phases, and glowing coordinate tags.",
|
||||
"palette": [
|
||||
"#0B0F19",
|
||||
"#1A2238",
|
||||
"#F4EBD9",
|
||||
"#FF9E3B",
|
||||
"#38E1B0"
|
||||
],
|
||||
"materials": [
|
||||
"deep ink navy canvas",
|
||||
"brass coordinate linework",
|
||||
"starlight glow",
|
||||
"parchment card surfaces"
|
||||
],
|
||||
"viewport": "A dynamic 'Atmospheric Signal & Frequency' dial with rotating mood constellations, leading into an asymmetric field of celestial note cards.",
|
||||
"risk": "Can feel too mystical or ornate if typography loses its crisp modern editorial clarity.",
|
||||
"raised": [
|
||||
{
|
||||
"from": "Pop-Culture Console",
|
||||
"raise": "High-contrast structural elbow navigation badges with instantaneous responsive state transitions."
|
||||
},
|
||||
{
|
||||
"from": "Village Woodcut & Torn Paper",
|
||||
"raise": "Tactile stamped ink press feedback and organic deckled edge dividers on micro-note scraps."
|
||||
}
|
||||
],
|
||||
"comp": ".impeccable/mocks/decision/assigned.webp"
|
||||
},
|
||||
{
|
||||
"id": "model-pick",
|
||||
"label": "Annotated Field Notebook & Ink Marginalia",
|
||||
"kicker": "IMPECCABLE’S PICK",
|
||||
"lineage": "Moleskine / Leuchtturm journal with ink wash and washi tape",
|
||||
"thesis": "A tactile digital sketchbook with ink density, rubber-stamp timestamps, and handwritten marginalia notes.",
|
||||
"palette": [
|
||||
"#18181B",
|
||||
"#FAF7F2",
|
||||
"#E4DCD3",
|
||||
"#E11D48",
|
||||
"#D97706"
|
||||
],
|
||||
"materials": [
|
||||
"tactile cream paper",
|
||||
"ink bleed",
|
||||
"washi tape snippets",
|
||||
"rubber stamp markers"
|
||||
],
|
||||
"viewport": "A desk-like canvas with pinned daily thought notes, live mood stamps, and rich handwritten marginalia.",
|
||||
"risk": "Also the direction most runs in personal digital journals land on (familiar & comfortable).",
|
||||
"comp": ".impeccable/mocks/decision/model-pick.webp"
|
||||
},
|
||||
{
|
||||
"id": "challenger-elbow-panel",
|
||||
"label": "LCARS Starship Elbow Console",
|
||||
"verdict": "competitive",
|
||||
"lineage": "pill-cornered starship wall panel & LCARS console",
|
||||
"thesis": "An ultra-clean modular console where mood banks and thought clusters are accessed via sweeping color elbows.",
|
||||
"palette": [
|
||||
"#000000",
|
||||
"#D8B4E2",
|
||||
"#FBC4AB",
|
||||
"#F6BD60",
|
||||
"#90DBF4"
|
||||
],
|
||||
"materials": [
|
||||
"black glass",
|
||||
"flat pastel pill blocks",
|
||||
"numeric telemetry clusters"
|
||||
],
|
||||
"viewport": "A black glass HUD with sweeping lilac elbow frames and pastel mood buttons that chirp and switch banks.",
|
||||
"case": "Fuses cleanly with categorical moods and quick micro-notes; slightly colder emotional resonance.",
|
||||
"risk": "Reads retro-scifi novelty when stripped of warmth.",
|
||||
"comp": ".impeccable/mocks/decision/challenger-elbow-panel.webp",
|
||||
"hero": "https://impeccable.style/worlds/cards/pop-culture-shelf-elbow-panel-console-hero.webp"
|
||||
},
|
||||
{
|
||||
"id": "challenger-woodcut-sun",
|
||||
"label": "Village Coffeehouse & Woodcut Sun",
|
||||
"verdict": "declined",
|
||||
"lineage": "nineties earthy corporate identity & woodcut zine",
|
||||
"palette": [
|
||||
"#D96B43",
|
||||
"#556B2F",
|
||||
"#E6A15C",
|
||||
"#F4EBD9"
|
||||
],
|
||||
"materials": [
|
||||
"recycled kraft",
|
||||
"torn paper edges",
|
||||
"woodcut stamp marks"
|
||||
],
|
||||
"case": "Fuses poorly with eccentric personal tech-blog dynamic mood shifting.",
|
||||
"kept": "Tactile stamped press micro-interactions and torn paper dividers.",
|
||||
"hero": "https://impeccable.style/worlds/cards/brand-identity-canon-village-coffeehouse-identity-hero.webp"
|
||||
}
|
||||
],
|
||||
"reroll": {
|
||||
"registers": [
|
||||
"safer",
|
||||
"bolder"
|
||||
]
|
||||
},
|
||||
"buildPath": {
|
||||
"value": "comp",
|
||||
"toggle": true
|
||||
},
|
||||
"canon": true,
|
||||
"canonCard": {
|
||||
"label": "The Minimalist Developer Blog Standard",
|
||||
"thesis": "Monochrome clean typography, subtle borders, black-and-white cards with tag pills—executed cleanly.",
|
||||
"palette": [
|
||||
"#FFFFFF",
|
||||
"#09090B",
|
||||
"#71717A",
|
||||
"#3B82F6"
|
||||
],
|
||||
"materials": [
|
||||
"clean grid",
|
||||
"subtle border strokes",
|
||||
"system mono tags"
|
||||
],
|
||||
"viewport": "Standard two-column feed with sidebar tags and clean article cards.",
|
||||
"risk": "Indistinguishable from thousands of developer blogs on the internet.",
|
||||
"comp": ".impeccable/mocks/decision/canon.webp"
|
||||
},
|
||||
"steer": true
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
{
|
||||
"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."
|
||||
]
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 624 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 463 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 694 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 726 KiB |
@@ -0,0 +1 @@
|
||||
{"optionId":"model-pick","steer":"","comp":".impeccable/mocks/decision/model-pick.webp","buildPath":"comp","buildPathFlipped":false}
|
||||
@@ -0,0 +1 @@
|
||||
{"pid":78230,"port":64499,"url":"http://127.0.0.1:64499/","lastBeat":1786885494556}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
@@ -0,0 +1,25 @@
|
||||
# Surface Brief: Home Page & Journal Feed
|
||||
|
||||
<!-- impeccable:surface-brief 1 -->
|
||||
|
||||
## Scope & Visitor Mode
|
||||
- Target: `app/page.tsx`
|
||||
- Mode: `Experience` + `Read`
|
||||
|
||||
## Audience & Job
|
||||
- Primary: Mustafa Yıldız (`mstfyldz`) capturing unfiltered thoughts, daily logs, and mood states.
|
||||
- Secondary: Curious visitors exploring an expressive, authentic personal digital sketchbook.
|
||||
|
||||
## Outcome & Proof
|
||||
- The visitor immediately encounters an evocative, tactile personal journal workspace.
|
||||
- Seamless mood filtering (`⚡ Enerjik`, `☕ Gece Melankolisi`, `💡 Fikir Patlaması`, `🌿 Sakin / Karalama`).
|
||||
- Fluid reading experience across micro-notes, polaroid memories, audio scraps, and longform essays.
|
||||
|
||||
## Selected Direction & Visual System
|
||||
- Identity: **Annotated Field Notebook & Ink Marginalia**
|
||||
- Palette: Warm tactile cream `#FAF7F2`, rich deep ink `#18181B`, soft cardboard `#E4DCD3`, wax seal ruby `#E11D48`, warm amber `#D97706`.
|
||||
- Materials: Fine paper grain, stamped date marks, washi tape snippets, brass binder clips, highlighter ink wash.
|
||||
- Signature Interaction: Dynamic Mood Log wave with tactile wax stamp and atmosphere shift.
|
||||
|
||||
## Anti-Goals
|
||||
- No sterile corporate card grids, no purple-on-dark SaaS cliches, no generic developer template look.
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
version: 1
|
||||
slug: "app-page-tsx"
|
||||
primary_target: "app/page.tsx"
|
||||
related_targets: []
|
||||
---
|
||||
|
||||
# Surface Brief: Home Page & Journal Feed
|
||||
|
||||
<!-- impeccable:surface-brief 1 -->
|
||||
|
||||
## Scope & Visitor Mode
|
||||
- Target: `app/page.tsx`
|
||||
- Mode: `Experience` + `Read`
|
||||
|
||||
## Audience & Job
|
||||
- Primary: Mustafa Yıldız (`mstfyldz`) capturing unfiltered thoughts, daily logs, and mood states.
|
||||
- Secondary: Curious visitors exploring an expressive, authentic personal digital sketchbook.
|
||||
|
||||
## Outcome & Proof
|
||||
- The visitor immediately encounters an evocative, tactile personal journal workspace.
|
||||
- Seamless mood filtering (`⚡ Enerjik`, `☕ Gece Melankolisi`, `💡 Fikir Patlaması`, `🌿 Sakin / Karalama`).
|
||||
- Fluid reading experience across micro-notes, polaroid memories, audio scraps, and longform essays.
|
||||
|
||||
## Selected Direction & Visual System
|
||||
- Identity: **Annotated Field Notebook & Ink Marginalia**
|
||||
- Palette: Warm tactile cream `#FAF7F2`, rich deep ink `#18181B`, soft cardboard `#E4DCD3`, wax seal ruby `#E11D48`, warm amber `#D97706`.
|
||||
- Materials: Fine paper grain, stamped date marks, washi tape snippets, brass binder clips, highlighter ink wash.
|
||||
- Signature Interaction: Dynamic Mood Log wave with tactile wax stamp and atmosphere shift.
|
||||
|
||||
## Anti-Goals
|
||||
- No sterile corporate card grids, no purple-on-dark SaaS cliches, no generic developer template look.
|
||||
Reference in New Issue
Block a user