# ✧ 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.



