W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Southeast Toyota Finance
Southeast Toyota Finance (SETF), a JM Family Enterprises company, provides financing, leasing, and account management services for Toyota vehicle customers across the southeastern United States. Tagline: "We're driven to help you." SETF maintains a public brand portal (setfbranding.com) that publishes the canonical palette (Toyota Red primary + an 8-step supporting gray scale, each carrying its Pantone equivalent), the licensed type pair (Toyota Type primary, Helvetica Neue secondary), and usage rules for the wordmark. SETF is the most fully verified of the JMFE- family brand specs.
1 palette 4 fonts 0 assets 7 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/southeast-toyota-finance/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/southeast-toyota-finance/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.
Southeast Toyota Finance
Southeast Toyota Finance (SETF), a JM Family Enterprises company, provides financing, leasing, and account management services for Toyota vehicle customers across the southeastern United States. Tagline: "We're driven to help you." SETF maintains a public brand portal (setfbranding.com) that publishes the canonical palette (Toyota Red primary + an 8-step supporting gray scale, each carrying its Pantone equivalent), the licensed type pair (Toyota Type primary, Helvetica Neue secondary), and usage rules for the wordmark. SETF is the most fully verified of the JMFE- family brand specs.
Tags: finance, automotive, jmfe, setf, toyota-aligned, red, light-first
Atoms
Palette
Southeast Toyota Finance · [email protected] · Proprietary — All Rights Reserved
Full SETF brand palette as defined on the official SETF Brand Portal (setfbranding.com/colors.html): Toyota Red as the primary with an 8-step gray supporting scale from porcelain (#EDF0F5) to graphite (#38393B).
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Toyota Type ([email protected]) |
Proprietary — Toyota Motor Corporation, internal use only | sans-serif |
body |
Toyota Type ([email protected]) |
Proprietary — Toyota Motor Corporation, internal use only | sans-serif |
secondary |
Helvetica Neue ([email protected]) |
Proprietary — Linotype/Monotype; bundled with Apple OS | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
toyota-red |
Toyota Red | #EB0A1E |
setf-porcelain |
SETF Porcelain (Supporting 1) | #EDF0F5 |
setf-fog |
SETF Fog (Supporting 2) | #E1E8EE |
setf-mist |
SETF Mist (Supporting 3) | #C1C9D6 |
setf-pewter |
SETF Pewter (Supporting 4) | #A6B4BE |
setf-steel |
SETF Steel (Supporting 5) | #86939E |
setf-slate |
SETF Slate (Supporting 6) | #626E79 |
setf-graphite |
SETF Graphite (Supporting 7) | #58595B |
setf-onyx |
SETF Onyx (Supporting 8) | #38393B |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
setf-porcelain |
#EDF0F5 |
surface |
setf-fog |
#E1E8EE |
surface-elevated |
setf-mist |
#C1C9D6 |
text-primary |
setf-onyx |
#38393B |
text-secondary |
setf-slate |
#626E79 |
text-tertiary |
setf-steel |
#86939E |
primary |
toyota-red |
#EB0A1E |
primary-hover |
toyota-red |
#EB0A1E |
accent |
toyota-red |
#EB0A1E |
success |
setf-slate |
#626E79 |
warning |
toyota-red |
#EB0A1E |
error |
toyota-red |
#EB0A1E |
info |
setf-slate |
#626E79 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
setf-onyx |
#38393B |
surface |
setf-graphite |
#58595B |
surface-elevated |
setf-slate |
#626E79 |
text-primary |
setf-porcelain |
#EDF0F5 |
text-secondary |
setf-fog |
#E1E8EE |
text-tertiary |
setf-mist |
#C1C9D6 |
primary |
toyota-red |
#EB0A1E |
primary-hover |
toyota-red |
#EB0A1E |
accent |
toyota-red |
#EB0A1E |
success |
setf-fog |
#E1E8EE |
warning |
toyota-red |
#EB0A1E |
error |
toyota-red |
#EB0A1E |
info |
setf-mist |
#C1C9D6 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
setf-porcelain |
#EDF0F5 |
on-identity |
setf-onyx |
#38393B |
primary |
toyota-red |
#EB0A1E |
primary-hover |
toyota-red |
#EB0A1E |
accent |
toyota-red |
#EB0A1E |
mark |
setf-onyx |
#38393B |
text-primary-light |
setf-onyx |
#38393B |
text-primary-dark |
setf-porcelain |
#EDF0F5 |
background-light |
setf-porcelain |
#EDF0F5 |
background-dark |
setf-onyx |
#38393B |
surface-light |
setf-fog |
#E1E8EE |
surface-dark |
setf-graphite |
#58595B |
border-light |
setf-mist |
#C1C9D6 |
border-dark |
setf-slate |
#626E79 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
fallback |
secondary |
code |
mono |
Rules
🛑 error (6)
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
SETF Onyx (#38393B) on SETF Porcelain (#EDF0F5) measures ~12:1, clearing the AA 4.5:1 minimum decisively. SETF's customer-facing content includes statements, disclosures, and account-management screens that demand legible body text across mobile and desktop; AA is the published compliance target on the SETF brand portal.
colorChoice → roles.colors.primary
- allowed: toyota-red
- forbidden: setf-porcelain, setf-fog, setf-mist, setf-pewter, setf-steel, setf-slate, setf-graphite, setf-onyx
Toyota Red (#EB0A1E / Pantone 186C / CMYK 0/100/90/0) is the single primary on the SETF brand portal. The 8-step gray supporting scale is for surfaces, borders, and text — never as a substitute for the brand action color.
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.5
The SETF brand portal shows Toyota Type Semibold as the display weight against Toyota Type Book body, with a consistent 1.5×+ size step in deliverables. The size contrast carries the hierarchy when the type voice is otherwise uniform across display and prose.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant, gradient-fill, outlined-only
The SETF wordmark and its Toyota Red treatment are governed by the SETF Brand Portal. Use the supplied variants only; auto-inversion, gradient fills, drop shadows, and stretched aspect ratios are explicitly out of compliance per the portal's brand-identity page.
colorChoice → roles.colors.mark
- allowed: setf-onyx, setf-graphite, setf-porcelain, toyota-red
- forbidden: setf-fog, setf-mist, setf-pewter, setf-steel, setf-slate
The SETF wordmark renders in onyx or graphite on light surfaces, reversed to porcelain on dark surfaces, or in Toyota Red for the brand-co-lock. Lighter grays (fog, mist, pewter, steel, slate) are surface and border roles — they lack the contrast to carry the wordmark.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum — Level AA). SETF is a regulated financial-services brand; consumer disclosures and statement copy must meet AA across the 8-step gray scale. The SETF portal's documented foreground/ background pairings all clear AA on Porcelain.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 400, 600
The SETF brand guide names Toyota Type Book (400) and Semibold (600) as the licensed weights on setfbranding.com /fonts.html. Helvetica Neue Regular (400) and Bold (700) serve as the fallback pair when Toyota Type cannot be embedded.
Provenance
- Source: https://www.setfbranding.com/
- License:
Proprietary — All Rights Reserved - Attribution: Southeast Toyota Finance — a JM Family Enterprises company. The Toyota trademark and red color belong to Toyota Motor Corporation, used by SETF under partnership with Toyota Financial Services. Palette and typography transcribed verbatim from the SETF Brand Portal at setfbranding.com/colors.html, /fonts.html, and /brand-identity.html. Logo and supplementary assets live in the gated Widen Collective portal hosted by JMFE.
- Imported:
2026-05-19 - Notes: 1.0.0 audit upgrade of [email protected] — preserves the SETF portal-derived palette and the licensed Toyota Type + Helvetica Neue pairing, adds identity / on-identity roles for the SETF Porcelain canvas, and expands the rules block from 3 to 7 typed entries grounded in the setfbranding.com guide. The 0.1.0 spec remains historical.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Southeast Toyota Finance
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.
Southeast Toyota Finance
A clear hierarchy in Southeast Toyota Finance'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
Southeast Toyota Finance
[email protected]font · heading
Toyota Type
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Toyota Type
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · secondary
Helvetica Neue
[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
→ toyota-red #EB0A1E background-dark
→ setf-onyx #38393B background-light
→ setf-porcelain #EDF0F5 border-dark
→ setf-slate #626E79 border-light
→ setf-mist #C1C9D6 identity
→ setf-porcelain #EDF0F5 mark
→ setf-onyx #38393B on-identity
→ setf-onyx #38393B primary
→ toyota-red #EB0A1E primary-hover
→ toyota-red #EB0A1E surface-dark
→ setf-graphite #58595B surface-light
→ setf-fog #E1E8EE text-primary-dark
→ setf-porcelain #EDF0F5 text-primary-light
→ setf-onyx #38393B Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Toyota Type fallback
→ secondary Helvetica Neue prose
→ body Toyota Type Palette mode mappings (from southeast-toyota-finance)
Light mode (13 roles)
accent
→ toyota-red background
→ setf-porcelain error
→ toyota-red info
→ setf-slate primary
→ toyota-red primary-hover
→ toyota-red success
→ setf-slate surface
→ setf-fog surface-elevated
→ setf-mist text-primary
→ setf-onyx text-secondary
→ setf-slate text-tertiary
→ setf-steel warning
→ toyota-red Dark mode (13 roles)
accent
→ toyota-red background
→ setf-onyx error
→ toyota-red info
→ setf-mist primary
→ toyota-red primary-hover
→ toyota-red success
→ setf-fog surface
→ setf-graphite surface-elevated
→ setf-slate text-primary
→ setf-porcelain text-secondary
→ setf-fog text-tertiary
→ setf-mist warning
→ toyota-red Rules (7 typed constraints)
error · 6 rules
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA SETF Onyx (#38393B) on SETF Porcelain (#EDF0F5) measures ~12:1, clearing the AA 4.5:1 minimum decisively. SETF's customer-facing content includes statements, disclosures, and account-management screens that demand legible body text across mobile and desktop; AA is the published compliance target on the SETF brand portal.
colorChoice roles.colors.primary allowed toyota-red forbidden setf-porcelain, setf-fog, setf-mist, setf-pewter, setf-steel, setf-slate, setf-graphite, setf-onyx Toyota Red (#EB0A1E / Pantone 186C / CMYK 0/100/90/0) is the single primary on the SETF brand portal. The 8-step gray supporting scale is for surfaces, borders, and text — never as a substitute for the brand action color.
fontPairing typography.display requires prose minSizeRatio 1.5 The SETF brand portal shows Toyota Type Semibold as the display weight against Toyota Type Book body, with a consistent 1.5×+ size step in deliverables. The size contrast carries the hierarchy when the type voice is otherwise uniform across display and prose.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant, gradient-fill, outlined-only The SETF wordmark and its Toyota Red treatment are governed by the SETF Brand Portal. Use the supplied variants only; auto-inversion, gradient fills, drop shadows, and stretched aspect ratios are explicitly out of compliance per the portal's brand-identity page.
colorChoice roles.colors.mark allowed setf-onyx, setf-graphite, setf-porcelain, toyota-red forbidden setf-fog, setf-mist, setf-pewter, setf-steel, setf-slate The SETF wordmark renders in onyx or graphite on light surfaces, reversed to porcelain on dark surfaces, or in Toyota Red for the brand-co-lock. Lighter grays (fog, mist, pewter, steel, slate) are surface and border roles — they lack the contrast to carry the wordmark.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum — Level AA). SETF is a regulated financial-services brand; consumer disclosures and statement copy must meet AA across the 8-step gray scale. The SETF portal's documented foreground/ background pairings all clear AA on Porcelain.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 400, 600 The SETF brand guide names Toyota Type Book (400) and Semibold (600) as the licensed weights on setfbranding.com /fonts.html. Helvetica Neue Regular (400) and Bold (700) serve as the fallback pair when Toyota Type cannot be embedded.
Provenance
- Source
- https://www.setfbranding.com/
- License
Proprietary — All Rights Reserved- Attribution
- Southeast Toyota Finance — a JM Family Enterprises company. The Toyota trademark and red color belong to Toyota Motor Corporation, used by SETF under partnership with Toyota Financial Services. Palette and typography transcribed verbatim from the SETF Brand Portal at setfbranding.com/colors.html, /fonts.html, and /brand-identity.html. Logo and supplementary assets live in the gated Widen Collective portal hosted by JMFE.
- Imported
2026-05-19- Notes
- 1.0.0 audit upgrade of [email protected] — preserves the SETF portal-derived palette and the licensed Toyota Type + Helvetica Neue pairing, adds identity / on-identity roles for the SETF Porcelain canvas, and expands the rules block from 3 to 7 typed entries grounded in the setfbranding.com guide. The 0.1.0 spec remains historical.