Brand Kit

March 23, 2026 · View on GitHub

Logo

The asm logo is The Nexus — a hollow hexagonal hub at the center with six radiating paths connecting to outer nodes of different shapes. The central hexagon represents asm as the orchestrator, with a solid dot at its core. The six outer nodes use distinct geometric shapes — diamonds, squares, circles, and rounded squares — representing the diverse AI agents that asm unifies (Claude Code, Codex, Cursor, Windsurf, OpenClaw, and more). Small particle dots along the paths represent skills flowing through the network. The design conveys connection, orchestration, and unity, consistent with the neon green palette from the luongnv.com brand identity.

Logo Files

File	Usage
`assets/logo/logo-full.svg`	Primary logo — mark + wordmark (horizontal layout)
`assets/logo/logo-mark.svg`	Symbol/icon only — for compact spaces
`assets/logo/logo-wordmark.svg`	Text only — when mark is shown separately
`assets/logo/logo-icon.svg`	App icon — square with rounded corners, dark background
`assets/logo/favicon.svg`	Favicon — optimized for 16x16
`assets/logo/logo-white.svg`	Full logo in white — for dark backgrounds
`assets/logo/logo-black.svg`	Full logo in black — for light backgrounds

Usage Guidelines

Minimum size: The mark should not be rendered smaller than 16x16px
Clear space: Maintain at least 25% of the mark's width as padding around it
Do not rotate, distort, recolor, or add effects to the logo
Dark backgrounds: Use logo-full.svg (default, designed for dark) or logo-white.svg
Light backgrounds: Use logo-black.svg
Monochrome contexts: Use logo-black.svg or logo-white.svg
Colored on dark: The primary logo-full.svg renders neon green on transparent — ideal over #0a0a0a backgrounds

Colors

Derived from the luongnv.com design system.

Dark Mode (primary)

Role	Hex	Name	Usage
Accent	`#00ff41`	Neon Green	Brand mark, primary accents, CTAs
Accent Hover	`#00cc33`	Deep Green	Hover states, secondary nodes
Accent Glow	`rgba(0,255,65,0.15)`	Green Glow	Subtle glow effects
Background Primary	`#0a0a0a`	Near-Black	Primary backgrounds
Background Secondary	`#111111`	Dark Gray	Cards, secondary surfaces
Background Tertiary	`#1a1a1a`	Charcoal	Tertiary surfaces, borders
Text Primary	`#fafafa`	Off-White	Headings, body text
Text Secondary	`#a1a1a1`	Light Gray	Secondary text
Text Muted	`#737373`	Muted Gray	Placeholder, muted content
Border	`#262626`	Dark Border	Borders, dividers
Border Hover	`#404040`	Medium Border	Hover borders

Light Mode

Role	Hex	Name	Usage
Accent	`#059033`	Forest Green	Brand mark, primary accents
Accent Hover	`#047528`	Dark Green	Hover states
Accent Glow	`rgba(5,144,51,0.12)`	Green Glow	Subtle glow effects
Background Primary	`#f5f5f5`	Light Gray	Primary backgrounds
Background Secondary	`#ebebeb`	Mid Gray	Cards, secondary surfaces
Text Primary	`#111111`	Near-Black	Headings, body text

Tailwind Config

colors: {
  brand: {
    accent: '#00ff41',
    'accent-hover': '#00cc33',
    'accent-light': '#059033',
    dark: '#0a0a0a',
    'dark-secondary': '#111111',
    'dark-tertiary': '#1a1a1a',
  }
}

System Status Colors (UI only)

Role	Hex	Usage
Danger	`#EF4444`	Error states, destructive actions
Warning	`#F59E0B`	Warnings, caution indicators
Info	`#3B82F6`	Informational highlights

These are for text elements only — never for backgrounds or primary UI.

Typography

Primary font: Inter (Bold for headings, Medium for body)
Monospace: JetBrains Mono, Fira Code (code blocks, terminal UI)
Fallback stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
Wordmark: "asm" in Neon Green (#00ff41), bold, with 4px letter-spacing — compact and punchy

Tone

Developer-focused, technical, sharp
Dark-first aesthetic with neon green energy
Consistent with the luongnv.com personal brand