W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Apache Software Foundation
The Apache Software Foundation (ASF) is the vendor-neutral, US 501(c)(3) home of the Apache HTTP Server, Tomcat, Kafka, Spark, Cassandra, Lucene, and over three hundred other top-level open-source projects. The brand voice is institutional, careful, and project-first: the Foundation does not market individual projects; it provides the legal, infrastructure, and trademark umbrella under which independent project communities operate. Visually, Apache is restrained — a red feather mark (Apache Red #D22128), a black wordmark, and a quiet grey supporting palette that defers to the project being read about rather than promoting the Foundation itself.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/apache/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/apache/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.
Apache Software Foundation
The Apache Software Foundation (ASF) is the vendor-neutral, US 501(c)(3) home of the Apache HTTP Server, Tomcat, Kafka, Spark, Cassandra, Lucene, and over three hundred other top-level open-source projects. The brand voice is institutional, careful, and project-first: the Foundation does not market individual projects; it provides the legal, infrastructure, and trademark umbrella under which independent project communities operate. Visually, Apache is restrained — a red feather mark (Apache Red #D22128), a black wordmark, and a quiet grey supporting palette that defers to the project being read about rather than promoting the Foundation itself.
Tags: apache, asf, foundation, open-source, brand, red, institutional
Atoms
Palette
Apache Software Foundation · [email protected] · Proprietary — All Rights Reserved
Apache Software Foundation brand palette anchored on the canonical Apache Red (#D22128) — the fill of the ASF feather mark. The Foundation's identity is restrained and ink-on-paper: red feather, black wordmark, white canvas, with grey supporting neutrals for documentation surfaces. The palette captures the institutional Apache voice — vendor-neutral, project-first, decades-stable.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
Source Code Pro ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
apache-red |
Apache Red | #D22128 |
apache-red-dark |
Apache Red Dark | #A81920 |
apache-black |
Apache Black | #0E1014 |
apache-charcoal |
Apache Charcoal | #1F232B |
apache-slate |
Apache Slate | #4A5568 |
apache-gray |
Apache Gray | #7B8794 |
apache-light-gray |
Apache Light Gray | #D5D9DE |
apache-off-white |
Apache Off-White | #F4F5F7 |
apache-white |
Apache White | #FFFFFF |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
apache-white |
#FFFFFF |
surface |
apache-off-white |
#F4F5F7 |
surface-elevated |
apache-white |
#FFFFFF |
text-primary |
apache-black |
#0E1014 |
text-secondary |
apache-slate |
#4A5568 |
text-tertiary |
apache-gray |
#7B8794 |
primary |
apache-red |
#D22128 |
primary-hover |
apache-red-dark |
#A81920 |
accent |
apache-red |
#D22128 |
accent-hover |
apache-red-dark |
#A81920 |
warning |
apache-red |
#D22128 |
warning-hover |
apache-red-dark |
#A81920 |
error |
apache-red-dark |
#A81920 |
success |
apache-slate |
#4A5568 |
border |
apache-light-gray |
#D5D9DE |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
apache-black |
#0E1014 |
surface |
apache-charcoal |
#1F232B |
surface-elevated |
apache-charcoal |
#1F232B |
text-primary |
apache-white |
#FFFFFF |
text-secondary |
apache-light-gray |
#D5D9DE |
text-tertiary |
apache-gray |
#7B8794 |
primary |
apache-red |
#D22128 |
primary-hover |
apache-red-dark |
#A81920 |
accent |
apache-red |
#D22128 |
accent-hover |
apache-red-dark |
#A81920 |
warning |
apache-red |
#D22128 |
warning-hover |
apache-red-dark |
#A81920 |
error |
apache-red-dark |
#A81920 |
success |
apache-light-gray |
#D5D9DE |
border |
apache-slate |
#4A5568 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
apache-red |
#D22128 |
on-identity |
apache-white |
#FFFFFF |
primary |
apache-red |
#D22128 |
primary-hover |
apache-red-dark |
#A81920 |
accent |
apache-red |
#D22128 |
accent-hover |
apache-red-dark |
#A81920 |
mark |
apache-red |
#D22128 |
background |
apache-white |
#FFFFFF |
surface |
apache-off-white |
#F4F5F7 |
text-primary |
apache-black |
#0E1014 |
text-secondary |
apache-slate |
#4A5568 |
error |
apache-red-dark |
#A81920 |
success |
apache-slate |
#4A5568 |
border |
apache-light-gray |
#D5D9DE |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (5)
colorChoice → roles.colors.mark
- allowed: apache-red
- forbidden: apache-red-dark, apache-black, apache-slate, apache-gray
The Apache feather is rendered in Apache Red (#D22128). Substituting a black feather, a darker red, or any other fill changes the canonical Foundation mark and conflicts with the ASF Trademark Policy's requirement that the logo not be presented in a "confusingly similar" derivative form.
forbiddenTreatment → logo
- treatments: recolored, rotated, stretched, skewed, drop-shadow, gradient-fill, feather-detached-from-wordmark-without-approval, associated-with-non-apache-software
The ASF Trademark Policy forbids using Apache marks "in association with other companies' software or related services," and requires written approval from the VP, Brand Management for all non-hyperlink uses. Recoloring, rotation, gradient fills, and other ornamental treatments create confusingly similar derivatives that fall outside the policy's permitted scope.
contextRestriction → trademark.use
- forbiddenContexts: associated-with-third-party-software, implied-endorsement, non-hyperlink-use-without-approval, product-name-prefix-without-approval
The ASF Trademark Policy explicitly forbids using Apache marks alongside non-Apache software, implying ASF endorsement of a product or service, or using the marks in any non-hyperlink context without prior written approval from the VP, Brand Management. Project names (e.g., "Apache Kafka") must follow the ASF's specific naming guidance and cannot be prefixed onto third-party products.
contrastRatio → text-primary
- against:
background - minRatio:
7 - standard:
WCAG-AAA
Apache Black (#0E1014) on Apache White exceeds 18:1 — decisively clears WCAG AAA. The Foundation's documentation-first surfaces (apache.org, project sites, mailing-list archives) benefit from the strongest readable contrast.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The Apache Foundation's project-documentation mission makes broad legibility a load-bearing brand attribute.
⚠️ warning (1)
contrastRatio → roles.colors.primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Apache Red (#D22128) on Apache White sits around 5.0:1 — clears WCAG AA for body text. Apache Red Dark (#A81920) on White sits around 7.6:1 and clears AAA, making it the preferred fill for small-text interactive elements.
💡 recommendation (2)
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.5
ASF project documentation surfaces typically use a single humanist sans for heading and body. Maintain at least a 1.5× heading-to-body ratio to preserve hierarchy in long-form release notes, ADR-style design docs, and mailing-list archive pages.
compositionConstraint → roles.colors.identity
- pairsWith: apache-white, apache-off-white, apache-black
- doesNotPairWith: apache-red-dark
Apache Red reads cleanest as a feather on a white or off-white canvas, or reversed on the deep apache-black dark canvas. Placing it directly adjacent to Apache Red Dark muddies the mark; reserve the dark-red variant for hover states and interactive surfaces, not for the feather fill.
Provenance
- Source: https://www.apache.org/foundation/marks/
- License:
Proprietary — All Rights Reserved - Attribution: Apache, the Apache feather logo, the names of Apache projects, and associated marks are trademarks of The Apache Software Foundation. Brand-atoms' encoding draws from the ASF Trademark Policy and the canonical Apache Red value (#D22128) carried by the simple-icons project's "Apache" entry, matching the resolved fill in the official ASF feather logo distributed via apache.org/foundation/press/kit/.
- Imported:
2026-05-19 - Notes: The ASF Trademark Policy (apache.org/foundation/marks/) is the primary source for the trademark redistribution rules encoded below. Per that policy: ASF graphic logos are licensed to the public under the Apache License and derivative works are permitted, BUT (1) derivative logos applied to software cannot be "confusingly similar" to the originals, (2) ASF logos cannot be used "in association with other companies' software or related services", and (3) all non-hyperlink uses require "written approval" from the VP, Brand Management. The Foundation does not publish formal brand-color hex values on the marks page; the #D22128 value is the SVG-resolved canonical.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Apache Software Foundation
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.
Apache Software Foundation
A clear hierarchy in Apache Software Foundation'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
Apache Software Foundation
[email protected]font · heading
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
Source Code Pro
[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
→ apache-red #D22128 accent-hover
→ apache-red-dark #A81920 background
→ apache-white #FFFFFF border
→ apache-light-gray #D5D9DE error
→ apache-red-dark #A81920 identity
→ apache-red #D22128 mark
→ apache-red #D22128 on-identity
→ apache-white #FFFFFF primary
→ apache-red #D22128 primary-hover
→ apache-red-dark #A81920 success
→ apache-slate #4A5568 surface
→ apache-off-white #F4F5F7 text-primary
→ apache-black #0E1014 text-secondary
→ apache-slate #4A5568 Typography
code
→ mono Source Code Pro display
→ heading Inter prose
→ body Inter Palette mode mappings (from apache)
Light mode (15 roles)
accent
→ apache-red accent-hover
→ apache-red-dark background
→ apache-white border
→ apache-light-gray error
→ apache-red-dark primary
→ apache-red primary-hover
→ apache-red-dark success
→ apache-slate surface
→ apache-off-white surface-elevated
→ apache-white text-primary
→ apache-black text-secondary
→ apache-slate text-tertiary
→ apache-gray warning
→ apache-red warning-hover
→ apache-red-dark Dark mode (15 roles)
accent
→ apache-red accent-hover
→ apache-red-dark background
→ apache-black border
→ apache-slate error
→ apache-red-dark primary
→ apache-red primary-hover
→ apache-red-dark success
→ apache-light-gray surface
→ apache-charcoal surface-elevated
→ apache-charcoal text-primary
→ apache-white text-secondary
→ apache-light-gray text-tertiary
→ apache-gray warning
→ apache-red warning-hover
→ apache-red-dark Rules (8 typed constraints)
error · 5 rules
colorChoice roles.colors.mark allowed apache-red forbidden apache-red-dark, apache-black, apache-slate, apache-gray The Apache feather is rendered in Apache Red (#D22128). Substituting a black feather, a darker red, or any other fill changes the canonical Foundation mark and conflicts with the ASF Trademark Policy's requirement that the logo not be presented in a "confusingly similar" derivative form.
forbiddenTreatment logo treatments recolored, rotated, stretched, skewed, drop-shadow, gradient-fill, feather-detached-from-wordmark-without-approval, associated-with-non-apache-software The ASF Trademark Policy forbids using Apache marks "in association with other companies' software or related services," and requires written approval from the VP, Brand Management for all non-hyperlink uses. Recoloring, rotation, gradient fills, and other ornamental treatments create confusingly similar derivatives that fall outside the policy's permitted scope.
contextRestriction trademark.use forbiddenContexts associated-with-third-party-software, implied-endorsement, non-hyperlink-use-without-approval, product-name-prefix-without-approval The ASF Trademark Policy explicitly forbids using Apache marks alongside non-Apache software, implying ASF endorsement of a product or service, or using the marks in any non-hyperlink context without prior written approval from the VP, Brand Management. Project names (e.g., "Apache Kafka") must follow the ASF's specific naming guidance and cannot be prefixed onto third-party products.
contrastRatio text-primary against background minRatio 7 standard WCAG-AAA Apache Black (#0E1014) on Apache White exceeds 18:1 — decisively clears WCAG AAA. The Foundation's documentation-first surfaces (apache.org, project sites, mailing-list archives) benefit from the strongest readable contrast.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The Apache Foundation's project-documentation mission makes broad legibility a load-bearing brand attribute.
warning · 1 rule
contrastRatio roles.colors.primary against background minRatio 4.5 standard WCAG-AA Apache Red (#D22128) on Apache White sits around 5.0:1 — clears WCAG AA for body text. Apache Red Dark (#A81920) on White sits around 7.6:1 and clears AAA, making it the preferred fill for small-text interactive elements.
recommendation · 2 rules
fontPairing typography.heading requires body minSizeRatio 1.5 ASF project documentation surfaces typically use a single humanist sans for heading and body. Maintain at least a 1.5× heading-to-body ratio to preserve hierarchy in long-form release notes, ADR-style design docs, and mailing-list archive pages.
compositionConstraint roles.colors.identity pairsWith apache-white, apache-off-white, apache-black doesNotPairWith apache-red-dark Apache Red reads cleanest as a feather on a white or off-white canvas, or reversed on the deep apache-black dark canvas. Placing it directly adjacent to Apache Red Dark muddies the mark; reserve the dark-red variant for hover states and interactive surfaces, not for the feather fill.
Provenance
- Source
- https://www.apache.org/foundation/marks/
- License
Proprietary — All Rights Reserved- Attribution
- Apache, the Apache feather logo, the names of Apache projects, and associated marks are trademarks of The Apache Software Foundation. Brand-atoms' encoding draws from the ASF Trademark Policy and the canonical Apache Red value (#D22128) carried by the simple-icons project's "Apache" entry, matching the resolved fill in the official ASF feather logo distributed via apache.org/foundation/press/kit/.
- Imported
2026-05-19- Notes
- The ASF Trademark Policy (apache.org/foundation/marks/) is the primary source for the trademark redistribution rules encoded below. Per that policy: ASF graphic logos are licensed to the public under the Apache License and derivative works are permitted, BUT (1) derivative logos applied to software cannot be "confusingly similar" to the originals, (2) ASF logos cannot be used "in association with other companies' software or related services", and (3) all non-hyperlink uses require "written approval" from the VP, Brand Management. The Foundation does not publish formal brand-color hex values on the marks page; the #D22128 value is the SVG-resolved canonical.