Skip to main content

conda-forge Styleguide

Introducing the conda-forge brand guide: a comprehensive resource that defines the guiding principles and standards for the consistent representation of the conda-forge brand. This document serves as a valuable reference for our team members, collaborators, and external partners, ensuring that the conda-forge brand is uniformly, accurately, and appropriately presented. By adhering to these guidelines, we maintain alignment with the core values of our brand and uphold effective communication.


Primary Logo - Logo with text (Light Mode)

Primary Logo - Logo with text (Dark Mode)

Secondary Logo - Logo without text


Color Palette

Gradient

#FF3664

+

#FF4B2B

=

(60deg, #FF3664 0%, #FF4B2B 100%)

Logo Color

#000000
#FFFFFF

Light Theme

Primary color and background color
#B34400
#FFFFFF
Color variations (light to dark)
#E95800
#CE4E00
#C54B00
#B34400
#A13D00
#983A00
#7D3000

Dark theme

Primary color and background color
#FF5501
#1B1B1B
Color variations (light to dark)
#FF884E
#FF6F27
#FF661B
#FF5501
#E64C00
#DA4800
#B33B00

Additional colors

System Colors
#01C3E3
Information
#00CD66
Success
#FF8C00
Warning
#FF4649
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 = u'conda-forge'
copyright = u'2016-%s, conda-forge' % datetime.datetime.now().strftime("%Y")
author = u'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