Representing the DevRel Foundation brand in public should be done with care and consistency. Please contact us for permission and guidance on using brand assets.
The Developer Relations Foundation (also DevRel Foundation or DRF) is a community-driven organisation that supports the global developer relations community. We value growth, support, community, collaboration, and adaptability.
Our visual identity draws inspiration from typical imagery associated with growth (nature), adaptability (water), and physical documents as a nod towards strategy and planning. We embrace concepts like the golden ratio and rounded, fluid forms as well as stationery-like motifs.
Our color palette is designed to be accessible, warm, and professional. The system adapts seamlessly between light and dark modes.
The primary background color should be used as the main canvas for content. Secondary background colors provide subtle contrast for alternating sections, cards, and UI elements.
| Name | Swatch | Variable | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|---|
| Primary background | ||||||
| Secondary background 1 | ||||||
| Secondary background 2 |
| Name | Swatch | Variable | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|---|
| Primary background | ||||||
| Secondary background 1 | ||||||
| Secondary background 2 |
Our accent colors should be used strategically to draw attention to important elements and actions.
Any page should mostly consist of background and text colors, using accent colors to highlight information as required. On any page, mint/forest and sky/sea should make up the majority of the accent colors.
Light mode should feature the lighter colors as background colors for accentuated elements. Conversely, dark mode should feature the darker colors as background colors for accentuated elements. These can be swapped for minor highlighting.
| Name | Swatch | Variable | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|---|
| Mint | ||||||
| Sky | ||||||
| Agave | ||||||
| Sand |
| Name | Swatch | Variable | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|---|
| Forest | ||||||
| Sea | ||||||
| Hosta | ||||||
| Gold |
Our typography colors ensure readability while maintaining brand consistency.
| Name | Swatch | Variable | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|---|
| Main text | ||||||
| Link color |
| Name | Swatch | Variable | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|---|
| Main text | ||||||
| Link color |
Semantic colors for feedback, status badges, and alerts. Each state has a surface, text, and border token. In the site stylesheet, light-mode values are active by
default; body.dark-mode swaps to the -dark primitives automatically.
Utility classes: .state-success, .state-warning, .state-error, .state-info (surface + text + border). Text-only: .text-success, .text-warning, .text-error, .text-info.
| Name | Swatch | Variable | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|---|
| Success (surface) | ||||||
| Success (text) | ||||||
| Success (border) | ||||||
| Warning (surface) | ||||||
| Warning (text) | ||||||
| Warning (border) | ||||||
| Error (surface) | ||||||
| Error (text) | ||||||
| Error (border) | ||||||
| Info (surface) | ||||||
| Info (text) | ||||||
| Info (border) | ||||||
| Syntax string (code) |
| Name | Swatch | Variable | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|---|
| Success (surface) | ||||||
| Success (text) | ||||||
| Success (border) | ||||||
| Warning (surface) | ||||||
| Warning (text) | ||||||
| Warning (border) | ||||||
| Error (surface) | ||||||
| Error (text) | ||||||
| Error (border) | ||||||
| Info (surface) | ||||||
| Info (text) | ||||||
| Info (border) | ||||||
| Syntax string (code) |
These examples show recommended accent pairings in each color mode. You may swap them out for emphasis as required.
The majority of the hues used should be the initial green and the shade of brown/gold. Blues are to be used sparingly as accent colours to draw attention as required.
Always ensure sufficient contrast between text and background colors. Our color palette has been designed with accessibility in mind, but always verify contrast ratios when creating new combinations.
For text on colored backgrounds, use white text on dark colors and dark text on light colors to maintain a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.
Accent colors used as part of layout contrast should ideally be accompanied by other elements (borders, underlines, etc.) to show separation — especially when the saturation difference between the accent color and the background color is low. If solid borders are too heavy, experiment with dashed and dotted borders sparingly.
Our typography system uses Nunito for headings and Nunito Sans for body text. The type scale is fluid, adapting to different screen sizes while maintaining proportions.
We use sentence case for headings, titles, and labels — capitalizing only the first word and proper nouns. Sentence case feels more approachable and conversational than title case, which aligns with our friendly voice and usability values.
a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
Light (300) — Used sparingly for large headings
Regular (400) — Primary body text weight
Semibold (600) — Used for headings and emphasis
Bold (700) — Used for strong emphasis
Our type scale uses the golden ratio (1.618) to create a harmonious progression that matches our spacing system.
Primary body text uses the regular weight of Nunito Sans at Step 0. Line height is set to 1.6 for longer text blocks.
Important: Large blocks of text must respect the color mode — dark text on light backgrounds in light mode, and light text on dark backgrounds in dark mode.
Use bold for strong emphasis.
Use italic for subtle emphasis or technical terms.
Use links for interactive elements.
Use monospace for code snippets.
Use small text for supplementary information.
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-3); }
.text-m { font-size: var(--step-0); } The fluid scale adapts smoothly between viewport sizes. Each step is approximately 1.618 times larger than the previous, aligning with our spacing system and brand values.
Download brand assets ↗ from the GitHub repository.
 logo-dark-text.svg |  logo-light-text.svg |
 logo.svg |  logo-gray.png |
Our brand embraces organic shapes and rounded forms throughout our visual language. These elements reflect our approachable nature and represent the continuous, supportive relationship we foster within developer communities.
We use a consistent border radius scale across all UI elements to maintain visual harmony. We should choose the roundest option preferable, screen size and layout permitting. Try to use the border radii at a specific screen size for consistency.
These foundational motifs can be used as decorative elements throughout our brand materials.
Our dotted background pattern is reminiscent of journal grids, representing structure, organization, and thoughtful planning.
Use this pattern for backgrounds, section dividers, or as subtle texture in documentation materials.
Concentric circles represent growth, expansion, and the ripple effect of knowledge sharing within communities.
Use as decorative elements in headers, backgrounds, or as visual metaphors for community impact.
Pill-shaped elements are used for buttons, tags, and form inputs to create a friendly, accessible interface.
The elongated rounded form provides ample touch targets while maintaining our organic visual language.
Large, low-contrast circles create depth and visual interest in backgrounds without overwhelming content.
Use these subtle circular forms to add dimension to sections while maintaining readability.
These motifs can be combined and adapted to create a rich visual language across different applications.
Our spacing system uses the golden ratio (1.618) to create an organic, harmonious flow that mirrors the natural growth patterns reflected in our leaf-inspired logo.
These pairs show how spacing transitions between two adjacent sizes as the viewport changes.
This example shows how our spacing system creates harmonious components:
October 15-16, 2023 • Virtual Event
Join us for a two-day intensive workshop on designing scalable and developer-friendly APIs. Learn best practices from industry experts and apply them in hands-on sessions.
var(--space-m) — Creates comfortable content areavar(--space-s) — Balanced header spacingvar(--space-xs) — Tight grouping with datevar(--space-s) — Separates content sectionsvar(--space-s) — Creates visual hierarchyvar(--space-xs) var(--space-s) — Comfortable touch targetvar(--space-xs) — Related actions spacingOur grid system uses the same fluid spacing scale to create harmonious layouts that adapt to different screen sizes, inspired by Utopia's approach but customized to follow our golden ratio theme.
We constrain content to a maximum width of 1240px (77.5rem) with fluid gutters on either side that scale proportionally with the viewport.
.u-container {
max-width: var(--grid-max-width);
padding-inline: var(--grid-gutter);
margin-inline: auto;
width: 100%;
}Our grid uses fluid gutters based on our spacing scale, ensuring consistent spacing throughout layouts.
This grid automatically adjusts the number of columns based on available space.
This grid uses the golden ratio (1:1.618) for column proportions.
Our grid system provides several approaches to layout:
<div class="u-grid-fluid">
<div>Auto-sizing column</div>
<div>Auto-sizing column</div>
</div>
<div class="u-grid-golden">
<div>Smaller column (1 part)</div>
<div>Larger column (1.618 parts)</div>
</div>
<div class="u-grid u-grid-3">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
</div> All grids automatically adjust to single column on mobile devices, maintaining the harmonious spacing. The fluid nature of our grid system means it adapts to any viewport size without requiring breakpoints, following the same organic growth principles as our spacing and typography systems.
We prioritize images of DevRel practitioners — preferably our own community members — actively doing DevRel work: speaking, mentoring, collaborating, or building together.
Generic photos don't add value to a page or post.
There are two points of perspective from which we write:
In both cases, we write in a natural, friendly, and respectful voice. We write for a global audience. We represent the DRF and LF; we should be mindful of this in our conduct and content.
A formal register isn’t conducive to friendliness, so we generally avoid this unless necessary. Contractions and natural phrasing are fine. We don’t write exactly as we speak; most people’s speech tends to be verbose and colloquial.
Clarity and conciseness is preferred over personality. Tone may reflect the individual writing but shouldn’t interfere with the clarity of the message.
If posting on social media on behalf of the DRF, extra consideration should be taken to ensure conciseness.
We recommend against using AI for any copy unless you are familiar with using it as a part of the workflow and maintaining your own authentic voice.
Including the full name on first mention connects the formal name, common brand name, and acronym for readers and search engines. DRF is already in public use across the website, blog, GitHub, LinkedIn, and community channels — this standard reflects that practice.
When drafting content for others to publish (e.g. blog posts), write in plain text and use heading levels:
Title (H1): the article titleSection header (H2): each major sectionSubsection (H3): supporting points when neededThe person publishing can then apply the correct heading levels on the site. This keeps content scannable, accessible, and easier for search engines to understand.