# KRVN Brand System

Source of truth: `Resuverse-Website\concepts\krvn\index.html` (live site), `KRVN\krvnlogo.svg`, `KRVN\Posts\1-5.webp`, `KRVN\Products\*.png`.
Every value below is taken from those files. Anything not found there is listed under **Open questions** at the end.

---

## 1. Brand summary

- **What it is:** a fictional streetwear brand, created by Resuchron for Instagram and then the web, part of Resuverse concepts. Hoodies, pants, tees and shoes made from thrown away plastic (bottles and wrappers from rivers and landfill, shredded, melted and spun into thread).
- **Product line (Drop 01):** Loud Hoodie 89€, Patch Cargo 119€, Shred Tee 49€, High Top 149€.
- **Founder story:** Kai Raven, a graffiti painter. "KRVN started the same way: loud, uninvited, impossible to ignore."
- **Tagline:** Built different. Worn loud.
- **Hashtag:** #wornloud
- **Audience:** young teenagers and adolescents. The site copy speaks to "the people who wear it loudest".
- **Personality (words used in the site copy):** Loud. Uninvited. Heavy built. Street. Recycled.

## 2. Logo

**Files**
| File | Notes |
|---|---|
| `KRVN\krvnlogo.svg` | Master. viewBox 1717 × 1318 |
| `concepts\krvn\img\logo.svg` | Copy used on the site |

**Important:** the SVG is not vector. It contains one embedded PNG of **692 × 490 px** and no paths. It scales on screen, but for print the usable size is limited:
- at 300 dpi: max ~58.6 × 41.5 mm
- at 150 dpi: max ~117 × 83 mm

**Look of the logo (from the file):** hand drawn, graffiti style "KRVN" letterforms, distressed/scratched white texture through the letters, thin pale outline, horizontal gradient from lime yellow on the K to deep teal on the N.

**Logo variants seen in the photos (Posts/5.webp), not available as files:** solid lime, solid aqua, solid white, dark grey, aqua to blue gradient, and a lockup with "BUILT DIFFERENT. WORN LOUD" set under the wordmark.

**Sizes used in the code**
| Place | Height |
|---|---|
| Header, desktop | 42 px |
| Header, phone | 32 px |
| Footer | 70 px |
| Shop mockup | 28 px (18 px on phone) |

The site places the logo on every section colour with `drop-shadow(0 2px 10px rgba(0,0,0,.25))`.

**Decision (2026-11-05):** KRVN is a concept, so the existing logo file is the logo. No redraw, no vector rebuild, no separate icon. The wordmark "KRVN" is the only mark.

- **Minimum size:** screen 18 px tall (smallest used on the site). Print 20 mm wide; the texture fills in below that.
- **Maximum print size:** 58 mm wide at 300 dpi (limit of the 692 px file). Fits the business card.
- **Clear space:** keep empty space around the logo equal to 1/4 of the logo height on every side.
- **What not to do:**
  - Don't redraw, retype or rebuild the letters. KRVN does not change.
  - Don't stretch, squash or rotate the logo.
  - Don't remove the distressed texture or the pale outline.
  - Don't recolor it outside the KRVN palette. Solid versions in palette colors are fine (the clothes already use lime, aqua, white and grey).
  - Don't place it on a busy photo without the drop shadow or a solid color behind it.

## 3. Colours

All hex values are exact from the code. **Decision (2026-11-05): the logo leads.** The brand is the logo's teal gradient. The website's section colours stay in the system as accents, the way they already show up on the clothes.

**Primary: the logo gradient**
| Stop | Hex | CMYK (FOGRA27) | Note |
|---|---|---|---|
| Start (K) | `#b5ee3a` acid lime | C42 M0 Y84 K0 | code colour; logo pixel reads softer, `#b8da72` |
| Middle | `#25c4ca` aqua | C71 M0 Y28 K0 | code says "from the gradient print"; logo pixel `#26b7bb` |
| End (N) | `#0d5c58` deep teal | C87 M45 Y58 K29 | code says "from the logo"; logo pixel `#006f6c` |

Gradient: `linear-gradient(90deg, #b5ee3a, #25c4ca 45%, #0d5c58)`.
**Solid primary** (when one flat colour is needed): `#25c4ca` aqua, the dominant colour of the logo.

**Highlight:** `#7b12c9` purple, C73 M89 Y0 K0. Use sparingly for a pop, never as the main colour.

**Core**
| Role | Hex | Where in code |
|---|---|---|
| Primary | logo gradient / `#25c4ca` | see above |
| Base / dark background | `#0b0d10` | body background, footer, Shop section, shop buttons |
| Text on light colours | `#0a0c0f` | default `--fg` |
| Text on dark | `#e9efe9` | footer text |
| Text on dark (Shop) | `#eef3ea` | Shop `--fg` |
| Muted text | `#8a948f` | footer fine print |

**Accent / section colours** (each with its paired text colour)
| Name in code comment | Background | Text |
|---|---|---|
| Acid lime (Hoodies) | `#b5ee3a` | `#0a0c0f` |
| Deep teal "from the logo" (Pants) | `#0d5c58` | `#e9f6ef` |
| Aqua "from the gradient print" (Tees) | `#25c4ca` | `#061a1b` |
| Electric blue (Shoes) | `#1f5fe0` | `#f3f7ff` |
| Graffiti magenta (Gallery) | `#d6317e` | `#fff2f8` |
| Neon red (Founder) | `#e5304a` | `#fff3f3` |
| Night (Shop) | `#0b0d10` | `#eef3ea` |
| Purple highlight (Concept) | `#7b12c9` | `#fbf4ff` |

**CMYK values** (converted with Windows color management, sRGB → Europe ISO Coated FOGRA27, relative colorimetric)
| Hex | CMYK |
|---|---|
| `#b5ee3a` lime | C42 M0 Y84 K0 |
| `#25c4ca` aqua | C71 M0 Y28 K0 |
| `#0d5c58` deep teal | C87 M45 Y58 K29 |
| `#1f5fe0` blue | C84 M67 Y0 K0 |
| `#d6317e` magenta | C20 M90 Y19 K0 |
| `#e5304a` red | C9 M91 Y63 K1 |
| `#7b12c9` purple | C73 M89 Y0 K0 |
| `#0b0d10` night | C82 M76 Y67 K90 |
| `#e9efe9` light text | C11 M3 Y10 K0 |
| `#8a948f` muted | C53 M36 Y40 K2 |

**Gradient in code:** `linear-gradient(160deg, #b5ee3a, #25c4ca 45%, #7b12c9)`

**Logo gradient (sampled from the logo PNG pixels, approximate because of the texture):** `#b8da72` (K) → `#26b7bb` (middle) → `#0f8c8c` → `#006f6c` (N).

**Supporting neutrals:** `#f6f3ec` polaroid paper, `#f4f6f2` shop page, `#e3e7e1` browser bar, `#19a36a` "Added" confirmation green.

## 4. Typography

All Google Fonts, loaded in the site `<head>`.

| Use | Font | Weights loaded | Fallback |
|---|---|---|---|
| Display / headlines | **Big Shoulders Display** | 700, 900 | Impact, sans-serif |
| Body | **Space Grotesk** | 400, 500, 700 | system-ui |
| Labels / data | **Space Mono** | 400, 700 | ui-monospace |
| Handwritten tag | **Permanent Marker** | 400 | cursive |

**Scale used on the site**
| Level | Font | Weight | Size | Other |
|---|---|---|---|---|
| Headline (H2) | Big Shoulders Display | 900 | 64 to 148 px (`clamp(64px, 9.5vw, 148px)`) | UPPERCASE, line height 0.82, tracking -0.01em |
| Long headline | Big Shoulders Display | 900 | 54 to 104 px | same |
| Footer claim | Big Shoulders Display | 900 | 40 to 84 px | UPPERCASE, line height 0.9 |
| Price | Big Shoulders Display | 900 | 44 px | |
| Dial labels | Big Shoulders Display | 900 | 30 to 46 px | UPPERCASE |
| Sub / kicker | Space Mono | 400 | 13 px | UPPERCASE, tracking 0.14em, 80% opacity |
| Body / lede | Space Grotesk | 400 | 17 to 20 px | line height 1.45, max 30 characters wide |
| Spec lists | Space Mono | 400 | 13 px | labels UPPERCASE, tracking 0.08em |
| Button (CTA) | Space Grotesk | 700 | 14 px | UPPERCASE, tracking 0.12em, pill shape |
| Marker notes | Permanent Marker | 400 | 19 to 26 px | rotated -2° to 6° |
| Fine print | Space Grotesk | 400 | 13 px | |

Phone sizes: H2 54 to 76 px, lede 15 px, CTA 12 px.

**Digital KRVN (pixel font), decided 2026-11-05**
- A second, "digital" way to write KRVN: the word set in a **pixel font** (letters built from square pixels), in the logo colours (lime → aqua → deep teal gradient, or solid `#25c4ca`).
- It is an extra graphic element, not a replacement. The graffiti logo stays the official mark.
- Font: **Silkscreen** (Google Fonts, free, 400 and 700). Suggested, not yet in the site code.
- Use it in UPPERCASE, for small accents: tags, labels, stickers, the back of the business card, digital/online touches.

## 5. Voice

**Tone (from the copy):** short, punchy fragments. Confident and a bit cheeky. Physical, heavy words (heavy, shredded, ripped, stacked, chunky). The recycling story is stated plainly, never preachy, often as a throwaway joke.

**Example phrases (exact, from the site)**
1. "Heavy. Oversized. Shredded where it counts. The one you never take off."
2. "Thrown away plastic, never thrown away quality."
3. "Cargo denim with more tags than pockets. And it has a lot of pockets."

More: "Zero quiet." / "30 days, no drama" / "100% recycled, obviously" / "32 bottles saved per hoodie".

**Recurring devices:** numbered sections (01 / Hoodies), "bottles saved" counter per product, handwritten marker notes, arrow CTAs ("Shop hoodies →", "Wear the story →").

**Words to avoid:** no swear words (decided 2026-11-05). The audience is young teens, so KRVN stays loud without cursing.

## 6. Imagery and graphic style

**Shapes**
- The dial: a huge circle with tick marks (minor every 3°, major every 15°), inner solid and dashed rings, and a triangle pointer.
- Pill buttons (`border-radius: 999px`), round bag counter.
- Tilted cards: photos and polaroids rotated between -7° and +6°.
- Soft radial glow behind products.

**Textures**
- Distressed, scratched texture inside the logo letters.
- Graffiti walls, raw rips and distressing on the garments.
- Background photos turned greyscale, contrast 1.15, blended into the section colour (multiply on light, luminosity on dark) and faded out across the page.

**Photo style (Posts 1 to 5)**
- Real people, no studio: graffiti alleys, rooftops, "Studio 01" with graffiti walls and a neon sign.
- Night, wet ground with reflections, neon light.
- Full looks, head to toe, cropped faces, logo always readable.
- Captions in Permanent Marker ("Alley crew", "Lime loud", "Kai, first hoodie").

**Product images (Products/*.png):** black garments shown as cutouts, floating, with a deep drop shadow (`0 30px 40px rgba(0,0,0,.35)`) on a solid section colour.

## 7. Print specs

**Business card**
| Spec | Value |
|---|---|
| Trim size | 85 × 55 mm |
| Bleed | 3 mm each side |
| Document size with bleed | 91 × 61 mm |
| Colour mode | CMYK |
| Paper | 400 g matt coated (decided 2026-11-05) |
| Finish | Spot UV on the logo; needs a separate spot UV layer/file, logo shape only |

**CMYK note:** use the CMYK values from section 3 (profile: Europe ISO Coated FOGRA27, a standard for coated paper in Europe). Lime, aqua and blue will print a little duller than on screen; that is normal for neon-like RGB colours. If the print shop asks for a different profile (for example PSO Coated v3), convert again with theirs. The logo is a 692 × 490 px raster, so on the card it stays at 58 mm wide or smaller (300 dpi).

---

## Open questions

Answered 2026-11-05: audience (young teens and adolescents), logo (use the existing file, KRVN never changes), primary (the logo's teal gradient leads), purple (highlight), CMYK (converted, see section 3).

Still open:
Digital KRVN answered 2026-11-05: pixel font (see section 4).

Words to avoid answered 2026-11-05: no swear words (see section 5).

Paper answered 2026-11-05: 400 g matt coated + spot UV on the logo (see section 7).

No open questions left.