Brand and design system
This design system provides guidelines, components, and assets to ensure consistency and quality in our projects. It is the single source of truth for design for conda-store and to help streamline the design-development process.
Brand assets
These guidelines and assets are for all conda-store branding, including web properties, promotion material, presentations, and more:
📝 Brand guidelines PDF (incudes details about colors, typography, iconography, and more)
📦 Logos (PNG and SVG files with various logo options)
Brand colors (quick reference)
Main colors
| Shade name | HEX color code | Example swatch |
|---|---|---|
| Dark green | #40AF2F | |
| Light green | #A8E29F |
Accent colors
| Shade name | HEX color code | Example swatch |
|---|---|---|
| Orange | #FFAB40 | |
| Red | #FF6640 |
Additional colors
| Shade name | HEX color code | Example swatch |
|---|---|---|
| Dark gray | #3C3C3B | |
| Light gray | #999FA5 | |
| White | #FFFFFF |
Typography (quick reference)
- Headline typeface: Heebo Bold
- Use for headlines, bold statements, large callouts
- Use in the "Dark Gray" color mentioned above
- Body typeface: Heebo Regular
- Use for body copy, captions
- Use in the "Dark Gray" color mentioned above
UI/UX style guide
This section describes the design guidelines for conda-store-ui and other applications and frontend-interfaces developed for conda-store.
Color palettes
Primary (Green)
Primary color across the theme.
| Shade name | HEX color code | Example swatch |
|---|---|---|
| 50 | #D6EEDC | |
| 100 | #ADDCBA | |
| 200 | #85CB97 | |
| 300 (light) | #5CB975 | |
| 400 | #36AB55 | |
| 500 (main) | #298642 | |
| 600 | #206532 | |
| 700 (dark) | #144321 | |
| 800 | #0A2210 | |
| 900 | #051108 | |
| Contrast Text Color | #FFFFFF |
Secondary (Gray)
Secondary color across the theme.
| Shade name | HEX color code | Example swatch |
|---|---|---|
| 50 | #F7F8F8 | |
| 100 | #E1E3E4 | |
| 200 | #C3C7CB | |
| 300 (light) | #A6ACB2 | |
| 400 | #90969C | |
| 500 (main) | #5B5F63 | |
| 600 | #44474A | |
| 700 (dark) | #3C3C3B | |
| 800 | #242628 | |
| 900 | #1A1C1D | |
| Contrast Text Color | #FFFFFF |
Accent (Purple)
Accent color across the theme.
| Shade name | HEX color code | Example swatch |
|---|---|---|
| 50 | #E7E0F0 | |
| 100 | #D0C0E5 | |
| 200 | #B9A1DA | |
| 300 (light) | #A78BD0 | |
| 400 | #8966C2 | |
| 500 (main) | #6643A8 | |
| 600 | #55309D | |
| 700 (dark) | #3B216E | |
| 800 | #2F1957 | |
| 900 | #231240 | |
| Contrast Text Color | #FFFFFF |
Foundation (Purple)
Base black and white colors for the system.
| Shade name | HEX color code | Example swatch |
|---|---|---|
| White | #FFFFFF | |
| Black | #000000 |
Semantic colors
Foregrounds (text and icons), backgrounds, and borders that highlight affordance or the meaning of elements in the UI.
| Shade name | HEX color code | Example swatch |
|---|---|---|
| Error | #D72D47 | |
| Warning | #F66A0A | |
| Success | #00843F | |
| Info | #276BE9 |