W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Valkyre.ai
Brand identity for valkyre.ai — a managed security operations platform for AI-assisted red-team, blue-team, engagement, audit, and Mythos-defense workflows. Built by Convergent Systems LLC. Norse mythology aesthetic; dual crimson-red / electric-blue identity representing the offensive and defensive sides of the platform.
1 palette 3 fonts 0 assets 11 rules
Preview prompt
Use the valkyre-ai@1.0.0 brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/valkyre-ai/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for valkyre-ai@1.0.0. Served from
/dist/brands/valkyre-ai/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Valkyre.ai
valkyre-ai@1.0.0
Brand identity for valkyre.ai — a managed security operations platform for AI-assisted red-team, blue-team, engagement, audit, and Mythos-defense workflows. Built by Convergent Systems LLC. Norse mythology aesthetic; dual crimson-red / electric-blue identity representing the offensive and defensive sides of the platform.
Tags: dark, security, cybersecurity, saas, norse, ai
Atoms
Palette
Valkyre.ai · valkyre-ai@1.0.0 · proprietary
Dual red-and-blue palette for the valkyre.ai managed security operations platform. Crimson red represents the offensive red-team side; electric blue represents the defensive blue-team side. A violet accent marks the AI cognitive layer where the two converge.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Geist Sans (geist@1.0.0) |
OFL-1.1 | sans-serif |
body |
Inter (inter@1.0.0) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font (jetbrainsmono-nerdfont@1.0.0) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
black |
Black | #000000 |
surface |
Surface | #0d0f14 |
surface-elevated |
Surface Elevated | #161a22 |
border |
Border | #1e2530 |
red |
Red | #d41b2a |
red-bright |
Red Bright | #f02233 |
red-muted |
Red Muted | #7a1018 |
blue |
Blue | #1b67e8 |
blue-bright |
Blue Bright | #2e7af5 |
blue-muted |
Blue Muted | #0f3d8a |
violet |
Violet | #7c3aed |
violet-bright |
Violet Bright | #9f5cf7 |
white |
White | #ffffff |
gray-100 |
Gray 100 | #e6e8ee |
gray-400 |
Gray 400 | #9ca3af |
gray-600 |
Gray 600 | #4b5563 |
success |
Success | #16a34a |
warning |
Warning | #d97706 |
error |
Error | #dc2626 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
white |
#ffffff |
surface |
gray-100 |
#e6e8ee |
surface-elevated |
white |
#ffffff |
text-primary |
black |
#000000 |
text-secondary |
surface-elevated |
#161a22 |
text-tertiary |
gray-400 |
#9ca3af |
primary |
blue |
#1b67e8 |
primary-hover |
blue-bright |
#2e7af5 |
accent |
red |
#d41b2a |
accent-hover |
red-bright |
#f02233 |
mark |
violet |
#7c3aed |
warning |
warning |
#d97706 |
error |
error |
#dc2626 |
success |
success |
#16a34a |
border |
border |
#1e2530 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
black |
#000000 |
surface |
surface |
#0d0f14 |
surface-elevated |
surface-elevated |
#161a22 |
text-primary |
white |
#ffffff |
text-secondary |
gray-100 |
#e6e8ee |
text-tertiary |
gray-400 |
#9ca3af |
primary |
blue |
#1b67e8 |
primary-hover |
blue-bright |
#2e7af5 |
accent |
red |
#d41b2a |
accent-hover |
red-bright |
#f02233 |
mark |
violet |
#7c3aed |
warning |
warning |
#d97706 |
error |
error |
#dc2626 |
success |
success |
#16a34a |
border |
border |
#1e2530 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
blue |
#1b67e8 |
on-identity |
white |
#ffffff |
primary |
blue |
#1b67e8 |
primary-hover |
blue-bright |
#2e7af5 |
accent |
red |
#d41b2a |
accent-hover |
red-bright |
#f02233 |
mark |
violet |
#7c3aed |
background-dark |
black |
#000000 |
surface-dark |
surface |
#0d0f14 |
surface-elevated-dark |
surface-elevated |
#161a22 |
text-primary-dark |
white |
#ffffff |
text-secondary-dark |
gray-100 |
#e6e8ee |
text-tertiary-dark |
gray-400 |
#9ca3af |
border-dark |
border |
#1e2530 |
success |
success |
#16a34a |
warning |
warning |
#d97706 |
error |
error |
#dc2626 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (7)
contrastRatio → roles.colors.text-primary-dark
- against:
roles.colors.background-dark - minRatio:
7 - standard:
WCAG-AAA
White on pure black is the primary text combination. WCAG-AAA 7:1 minimum is enforced — this is an operator-facing security tool where readability under stress is critical.
contrastRatio → roles.colors.primary
- against:
roles.colors.background-dark - minRatio:
3 - standard:
WCAG-AA-large
Electric blue (#1b67e8) on black must meet WCAG-AA-large for interactive elements rendered at 18px+ or bold 14px+.
contrastRatio → roles.colors.accent
- against:
roles.colors.background-dark - minRatio:
3 - standard:
WCAG-AA-large
Crimson red (#d41b2a) is used for destructive actions, critical findings, and red-team indicators. Must be distinguishable from background at large-text sizes.
forbiddenTreatment → assets.logo-mark
- treatments: recolored, gradient-fill, drop-shadow, on-busy-photo
The helmet mark's precise red/blue split is a core identity element. Recoloring, gradient fills, or drop shadows destroy the dual-identity meaning. Never render on a non-black or non-very-dark background.
forbiddenTreatment → assets.logo-mark
- treatments: stretched, rotated
The diamond-framed helmet is bilaterally specific — rotation or stretching misaligns the red/blue split and breaks the visual metaphor.
colorChoice → roles.colors.background-dark
- allowed: black, surface
- forbidden: white, gray-100
valkyre.ai is a dark-first brand. There is no light mode. Backgrounds must be black or near-black surface only.
accessibilityRequirement → ui.terminal-output
- standard:
WCAG-AA - criterion:
1.4.3
The secure remote terminal and all CLI/log output must meet WCAG-AA contrast. Operators read terminal sessions under operational stress; low contrast is a safety risk.
⚠️ warning (3)
colorChoice → ui.cta-buttons
- allowed: blue, blue-bright, red, red-bright
CTAs are blue (primary actions) or red (destructive / offensive actions). Do not use violet, gray, or white for button backgrounds.
contextRestriction → roles.colors.accent
- forbiddenContexts: marketing-hero, onboarding
Crimson red is the red-team / offense color. Using it in marketing heroes or onboarding creates an adversarial first impression. Reserve for in-product red-team views, critical findings, and destructive-action confirmations.
compositionConstraint → roles.colors.accent
- doesNotPairWith: error
Brand red (#d41b2a) and error red (#dc2626) are visually similar but semantically distinct — brand red means "offense / red-team", error red means "system failure". Do not use them adjacent; rely on context and iconography to differentiate when both must appear.
💡 recommendation (1)
fontPairing → typography.display
- requires:
inter@1.0.0 - minSizeRatio:
1.25
Geist display headings should be at minimum 1.25x the size of Inter body text to maintain hierarchy. The wordmark uses rounded Geist; body copy uses Inter for legibility at smaller sizes.
Provenance
- Source: https://valkyre.ai
- License:
proprietary - Attribution: Convergent Systems LLC
- Imported:
2026-05-26 - Notes: valkyre.ai is a Convergent Systems product but maintains its own independent brand identity. Logo mark is a Valkyrie helmet split diagonally — left half crimson red (red team / offense), right half electric blue (blue team / defense) — with circuit-trace and Norse rune texture overlays. A violet glow at the center split represents the AI cognitive engine.
Generated by the brand-atoms converter. Source: valkyre-ai@1.0.0 from the encyclopedia.
Components — same template, themed by Valkyre.ai
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Valkyre.ai
A clear hierarchy in Valkyre.ai's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
Valkyre.ai
valkyre-ai@1.0.0font · heading
Geist Sans
geist@1.0.0The quick brown fox jumps over 13 lazy dogs.
font · body
Inter
inter@1.0.0The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
jetbrainsmono-nerdfont@1.0.0The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ red #d41b2a accent-hover
→ red-bright #f02233 background-dark
→ black #000000 border-dark
→ border #1e2530 error
→ error #dc2626 identity
→ blue #1b67e8 mark
→ violet #7c3aed on-identity
→ white #ffffff primary
→ blue #1b67e8 primary-hover
→ blue-bright #2e7af5 success
→ success #16a34a surface-dark
→ surface #0d0f14 surface-elevated-dark
→ surface-elevated #161a22 text-primary-dark
→ white #ffffff text-secondary-dark
→ gray-100 #e6e8ee text-tertiary-dark
→ gray-400 #9ca3af warning
→ warning #d97706 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Geist Sans prose
→ body Inter Palette mode mappings (from valkyre-ai)
Light mode (15 roles)
accent
→ red accent-hover
→ red-bright background
→ white border
→ border error
→ error mark
→ violet primary
→ blue primary-hover
→ blue-bright success
→ success surface
→ gray-100 surface-elevated
→ white text-primary
→ black text-secondary
→ surface-elevated text-tertiary
→ gray-400 warning
→ warning Dark mode (15 roles)
accent
→ red accent-hover
→ red-bright background
→ black border
→ border error
→ error mark
→ violet primary
→ blue primary-hover
→ blue-bright success
→ success surface
→ surface surface-elevated
→ surface-elevated text-primary
→ white text-secondary
→ gray-100 text-tertiary
→ gray-400 warning
→ warning Rules (11 typed constraints)
error · 7 rules
contrastRatio roles.colors.text-primary-dark against roles.colors.background-dark minRatio 7 standard WCAG-AAA White on pure black is the primary text combination. WCAG-AAA 7:1 minimum is enforced — this is an operator-facing security tool where readability under stress is critical.
contrastRatio roles.colors.primary against roles.colors.background-dark minRatio 3 standard WCAG-AA-large Electric blue (#1b67e8) on black must meet WCAG-AA-large for interactive elements rendered at 18px+ or bold 14px+.
contrastRatio roles.colors.accent against roles.colors.background-dark minRatio 3 standard WCAG-AA-large Crimson red (#d41b2a) is used for destructive actions, critical findings, and red-team indicators. Must be distinguishable from background at large-text sizes.
forbiddenTreatment assets.logo-mark treatments recolored, gradient-fill, drop-shadow, on-busy-photo The helmet mark's precise red/blue split is a core identity element. Recoloring, gradient fills, or drop shadows destroy the dual-identity meaning. Never render on a non-black or non-very-dark background.
forbiddenTreatment assets.logo-mark treatments stretched, rotated The diamond-framed helmet is bilaterally specific — rotation or stretching misaligns the red/blue split and breaks the visual metaphor.
colorChoice roles.colors.background-dark allowed black, surface forbidden white, gray-100 valkyre.ai is a dark-first brand. There is no light mode. Backgrounds must be black or near-black surface only.
accessibilityRequirement ui.terminal-output standard WCAG-AA criterion 1.4.3 The secure remote terminal and all CLI/log output must meet WCAG-AA contrast. Operators read terminal sessions under operational stress; low contrast is a safety risk.
warning · 3 rules
colorChoice ui.cta-buttons allowed blue, blue-bright, red, red-bright CTAs are blue (primary actions) or red (destructive / offensive actions). Do not use violet, gray, or white for button backgrounds.
contextRestriction roles.colors.accent forbiddenContexts marketing-hero, onboarding Crimson red is the red-team / offense color. Using it in marketing heroes or onboarding creates an adversarial first impression. Reserve for in-product red-team views, critical findings, and destructive-action confirmations.
compositionConstraint roles.colors.accent doesNotPairWith error Brand red (#d41b2a) and error red (#dc2626) are visually similar but semantically distinct — brand red means "offense / red-team", error red means "system failure". Do not use them adjacent; rely on context and iconography to differentiate when both must appear.
recommendation · 1 rule
fontPairing typography.display requires inter@1.0.0 minSizeRatio 1.25 Geist display headings should be at minimum 1.25x the size of Inter body text to maintain hierarchy. The wordmark uses rounded Geist; body copy uses Inter for legibility at smaller sizes.
Provenance
- Source
- https://valkyre.ai
- License
proprietary- Attribution
- Convergent Systems LLC
- Imported
2026-05-26- Notes
- valkyre.ai is a Convergent Systems product but maintains its own independent brand identity. Logo mark is a Valkyrie helmet split diagonally — left half crimson red (red team / offense), right half electric blue (blue team / defense) — with circuit-trace and Norse rune texture overlays. A violet glow at the center split represents the AI cognitive engine.