W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
JM&A Group
JM&A Group, a JM Family Enterprises company, provides finance and insurance products, performance-development services, and training programs to automotive dealerships across North America. Tagline: "Your Partner for Dealership Growth & Success." The visual identity is light-corporate: the JM&A wordmark in near-black with a single signature teal (#008D9A) as the brand-card accent, set against white surfaces. Typography mirrors the parent JMFE corporate face (Proxima Nova) until a JM&A-specific spec is supplied.
1 palette 3 fonts 0 assets 6 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/jma-group/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/jma-group/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.
JM&A Group
JM&A Group, a JM Family Enterprises company, provides finance and insurance products, performance-development services, and training programs to automotive dealerships across North America. Tagline: "Your Partner for Dealership Growth & Success." The visual identity is light-corporate: the JM&A wordmark in near-black with a single signature teal (#008D9A) as the brand-card accent, set against white surfaces. Typography mirrors the parent JMFE corporate face (Proxima Nova) until a JM&A-specific spec is supplied.
Tags: automotive, finance-and-insurance, dealer-services, jmfe, jma, teal, light-first
Atoms
Palette
JM&A Group · [email protected] · Proprietary — All Rights Reserved
JM&A Group palette built around the brand teal (#008D9A) seen in the official wordmark, paired with near-black and white. The teal is one shade off the parent JMFE corporate teal (#008C99) — the same family identity at finer resolution.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Proxima Nova ([email protected]) |
Adobe Fonts subscription — licensed for web embedding via Adobe Fonts kit | sans-serif |
body |
Proxima Nova ([email protected]) |
Adobe Fonts subscription — licensed for web embedding via Adobe Fonts kit | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
jma-teal |
JM&A Teal (primary) | #008D9A |
jma-teal-deep |
JM&A Teal Deep | #00707A |
jma-teal-light |
JM&A Teal Light | #B8E2E6 |
jma-onyx |
JM&A Onyx | #010101 |
jma-graphite |
JM&A Graphite | #2A2D31 |
jma-slate |
JM&A Slate | #5A6470 |
jma-fog |
JM&A Fog | #E6ECF0 |
jma-white |
JM&A White | #FFFFFF |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
jma-white |
#FFFFFF |
surface |
jma-fog |
#E6ECF0 |
surface-elevated |
jma-teal-light |
#B8E2E6 |
text-primary |
jma-onyx |
#010101 |
text-secondary |
jma-graphite |
#2A2D31 |
text-tertiary |
jma-slate |
#5A6470 |
primary |
jma-teal |
#008D9A |
primary-hover |
jma-teal-deep |
#00707A |
accent |
jma-teal |
#008D9A |
success |
jma-teal-deep |
#00707A |
warning |
jma-teal |
#008D9A |
error |
jma-onyx |
#010101 |
info |
jma-teal |
#008D9A |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
jma-onyx |
#010101 |
surface |
jma-graphite |
#2A2D31 |
surface-elevated |
jma-slate |
#5A6470 |
text-primary |
jma-white |
#FFFFFF |
text-secondary |
jma-fog |
#E6ECF0 |
text-tertiary |
jma-teal-light |
#B8E2E6 |
primary |
jma-teal-light |
#B8E2E6 |
primary-hover |
jma-teal |
#008D9A |
accent |
jma-teal-light |
#B8E2E6 |
success |
jma-teal-light |
#B8E2E6 |
warning |
jma-teal-light |
#B8E2E6 |
error |
jma-fog |
#E6ECF0 |
info |
jma-teal-light |
#B8E2E6 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
jma-white |
#FFFFFF |
on-identity |
jma-onyx |
#010101 |
primary |
jma-teal |
#008D9A |
primary-hover |
jma-teal-deep |
#00707A |
accent |
jma-teal |
#008D9A |
mark |
jma-onyx |
#010101 |
text-primary-light |
jma-onyx |
#010101 |
text-primary-dark |
jma-white |
#FFFFFF |
background-light |
jma-white |
#FFFFFF |
background-dark |
jma-onyx |
#010101 |
surface-light |
jma-fog |
#E6ECF0 |
surface-dark |
jma-graphite |
#2A2D31 |
border-light |
jma-teal-light |
#B8E2E6 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (5)
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
JM&A Onyx (#010101) on JM&A White (#FFFFFF) measures ~21:1, decisively clearing the AA 4.5:1 floor. The dealer-services audience consumes JM&A content as long-form training material, finance product sheets, and operations dashboards; AA is the standing requirement, and the deployed wordmark composition already satisfies it.
colorChoice → roles.colors.primary
- allowed: jma-teal, jma-teal-deep
- forbidden: jma-fog, jma-graphite, jma-slate, jma-teal-light
The JM&A primary teal is the SVG-extracted #008D9A. The deeper sibling (#00707A) covers hover and pressed states. Lighter teals and the supporting gray scale are surface and meta-text tools — they must never substitute for the primary brand action color, which is what carries JM&A's recognition against the parent JMFE family of teals.
colorChoice → roles.colors.mark
- allowed: jma-onyx, jma-white
- forbidden: jma-teal, jma-teal-deep, jma-teal-light, jma-fog, jma-graphite
The wordmark fill is near-black on light surfaces and white when reversed — the teal is the ampersand-accent stroke INSIDE the wordmark, not a fill recolor for the wordmark itself. Recoloring the wordmark in teal collapses the designed contrast between the lettering and the accent detail.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, outlined-only
The JM&A Group horizontal wordmark is a registered mark. Stretched, rotated, recolored, or gradient-filled reproductions are not permitted; only the official two-color treatment (onyx wordmark + teal accent on a clean surface) ships in JMFE-approved deliverables.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum — Level AA). JM&A's dealer-services content includes finance and insurance documentation that must remain legible across mobile devices, dealership terminals, and printed training materials. AA is the documented JMFE-family compliance target.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: jma-white, jma-fog, jma-onyx
- doesNotPairWith: toyota-red, jmfe-signal-yellow, jmfe-terracotta
JM&A teal reads cleanest on the white / fog / onyx scale. Pairing it adjacent to Toyota Red or the JMFE signal-yellow breaks the JMFE family ladder — JM&A is the cool-teal sibling, not a red or yellow sibling.
Provenance
- Source: https://www.jmagroup.com/
- License:
Proprietary — All Rights Reserved - Attribution: JM&A Group — a JM Family Enterprises company. The JM&A wordmark, teal hue, and all derivative dealer-facing identity belong to JM Family Enterprises, Inc. Identity values verified from the official horizontal-wordmark SVG hosted at jmagroup.com/hubfs/identity/logos/jma-logo-horizontal-fc.svg.
- Imported:
2026-05-19 - Notes: 1.0.0 audit upgrade of [email protected] — preserves the original wordmark-derived palette (jma-teal + onyx + supporting fog), adds identity / on-identity roles for the white brand-card canvas the wordmark sits on, and expands the rules block from 2 to 6 typed entries grounded in the wordmark SVG and the parent JMFE corporate identity. The 0.1.0 spec remains the historical baseline; consumers using <jma-group@1> resolve here.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by JM&A Group
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.
JM&A Group
A clear hierarchy in JM&A Group'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
JM&A Group
[email protected]font · heading
Proxima Nova
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Proxima Nova
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The 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
→ jma-teal #008D9A background-dark
→ jma-onyx #010101 background-light
→ jma-white #FFFFFF border-light
→ jma-teal-light #B8E2E6 identity
→ jma-white #FFFFFF mark
→ jma-onyx #010101 on-identity
→ jma-onyx #010101 primary
→ jma-teal #008D9A primary-hover
→ jma-teal-deep #00707A surface-dark
→ jma-graphite #2A2D31 surface-light
→ jma-fog #E6ECF0 text-primary-dark
→ jma-white #FFFFFF text-primary-light
→ jma-onyx #010101 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Proxima Nova prose
→ body Proxima Nova Palette mode mappings (from jma-group)
Light mode (13 roles)
accent
→ jma-teal background
→ jma-white error
→ jma-onyx info
→ jma-teal primary
→ jma-teal primary-hover
→ jma-teal-deep success
→ jma-teal-deep surface
→ jma-fog surface-elevated
→ jma-teal-light text-primary
→ jma-onyx text-secondary
→ jma-graphite text-tertiary
→ jma-slate warning
→ jma-teal Dark mode (13 roles)
accent
→ jma-teal-light background
→ jma-onyx error
→ jma-fog info
→ jma-teal-light primary
→ jma-teal-light primary-hover
→ jma-teal success
→ jma-teal-light surface
→ jma-graphite surface-elevated
→ jma-slate text-primary
→ jma-white text-secondary
→ jma-fog text-tertiary
→ jma-teal-light warning
→ jma-teal-light Rules (6 typed constraints)
error · 5 rules
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA JM&A Onyx (#010101) on JM&A White (#FFFFFF) measures ~21:1, decisively clearing the AA 4.5:1 floor. The dealer-services audience consumes JM&A content as long-form training material, finance product sheets, and operations dashboards; AA is the standing requirement, and the deployed wordmark composition already satisfies it.
colorChoice roles.colors.primary allowed jma-teal, jma-teal-deep forbidden jma-fog, jma-graphite, jma-slate, jma-teal-light The JM&A primary teal is the SVG-extracted #008D9A. The deeper sibling (#00707A) covers hover and pressed states. Lighter teals and the supporting gray scale are surface and meta-text tools — they must never substitute for the primary brand action color, which is what carries JM&A's recognition against the parent JMFE family of teals.
colorChoice roles.colors.mark allowed jma-onyx, jma-white forbidden jma-teal, jma-teal-deep, jma-teal-light, jma-fog, jma-graphite The wordmark fill is near-black on light surfaces and white when reversed — the teal is the ampersand-accent stroke INSIDE the wordmark, not a fill recolor for the wordmark itself. Recoloring the wordmark in teal collapses the designed contrast between the lettering and the accent detail.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, outlined-only The JM&A Group horizontal wordmark is a registered mark. Stretched, rotated, recolored, or gradient-filled reproductions are not permitted; only the official two-color treatment (onyx wordmark + teal accent on a clean surface) ships in JMFE-approved deliverables.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum — Level AA). JM&A's dealer-services content includes finance and insurance documentation that must remain legible across mobile devices, dealership terminals, and printed training materials. AA is the documented JMFE-family compliance target.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith jma-white, jma-fog, jma-onyx doesNotPairWith toyota-red, jmfe-signal-yellow, jmfe-terracotta JM&A teal reads cleanest on the white / fog / onyx scale. Pairing it adjacent to Toyota Red or the JMFE signal-yellow breaks the JMFE family ladder — JM&A is the cool-teal sibling, not a red or yellow sibling.
Provenance
- Source
- https://www.jmagroup.com/
- License
Proprietary — All Rights Reserved- Attribution
- JM&A Group — a JM Family Enterprises company. The JM&A wordmark, teal hue, and all derivative dealer-facing identity belong to JM Family Enterprises, Inc. Identity values verified from the official horizontal-wordmark SVG hosted at jmagroup.com/hubfs/identity/logos/jma-logo-horizontal-fc.svg.
- Imported
2026-05-19- Notes
- 1.0.0 audit upgrade of [email protected] — preserves the original wordmark-derived palette (jma-teal + onyx + supporting fog), adds identity / on-identity roles for the white brand-card canvas the wordmark sits on, and expands the rules block from 2 to 6 typed entries grounded in the wordmark SVG and the parent JMFE corporate identity. The 0.1.0 spec remains the historical baseline; consumers using <jma-group@1> resolve here.