446 lines
8.9 KiB
Markdown
446 lines
8.9 KiB
Markdown
# ✧ 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.
|
||
|
||
|
||
|