Branding
Official ReleaseTag brand assets, colors, and typography guidelines. Please use these consistently when representing the brand.
Logos
The ReleaseTag logo comes in three forms: the lockup (logomark + wordmark), the logomark (icon only), and the wordmark (text only). Each has a light variant (for light backgrounds), a dark variant (for dark backgrounds), and monochrome black & white variants. Available in SVG and PNG formats.
Lockup
Logomark
Wordmark
Colors
ReleaseTag uses a semantic color system with distinct tints for light and dark mode. Each color role has a pair of values to ensure proper contrast on both backgrounds.
Primary tint
Emerald green is the primary brand color, used for buttons, links, active states, and key UI accents. In dark mode the brighter #58e6a0 variant is used for better contrast against dark backgrounds.
Light mode
Emerald 700
#047857
Text, links, button backgrounds 5.5:1
Emerald 600
#059669
Large text, decorative, icons 3.8:1
Dark mode
Accent
#58e6a0
Links, highlighted text, landing CTA 11.2:1
Emerald 400
#34d399
Accent text, status indicators 9.2:1
Secondary tint
Purple is used as a secondary accent for categories like feature requests, pull request badges, and the documentation site.
Light mode
Purple 600
#9333ea
Feature request badges, docs links
Dark mode
Purple 400
#c084fc
Feature request badges, docs links
Status colors
Semantic colors for communicating state. Each has a light/dark pair for proper contrast. Ratios shown are against the default background (white / gray-900).
| Role | Light | Dark |
|---|---|---|
| Error / Danger | #dc26264.8:1 | #f871716.4:1 |
| Warning | #b453095.0:1 | #fbbf2410.6:1 |
| Info | #2563eb5.2:1 | #60a5fa7.0:1 |
| Neutral | #4b55637.6:1 | #9ca3af7.0:1 |
Surfaces & backgrounds
Light mode
Dark mode
Full emerald scale
The complete primary palette for when you need intermediate shades — tinted backgrounds, badges, and borders.
50
100
200
300
400
500
600
700
800
900
Typography
Fonts
Primary — Geist Sans
The quick brown fox jumps over the lazy dog
Used for all body text, headings, and UI elements throughout the application.
Monospace — Geist Mono
The quick brown fox jumps over the lazy dog
Used for code snippets, inline code, and technical content.
Landing — JetBrains Mono
The quick brown fox jumps over the lazy dog
Used for headings and emphasis on the marketing landing page.
Landing body — DM Sans
The quick brown fox jumps over the lazy dog
Used for body text and descriptions on the marketing landing page.
Type scale
Headings use bold weight. Body text uses the default weight with generous line height for readability.
Accessibility
All recommended text colors meet WCAG 2.1 AA contrast requirements (4.5:1 for normal text, 3:1 for large text) against their intended backgrounds.
- Primary text in light mode — Use Emerald 700 (
#047857, 5.5:1) for body text and links. Emerald 600 (#059669, 3.8:1) is only suitable for large text (18px+/bold 14px+), icons, and decorative elements. - Buttons — White text on Emerald 700 passes AA (5.5:1). For Emerald 600 button backgrounds, use bold text at 14px+ to qualify as large text (3.8:1 passes the 3:1 large-text threshold).
- Warning text in light mode — Use Amber 700 (
#b45309, 5.0:1) instead of Amber 600 (#d97706, 3.2:1) which fails AA. - Dark mode — All dark-mode tints (Emerald 400, Purple 400, Red 400, Amber 400, Blue 400) exceed 6:1 against gray-900 and are well above AA.
- Secondary text — Gray 500 on white (4.8:1) and Gray 400 on gray-900 (7.0:1) both pass AA. Avoid going lighter than Gray 500 in light mode for readable text.
Usage guidelines
- Always use the logo on a contrasting background — light logo on dark backgrounds and dark logo on light backgrounds.
- Maintain clear space around the logo equal to at least the height of the logo mark.
- Do not stretch, rotate, or alter the logo in any way.
- Use the emerald palette for primary actions and the landing palette only on marketing pages.
- Never use color alone to convey meaning — pair it with text, icons, or patterns for colorblind users.