Morphism Brand & Design System

assetactive

Morphism — Brand & Design System

Design philosophy: Computational Scholasticism — pixel-grid commutative diagrams, editorial dark aesthetic, category-theory symbolism, precise and restrained.

Logo

The Morphism mark is a flattened commutative-diagram geometry — a pixel-grid based triangular form preserving category-theory DNA.

Structure: 3-node triangular morphism diagram on a 16x16 base grid. Top node uses annotation red (#d4584a), lower nodes use amber. Pixel-stepped directional arrows connect nodes within a circular orbit boundary. Wordmark is lowercase "morphism" in Playfair Display 700 with letter-spacing +5.

Variants (all in apps/morphism/public/brand/):

| Variant | File | Usage | |---------|------|-------| | Mark on dark | morphism-mark-on-dark.svg | Primary — dark backgrounds | | Mark on light | morphism-mark-on-light.svg | Print, light surfaces | | Mark transparent | morphism-mark-transparent.svg | Overlays | | Mark mono | morphism-mark-mono.svg | Single-color contexts | | Mark on paper | morphism-mark-on-paper.svg | Aged paper aesthetic | | Pixel grid | morphism-mark-pixel-grid.svg | Construction reference | | Wordmark horizontal | morphism-wordmark-horizontal.svg | Headers, nav | | Wordmark stacked | morphism-wordmark-stacked.svg | Hero sections | | Wordmark standalone | morphism-wordmark-standalone.svg | Text-only contexts |

Favicon: apps/morphism/public/favicon.svg + PNG exports (16px to 1024px)

Logo Component: apps/morphism/src/components/logo.tsx

  • Node color: #da952f (amber)
  • Node glow: rgba(218, 149, 47, 0.6)
  • Arrow color: #8b8f99
  • Orbit color: #5a5e68

Rules: Use single-color amber on dark. Preserve geometry. Never recolor to violet. Never reintroduce glow effects. Never invent alternate marks.

Color Palette

Primary (Midnight Editorial)

| Token | Hex | Usage | |-------|-----|-------| | Background | #0e1015 | Page backgrounds, app shell | | Surface | #17191f | Cards, panels, elevated containers | | Surface Muted | #131619 | Sidebars, subtle backgrounds | | Accent (Amber) | #da952f | Primary actions, links, logo mark | | Accent Bright | #f2b954 | Hover/active states | | Accent Dim | #9d7320 | Muted/disabled states | | Annotation (Ember) | #d4584a | Warnings, drift alerts, violations | | Annotation Bright | #e97060 | Annotation hover | | Annotation Dim | #9d3c2f | Annotation muted | | Text | #e3ddd0 | Body copy, headings | | Text Muted | #808080 | Secondary text |

Extended

| Token | Hex | Usage | |-------|-----|-------| | Machine Cyan | #22b8cf | AI/agent activity indicators | | Machine Teal | #20a088 | Compliance passing, success | | Paper | #ede8dc | Light mode surfaces | | Ink | #181b21 | Text on light surfaces | | Night | #060709 | Terminal backgrounds |

Scholastic/Diagram

| Token | Hex | Usage | |-------|-----|-------| | Marginalia | #8b7e6a | Marginal annotation notes | | Highlight | #f5e1a0 | Inline emphasis | | Grid Line | #252730 | Pixel grid construction lines | | Diagram Node | #da952f | Category theory node fill | | Diagram Arrow | #b0852b | Category theory arrow stroke | | Diagram Label | #808080 | Category theory label text |

Color Rules:

  • Amber accent is primary — use sparingly
  • Ember/annotation red is for alerts/violations only, NEVER decorative
  • Machine Cyan/Teal distinguish machine-generated from human content
  • Minimum contrast: 4.5:1 body text, 3:1 large text/UI

Typography

| Role | Typeface | Weights | |------|----------|---------| | Display/Headings | Playfair Display | 600, 700 | | Body | Source Sans 3 | 400, 500, 600, 700 | | Code/Metrics | IBM Plex Mono | 300, 400, 600, 700 |

Scale (base 17px):

| Element | Size | Font | |---------|------|------| | Hero heading | 48px | Playfair Display 700 | | Section heading | 32px | Playfair Display 700 | | Subsection | 24px | Playfair Display 600 | | Body | 17px | Source Sans 3 400 | | Small/caption | 14px | Source Sans 3 400 | | Code/CLI | 14-15px | IBM Plex Mono 400-600 |

Rules: Headings ALWAYS Playfair Display. Body ALWAYS Source Sans 3. Mono only for code/commands/metrics. Max line length: 72ch body, 100ch code. Content max-width: 680px.

Themes

Default (public): Midnight Editorial — dark, amber accent, serif display, editorial aesthetic. Enforced on all public routes via theme-reset.tsx.

10 themes total in @morphism-systems/design-tokens:

| Theme | Background | Accent | Character | |-------|-----------|--------|-----------| | Midnight Editorial | Near-black | Warm amber | Editorial print magazine | | Violet Theorem | Deep violet-black | Bright violet | Glassmorphism | | Neon Cyber | Navy void | Neon cyan | Scanline effects | | Command Center | Charcoal | Tactical blue | Intelligence dashboard | | Cyberpunk Sport | Blue-grey | Orange | Tier-based progression | | Retro Pixel | CRT grey-lavender | Terminal green | Zero border-radius | | Desert Luxury | Cream parchment | Gold | RTL-friendly, light mode | | Brutalist | White | Pure black | Monospace-only, zero effects | | Swiss Minimal | White | Swiss red | Grid-based, golden ratio | | Neo Glass | Cool dark blue | Gradient purple | Heavy backdrop blur |

Dashboard is user-themeable. Public is always Midnight Editorial.

Visual Identity

Textures:

  • Paper grain (3% opacity, mix-blend overlay)
  • Pixel grid (4% opacity on code blocks)
  • Graph paper (50% opacity on category diagrams)
  • Scan lines (1.5% opacity on terminal areas only)

Iconography: 15 custom icons at 24x24, 2px stroke, currentColor — Morphism Arrow, Composition, Identity, Functor, Natural Transformation, Commutative Square, Drift, Convergence, Sheaf, Entropy, Policy, Audit Trail, Agent, State, Transition. Sprite: /icons/morphism-icons.svg.

Motion: Deliberate and slow (600ms-2s). Easing: cubic-bezier(0.22, 1, 0.36, 1). Stagger: 120ms. Always provide prefers-reduced-motion fallback. No flashing (WCAG 2.3.1).

Animated Components: drift-detection, convergence-healing, entropy-flow, morphism-composition, sheaf-consistency.

Brand Voice

Write like an operator, not a futurist. Precise, evidence-oriented, restrained, technically literate.

Positioning:

  • Name: Morphism / Morphism Systems
  • Category: Trust infrastructure for AI software delivery
  • Tagline: "Entropy is the default. Governance is the override."
  • One-liner: The control plane for AI-assisted engineering

Tone spectrum: 70% formal, 65% technical, 75% confident, 40% urgent, 70% concrete.

Approved vocabulary: governance (not guardrails), policy (not rules), enforce (not ensure), drift (not deviation), composable (not modular), audit trail (not log), control plane (not platform), evidence (not proof).

Banned vocabulary: AI-powered, smart, intelligent, seamless, frictionless, end-to-end, leverage, ecosystem, synergy, democratize, zero-trust. No superlatives. No startup hype. No exclamation marks in product copy.

Source Files

| What | Path | |------|------| | Brand guide (canonical) | docs/reference/design/brand-and-design-system.md | | Logo system | docs/reference/design/logo-system.md | | Theme catalog | docs/reference/design/theme-catalog.md | | Design tokens reference | docs/reference/design/design-tokens-reference.md | | Adoption guide | docs/reference/design/design-system-adoption.md | | Brand constants | apps/morphism/src/lib/brand/public-brand.ts | | Theme adapter | apps/morphism/src/lib/theme.ts | | Logo component | apps/morphism/src/components/logo.tsx | | Tailwind config | apps/morphism/tailwind.config.ts | | Design tokens pkg | packages/design-tokens/src/ | | Logo SVG variants | apps/morphism/public/brand/ | | Icon sprite | apps/morphism/public/icons/morphism-icons.svg | | Textures | apps/morphism/public/textures/ | | Brand kit | apps/morphism/public/brand/brand-kit.md |