# Futurise — brand instructions for Claude Code You are building something branded **Futurise** (the studio itself, or a sub-brand: Branding · Production · Marketing · With Shivam). Follow this file exactly. Canonical source: https://futurise-brand-system.vercel.app (brand.json = structured truth). ## Colours (hex — never approximate) | Token | Hex | Use | |---|---|---| | Core yellow | `#FFC20E` | THE brand colour — signal, highlight, CTA, the wordmark dot. Identical in light and dark. | | Black | `#000000` | authority, grounds, type — also the dark-mode ground | | White | `#FFFFFF` | space, clarity, light-mode ground | | Amber | `#FAA61A` | support step ONLY — never leads, never the Core dot | | Deep amber | `#E0861A` | support · UI warn state | | Graphite / Slate | `#414042` / `#58595B` | secondary type, captions | | Light grey / Off-white | `#E6E7E8` / `#F1F2F2` | rules, borders / surfaces | | Deep Twilight | `#231E60` | accent: data-viz + depth ONLY. Never a CTA, never competes with yellow. | Hard rules: - **Primary leads.** Every layout anchors in black, white, or yellow. - Text on yellow = black only. Yellow text sits on black only. - Dark mode: ground `#000000`, surfaces `#141414`/`#0C0C0C`, lines `#2B2B2E`, muted `#A7A9AC`. Never navy/blue-grey darks. - Functional UI states (product only): ok `#2E7D51`, warn `#E0861A`, err `#C93B3B`. Yellow means BRAND, never "warning". ## Type - Everything: **Unitea Sans** (400–900). Display = 900/1.02/−2%; body = 17/1.6. - Emphasis: **RCL Morland Italic** — 1–2 words per headline max, usually yellow. NEVER body, NEVER full headlines, NEVER UI. - Tagline (locked): **Branding the *future*.** — "future" in RCL Morland Italic, trailing dot = the Core. - Web: link `/tokens.css` or copy `/fonts/*.woff2`. PDFs/print: embed the OTFs from `/downloads/fz-fonts.zip`, never woff2. ## Logo - SVGs (true vectors): `/downloads/fz-wordmark-{black,white,mono-black,mono-white}.svg`, `fz-symbol-{black,white}.svg`, `fz-branding-{black,white}.svg`. - Letters black or white ONLY; **the dot stays Core yellow**. On yellow grounds use mono-black. Never redraw, stretch, rotate, or restyle. - **NEVER CSS-`invert()` a logo for dark mode — the yellow dot turns blue.** Swap to the real white asset (in decks: the `.bm-dark`/`.bm-light` swap on `body.on-light`). - Clearspace ≥ 1 dot-diameter on all sides. Min width: wordmark 120px / 30mm; symbol 24px / 8mm. - Favicon/avatar: symbol or white wordmark on black; radius conventions per platform. ## Light + dark (both are first-class) Set `data-theme="dark"` or `"light"` on `` (tokens.css also follows `prefers-color-scheme`). Use the semantic vars: `--bg --ink --surface --line --muted --card` — never hardcode grounds. `#FFC20E` never changes; on black it may glow (`box-shadow: 0 0 … rgba(255,194,14,.45)`). ## The Core (motif) The circle = the logo dot = the point of decision. Devices: glowing Core sun on black halftone (dark hero), capsule momentum paths, B&W circle photo masks, 4–6px yellow image frames, solid yellow cards with black type, Modular Circle Pattern (`/downloads/fz-pattern-modular.svg` — never behind body text). ## Imagery (hard rule) Never stretch or crop-distort ANY image. Frames use the native ratio: ```css .frame{height:46vh; aspect-ratio:var(--r); width:auto} .frame img{width:100%; height:100%; object-fit:cover} ``` Portraits go B&W in circle masks. Sanitize third-party SVGs that ship `preserveAspectRatio="none"`. ## Brand architecture (brand.json `architecture`) Four tiers. **1 · The studio:** `futurise.` — master brand, owns positioning/wordmark/Core/yellow. **2 · Service lines:** Branding · Production · Marketing · With Shivam — wordmark + caps lockups, never separate logos. **3 · Products:** software the studio owns (BOOKS, EXPENSE, VAULT, DESK, FOLIO, PULSE) — spoken "Futurise BOOKS"; inherit everything; a product NEVER gets its own logo, palette, or typeface. **4 · Client software:** the client's brand leads; Futurise = "〈Product〉 by Futurise" in the title + small grey credit wordmark only; Futurise yellow never inside a client's UI. Outside the family: personal/family tools diverge freely and carry NO Futurise branding. **Naming law:** ONE real English word for the job it does. No compounds, hyphens, invented words, or F- prefixes. One name everywhere: repo `futurise-` = domain `futurise-.vercel.app` = manifest "Futurise 〈Product〉" = screen 〈PRODUCT〉. ## PDFs (brand.json `pdf` — follow exactly) Engine = HTML → Chromium `page.pdf()`. **Start from `/downloads/fz-pdf-template.html`** (sample: `/downloads/fz-pdf-sample.pdf`); fill the `{{SLOTS}}`, never rebuild the skeleton. ```python pg.set_content(html, wait_until="networkidle") pg.wait_for_function("document.fonts.status === 'loaded'") # REQUIRED or Helvetica ships pg.pdf(path="out.pdf", format="A4", print_background=True, margin={"top":"0","bottom":"0","left":"0","right":"0"}) ``` Design: cover = full-bleed black, white wordmark 72mm, yellow doc-type label, Unitea 900 title 38–44pt with ONE serif-italic yellow word, meta row pinned bottom. Content = white, 18mm sides, header (34mm black wordmark + ref right, hairline), yellow-dot h2 15pt, body 10pt/1.55 `#414042`, labels 7.5pt caps. Tables: hairline rows, tabular right-aligned amounts, and the total row is the ONE yellow element per page. Footer: "FUTURISE · BRAND TO BACKEND. ONE STUDIO." + "NN / NN". Raw PDF engines (reportlab) embed OTFs from fz-fonts.zip — never woff2. ## Product / app chrome (when building Futurise software — see /#product and brand.json `app`) Every Futurise product uses the same chassis. **Naming:** one word, Unitea SemiBold caps +12% tracking in Core yellow next to the `futurise.` wordmark (BOOKS, EXPENSE, VAULT); products never get their own logos; manifest name = "Futurise 〈Product〉". **Icon:** `/downloads/fz-appicon-black.svg` (white f + yellow dot on black) or the yellow alternate — those two grounds only, dot always present. **Console (desktop):** black top bar 52–56px — lockup left, flat nav ≤7 (active = yellow on 14% yellow pill), sync-state + user right; content max-w 1152; page head = title + one sentence + max ONE yellow action; KPI tiles (10px caps label, 23px 800 tabular value, max one solid-yellow hero tile); divided row lists, not dense tables; same nav array becomes mobile bottom tabs. **Pocket (PWA):** max-w 448–560, sticky blurred appbar with as-of receipt, ≤4 bottom tabs (active yellow), glowing yellow FAB, bottom sheets, search-first lists with yellow focus ring, greeting "Hello, *Name*." **Gate:** glowing Core dot + lockup + serif tagline + ONE input + ONE yellow button; **passcodes server-checked, never in client source.** **Charts:** subject series always yellow (`--fz-chart-1..4`), grid = `--line`, up/down = `--fz-ok/--fz-err`, yellow never means warning. **Conventions:** `.tnum` on every number; every data screen shows `UPDATED D MMM, HH:MM` (Asia/Kolkata); empty states are dashed and say what will appear; skeletons never spinners; manifest colours match the real chrome; footer credit `〈PRODUCT〉 vX.Y · BUILT BY FUTURISE`. **Native skin (macOS 27 / Liquid Glass):** for products that should feel like the OS (FOLIO/VAULT class), import `/downloads/fz-native.css` — Apple's exact ramp, label opacities, and glass materials distilled from the official macOS 27 tokens. System font for UI text (never self-host SF Pro), Unitea only for lockup + hero numerals, yellow replaces system blue as tint (always black text on yellow), Apple focus-ring geometry in yellow, glass only over real backdrops. Never mix the native skin and the console/pocket chassis on one screen. ## Decks Shared `deck.js` engine, copied byte-identical. DOM contract: `.deck > section.slide` + `#bar #cur #tot #prev #next #hint`. Assets at project ROOT (`/fonts /logo /m /work`), root-absolute paths. Light slides toggle `body.on-light` — swap wordmarks, never invert. ## Positioning (locked Aug 2026) Master line: **"Brand to backend. One studio."** Boilerplate: "Futurise is a studio that builds working businesses: the brand, the website, the store, and the operations software behind them. One team takes a company from identity to daily operations — agency craft at software speed." Never describe Futurise as "a branding agency" — the category is a business-building studio. Offer architecture: **Brand · Web · Software · Systems** (four lines, one machine). The tagline "Branding the *future*." is the brand asset and stays. ## Voice Confident, editorial, never timid. Take a position; systems over adjectives; premium but warm. Show numbers and frameworks, not "passionate" and "cutting-edge". Cold outreach email: plain text, bare URLs, no images, no HTML template. ## Quick start in any project ```bash curl -sO https://futurise-brand-system.vercel.app/tokens.css curl -s https://futurise-brand-system.vercel.app/brand.json | jq .color ``` Use the `--fz-*` custom properties from tokens.css instead of hardcoding values.