{ "brand": "Futurise", "system": "The Core", "version": "1.0.0", "issued": "2026-08", "canonical": "https://futurise-brand-system.vercel.app", "tagline": { "text": "Branding the future.", "rule": "'future' is set in RCL Morland Italic (Core yellow in set pieces); the trailing dot is the Core and stays yellow." }, "positioning": { "master_line": "Brand to backend. One studio.", "category": "A studio that builds working businesses — not a branding agency.", "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.", "offer_architecture": ["Brand", "Web", "Software", "Systems"], "locked": "2026-08" }, "essence": { "promise": "Futurise brings clarity, direction, and inventive thinking to moments where brands need to move forward with confidence.", "personality": ["Strategic", "Bold", "Inventive"], "reads_as": "confident, editorial, systems-minded, premium-but-warm", "sub_brands": ["Branding", "Production", "Marketing", "With Shivam"] }, "color": { "primary": { "yellow": { "hex": "#FFC20E", "rgb": [255, 194, 14], "cmyk": [0, 26, 95, 0], "pantone_nearest": "1235 C", "role": "THE Core — lead, signal, highlight, CTA. Never replaced by amber." }, "black": { "hex": "#000000", "rgb": [0, 0, 0], "role": "authority, ground, type" }, "white": { "hex": "#FFFFFF", "rgb": [255, 255, 255], "role": "space, clarity, ground" } }, "secondary_support_only": { "amber": { "hex": "#FAA61A", "role": "gradient/step support ONLY — never leads, never the Core dot" }, "amber_deep": { "hex": "#E0861A" }, "graphite": { "hex": "#414042" }, "slate": { "hex": "#58595B" }, "grey": { "hex": "#E6E7E8" }, "offwhite": { "hex": "#F1F2F2" } }, "accent": { "twilight": { "hex": "#231E60", "role": "data-viz, editorial accents, background depth. Never a CTA, never a brand mark, never competes with yellow." } }, "functional_ui_only": { "ok": "#2E7D51", "warn": "#E0861A", "err": "#C93B3B" }, "themes": { "light": { "bg": "#FFFFFF", "ink": "#000000", "surface": "#F1F2F2", "line": "#E6E7E8", "muted": "#58595B", "card": "#FFFFFF" }, "dark": { "bg": "#000000", "ink": "#FFFFFF", "surface": "#141414", "line": "#2B2B2E", "muted": "#A7A9AC", "card": "#0C0C0C" } }, "rules": [ "Primary colours LEAD every layout — anchor in black, white, or yellow.", "#FFC20E is identical in light and dark mode; on black it may glow.", "Text on yellow is black only. Yellow text sits on black only.", "Amber #FAA61A never leads and never colours the Core dot.", "Dark mode grounds are true black #000000; elevated surfaces #141414/#0C0C0C — never navy or blue-grey." ], "ratio": { "white": 56, "black": 26, "yellow": 14, "support": 4 } }, "type": { "workhorse": { "family": "Unitea Sans", "weights": [400, 500, 600, 700, 800, 900], "role": "everything — headlines, body, UI, captions" }, "emphasis": { "family": "RCL Morland", "style": "italic, weights 400-600", "role": "1-2 emphasis words per headline max; usually yellow. NEVER body, NEVER full headlines, NEVER UI." }, "scale": { "display": { "size": "clamp(44px,7.4vw,92px)", "line": 1.02, "weight": 900, "tracking": "-2%" }, "h1": { "size": 38, "line": 1.08, "weight": 800 }, "h2": { "size": 27, "line": 1.15, "weight": 700 }, "body": { "size": 17, "line": 1.6, "weight": 400 }, "small": { "size": 14, "line": 1.5, "weight": 500 }, "label": { "size": 11.5, "transform": "uppercase", "tracking": "+8%", "weight": 600 } }, "webfonts": "/fonts/*.woff2 (14 files) — see tokens.css for @font-face", "print": "embed the OTF sources from /downloads/fz-fonts.zip in PDFs — never woff2" }, "logo": { "wordmark": { "text": "futurise.", "rule": "all lowercase, custom geometric sans, always with the trailing Core dot", "viewBox": "0 0 3090 603" }, "symbol": { "desc": "lowercase f + Core dot", "viewBox": "0 0 1545 2363", "use": "avatars, favicons, below wordmark minimum size" }, "colors": "letters black or white ONLY; the dot is Core yellow #FFC20E. On yellow grounds use mono-black. One-colour contexts use the mono variants.", "clearspace": "1d on all sides, d = Core dot diameter (dot r=58.8 at viewBox scale, center 3030,543.5)", "min_size": { "wordmark": "120px digital / 30mm print", "symbol": "24px digital / 8mm print" }, "never": [ "stretch, rotate, outline, add effects", "recolour outside black/white letters + yellow dot", "CSS filter:invert() — it turns the yellow dot blue; always swap to the real white asset", "redraw by hand — use /downloads/fz-*.svg" ], "assets": { "wordmark_black": "/downloads/fz-wordmark-black.svg", "wordmark_white": "/downloads/fz-wordmark-white.svg", "wordmark_mono_black": "/downloads/fz-wordmark-mono-black.svg", "wordmark_mono_white": "/downloads/fz-wordmark-mono-white.svg", "symbol_black": "/downloads/fz-symbol-black.svg", "symbol_white": "/downloads/fz-symbol-white.svg", "subbrand_black": "/downloads/fz-branding-black.svg", "subbrand_white": "/downloads/fz-branding-white.svg" } }, "core_motif": { "idea": "The circle — the logo dot as 'evolved sun / point of decision'. Focus, decision, momentum.", "devices": [ "Core sun: glowing yellow circle on black halftone field (hero device, dark mode)", "Momentum path: capsules + dots in a route with decision points", "Circle photo masks: B&W portraits in circles, often on yellow", "Yellow image frames (4-6px)", "Solid yellow cards with black wordmark + huge black Unitea headline", "Modular Circle Pattern: /downloads/fz-pattern-modular.svg — bands and fields, never behind body text" ] }, "imagery": { "never_stretch": "fixed-height frame with aspect-ratio set to the image's NATIVE ratio: .frame{height:46vh;aspect-ratio:var(--r);width:auto} .frame img{width:100%;height:100%;object-fit:cover}", "portraits": "B&W in circle masks", "svg_hygiene": "rewrite third-party SVG roots that ship preserveAspectRatio='none' width='100%' height='100%'" }, "iconography": "thin single-weight black line-art over a solid yellow Core circle with 1-3 small floating yellow dots; in product UI use the line language at 16-24px without the circle", "voice": { "rules": ["Take a position — no hedging", "Systems over adjectives — show the framework and the numbers", "Premium but warm — a sharp partner, not a cold consultancy"], "tagline_locked": "Branding the future." }, "ui": { "shape": { "radius_card": 22, "radius_control": "999 (capsule — the Core stretched)" }, "buttons": { "primary": "yellow bg, black text, capsule — one per view", "secondary": "ink outline", "destructive": "outlined functional red, never yellow" }, "spacing": [6, 10, 16, 24, 40, 64, 104], "theme_switch": "set data-theme='dark'|'light' on ; tokens.css handles the rest" }, "architecture": { "tier1_studio": "futurise. — the master brand; owns the positioning, wordmark, Core, yellow. Nothing below competes with it.", "tier2_service_lines": "Branding · Production · Marketing · With Shivam — wordmark + caps line lockups (fz-branding-* pattern). What the studio does; never separate companies or logos.", "tier3_products": "Software the studio owns (BOOKS, EXPENSE, VAULT, DESK, FOLIO, PULSE). Spoken 'Futurise BOOKS'. Inherit everything — type, yellow, icons, chassis. A product NEVER gets its own logo, palette, or typeface.", "tier4_client_software": "Client's brand leads. Futurise appears as maker only: ' by Futurise' in the title + small grey credit wordmark in the footer. Futurise yellow never appears inside a client's UI.", "outside": "Personal/family tools may diverge fully and carry NO Futurise branding — the brand only signs what the studio would sell.", "naming_law": "ONE real English word for the job it does (BOOKS keeps books). No compounds, hyphens, invented words, or F- prefixes. One name everywhere: repo futurise- = domain futurise-.vercel.app = manifest 'Futurise ' = screen ." }, "pdf": { "engine": "HTML → Chromium page.pdf() (playwright). Raw PDF engines (reportlab/fpdf) are the exception and embed OTFs from fz-fonts.zip, never woff2.", "template": "/downloads/fz-pdf-template.html — start here, fill the {{SLOTS}}, never rebuild the skeleton", "sample": "/downloads/fz-pdf-sample.pdf", "recipe": "set_content(html, wait_until='networkidle'); wait_for_function(\"document.fonts.status === 'loaded'\"); pdf(format='A4', print_background=True, margin=0) — the fonts wait is REQUIRED or Helvetica ships", "cover": "full-bleed black, white wordmark 72mm top-left, doc-type yellow caps label, Unitea 900 title 38-44pt with ONE serif-italic yellow word, meta row (date/ref/client/from) pinned bottom over a hairline, optional glowing Core dot", "content_pages": "white, 18mm sides / 16mm top / 14mm bottom; header = 34mm black wordmark + ref/page label right over hairline; sections open with yellow-dot h2 15pt; body 10pt/1.55 Unitea 400 (#414042, bold = black); labels 7.5pt caps +8%", "tables": "hairline #E6E7E8 rows, caps th labels, amounts right tabular; the total row = the ONE yellow element per page (solid #FFC20E, black 800)", "footer": "'FUTURISE · BRAND TO BACKEND. ONE STUDIO.' left, 'NN / NN' right, steel-grey label style over hairline", "rules": ["one serif word per title, one yellow element per content page", "-webkit-print-color-adjust: exact on everything", "page = 210mm x 296.5mm blocks with page-break-after", "never add colours beyond the token set"] }, "app": { "naming": { "rule": "Products are ONE word, Unitea SemiBold uppercase +12% tracking, Core yellow, set beside/under the futurise. wordmark. Products never get their own logos.", "manifest": "name = 'Futurise ', short_name = product word; shipped name always matches repo and screen", "examples": ["BOOKS", "EXPENSE", "VAULT", "DESK", "FOLIO", "PULSE"] }, "icon": { "canonical": "/downloads/fz-appicon-black.svg (white f + yellow dot on black, radius 18.75%)", "alternate": "/downloads/fz-appicon-yellow.svg (mono black on Core yellow)", "rules": ["grounds: black or Core yellow ONLY", "the yellow dot always appears (family signature)", "keep mark inside maskable 80% safe zone"] }, "console": { "reference": "the BOOKS chassis", "topbar": "black, 52-56px: lockup left, flat nav centre (<=7 items, no nesting, active = yellow text on rgba(255,194,14,.14) pill), truth right (sync state + signed-in user)", "content": "max-width 1152; page head = Unitea 800 title + one plain sentence + max ONE solid-yellow action", "kpis": "grid of tiles: 10px caps label + 23px 800 tabular value; ONE solid-yellow hero tile max", "lists": "divided row lists (not dense tables): name left, tabular amount, status badge", "mobile": "the same nav array renders as the bottom tab bar — one layout file, two bodies" }, "pocket": { "reference": "the VAULT/EXPENSE chassis", "shell": "max-width 448-560, sticky blurred appbar (lockup + as-of receipt), <=4 bottom tabs (stroke icons, active = yellow), yellow FAB 54-58px with glow, bottom sheets for entry", "patterns": "greeting 'Hello, .'; 2-up KPI tiles; search-first lists (yellow focus ring, client-side filter); presses compress scale(.96) 80ms" }, "gate": { "reference": "the Expense flow", "anatomy": "centered column: glowing Core dot, lockup, serif-italic tagline, ONE input (4-digit PIN numeric keypad or magic link), ONE full-width yellow button", "security": "passcodes are SERVER-CHECKED. Never hardcode a passcode in client source.", "after": "greeting with the user's name as the serif word" }, "charts": { "series": ["--fz-chart-1 #FFC20E (the subject — always yellow)", "--fz-chart-2 #231E60 twilight (flips to white on dark)", "--fz-chart-3 slate", "--fz-chart-4 amber"], "rules": ["grid = --line, labels = --muted", "no borders, shadows, or gradients on marks", "up/down money = --fz-ok/--fz-err everywhere", "yellow never means 'warning'"] }, "native_skin": { "when": "Products that should feel like the OS (FOLIO, VAULT class). Never mixed with console/pocket chassis on the same screen.", "css": "/downloads/fz-native.css — distilled from Apple's official macOS 27 UI-kit tokens (Jun 2026)", "split": "system font stack for ALL UI text (never self-host SF Pro); Unitea only for the lockup + hero numerals; Core yellow #FFC20E replaces Apple system blue as tint/focus", "ramp": "Apple exact: LargeTitle 26, Title1 22, Title2 17, Title3 15, Headline 13/700, Body 13, Callout 12, Subheadline 11, Footnote/Captions 10; emphasized = +2 weight steps", "labels": "light rgba(0,0,0,.85/.5/.25/.1) · dark rgba(255,255,255,1/.55/.25/.1)", "glass": "Regular material: #ECECEC@.63 light / #2C2C2C@.61 dark + backdrop-filter blur(24px) saturate(1.6), .5px stroke, panel shadow 0 16px 33px", "rules": ["yellow on glass always carries black text", "focus ring = Apple geometry (3.5px@.25 + 1px) in yellow", "glass only over real backdrops; flat colour gets plain surfaces"] }, "conventions": { "numbers": "one utility .tnum (font-variant-numeric: tabular-nums) on every amount/stat", "freshness": "every data screen carries 'UPDATED D MMM, HH:MM' (en-IN, Asia/Kolkata); stale screens self-refresh", "empty_states": "dashed border + one sentence saying what WILL appear — never 'No data'", "loading": "skeletons, never spinners", "ground": "tools of record = light; ambient/night/field = dark allowed; manifest theme/background MUST match the actual chrome", "credit": "footer: ' vX.Y · BUILT BY FUTURISE' muted label style; client-branded software gets the small grey credit wordmark" } }, "decks": { "engine": "deck.js — copied byte-identical between projects; theme lives in styles.css only", "dom": ".deck > section.slide, chrome ids #bar #cur #tot #prev #next #hint", "light_slides": "engine toggles body.on-light; swap wordmark via .bm-dark/.bm-light — never CSS-invert", "assets": "project ROOT (/fonts /logo /m /work), root-absolute paths, not /public" }, "mediums": { "avatar": { "file": "/downloads/fz-avatar-1024.png", "spec": "1024x1024, white wordmark on black" }, "linkedin_banner": { "file": "/downloads/fz-banner-linkedin.png", "spec": "1584x396, type inside centre 60%" }, "email_header": { "file": "/downloads/fz-email-header.png", "spec": "display at width=600 (file @2x). COLD OUTREACH: plain text, bare URLs, no images." }, "print": { "card": "89x51mm, 350gsm matte, black stock, white wordmark + yellow dot", "yellow_cmyk": [0, 26, 95, 0], "pantone_nearest": "1235 C", "pdf_fonts": "embed OTFs from fz-fonts.zip" } }, "machine": { "brand_json": "/brand.json", "tokens_css": "/tokens.css", "claude_md": "/CLAUDE-BRAND.md", "llms_txt": "/llms.txt" } }