- brand/: 1200x1200 full-bleed app icon, 1600x900 feature image, transparent logos, favicons, guidelines (palette, type, usage) and the build script - / is now a branded landing page with no shop-domain form (App Store 2.3.1) - /privacy and /terms describe Datewise's actual data handling and sub-processors Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
55 lines
3.1 KiB
Markdown
55 lines
3.1 KiB
Markdown
# Datewise brand
|
||
|
||
**Name:** Datewise · **Listing name:** Datewise: Delivery & Pickup · **Tagline:** The right day, every order.
|
||
**Personality:** calm, reliable, organised, quietly clever, friendly.
|
||
Full board: `source/brand-board.png`.
|
||
|
||
## Files
|
||
|
||
| File | Size | Use |
|
||
|---|---|---|
|
||
| `shopify/app-icon-1200x1200.png` | 1200×1200 | **Partner Dashboard → App icon** and App Store listing icon. Full bleed, no text; Shopify rounds the corners. |
|
||
| `shopify/feature-image-1600x900.png` | 1600×900 | **App Store listing → Feature image.** No pricing, reviews or outcome claims. |
|
||
| `logo/datewise-logo.png` | 2104×460, transparent | Primary horizontal logo on light backgrounds |
|
||
| `logo/datewise-logo-white.png` | transparent | Logo on teal or dark backgrounds |
|
||
| `logo/datewise-logo-mono.png` | transparent | Single-colour use (charcoal) |
|
||
| `logo/datewise-symbol.png` | 894×894, transparent | Symbol alone (avatars, social) |
|
||
| `web/favicon.ico`, `web/favicon-32.png`, `web/apple-touch-icon-180.png`, `web/icon-512.png` | | Website icons (copies live in `public/`) |
|
||
| `source/*` | | The original generated artwork, unchanged |
|
||
|
||
Screenshots for the listing (1600×900, 3–6 with alt text) come later, from the dev store (launch Phase 8).
|
||
|
||
Rebuild everything from the sources: `python -I brand/build_brand.py <sources dir> <widget screenshot> brand public`.
|
||
The originals are raster images generated by AI. Before printing or large-format use, have the symbol and wordmark redrawn as SVG.
|
||
|
||
## Colour
|
||
|
||
| Token | Hex | Use |
|
||
|---|---|---|
|
||
| Primary teal | `#0D6B5D` | Brand colour, primary buttons, selected states. Default accent of the storefront widget. |
|
||
| Deep teal | `#045A51` | Icon and feature-image background, headings on light pages |
|
||
| Amber | `#D98A0B` | Highlights only: the symbol's rays, busy and festival days. Never for body text. |
|
||
| Sage tint | `#E8F2ED` | Calm surfaces, confirmation backgrounds |
|
||
| Charcoal | `#1F2937` | Text |
|
||
| Off-white | `#FAFBF9` | Page background |
|
||
|
||
White on `#0D6B5D` has a contrast ratio of about 6.4:1 (passes WCAG AA for text). Amber on white is about 2.8:1 and fails for text, so use it only for marks and dots.
|
||
|
||
## Type
|
||
|
||
**Inter** (Google Fonts). Headings 700–750 with slightly tight tracking (−0.02em); body 400–450.
|
||
The admin uses Polaris's own type (Built for Shopify), and the storefront widget inherits the merchant's theme font.
|
||
|
||
## Logo use
|
||
|
||
- Clear space: at least the height of the calendar's ring tabs on every side.
|
||
- Minimum size: symbol 16px (favicon), horizontal logo 96px wide.
|
||
- Don't recolour the rays to anything but amber or white, stretch the logo, add effects, or place the colour logo on busy photos.
|
||
- The symbol's motifs echo the product UI: the calendar is the booking, the notched edges are the ticket stub (the cart confirmation), and the rays mark the confirmed moment.
|
||
|
||
## Where the brand appears in the app
|
||
|
||
- Public landing page `/`, `/privacy` and `/terms`: logo, palette, Inter.
|
||
- Storefront widget: accent `#0D6B5D` by default (merchants can change it in Settings).
|
||
- Admin: Polaris only. Branding there is the app icon and name, set in the Partner Dashboard.
|