W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Convergent Systems
Convergent Systems builds civilization-grade software at the intersection of artificial intelligence, human resilience, developer productivity, and systems architecture. The brand expresses institutional restraint and mathematical precision: a hexagonal mark with six radial axes converging on a centered point, set against deep-space blue-blacks with cyan, gold, and ember accents. Tagline: "Civilization-Grade Software for a Converging World." Founding principle: "Careful software is built for outcomes, not engagement."
1 palette 2 fonts 4 assets 14 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/convergent-systems/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 [email protected]. Served from
/dist/brands/convergent-systems/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.
Convergent Systems
Convergent Systems builds civilization-grade software at the intersection of artificial intelligence, human resilience, developer productivity, and systems architecture. The brand expresses institutional restraint and mathematical precision: a hexagonal mark with six radial axes converging on a centered point, set against deep-space blue-blacks with cyan, gold, and ember accents. Tagline: "Civilization-Grade Software for a Converging World." Founding principle: "Careful software is built for outcomes, not engagement."
Tags: convergent-systems, civilization-grade, dark-first, mathematical
Atoms
Palette
Convergent Deep Space · [email protected] · MIT
Dark-first palette extracted from the Convergent Systems brand site (convergent-systems.co). Deep-space blue-blacks for the canvas, cool off-white for text, and three vibrant accents — cyan, gold, orange — each with a softer hover variant. The gold accent is the brand's signature, used in the hexagonal-spiral mark. Designed for dark mode; light-mode role mappings provide a sensible inversion (cream canvas, deep-space text) while preserving the same three accent hues so the brand identity survives a mode switch.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
Swatches
| ID | Name | Value |
|---|---|---|
deep-space-0 |
Deep Space 0 (canvas) | #07090F |
deep-space-1 |
Deep Space 1 | #0B1020 |
deep-space-2 |
Deep Space 2 | #11182C |
snow-0 |
Snow 0 (foreground) | #EEF1F7 |
snow-1 |
Snow 1 (muted) | #A4ADBF |
snow-2 |
Snow 2 (muted-soft) | #7D8699 |
frost-cyan |
Frost Cyan | #5CD6FF |
frost-cyan-soft |
Frost Cyan Soft (hover) | #8DE4FF |
solar-gold |
Solar Gold | #F4C75E |
solar-gold-soft |
Solar Gold Soft | #FFD982 |
ember-orange |
Ember Orange | #FF8A3D |
ember-orange-soft |
Ember Orange Soft | #FFB070 |
hairline-faint |
Hairline Faint | #FFFFFF14 |
hairline-strong |
Hairline Strong | #FFFFFF24 |
pure-white |
Pure White | #FFFFFF |
pure-black |
Pure Black | #000000 |
parchment-canvas |
Parchment Canvas (light bg) | #F9F7F0 |
parchment-surface |
Parchment Surface | #FDFCF7 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
parchment-canvas |
#F9F7F0 |
surface |
parchment-surface |
#FDFCF7 |
surface-elevated |
pure-white |
#FFFFFF |
text-primary |
deep-space-0 |
#07090F |
text-secondary |
deep-space-1 |
#0B1020 |
text-tertiary |
snow-2 |
#7D8699 |
primary |
frost-cyan |
#5CD6FF |
primary-hover |
frost-cyan-soft |
#8DE4FF |
accent |
solar-gold |
#F4C75E |
accent-hover |
solar-gold-soft |
#FFD982 |
warning |
ember-orange |
#FF8A3D |
warning-hover |
ember-orange-soft |
#FFB070 |
mark |
solar-gold |
#F4C75E |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
deep-space-0 |
#07090F |
surface |
deep-space-1 |
#0B1020 |
surface-elevated |
deep-space-2 |
#11182C |
text-primary |
snow-0 |
#EEF1F7 |
text-secondary |
snow-1 |
#A4ADBF |
text-tertiary |
snow-2 |
#7D8699 |
primary |
frost-cyan |
#5CD6FF |
primary-hover |
frost-cyan-soft |
#8DE4FF |
accent |
solar-gold |
#F4C75E |
accent-hover |
solar-gold-soft |
#FFD982 |
warning |
ember-orange |
#FF8A3D |
warning-hover |
ember-orange-soft |
#FFB070 |
mark |
solar-gold |
#F4C75E |
hairline |
hairline-faint |
#FFFFFF14 |
hairline-strong |
hairline-strong |
#FFFFFF24 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
deep-space-0 |
#07090F |
on-identity |
snow-0 |
#EEF1F7 |
background |
deep-space-0 |
#07090F |
surface |
deep-space-1 |
#0B1020 |
surface-elevated |
deep-space-2 |
#11182C |
text-primary |
snow-0 |
#EEF1F7 |
text-secondary |
snow-1 |
#A4ADBF |
text-tertiary |
snow-2 |
#7D8699 |
primary |
frost-cyan |
#5CD6FF |
primary-hover |
frost-cyan-soft |
#8DE4FF |
accent |
solar-gold |
#F4C75E |
accent-hover |
solar-gold-soft |
#FFD982 |
mark |
solar-gold |
#F4C75E |
warmth |
ember-orange |
#FF8A3D |
text-emphasis |
snow-0 |
#EEF1F7 |
text-muted |
snow-1 |
#A4ADBF |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
wordmark |
heading |
Assets
Convergent Systems Mark (logo-mark)
Hexagonal seal with six radial axes converging on a centered golden node. The mark is mathematical, not decorative — the geometry references the convergence-on-a-singularity theme.
svg· full-color · mode: any · 100×100 ·assets/logo-mark.svg
Convergent Systems Wordmark (Dark) (logo-wordmark)
Wordmark for use on deep-space-dark backgrounds.
svg· light-on-dark · mode: dark · 400×80 ·assets/logo-wordmark-dark.svg
Convergent Systems Wordmark (Light) (logo-wordmark)
Wordmark for use on parchment / light backgrounds.
svg· dark-on-light · mode: light · 400×80 ·assets/logo-wordmark-light.svg
Convergent Systems Favicon (favicon)
Browser favicon. Identical to the mark.
svg· full-color · mode: any · 100×100 ·assets/favicon.svg
Rules
🛑 error (12)
enumMembership → typography.heading.fontWeight
- allowed: 700, 800
Headings on convergent-systems.co use weight 800 (
clampfont-size with letter-spacing -0.03em). Lighter weights compromise the institutional voice; weights above 800 are unavailable in the Inter variable font's static cuts on the brand's CDN.
numericRange → typography.wordmark.letterSpacing
- min:
0.18 - max:
0.18 - unit:
em
The wordmark uses 0.18em letter-spacing as captured on the brand site. Deviating breaks the calibrated visual rhythm.
numericRange → typography.section-label.letterSpacing
- min:
0.32 - max:
0.32 - unit:
em
Section labels use 0.32em letter-spacing, uppercase, weight 700. The wider tracking signals categorical organization, not body text.
forbiddenTreatment → logo.mark
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant
The mark is mathematical. Stretching breaks the hexagonal proportions; recoloring breaks the gold-signature identity. Use the appropriate light/dark wordmark variant rather than filtering the source.
variantSelection → logo
- use:
wordmark-dark - when:
backgroundColorScheme="dark"
Use the dark-theme wordmark on deep-space-dark backgrounds.
variantSelection → logo
- use:
wordmark-light - when:
backgroundColorScheme="light"
Use the light-theme wordmark on parchment / light backgrounds.
colorChoice → logo.mark.fill
- allowed: solar-gold
- forbidden: solar-gold-soft, frost-cyan, ember-orange, any-non-gold
The mark color IS the brand identity. Gold #F4C75E and only that. Soft variants are for hover/background; the mark itself is the anchor color.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Snow-0 on Deep-Space-0 gives ~16:1; well above AA. Required for body text legibility on the dark canvas. Verify when introducing new role-color pairings.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
Frost-Cyan on Deep-Space-0 must remain perceptible at link size. Below 3:1 (AA-large), interactive affordance is lost.
contextRestriction → roles.colors.warmth
- forbiddenContexts: error-state, validation-failure, destructive-action
Ember-orange is a warmth/ambient accent (radial glows, secondary CTA). It is NOT the error color. Using it for failure states conflicts with its established positive-warm meaning.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The brand's institutional voice demands accessibility as table stakes, not aspiration.
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.8
The site's hero uses clamp(2.2rem, 4.2vw, 3.6rem) for headings against 1.15rem body — a ratio of roughly 2-3×. The 1.8× floor keeps headlines unmistakable even at the smaller clamp.
💡 recommendation (2)
numericRatio → typography.body.lineHeight
- min:
1.6 - max:
1.7
Body text on convergent-systems.co uses line-height 1.6–1.65. This range preserves readability at the established 1.15rem size.
compositionConstraint → roles.colors.frost-cyan
- pairsWith: roles.colors.solar-gold
- doesNotPairWith: roles.colors.ember-orange
The brand pairs cyan + gold as the dominant duo (cool + warm across the spectrum). Cyan + orange together fights for attention without resolving into hierarchy.
Provenance
- Source: https://convergent-systems.co
- License:
MIT - Attribution: Convergent Systems Co. — brand identity captured from the public site convergent-systems.co. Founded by Thomas Polliard. Trademarks and design rights belong to Convergent Systems Co.
- Imported:
2026-05-16 - Notes: This replaces the seed
[email protected](which used the Nord palette as a placeholder). Version 1.0.0 is the first capture of the production brand as deployed at convergent-systems.co.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Convergent Systems
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.
Convergent Systems
A clear hierarchy in Convergent Systems'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
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
→ solar-gold #F4C75E accent-hover
→ solar-gold-soft #FFD982 background
→ deep-space-0 #07090F identity
→ deep-space-0 #07090F mark
→ solar-gold #F4C75E on-identity
→ snow-0 #EEF1F7 primary
→ frost-cyan #5CD6FF primary-hover
→ frost-cyan-soft #8DE4FF surface
→ deep-space-1 #0B1020 surface-elevated
→ deep-space-2 #11182C text-emphasis
→ snow-0 #EEF1F7 text-muted
→ snow-1 #A4ADBF text-primary
→ snow-0 #EEF1F7 text-secondary
→ snow-1 #A4ADBF text-tertiary
→ snow-2 #7D8699 warmth
→ ember-orange #FF8A3D Typography
display
→ heading Inter prose
→ body Inter wordmark
→ heading Inter Palette mode mappings (from convergent-deep-space)
Light mode (13 roles)
accent
→ solar-gold accent-hover
→ solar-gold-soft background
→ parchment-canvas mark
→ solar-gold primary
→ frost-cyan primary-hover
→ frost-cyan-soft surface
→ parchment-surface surface-elevated
→ pure-white text-primary
→ deep-space-0 text-secondary
→ deep-space-1 text-tertiary
→ snow-2 warning
→ ember-orange warning-hover
→ ember-orange-soft Dark mode (15 roles)
accent
→ solar-gold accent-hover
→ solar-gold-soft background
→ deep-space-0 hairline
→ hairline-faint hairline-strong
→ hairline-strong mark
→ solar-gold primary
→ frost-cyan primary-hover
→ frost-cyan-soft surface
→ deep-space-1 surface-elevated
→ deep-space-2 text-primary
→ snow-0 text-secondary
→ snow-1 text-tertiary
→ snow-2 warning
→ ember-orange warning-hover
→ ember-orange-soft Assets
Convergent Systems Mark
logo-markHexagonal seal with six radial axes converging on a centered golden node. The mark is mathematical, not decorative — the geometry references the convergence-on-a-singularity theme.
Convergent Systems Wordmark (Dark)
logo-wordmarkWordmark for use on deep-space-dark backgrounds.
Convergent Systems Wordmark (Light)
logo-wordmarkWordmark for use on parchment / light backgrounds.
Convergent Systems Favicon
faviconBrowser favicon. Identical to the mark.
Rules (14 typed constraints)
error · 12 rules
enumMembership typography.heading.fontWeight allowed 700, 800 Headings on convergent-systems.co use weight 800 (`clamp` font-size with letter-spacing -0.03em). Lighter weights compromise the institutional voice; weights above 800 are unavailable in the Inter variable font's static cuts on the brand's CDN.
numericRange typography.wordmark.letterSpacing min 0.18 max 0.18 unit em The wordmark uses 0.18em letter-spacing as captured on the brand site. Deviating breaks the calibrated visual rhythm.
numericRange typography.section-label.letterSpacing min 0.32 max 0.32 unit em Section labels use 0.32em letter-spacing, uppercase, weight 700. The wider tracking signals categorical organization, not body text.
forbiddenTreatment logo.mark treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant The mark is mathematical. Stretching breaks the hexagonal proportions; recoloring breaks the gold-signature identity. Use the appropriate light/dark wordmark variant rather than filtering the source.
variantSelection logo use wordmark-dark when backgroundColorScheme="dark" Use the dark-theme wordmark on deep-space-dark backgrounds.
variantSelection logo use wordmark-light when backgroundColorScheme="light" Use the light-theme wordmark on parchment / light backgrounds.
colorChoice logo.mark.fill allowed solar-gold forbidden solar-gold-soft, frost-cyan, ember-orange, any-non-gold The mark color IS the brand identity. Gold #F4C75E and only that. Soft variants are for hover/background; the mark itself is the anchor color.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Snow-0 on Deep-Space-0 gives ~16:1; well above AA. Required for body text legibility on the dark canvas. Verify when introducing new role-color pairings.
contrastRatio roles.colors.primary against background minRatio 3 standard WCAG-AA-large Frost-Cyan on Deep-Space-0 must remain perceptible at link size. Below 3:1 (AA-large), interactive affordance is lost.
contextRestriction roles.colors.warmth forbiddenContexts error-state, validation-failure, destructive-action Ember-orange is a warmth/ambient accent (radial glows, secondary CTA). It is NOT the error color. Using it for failure states conflicts with its established positive-warm meaning.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The brand's institutional voice demands accessibility as table stakes, not aspiration.
fontPairing typography.heading requires body minSizeRatio 1.8 The site's hero uses clamp(2.2rem, 4.2vw, 3.6rem) for headings against 1.15rem body — a ratio of roughly 2-3×. The 1.8× floor keeps headlines unmistakable even at the smaller clamp.
recommendation · 2 rules
numericRatio typography.body.lineHeight min 1.6 max 1.7 Body text on convergent-systems.co uses line-height 1.6–1.65. This range preserves readability at the established 1.15rem size.
compositionConstraint roles.colors.frost-cyan pairsWith roles.colors.solar-gold doesNotPairWith roles.colors.ember-orange The brand pairs cyan + gold as the dominant duo (cool + warm across the spectrum). Cyan + orange together fights for attention without resolving into hierarchy.
Provenance
- Source
- https://convergent-systems.co
- License
MIT- Attribution
- Convergent Systems Co. — brand identity captured from the public site convergent-systems.co. Founded by Thomas Polliard. Trademarks and design rights belong to Convergent Systems Co.
- Imported
2026-05-16- Notes
- This replaces the seed `[email protected]` (which used the Nord palette as a placeholder). Version 1.0.0 is the first capture of the production brand as deployed at convergent-systems.co.