W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Atom Family
The Atom Family is the product brand for the convergent-systems.co *-atoms catalog ecosystem. 25 catalog sites (schema-atoms, brand-atoms, theme-atoms, etc.) share this visual identity: the Deep Space canvas, molecular mark, Frost Cyan primary, Solar Gold accent, and Ember Orange warmth.
1 palette 2 fonts 4 assets 0 rules
Preview prompt
Use the atom-family@1.0.0 brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/atom-family/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 atom-family@1.0.0. Served from
/dist/brands/atom-family/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.
Atom Family
atom-family@1.0.0
The Atom Family is the product brand for the convergent-systems.co *-atoms catalog ecosystem. 25 catalog sites (schema-atoms, brand-atoms, theme-atoms, etc.) share this visual identity: the Deep Space canvas, molecular mark, Frost Cyan primary, Solar Gold accent, and Ember Orange warmth.
Tags: atom-family, atoms-ecosystem, dark-first
Atoms
Palette
Convergent Deep Space · convergent-deep-space@1.0.0 · 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 (inter@1.0.0) |
OFL-1.1 | sans-serif |
body |
Inter (inter@1.0.0) |
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 |
|---|---|---|
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 |
identity |
frost-cyan |
#5CD6FF |
on-identity |
deep-space-0 |
#07090F |
mark |
solar-gold |
#F4C75E |
Assets
Favicon (favicon)
32px 4-dot rounded-rect mark for browser tabs and app icons
dark· light-on-dark · mode: any · — ·assets/favicon.svg
Hero Mark (logo-mark)
120px 4-dot mark with glow halos for page heroes
dark· light-on-dark · mode: any · — ·assets/mark.svg
Atom Family Icon (logo)
Molecular A-frame logo, icon-only variant
dark· light-on-dark · mode: any · — ·assets/atom-family-icon.svg
Atom Family Wordmark (logo)
Molecular A-frame logo with ATOMS wordmark
dark· light-on-dark · mode: any · — ·assets/atom-family-wordmark.svg
Provenance
- Source: https://convergent-systems.co
- License:
MIT - Attribution: Atom Family brand identity. Part of the convergent-systems.co atoms ecosystem. Trademarks and design rights belong to Convergent Systems Co.
Generated by the brand-atoms converter. Source: atom-family@1.0.0 from the encyclopedia.
Components — same template, themed by Atom Family
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.
Atom Family
A clear hierarchy in Atom Family'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
→ frost-cyan #5CD6FF mark
→ solar-gold #F4C75E on-identity
→ deep-space-0 #07090F primary
→ frost-cyan #5CD6FF primary-hover
→ frost-cyan-soft #8DE4FF 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 warning
→ ember-orange #FF8A3D 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
Favicon
favicon32px 4-dot rounded-rect mark for browser tabs and app icons
Hero Mark
logo-mark120px 4-dot mark with glow halos for page heroes
Atom Family Icon
logoMolecular A-frame logo, icon-only variant
Atom Family Wordmark
logoMolecular A-frame logo with ATOMS wordmark
Provenance
- Source
- https://convergent-systems.co
- License
MIT- Attribution
- Atom Family brand identity. Part of the convergent-systems.co atoms ecosystem. Trademarks and design rights belong to Convergent Systems Co.