ORIGIN brand guidelines

Foundation

The brand in one minute

Who ORIGIN is

A regional brand transformation house — the missing middle between strategy consultancies and execution agencies. Never "marketing agency", "creative agency" or "consultancy". Locked value proposition: "We architect growth."

Voice rules (always)

ORIGIN is always uppercase. Never Origin or origin.
Sentence case everywhere. No Title Case, no ALL CAPS headlines. Uppercase only in tiny eyebrow labels and the word ORIGIN.
No em or en dashes in UI copy or client-facing text.
Diagnostic, specific, outside-in. No superlatives, no capability dumps, no banned greetings.

Full brand narrative, positioning and voice live in ORIGIN - Short Brand Guidelines - 2026.pdf (Brand Identity folder) and the Cowork Context Register. This file is the product/UI expression of that brand.

Identity

Logo & favicon

The 2026 wordmark in black on light, white on dark or purple. The product favicon is the ring glyph on a purple rounded tile.

Favicon (SVG master)

32px

16px

Source files: 00. Wiki/02. For Claude/Favicon/ (SVG + 32/180/512 PNG).
Use the SVG for browser favicons, the 180px PNG for Apple touch icons.
Never rebuild the glyph by hand; copy the files.

Foundation

Colour

Purple is the single action colour. Pink is the accent and the danger colour. Everything else is neutral canvas, surface and text. Secondary accents categorise, never act.

Purple — action

#5C11D1 · 50: #F3ECFF · 600: #6B1FE0

Pink — accent / danger

#FF2287 · 50: #FFE9F3

Ink (Space Black)

#0A0A0A

Paper — canvas

#F7F7F9

Surface — cards

#FFFFFF

Blue

#2049F2

Cyan

#33D9FF

Mint — success

#0BFFB9 · text: #06845F

Yellow — warning

#FFDC5C · text: #8A6A12

Muted text

#6B6B76 · 2: #9A9AA6

Distribution — keep this balance

62.5% neutral

18.75%

6.25%

One primary action colour: purple. Every primary button, active state and link. Never introduce a second primary.
Secondary accents (blue, cyan, mint, yellow) are for categorisation and status only — never buttons, never CTAs.
On dark ink panels use mint or white for highlights, never purple text.
Every accent has a soft tint pair for badges: purple on #F3ECFF, pink on #FFE9F3, bg-mint/15 text-#06845F, bg-yellow/25 text-#8A6A12.

Foundation

Typography

Four families, all embedded in this file — what you see below is the real licensed type. English: Fractul for headlines, PP Neue Montreal for everything else. Arabic: IBM Plex Sans Arabic for headlines, Almarai for body — same pairing logic.

FractulEnglish primary · headlines & titles · "Say it with character."

The quick brown fox jumps over the lazy dog.

Fractul

Light 300

Fractul

Regular 400

Fractul

Medium 500

Fractul

Bold 700

Titles and headlines only, plus numeric stat displays. Sentence case — never uppercase. A geometric display sans with straightened strokes in a, f, g, t, y; built for impact, not paragraphs.

PP Neue MontrealEnglish secondary · all body copy · "Say it clearly."

The quick brown fox jumps over the lazy dog.

Montreal

Light 300

Montreal

Regular 400

Montreal

Medium 500

Montreal

Bold 700

Montreal

Italic — quotes only

All body copy, UI text, forms, tables. A neutral grotesque that blends without over-powering. 14 weights exist; we use these four plus italic for rare quotes.

IBM Plex Sans ArabicArabic primary · headlines & titles · قلها بشخصية

نحن نهندس النمو. علامة تجارية إقليمية لتحويل العلامات.

بلكس

Regular 400

بلكس

Medium 500

بلكس

SemiBold 600

بلكس

Bold 700

Arabic titles and headlines. Neutral yet friendly grotesque, excellent legibility in web and mobile interfaces.

AlmaraiArabic secondary · all body copy · قلها بوضوح — same rules as Neue Montreal

نكتب النص الأساسي بخط المراعي لوضوح مثالي على الشاشة وفي الطباعة.

المراعي

Light 300

المراعي

Regular 400

المراعي

Bold 700

المراعي

ExtraBold 800

All Arabic body copy. Modern, neutral, works online and offline. Never invent Arabic for strategic terms — defer to the master glossary (322 terms).

Type scale (product UI)

Use	Spec	Notes
Page title (H1)	Fractul · 30px · 600	Sentence case, tracking −0.015em
Section H2	Fractul · 18–21px · 600
Card title	Fractul · 16–17px · 600
Body	Neue Montreal · 14–15px	leading-relaxed for paragraphs
Eyebrow / label	11px · 600 · uppercase · tracking +0.16em · purple	The ONLY uppercase in the system
Meta / caption	12px · muted

Weights: headlines are 500–600, never black-weight. Font files live in 02. ORIGIN/01. Brand Identity/02. Fonts/ (OneDrive); WOFF2 conversions ship inside the apps.

Foundation

Shape language

Rounded, soft, geometric — a signature of the look. No hard right angles anywhere. Borders over shadows.

Hero panels — 3xl

Cards — 2xl (workhorse)

Buttons, inputs, tiles — xl

Icon buttons

pill

Pills, badges, seg

Checkboxes

Card borders: 1px #ECECF1; hover often tints to purple/30–40. The recurring icon chip: 40px square, 12px radius, purple-50 background, purple icon.

Foundation

Backgrounds & elevation

Paper canvas, white surfaces, minimal shadows. Dark ink panels get radial glow accents for depth.

Dark panel

Radial glows, mint highlights

Hero panels and sign-in brand sides are ink (#0A0A0A) with a purple radial glow top-right and an optional pink glow bottom-left. Highlights on dark are mint or white — never purple text.

App canvas is always paper (#F7F7F9) — never pure white behind cards.
Cards rely on borders, not shadows. Only lift on hover: 0 8px 24px rgba(20,20,40,.06) + translate −2px.
Glass surfaces (floating nav): bg-surface/90 + backdrop-blur. Gotcha: backdrop-filter makes the element the containing block for position: fixed children — overlays rendered inside it must portal to document.body.

System 2

The floating nav

A glass, rounded header that floats above the paper canvas — never a full-bleed square bar. Right cluster order in every app: wiki book, app controls, avatar, logout.

ORIGIN

App name

Dashboard Case Vault Templates

Open-book icon — the one and only help entry point

Active link fills purple-50

Avatar then logout, always last

System 1

Buttons & toggles

Outline by default, solid on hover. Purple for actions, pink for destructive. The old solid-purple resting button is deprecated. Hover and click to feel the behaviour.

Default action

Trailing icon

Destructive — pink

Disabled

.sm

Icon-only (exception)

Purple seg — currency, mode, role, filter

Pink seg — a deliberately different toggle

If it has a text label it is a .btn; a bare glyph stays an icon button with aria-label.
No third button colour, ever. Accents are for pills and status, never buttons.
2–5 fixed options that never wrap → one .seg track. Many wrapping options → per-pill outline chips.

Primitives

Components

The recurring primitives. In the ORIGIN One monorepo they live in @origin/design-system — reuse, never hand-roll variants.

Card + PageHeader pattern

Card title in Fractul

Body in Neue Montreal. 20px radius, line border, hover lifts. This card demonstrates the hover-lift itself.

purplepinkmint / successyellow / warningcyan

Inputs, chips, avatars

Label above field, 13px 500; focus is a border shift, not a heavy ring.
Icon chip: 40px, radius 12, purple-50 bg, purple icon — quick tiles & empty states.
Empty states: chip + Fractul line + muted sub-line.
Confirmations: inline mint flash (bg-mint/15 text-#06845F), auto-clears; no toast library.

Iconography

Icons — lucide

One library: lucide-react. Clean geometric line icons, stroke 2, inheriting currentColor. Sizes: 18px nav & inputs, 14–16px inside buttons and inline, 19–24px in icon chips. The working set:

home

compass

palette

bar-chart-3

megaphone

sparkles

list-checks

users

arrow-right

bell

check

download

plus

file-text

map-pin

mail

book-open

log-out

pencil

trash-2

party-popper

Icons inherit accent via text-* — never hardcode a colour on an icon inside a .btn (it must turn white on hover).
Colour is never the only signal — icons and text accompany status.
The open-book icon is reserved for the wiki entry point; the ring glyph is reserved for the brand mark.

Motion

Animation

Subtle, fast, purposeful. 150ms transitions for interaction, 300–350ms for movement and mounts, one celebration moment. Everything respects prefers-reduced-motion.

Mount — fadeup

Content mounts with a 6px rise + fade, 350ms ease.

Spotlight — walkthrough movement

Step one

Step two

The animation CSS (canonical)

/* interaction: 150ms; movement: 300-350ms; ease default */
.transition { transition: all .15s ease; }

/* mount */
@keyframes fadeup { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.animate-fadeup { animation: fadeup .35s ease both; }

/* hover lift (cards, tiles) */
.lift:hover { transform: translateY(-2px); border-color: rgba(92,17,209,.4); box-shadow: 0 8px 24px rgba(20,20,40,.06); }

/* walkthrough spotlight + popover glide */
.spotlight { transition: all .3s ease-out; box-shadow: 0 0 0 9999px rgba(10,10,10,.55); }
.tour-popover { transition: left .3s ease-out, top .3s ease-out; }

/* progress bars / rings animate over .6s ease */

/* always */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

Confetti is the one place all five accents fire together: ["#5C11D1","#FF2287","#0BFFB9","#FFDC5C","#33D9FF"].

System 3

The wiki + live walkthrough

Every ORIGIN app ships an in-app wiki behind the book icon and a guided tour that spotlights real elements, with one continuous progress count and a confetti finale. It cannot be dismissed by a stray click.

Skip only

The top-right "Skip tour" link is the single way out, and it confirms first.

Click outside

Clicking the dimmed background does nothing. No accidental exits.

Escape key

Escape is disabled too. No shortcut kills a 14-step tour.

Celebrate only on Done

Reaching the last step fires brand confetti + the completion card. Skipping never celebrates.

Skip confirms first, then returns the user home. Nothing is lost; replay lives in the wiki.

Variant A — platform modules (ORIGIN One)

HelpSystem from @origin/design-system: book icon + wiki panel + spotlight tour.
Content is in-code (wiki-content.ts) — ships in the same commit as the build; can never drift.
Auto-starts once per browser (versioned localStorage key), replayable from the wiki.
Overlays portal to document.body (the glass nav is a containing block).

Variant B — standalone apps (Rate Card, Payables)

driver.js multi-page tour + wiki drawer with articles in Supabase, role-scoped by RLS (min_role).
Once per person via a DB flag through a SECURITY DEFINER RPC — never a broad profiles self-update policy.
Continuation via onNextClick (never onDestroyed); allowClose:false; injected Skip control.

Both variants are sanctioned. New platform modules use A. Standalone apps with their own database use B. Every build ships with its wiki + walkthrough — a build without one is not done.

Appendix

Copy-paste code

For monorepo work, everything below already exists in @origin/design-system — import it. For a standalone build, paste these.

1 · Tokens (globals.css, Tailwind v4)

@import "tailwindcss";

@theme {
  --color-ink: #0a0a0a;
  --color-purple: #5c11d1;  --color-purple-600: #6b1fe0;  --color-purple-50: #f3ecff;
  --color-pink: #ff2287;    --color-pink-50: #ffe9f3;
  --color-blue: #2049f2;    --color-cyan: #33d9ff;
  --color-mint: #0bffb9;    --color-yellow: #ffdc5c;
  --color-paper: #f7f7f9;   --color-surface: #ffffff;
  --color-line: #ececf1;    --color-line-strong: #dededf;
  --color-muted: #6b6b76;   --color-muted-2: #9a9aa6;
  --font-display: var(--font-display-src), "Fractul", "Space Grotesk", system-ui, sans-serif;
  --font-sans: var(--font-body-src), "PP Neue Montreal", "Inter", system-ui, sans-serif;
}
body { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.font-display { font-family: var(--font-display); letter-spacing: -0.015em; }

2 · Fonts (next/font/local — real fonts, free fallbacks stay in the stack)

import localFont from "next/font/local";

const display = localFont({
  variable: "--font-display-src",
  src: [
    { path: "./fonts/Fractul-Light.woff2",  weight: "300" },
    { path: "./fonts/Fractul-Regular.woff2", weight: "400" },
    { path: "./fonts/Fractul-Medium.woff2",  weight: "500" },
    { path: "./fonts/Fractul-Bold.woff2",    weight: "700" },
  ],
});
const body = localFont({
  variable: "--font-body-src",
  src: [
    { path: "./fonts/PPNeueMontreal-Light.woff2",   weight: "300" },
    { path: "./fonts/PPNeueMontreal-Regular.woff2", weight: "400" },
    { path: "./fonts/PPNeueMontreal-Medium.woff2",  weight: "500" },
    { path: "./fonts/PPNeueMontreal-Bold.woff2",    weight: "700" },
    { path: "./fonts/PPNeueMontreal-Italic.woff2",  weight: "400", style: "italic" },
  ],
});
// <html className={`${display.variable} ${body.variable}`}>
// Arabic: load IBMPlexSansArabic-* and Almarai-* the same way and append
// their family names to the display/sans stacks for RTL fallback.

3 · Buttons + segmented toggles

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 12px; border: 1.5px solid var(--color-purple);
  background: var(--color-surface); color: var(--color-ink); font-weight: 600; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease; }
.btn:hover { background: var(--color-purple); color: #fff; }
.btn:disabled { opacity: .45; cursor: default; }
.btn:disabled:hover { background: var(--color-surface); color: var(--color-ink); }
.btn-danger { border-color: var(--color-pink); }
.btn-danger:hover { background: var(--color-pink); color: #fff; }

.seg { display: inline-flex; align-items: center; gap: 2px; border-radius: 9999px;
  border: 1.5px solid var(--color-purple); background: var(--color-surface); padding: 2px; }
.seg > button { border-radius: 9999px; border: none; background: none; color: var(--color-ink);
  font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease; }
.seg > button[data-active="true"] { background: var(--color-purple); color: #fff; }
.seg-pink { border-color: var(--color-pink); }
.seg-pink > button[data-active="true"] { background: var(--color-pink); color: #fff; }

The floating nav, wiki drawer, walkthrough engine and confetti live as working code in @origin/design-system (platform) and the Rate Card app (standalone variant). Copy from those, not from memory.

The contract

Do / Don't

Do

Paper canvas, white cards, generous whitespace, rounded everything.
Purple as the one action colour; accents for status only.
Fractul headlines in sentence case; Neue Montreal body. AR: Plex Arabic + Almarai.
Borders over shadows; lift only on hover.
Reuse @origin/design-system primitives and the accent maps.
Ship a wiki + walkthrough with every build; celebrate only on Done.
Portal overlays to document.body; track viewport in state, not at render.

Don't

No dark mode. No pure-white app background. No second primary colour.
No solid-filled button at rest — solid is the hover state only.
No uppercase headlines; uppercase lives only in eyebrows and the word ORIGIN.
No em or en dashes in copy. No superlatives, no capability dumps.
No heavy drop shadows, no sharp corners, no neon accent overuse.
No tour dismissable by outside-click or Escape; no celebration on skip.
No hardcoded hex in components — tokens only (readable mint/yellow text excepted).
No second help entry point — the book icon is the only one.

The brand in one minute

Who ORIGIN is

Voice rules (always)

Logo & favicon

Colour

Typography

Shape language

Backgrounds & elevation

Radial glows, mint highlights

The floating nav

Buttons & toggles

Components

Card title in Fractul

Icons — lucide

Animation

The wiki + live walkthrough

Your scope

Variant A — platform modules (ORIGIN One)

Variant B — standalone apps (Rate Card, Payables)

Copy-paste code

Do / Don't

Do

Don't