diff --git a/docusaurus-docs/community/assets/conda-store-brand-guidelines.pdf b/docusaurus-docs/community/assets/conda-store-brand-guidelines.pdf new file mode 100644 index 000000000..6f62d2789 Binary files /dev/null and b/docusaurus-docs/community/assets/conda-store-brand-guidelines.pdf differ diff --git a/docusaurus-docs/community/assets/logos/conda-store-logo-horizontal-lockup-black.png b/docusaurus-docs/community/assets/logos/conda-store-logo-horizontal-lockup-black.png new file mode 100644 index 000000000..1ae333287 Binary files /dev/null and b/docusaurus-docs/community/assets/logos/conda-store-logo-horizontal-lockup-black.png differ diff --git a/docusaurus-docs/community/assets/logos/conda-store-logo-horizontal-lockup-black.svg b/docusaurus-docs/community/assets/logos/conda-store-logo-horizontal-lockup-black.svg new file mode 100644 index 000000000..727555912 --- /dev/null +++ b/docusaurus-docs/community/assets/logos/conda-store-logo-horizontal-lockup-black.svg @@ -0,0 +1,124 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docusaurus-docs/community/assets/logos/conda-store-logo-horizontal-lockup-white.png b/docusaurus-docs/community/assets/logos/conda-store-logo-horizontal-lockup-white.png new file mode 100644 index 000000000..5c91f85ee Binary files /dev/null and b/docusaurus-docs/community/assets/logos/conda-store-logo-horizontal-lockup-white.png differ diff --git a/docusaurus-docs/community/assets/logos/conda-store-logo-horizontal-lockup-white.svg b/docusaurus-docs/community/assets/logos/conda-store-logo-horizontal-lockup-white.svg new file mode 100644 index 000000000..0e71b7732 --- /dev/null +++ b/docusaurus-docs/community/assets/logos/conda-store-logo-horizontal-lockup-white.svg @@ -0,0 +1,124 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docusaurus-docs/community/assets/logos/conda-store-logo-horizontal-lockup.png b/docusaurus-docs/community/assets/logos/conda-store-logo-horizontal-lockup.png new file mode 100644 index 000000000..9900d98f3 Binary files /dev/null and b/docusaurus-docs/community/assets/logos/conda-store-logo-horizontal-lockup.png differ diff --git a/docusaurus-docs/community/assets/logos/conda-store-logo-horizontal-lockup.svg b/docusaurus-docs/community/assets/logos/conda-store-logo-horizontal-lockup.svg new file mode 100644 index 000000000..f0b0b7e6f --- /dev/null +++ b/docusaurus-docs/community/assets/logos/conda-store-logo-horizontal-lockup.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docusaurus-docs/community/assets/logos/conda-store-logo-vertical-lockup-black.png b/docusaurus-docs/community/assets/logos/conda-store-logo-vertical-lockup-black.png new file mode 100644 index 000000000..fea417afb Binary files /dev/null and b/docusaurus-docs/community/assets/logos/conda-store-logo-vertical-lockup-black.png differ diff --git a/docusaurus-docs/community/assets/logos/conda-store-logo-vertical-lockup-black.svg b/docusaurus-docs/community/assets/logos/conda-store-logo-vertical-lockup-black.svg new file mode 100644 index 000000000..3e8052a22 --- /dev/null +++ b/docusaurus-docs/community/assets/logos/conda-store-logo-vertical-lockup-black.svg @@ -0,0 +1,124 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docusaurus-docs/community/assets/logos/conda-store-logo-vertical-lockup-white.png b/docusaurus-docs/community/assets/logos/conda-store-logo-vertical-lockup-white.png new file mode 100644 index 000000000..40204dd5d Binary files /dev/null and b/docusaurus-docs/community/assets/logos/conda-store-logo-vertical-lockup-white.png differ diff --git a/docusaurus-docs/community/assets/logos/conda-store-logo-vertical-lockup-white.svg b/docusaurus-docs/community/assets/logos/conda-store-logo-vertical-lockup-white.svg new file mode 100644 index 000000000..f1f4fb05a --- /dev/null +++ b/docusaurus-docs/community/assets/logos/conda-store-logo-vertical-lockup-white.svg @@ -0,0 +1,124 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docusaurus-docs/community/assets/logos/conda-store-logo-vertical-lockup.png b/docusaurus-docs/community/assets/logos/conda-store-logo-vertical-lockup.png new file mode 100644 index 000000000..1e3fc9d66 Binary files /dev/null and b/docusaurus-docs/community/assets/logos/conda-store-logo-vertical-lockup.png differ diff --git a/docusaurus-docs/community/assets/logos/conda-store-logo-vertical-lockup.svg b/docusaurus-docs/community/assets/logos/conda-store-logo-vertical-lockup.svg new file mode 100644 index 000000000..941d6a920 --- /dev/null +++ b/docusaurus-docs/community/assets/logos/conda-store-logo-vertical-lockup.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docusaurus-docs/community/assets/logos/conda-store-symbol-only.png b/docusaurus-docs/community/assets/logos/conda-store-symbol-only.png new file mode 100644 index 000000000..940656d35 Binary files /dev/null and b/docusaurus-docs/community/assets/logos/conda-store-symbol-only.png differ diff --git a/docusaurus-docs/community/assets/logos/conda-store-symbol-only.svg b/docusaurus-docs/community/assets/logos/conda-store-symbol-only.svg new file mode 100644 index 000000000..223e2f364 --- /dev/null +++ b/docusaurus-docs/community/assets/logos/conda-store-symbol-only.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docusaurus-docs/community/design.md b/docusaurus-docs/community/design.md index 63acf3f80..25f185799 100644 --- a/docusaurus-docs/community/design.md +++ b/docusaurus-docs/community/design.md @@ -2,4 +2,130 @@ description: Brand design assets --- -# Brand and design assets +# 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)](https://github.com/conda-incubator/conda-store/tree/main/docusaurus-docs/community/assets/conda-store-brand-guidelines.pdf) + +📦 [Logos (PNG and SVG files with various logo options)](https://github.com/conda-incubator/conda-store/tree/main/docusaurus-docs/community/assets/logos) + + +### 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 |
|