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 | |