Overview
The Community + Code brand is designed to combine humanism with technical expertise. We use friendly, sans-serif fonts for typography because they feel inclusive and welcoming.
Community is stylized in italics because community is always more important than code. A + is used instead of & (with some exceptions) to reflect the union of community and code. Abbreviations also use the +, e.g. C+C (✅ good) rather than C&C (❌ bad).
Typography
We use Source Sans 3 (an updated version of Source Sans Pro) for body text and the Community + Code logo; a simple, readable, open source font designed by Paul D. Hunt for Adobe.
When applicable, we use Victor Mono for code blocks, an open source, monospace font specifically designed for software development.
Colors
The Community + Code color palette is based on the Solarized Dark theme, designed for optimal readability and reduced eye strain. Our color system balances technical aesthetics with warm, human touches.
Primary Colors
Terminal Blue
#268BD2
Primary accent color. Used for buttons, links, and interactive elements.
Warm Magenta
#D33682
Secondary accent color. Used for emphasis, hover states, and error messaging.
Soft Cyan
#2AA198
Tertiary accent. Used for code blocks and syntax highlighting.
Community Orange
#CB4B16
Warmth accent. Represents the human side of the community.
UI Colors
Deep Base
#002B36
Primary background color for the site.
Elevated Surface
#073642
Raised UI elements, cards, and input fields.
Text Colors
Bright Text
#FFFFFF
Primary text color for body content and headings.
Muted Text
#93A1A1
Secondary text, metadata, and de-emphasized content.
Link Blue
#7AC2F0
Default link color with enhanced contrast for accessibility.
Border
#586E75
Borders, dividers, and subtle separators.
Accessibility
All color combinations meet WCAG AA contrast requirements for accessibility. Link Blue (#7AC2F0) provides enhanced contrast against dark backgrounds, and Muted Text (#93A1A1) meets minimum contrast standards for secondary content.
Logo
The Community + Code logo and favicon uses Source Sans for the ampersand, surrounded by carrot brackets in Victor Mono. An ampersand is used here rather than the + because an ampersand is a more human and organic symbol. In this context, without the wordmark, the ampersand carries the sense of people first.
The logo without the wordmark should be used primarily for profile pictures and favicons where square or round icons are recommended.
Wordmark
The Community + Code wordmark again uses Source Sans entirely with “code” stylized in carrot brackets, broken over two lines with community italicized as the primary focus. Where applicable, it’s recommended to use the wordmark over the logo.
Logo & wordmark combined
The wordmark can be combined with the logo where the wordmark is modifying the logo. The logo is generally presented first/above with the wordmark following. Neither the logo nor the wordmark should be modified from the originals (no fauxgos or fauxmarks).