# Loft501 — approved brand direction 01

Open `index.html` to view the complete visual brand guide. Everything loads locally, including fonts. Approved by the user on 20 October 2026. Electric Carnival is the palette name; Loft501 is the brand name. This direction supersedes earlier Loft501 colour and typography explorations. Application copy is illustrative.

## Contents
- `index.html` / `brand.css`: visual guide, logo rules, measured contrast, typography, sample applications and voice.
- `brand-board.png`: visual overview.
- `logos/`: colour, ink and paper wordmarks and symbols, plus a simplified favicon.
- `fonts/`: original free Google Fonts variable TTF files and SIL Open Font License files.
- `tokens.css` / `brand-tokens.json`: reusable colour and type definitions.
- `build_brand.py`: editable source for regenerating SVGs and guide.

## Typography
Sora SemiBold 600: logo and short headlines. DM Sans Regular 400: paragraphs; Medium 500: emphasis; SemiBold 600: buttons and short labels.
Sora: https://fonts.google.com/specimen/Sora
DM Sans: https://fonts.google.com/specimen/DM+Sans
Downloaded from the official google/fonts repository on 20 October 2026:
https://github.com/google/fonts/tree/main/ofl/sora
https://github.com/google/fonts/tree/main/ofl/dmsans
Both use the SIL Open Font License. Keep the bundled licence files with redistributed fonts. No Adobe subscription is required.

## Logo handling
The SVG wordmarks include Sora font data and editable text. Install Sora before editing in Illustrator, Inkscape, Figma or another vector editor. Some SVG importers do not preserve embedded fonts. Convert the wordmark to outlines in your editor for a final print handoff. Symbols are pure vector paths and do not require fonts.
The full-colour logo is intended for ink backgrounds. On light backgrounds use the monochrome ink logo so the yellow and turquoise remain clearly legible.
Minimum full logo width: 220 px / 55 mm. Minimum symbol width: 40 px / 10 mm. For 16–32 px use the simplified favicon. Clear space: 27 units relative to the 256-unit symbol; scale proportionally.
Do not stretch, rotate, add shadows or reorder the arcs. Decorative cropped arcs may bleed off a layout edge; the actual logo must remain complete.

## Composition
Start with 70% ink or paper, 20% one lead accent and 10% supporting accents. Turquoise is the default primary action colour. Use flat colours and generous empty space. Keep one clear focal point and an 8 px spacing rhythm. Avoid multicolour body copy and gradients in the core identity.
Use ink text on all four accents and paper text on ink. Contrast ratios are calculated in the guide; size, focus and full interactive accessibility still need checking in any eventual product.

## Applications
The guide includes a website hero composition, social graphic, business card and campaign banner. Copy and Alex Morgan are illustrative. Digital layouts use RGB; obtain a printer's colour proof before commercial print production.