Skip to main content

conda-forge Style guide

We're excited to introduce the conda-forge brand guide: your go-to resource for all things conda-forge branding. This document sets the stage for how we want to showcase the conda-forge brand consistently and accurately.

Whether you're a part of our team, a collaborator, or an external partner, this guide is here to help you represent conda-forge in the best possible way. We believe that by following these guidelines, we can keep our brand's values at the forefront and maintain effective communication with everyone. Thanks for being a part of our journey!


Primary Logo - Logo with text (Light Mode)

Primary Logo - Logo with text (Dark Mode)

Secondary Logo - Logo without text


Color Paletteโ€‹

Gradientโ€‹

#00695c

+

#26a69a

=

(60deg, #00695c 20%, #26a69a 80%)

Logo Colorโ€‹

#000000
#FFFFFF

Light Themeโ€‹

Primary color and background color
#008478
#FFFFFF
Color variations (light to dark)
#b2dfdb
#80cbc4
#26a69a
#007466
#00695c
#004d40

Dark themeโ€‹

Primary color and background color
#4db6ac
#1B1B1B
Color variations (light to dark)
#e0f2f1
#b2dfdb
#80cbc4
#009688
#00897b
#00796b

Additional colorsโ€‹

System Colors
#1976d2
Information
#388e3c
Success
#ef6c00
Warning
#d84315
Danger

Typographyโ€‹

Below are various typography elements. The header font for conda-forge.org is Montserrat and the body font is Inter. It looks serious and neat, not too loud. It has all the letters for many languages and comes in different styles to always work well.


Headingsโ€‹

Header one (2rem)

Header two (1.5rem)

Header three (1.25rem)

Header four (1rem)

Header five (0.875rem)
Header six (0.85rem)

Paragraphsโ€‹

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. (size 1rem)


Link to somewhere

Admonitionsโ€‹

note

Some content with Markdown syntax. The note is normally used for general information that you want to stand out.

tip

Some content with Markdown syntax. The tip is normally used for giving readers helpful advice and suggestions.

info

Some content with Markdown syntax. The info element is for adding extra emphasis to general information.

caution

Some content with Markdown syntax. Caution can be used to advise the reader to act carefully.

danger

Some content with Markdown syntax. Caution can be used to point out something that people should be warned about.


Code Blocksโ€‹

Code Blockโ€‹

parser = argparse.ArgumentParser(description='Generate the conda-forge html.')
parser.add_argument('--html-source', help="The location of the conda-forge.github.io checkout.",
default=os.path.abspath(os.path.dirname(os.path.dirname(__file__))))

args = parser.parse_args()

html_source = args.html_source
loader = FileSystemLoader(html_source)
env = Environment(loader=loader)

Code block with a titleโ€‹

/src/conf.py
project = 'conda-forge'
copyright = '2016-%s, conda-forge' % datetime.datetime.now().strftime("%Y")
author = 'conda-forge'

Code Block with Tabsโ€‹

I am Windows.


Quotesโ€‹

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Listsโ€‹

Ordered Listsโ€‹

  1. List A
  2. List B
  3. List C

Ordered Sub Listsโ€‹

  1. List A
  2. List B
    1. List a
    2. List b

Unordered Listsโ€‹

  • List A
  • List B
  • List C

Unordered Sub Listsโ€‹

  • List A
  • List B
    • List a
    • List b

Buttonsโ€‹

Typesโ€‹


Sizesโ€‹


Tablesโ€‹

TablesItemItem
1content12
2content12
3content12

Figma fileโ€‹

Additional Figma file for colors and components


Sourcesโ€‹

Most CSS redefinitions are done in src/css/custom.css. Check for --ifm-* variables in the :root nodes.