# ✧ GRIMMTATTOO — SPANISH REVIVAL WEBSITE ### *Product Requirements Document (PRD)* ### aesthetic: warm terracotta, olive, stucco, brass • type: fraunces + crimson text + inter • vibe: spanish revival meets vintage tattoo studio --- # ✧ 1. OVERVIEW GrimmTattoo is a personal + professional digital home for Amari. Its purpose: *a cozy, architectural, highly personalized creative space* where she can display flash, organize inspiration, manage behind-the-scenes workflow, and enjoy a corner of the internet that feels like HER. This PRD outlines: - core features - aesthetic + brand rules - detailed user flows - feature-level requirements - component breakdown - Dev/infra notes for OpenNext + Cloudflare + Tailwind + your workflow (tmux, nvim, codex) - stretch goals Everything honors the Spanish Revival design language chosen in your inspiration board. --- # ✧ 2. CORE FEATURES (APPROVED) ### 1. **Virtual Scrapbook** (drag-and-drop collage canvas) ### 2. **Flash Vault** (interactive gallery of flash art) ### 3. **Music Corner** (playlists + audio embeds) ### 4. **Digital Pantry** (recipes, meal prep, inventory, spinner wheel) ### 5. **Cat Universe** (profiles, memorial, galleries) ### 6. **Secret Love Letter Tab** (hidden URL) ### 7. **Global Spanish Revival UI + component system** --- # ✧ 3. BRAND & AESTHETIC SYSTEM ## ✧ 3.1 COLOR PALETTE (locked) **Primary** - terracotta — `#C46A4A` - olive verde — `#7D8E6A` - stucco cream — `#F6EFE4` - coffee brown — `#4A3628` **Neutrals** - old iron black — `#1A1A1A` - brass — `#B08A57` **Highlights** - adobe red — `#9A3E2F` - dusty sage — `#C3D0BA` - parchment — `#FDF8F1` ### ✧ 3.1.1 TailwindCSS Tokens Use custom theme extension: ```js theme: { extend: { colors: { terracotta: '#C46A4A', olive: '#7D8E6A', stucco: '#F6EFE4', coffee: '#4A3628', iron: '#1A1A1A', brass: '#B08A57', adobe: '#9A3E2F', sage: '#C3D0BA', parchment: '#FDF8F1' }, fontFamily: { display: ['Fraunces', 'serif'], body: ['Crimson Text', 'serif'], ui: ['Inter', 'sans-serif'] } } } ⸻ ✧ 3.2 TYPOGRAPHY SYSTEM Display Serif (H1–H3) Fraunces — bold or semibold Use for: titles, headers, flash names, scrapbook section titles Body Serif (P, long text) Crimson Text Use for: descriptive text, blog-like entries, stories UI Sans (buttons/inputs/nav) Inter Use for: forms, labels, utility elements, pagination ⸻ ✧ 3.3 UI SHAPES / MOTIFS • rounded-but-structured rectangles • arched headers + image frames (spanish windows) • thin brass borders • lightly textured parchment backgrounds • terracotta drop-shadows (warm soft shadows) ⸻ ✧ 4. FEATURE REQUIREMENTS + USER FLOWS ⸻ ✧ 4.1 VIRTUAL SCRAPBOOK (CORE FEATURE) ✧ Purpose A drag-and-drop collage builder where Amari can pin inspo, frames, stickers, notes, and color swatches. Auto-saves. ✧ User Flow 1. user opens /scrapbook • sees a parchment background canvas • sidebar on left with assets • toolbar on right with manipulation tools (rotate, scale, duplicate, delete, layer order) 2. user adds elements Sidebar Element Categories: • Uploads (user images) • Stickers (roses, webs, frames, tape strips, sparkles) • Paper textures • Color swatches • Text notes (handwritten + serif) User drags element onto canvas → element appears with bounding box + rotation handle. 3. editing Toolbar actions: • rotate • scale • flip horizontal • duplicate • delete • send to front/back • lock element 4. text editing Double-click text box → inline text editor Font options: handwritten (Caveat) or serif (Crimson) 5. auto-save LocalStorage (no login) OR user account storage (future) Autosave events triggered on element add/remove/move. 6. export Button: “Save Snapshot” Outputs: PNG, JPG Optional: “Print layout” (8.5x11 with safe margins) ✧ Requirements Summary • drag & drop via HTML5 or library like Konva.js / React-DnD • autosave state as JSON • rendering to canvas for export • mobile view: restricted editing, mostly viewer-only ⸻ ✧ 4.2 FLASH VAULT ✧ Purpose Showcase all flash artwork in luxurious framed displays with microinteractions. ✧ User Flow 1. user enters /flash Sees grid of vintage frames (iron + brass). Hover → frame “wiggles” slightly. Click → opens detail modal/page. 2. detail page includes: • large image • name (Fraunces, terracotta) • story (Crimson body text) • tags (traditional, color, repeatable) • size + price • “Book This” button (olive background, brass border) linking to GlossGenius • related flash suggestions 3. admin flow (future enhancement) Add new flash via admin panel: • upload image • write story • set tags • set pricing • toggle availability ⸻ ✧ 4.3 MUSIC CORNER ✧ Purpose A space for playlists, audio uploads, and musical inspirations. ✧ User Flow 1. user visits /music Sees cards styled like old album covers. 2. playlist cards Each tile includes: • album cover frame • title • embedded Spotify player • optional text: “music that inspired this flash collection” 3. personal audio Optional: file uploader for short bass riffs. Audio player styled with brass accents + terracotta buttons. ⸻ ✧ 4.4 DIGITAL PANTRY ✧ Purpose Store recipes, meal prep rotations, pantry inventory, grocery lists. ✧ User Flow 1. user enters /pantry Tabs: • recipes • meal prep • grocery lists • pantry inventory • meal spinner 2. recipes Click card → see ingredients, instructions, photos. 3. meal prep Create weekly plan. 4. grocery list Editable checklist stored in LocalStorage. 5. inventory Editable list w/ categories like: • grains • proteins • spices • snacks 6. spinner wheel Random meal generator (use canvas or SVG rotating wheel). ⸻ ✧ 4.5 CAT UNIVERSE ✧ Purpose A dedicated area for her cats, including a memorial. ✧ User Flow 1. home page for /cats Shows portrait cards: • miso soup • honey-boy • coffee june-bean • mochi (memorial) 2. individual cat pages Include: • photo gallery • middle names • personality traits • birth/adoption date • fun facts • favorite toys • a “mood today” slider 3. mochi memorial Soft animation: • faint falling sparkles • soft music option • letter-writing box (saved locally) ⸻ ✧ 4.6 SECRET LOVE LETTER TAB ✧ Purpose A hidden URL containing a surprise page for Amari. Proposed URL /blue-room or /casa-azul Features • handwritten-style note (Caveat font) • slideshow of personal photos • audio file (voice memo) • fade-in animations • password optional • invisible-from-nav ⸻ ✧ 5. GLOBAL COMPONENT LIBRARY (UI KIT) ✧ Buttons • olive filled with brass border • terracotta filled with cream text • brass outline buttons for secondary CTA ✧ Cards • parchment or stucco backgrounds • brass thin borders • subtle terracotta shadow ✧ Navigation • horizontal bar • terracotta background • cream text in Fraunces • hover → olive or brass underline ✧ Footer • stucco background • iron text • ghosts of spanish patterns (low opacity tiles) ✧ Modals • parchment with brass framing • close button in iron ✧ Inputs • cream background • coffee brown border • inter ui font ⸻ ✧ 6. INFORMATION ARCHITECTURE Main Nav • Home • Flash Vault • Scrapbook • Music • Pantry • Cats • Contact (optional) Hidden • /blue-room ⸻ ✧ 7. DEVELOPMENT NOTES Framework OpenNext + Cloudflare Pages • build static or hybrid pages • scrapbook: client-side heavy File storage • localStorage for scrapbook & pantry • cloud uploads optional later Version Control • push to self-hosted Gitea • main branch protected • dev branches per feature Workflow • use tmux pane 1 for server, pane 2 for editor • use codex for scaffold generation • tailwind jit enabled • use components library folder: /components/ui • use /data folder for static JSON like recipes or flash metadata ⸻ ✧ 8. STRETCH FEATURES • user accounts for saved scrapbook notebooks • admin panel for uploading flash • light/dark mode (spanish revival dusk version) • interactive courtyard home page • animated arched transitions • global search • client booking portal ⸻ ✧ 9. SUCCESS METRICS • scrapbook loads under 150ms • flash vault navigation under 80ms • no layout shifts (CLS < 0.1) • lighthouse performance > 90 • accessible color contrast for text • stable mobile experience ⸻ ✧ 10. FINAL MOOD SUMMARY The entire site should feel like: a vintage spanish villa, sun-warmed, filled with plants, arches, terracotta tiles, brass lanterns, and nostalgia — but with modern tattoo artist functionality built underneath. Elegance + warmth + creative freedom.