# CipherDeck Website — Design Concept Brief

Use this document as the single source of truth when designing or building pages for **CipherDeck** — both **www.cipherdeck.com** (marketing) and **app.cipherdeck.com** (seller / collection app).

The app is a product surface, not a second brand. Same paper, same type, same red, same voice. Dark mode may exist as a user preference in the app; light warm paper is the default.

---

## 1. Brand overview

**CipherDeck** is a veteran-owned, family-run Pokémon TCG shop based in Fort Washington, Maryland. They sell singles, sealed product, and graded cards online and at shows. The seller app is the inventory / pricing / trending tool that supports that shop and other collectors.

**Brand personality:**
- Warm, humble, human — not corporate
- Trustworthy small business — not a marketplace giant
- Collector-first — people who actually open packs and care about condition
- Friendly and approachable — never salesy or hype-driven

**What CipherDeck is NOT:**
- Not a crypto/fintech aesthetic
- Not a loud “hype beast” card shop
- Not a generic AI landing page template
- Not dark-mode “gamer” UI with holographic gradients (as the default)

---

## 2. Brand hierarchy (critical)

The visual and copy hierarchy must always follow this order on marketing surfaces:

```
[Logo mark]
CIPHERDECK
Because "Scyther-deck" was taken.

A family Pokémon shop in Maryland.
[Supporting description paragraph]
[CTA buttons]
```

**Rules:**
- **CIPHERDECK** is always the primary headline in the hero
- The **motto** (“Because ‘Scyther-deck’ was taken.”) goes **directly under the brand name** — never under a separate headline like “A family Pokémon shop”
- “A family Pokémon shop in Maryland” is a **subtitle**, not the main headline
- The motto is italic, muted, and slightly smaller than the brand name

**App note:** The in-app header uses the mark + CIPHERDECK wordmark. Product screens lead with the room name (e.g. Trending); the brand lockup appears on the signed-out Collect home / marketing-adjacent surfaces. Do not invent a second product name.

---

## 3. Voice & copy guidelines

**Tone:** Plainspoken, honest, warm. Write like a real person, not marketing copy.

**Do:**
- Use short, clear sentences
- Sound like a family shop that grew out of a real hobby
- Mention veteran-owned / family-run naturally, not as badges
- Be specific (“sleeved and toploaded”) without being gimmicky

**Don’t:**
- Use “hand-pulled” or similar forced slogans
- Use ALL CAPS labels everywhere (e.g. “4 PLATFORMS · ONE INVENTORY”)
- Stack trust badges, chips, and CTAs
- Use urgency language (“limited time”, “act now”)
- Sound like it was written by a bot

**Approved motto (use exactly):**
> Because "Scyther-deck" was taken.

**Example hero copy:**
- Subtitle: *A family Pokémon shop in Maryland.*
- Lead: *Singles, sealed product, and graded cards — veteran-owned, family-run, and built on years of collecting together.*

---

## 4. Color system

Light, warm, professional — like a boutique shop, not a tech startup.

| Token | Hex | Usage |
|-------|-----|-------|
Visual reference: [Function on Refero](https://styles.refero.design/style/21b71be3-78a0-4681-a5b9-64cc4b40eb67) — warm apothecary journal on parchment. Terracotta is the seal; green and red stay reserved for market up/down.

| Token | Hex | Usage |
|-------|-----|-------|
| `--bg` | `#FEF9EF` | Page canvas (Function parchment — never pure white) |
| `--bg-alt` / `--panel` | `#F5EEE1` | Cards, invite, set tiles (aged paper) |
| `--text` / `--ink` | `#2A2B2F` | Primary text |
| `--text-secondary` / `--muted` | `#515151` | Body copy, descriptions |
| `--text-tertiary` / `--muted2` | `#808988` | Motto, labels, meta text |
| `--accent` | `#B05A36` | Primary CTA, active chips (Function terracotta seal) |
| `--accent-hover` | `#93492C` | Hover state for accent |
| `--accent-soft` | `#F8EBE4` | Soft terracotta wash |
| `--border` / `--line` | `#D1C9BF` | Warm taupe hairlines |
| `--up` / `--down` | `#0F7A4C` / `#C43C32` | Market direction only — never brand |
| Footer bg | `#1A1D23` | Dark footer (uses `--text` color) |

**Shadows (subtle, never heavy):**
- Small: `0 1px 2px rgba(26,29,35,0.04), 0 2px 8px rgba(26,29,35,0.03)`
- Medium: `0 4px 16px rgba(26,29,35,0.06), 0 12px 40px rgba(26,29,35,0.05)`

**Do not use:** holographic gradients, neon colors, pure black backgrounds, or high-contrast “gamer” palettes as the default look. Do not bring back the old app blue (`#3E6AFD`) or purple holo accents.

---

## 5. Typography

| Role | Font | Weight | Notes |
|------|------|--------|-------|
| Display / brand | **Fraunces** | 400 roman / 300 italic | Logo-adjacent headlines, catalog titles. Function's roman+italic mix in one line. |
| Body | **DM Sans** | 400–700 | All body text, nav, buttons |

**Google Fonts import:**
```
Bricolage Grotesque: 500, 800
DM Sans: 400, 500, 600 (plus italic 400)
```

**Scale (marketing):**
- Brand name (hero): `clamp(2.5rem, 6vw, 3.5rem)`, letter-spacing `0.06em`
- Motto: `1.125rem`, italic, tertiary color
- Hero subtitle: `clamp(1.375rem, 3vw, 1.75rem)`, weight 800
- Body: `1.0625rem` (17px), line-height `1.6`
- Section headings: `clamp(1.5rem, 3vw, 1.875rem)`, weight 800
- Footer labels: `0.75rem`, uppercase, letter-spacing `0.08em`

**App:** Body uses DM Sans at ~16–17px. Screen titles (Trending, Collection, …) use Bricolage 800. Header wordmark matches marketing letter-spacing.

---

## 6. Layout & spacing

- **Max content width (marketing):** 1080px
- **App wrap:** ~920px (dense product UI; keep air at the edges)
- **Narrow prose width:** 640px
- **Horizontal padding:** 28px marketing / 20px app
- **Section vertical padding (marketing):** 80px (56px on mobile)

**Layout principles:**
- Generous whitespace — when in doubt, add more air
- One clear idea per section / room
- App cold-boot lands on **Trending** (what moved), not a menu of tiles
- No more than 2 primary CTAs competing in one viewport

---

## 7. Border radius

- Cards & large surfaces: `16px`
- Buttons, nav pills, inputs: `10px` (small) or `999px` (pill buttons)

---

## 8. Components

### Header (sticky)
- Background: `rgba(247, 246, 243, 0.85)` with `backdrop-filter: blur(12px)`
- Bottom border: 1px border token
- Left: logo mark + “CIPHERDECK” wordmark (display font, tracked)
- App: account / Sign in on the right; Collect · Vend · App tabs as product chrome

### Brand lockup (reusable)
```
[Logo mark]
CIPHERDECK (display font, 800 weight)
Because "Scyther-deck" was taken. (italic, tertiary — marketing heroes)
```

### Buttons
- **Primary:** accent red background, white text, pill shape, soft red shadow
- **Secondary / ghost:** white (or panel) background, dark text, 1px border, pill, subtle shadow
- Hover: slight lift (`translateY(-1px)`) + deeper shadow
- Green = buy/add, red accent = brand/CTA (sell actions stay distinct product red where already established)

### Footer
- Marketing: dark `#1A1D23` footer
- App: quiet muted line; do not invent a second brand mark

---

## 9. Page structure (marketing)

### Homepage (`/`)
1. Sticky header  
2. Hero — brand lockup → motto → subtitle → lead → 2 CTAs  
3. For sale on eBay (alt bg) — live listings grid; cards open eBay
4. How we ship — 3 value points
5. About teaser (alt bg)
6. Footer

**Do not add back:** TCGplayer/Misprint tiles, newsletter blocks, trust-chip stacks, fake urgency.

### App (`app.cipherdeck.com`)
1. Sticky header with brand  
2. First room: **Explore** — search, market movers, every set on the page (no fly-out)
3. Guests can open sets and cards; sign-in is for saving, chasing, and selling
4. Collect / Sell / Account as the three product doors
5. Quiet footer  

---

## 10. Content & links

| Item | URL |
|------|-----|
| Listings (eBay) | https://www.cipherdeck.com/#listings and https://www.ebay.com/str/cipherdeck |
| Seller app | https://app.cipherdeck.com/ |
| Instagram | https://www.instagram.com/cipherdeck |
| TikTok | https://www.tiktok.com/@jbnx1 |
| Facebook | https://www.facebook.com/share/1ERjpmTwy9/ |
| Email | info@cipherdeck.com |
| Address | 8909 Nancy Lane, Fort Washington, MD 20744 |

---

## 11. Assets

| File | Usage |
|------|-------|
| Marketing `/static/cipherdeck-mark.png` | Logo mark |
| App `/brand-mark-192.png`, `/favicon.svg` | In-app mark / icons |
| Shared OG images | Social sharing |

---

## 12. Responsive behavior

**≤ 768px (marketing) / ≤ 640px (app bottom nav):**
- Prefer mark-only or shortened chrome when space is tight
- Single-column grids
- Chip rows may scroll horizontally rather than wrap into chaos
- Reduce section padding

---

## 13. Anti-patterns (never do these)

- Dark mode as the **default** theme
- Holographic / rainbow gradients on brand chrome
- Uppercase mono labels (“STEP 01”, “4 PLATFORMS”)
- Floating animations on the logo
- Motto placed under a headline other than CIPHERDECK
- Emoji icon rows as decoration
- Corporate buzzwords (“synergy”, “solutions”, “leverage”)
- Fake urgency or countdown timers
- Reintroducing blue/purple “SaaS” accents in the app shell

---

## 14. Reference aesthetic

Think: **a well-designed local shop that happens to sell online** — closer to a warm boutique DTC brand than a gaming marketplace.

- Light, airy, confident
- Typography does the heavy lifting
- Color used sparingly (neutrals + one red accent)
- Every element earns its place

---

## 15. One-line prompt summary

> Design CipherDeck surfaces as a light, warm, minimalist family Pokémon shop: logo + “CIPHERDECK” + motto “Because ‘Scyther-deck’ was taken.” Use Bricolage Grotesque + DM Sans, warm off-white `#F7F6F3`, red accent `#C4372A`, subtle shadows, pill buttons, humble human copy. The app and the marketing site are one brand — not a blue SaaS tool bolted onto a shop.