# Krytona Books — Brand Guidelines

---

## Brand Overview

Krytona Books represents the timeless elegance of literary culture. Our visual identity draws from the rich tradition of fine publishing, combining classic sophistication with modern accessibility. The brand evokes the warmth of aged paper, the prestige of gilt-edged pages, and the intellectual depth of curated literature.

Every element of our visual language is designed to convey trust, quality, and the enduring pleasure of reading.

---

## Color Palette

Our colors are inspired by the rich tones of leather-bound books, antique gold leaf, and aged parchment.

| Name | HEX | HSL | RGB |
|------|-----|-----|-----|
| Heritage Gold | `#C9A227` | `43 81% 47%` | 201, 162, 39 |
| Gilded Light | `#E8D48B` | `47 67% 73%` | 232, 212, 139 |
| Gold Dark | `#A68720` | `43 77% 39%` | 166, 135, 32 |
| Library Brown | `#1A150D` | `30 31% 8%` | 26, 21, 13 |
| Leather Brown | `#2C2416` | `34 30% 13%` | 44, 36, 22 |
| Brown Light | `#3D321F` | `33 32% 18%` | 61, 50, 31 |
| Parchment / Cream | `#F5F0E6` | `40 43% 93%` | 245, 240, 230 |

---

## Typography

### Primary Fonts

- **Display / Headlines:** Cormorant Garamond (400, 600, 700; Italic available)
- **Body / UI:** Source Sans 3 (300, 400, 600)

### Recommended Usage

| Element | Font | Weight |
|---------|------|--------|
| Page Headlines | Cormorant Garamond | 400–600 |
| Subheadings | Cormorant Garamond | 600 |
| Body Copy | Source Sans 3 | 300–400 |
| Accent / Pull-quotes | Cormorant Garamond Italic | 400 |
| UI Labels & Buttons | Source Sans 3 | 400–600 |
| Captions | Source Sans 3 | 300 |

### Fallback Fonts

- Serif: Georgia, Times New Roman
- Sans-serif: Arial, Helvetica

---

## Logo Usage

The Krytona Books logo features an open book icon with an elegant "K" monogram, paired with the wordmark. Always reproduce from approved artwork files.

### Approved Colour Combinations

| Version | Logo | Background |
|---------|------|------------|
| Primary | Gold (`#C9A227`) | Library Brown (`#1A150D`) |
| Secondary | Library Brown | Parchment (`#F5F0E6`) |
| Monochrome | White | Library Brown |
| Reversed | Library Brown | Heritage Gold |

### Minimum Sizes

- Print: 1 inch / 25 mm wide
- Digital: 120 px wide
- Icon only: 32 px

### Clear Space

Maintain clear space equal to the height of the "K" in the wordmark on all sides.

### Logo Do's

- Use approved logo files only
- Maintain proper clear space
- Scale proportionally
- Use on appropriate, low-contrast backgrounds
- Ensure sufficient contrast

### Logo Don'ts

- Stretch or distort the logo
- Change logo colors arbitrarily
- Add effects (shadows, glows, outlines)
- Place on busy or patterned backgrounds
- Rotate or skew
- Recreate or modify elements

---

## Admin Interface — Light & Dark Modes

The Krytona Books admin panel (`/admin`) supports two interface themes: **Dark** (default) and **Light**. Both modes maintain Heritage Gold as the sole accent colour and the dark leather-brown sidebar, preserving brand identity at all times. Theme preference is saved per browser via `localStorage`.

> **Scope:** These admin themes apply exclusively within the `/admin` route. The public-facing store always uses the standard brand palette.

---

### Dark Mode (Default)

Deep espresso backgrounds reduce eye strain during extended sessions. Gold accents provide clear visual hierarchy.

| Role | HEX | HSL |
|------|-----|-----|
| Page Background | `#0D0906` | `20 60% 5%` |
| Sidebar | `#140F08` | `20 60% 8%` |
| Cards / Panels | `#1A1108` | `20 60% 9%` |
| Accent Gold | `#C9A227` | `43 74% 49%` |
| Gold Border | `rgba(201,162,39,0.15)` | `43 74% 49% / 15%` |
| Primary Text | `#F0E8D6` | `40 33% 93%` |
| Muted Text | `#8A7560` | `40 20% 50%` |
| Input Background | `rgba(255,255,255,0.05)` | — |
| Input Border | `rgba(255,255,255,0.15)` | — |

---

### Light Mode

Parchment-toned page backgrounds with white card surfaces. The sidebar remains dark leather-brown to anchor brand identity. Suited to bright environments and users who prefer higher contrast.

| Role | HEX | HSL |
|------|-----|-----|
| Page Background | `#F2EDE3` | `40 30% 95%` |
| Sidebar | `#2C2416` | `34 25% 12%` |
| Cards / Panels | `#FFFFFF` | `0 0% 100%` |
| Accent Gold | `#C9A227` | `43 74% 49%` |
| Gold Border | `rgba(201,162,39,0.30)` | `43 74% 49% / 30%` |
| Primary Text | `#1A150D` | `30 31% 10%` |
| Muted Text | `#6B5B45` | `30 20% 35%` |
| Input Background | `#F7F4EE` | `40 30% 97%` |
| Input Border | `#D4C5A9` | `33 20% 80%` |

---

### Admin UI Rules

#### Do
- Use Heritage Gold (`#C9A227`) as the sole accent colour in both modes
- Keep the sidebar in dark leather-brown in both modes
- Use white card surfaces in light mode, dark espresso in dark mode
- Maintain a minimum 4.5:1 contrast ratio for all readable text
- Persist theme choice in `localStorage` under the key `krytona-admin-theme`
- Expose the theme toggle in the **Profile** page of the admin panel

#### Don't
- Introduce new accent colours (blue, purple, green) in the admin UI
- Use pure black (`#000000`) backgrounds in dark mode
- Use pure white (`#FFFFFF`) as the page background in light mode
- Apply admin themes outside the `/admin` route
- Mix light-mode card styles with dark-mode page backgrounds

---

### Sidebar — Always Dark

Regardless of light/dark mode selection, the admin sidebar always uses:

- Background: `#2C2416` (Leather Brown, HSL `34 25% 12%`)
- Logo: `logo-dark-bg.png` / `logo-dark-bg.svg`
- Nav text (inactive): HSL `40 20% 55%`
- Nav text (active): HSL `43 74% 65%`
- Active nav background: `rgba(201,162,39,0.20)`

---

### Interactive States

| Element | Dark Mode | Light Mode |
|---------|-----------|------------|
| Button (Primary) | Gold bg + dark text | Gold bg + dark text |
| Button (Ghost) | `rgba(255,255,255,0.05)` | `rgba(26,21,13,0.06)` |
| Table row (alt) | `rgba(255,255,255,0.02)` | `hsl(40 20% 97%)` |
| Active badge | Green-500 / `#10B981` | Green-500 / `#10B981` |
| Inactive badge | HSL `40 20% 40%` | HSL `30 20% 45%` |
| Destructive hover | Red-400 / `#F87171` | Red-500 / `#EF4444` |

---

## Available Assets

### Logo Files

| File | Usage |
|------|-------|
| `logo-primary.svg` | Full logo, gold gradient (light backgrounds) |
| `logo-dark-bg.svg` | For dark backgrounds — admin sidebar |
| `logo-dark-bg.png` | PNG fallback for dark backgrounds |
| `logo-white.svg` | White monochrome |
| `logo-dark.svg` | Dark monochrome |
| `logo-icon.svg` | Icon mark only |

### Favicon

- `favicon.svg` — Scalable favicon
- `favicon.ico` — Legacy fallback

### Social Media Assets

| File | Platform |
|------|----------|
| `og-image-1200x630.svg` | Facebook / Open Graph |
| `twitter-card-1200x600.svg` | Twitter / X |
| `instagram-square-1080x1080.svg` | Instagram posts |
| `linkedin-banner-1584x396.svg` | LinkedIn cover |
| `youtube-banner-2560x1440.svg` | YouTube channel art |
| `story-1080x1920.svg` | Instagram / Facebook stories |

---

*© 2025 Krytona Books. All rights reserved. · [krytonabooks.com](https://krytonabooks.com)*