# Coral Reader — Branding Guide **Read what you love. Learn as you go.**

--- ## 🪸 The Brand **Coral Reader** pairs an open book with the organic branches of a coral reef — a symbol of growth, depth, and discovery. Just as a reef builds something vast from many small pieces, Coral Reader brings your whole reading life together: books and documents across many formats, on Android and iOS, in one warm and welcoming place. The warm coral-orange palette is energetic and inviting, while the clean book mark keeps the brand grounded in what the app is all about — reading. --- ## 🎨 Logos & Assets ### Primary Logo The primary logo — the coral-and-book mark with the **Coral** wordmark on a warm coral-orange gradient. Use this as the main brand symbol.

`assets/logo.jpg` · app icon: `assets/icon-512.png` ### Banner A larger, high-resolution version of the primary logo for hero images, headers, and wide layouts.

`assets/logo-banner.jpg` --- ## 🌈 Color Palette The palette used by the app and by this site. Machine-readable tokens (gradients, type, radii, motion) live in [`assets/design-tokens.json`](assets/design-tokens.json). | Swatch | Name | Hex | Usage | | :---: | --- | --- | --- | | 🟥 | Coral 500 | `#FF6F61` | Primary brand color, CTAs, accents | | 🟥 | Coral 600 | `#E8544E` | Gradient end, pressed states | | 🟥 | Coral 700 | `#D4443E` | Deep accent, links on light | | 🟧 | Peach | `#FFB3A7` | Gradient highlight in headlines | | ⬜ | Cream | `#F6F1E8` | Text on dark, light surfaces | | ⬛ | Zinc 950 | `#09090B` | Ink, dark surfaces | > The signature headline gradient runs from **Coral 500** to **Peach**, left to right. The dark > marketing background is a warm charcoal (`#221214` → `#120C0D` → `#09090B`) with coral glows. **Type:** Plus Jakarta Sans (UI and marketing, SIL OFL 1.1) and Frank Ruhl Libre (the reader serif). ## ✍️ Usage Guidelines **Do** - Keep clear space around the logo equal to at least the height of the coral mark. - Use the icon on the coral gradient or solid coral background. - Use the alternate mark on white or light surfaces. **Don't** - Stretch, skew, or rotate the logo. - Recolor the coral mark outside the approved palette. - Place the gradient icon on busy or low-contrast backgrounds. --- ## 📐 Logo Anatomy - **Coral branch** — growth, depth, and the joy of discovery. - **Open book** — the heart of the product: reading, listening, and understanding. - **Warm gradient** — approachable, energetic, and modern. ---

**Coral Reader** · Available on Android & iOS · Read, listen, and understand