8.9 KiB
8.9 KiB
✧ 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:
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.