Numagora

Style Guide

This page outlines the current styles and standards for the Numagora website.

Colors

An overview of this site's brand colors.

Project Colors

Colors & Shades

Transparencies

Project Colors

var(--primary-medium)

Project Shades

Project Transparencies

primary

var(--primary)

var(--primary-ultra-light)

var(--primary-light)

var(--primary-medium)

var(--primary-dark)

var(--primary-ultra-dark)

var(--primary-comp)

secondary

var(--secondary)

var(--secondary-ultra-light)

var(--secondary-light)

var(--secondary-medium)

var(--secondary-dark)

var(--secondary-ultra-dark)

var(--secondary-comp)

accent

var(--accent)

var(--accent-ultra-light)

var(--accent-light)

var(--accent-medium)

var(--accent-dark)

var(--accent-ultra-dark)

var(--accent-comp)

base

var(--base)

var(--base-ultra-light)

var(--base-light)

var(--base-medium)

var(--base-dark)

var(--base-ultra-dark)

var(--base-comp)

shade

var(--shade)

var(--shade-ultra-light)

var(--sahde-light)

var(--shade-medium)

var(--shade-dark)

var(--shade-ultra-dark)

primary transparencies

var(--primary-trans-10)

var(--primary-trans-20)

var(--primary-trans-40)

var(--primary-trans-60)

var(--primary-trans-80)

var(--primary-trans-90)

primary light transparencies

var(--primary-light-trans-10)

var(--primary-light-trans-20)

var(--primary-light-trans-40)

var(--primary-light-trans-60)

var(--primary-light-trans-80)

var(--primary-light-trans-90)

primary ultra dark transparencies

var(--primary-ultra-dark-trans-10)

var(--primary-ultra-dark-trans-20)

var(--primary-ultra-dark-trans-40)

var(--primary-ultra-dark-trans-60)

var(--primary-ultra-dark-trans-80)

var(--primary-ultra-dark-trans-90)

secondary transparencies

var(--secondary-trans-10)

var(--secondary-trans-20)

var(--secondary-trans-40)

var(--secondary-trans-60)

var(--secondary-trans-80)

var(--secondary-trans-90)

secondary light transparencies

var(--secondary-light-trans-10)

var(--secondary-light-trans-20)

var(--secondary-light-trans-40)

var(--secondary-light-trans-60)

var(--secondary-light-trans-80)

var(--secondary-light-trans-90)

secondary ultra dark transparencies

var(--secondary-ultra-dark-trans-10)

var(--secondary-ultra-dark-trans-20)

var(--secondary-ultra-dark-trans-40)

var(--secondary-ultra-dark-trans-60)

var(--secondary-ultra-dark-trans-80)

var(--secondary-ultra-dark-trans-90)

accent transparencies

var(--accent-trans-10)

var(--accent-trans-20)

var(--accent-trans-40)

var(--accent-trans-60)

var(--accent-trans-80)

var(--accent-trans-90)

accent light transparencies

var(--accent-light-trans-10)

var(--accent-light-trans-20)

var(--accent-light-trans-40)

var(--accent-light-trans-60)

var(--accent-light-trans-80)

var(--accent-light-trans-90)

accent ultra dark transparencies

var(--accent-ultra-dark-trans-10)

var(--accent-ultra-dark-trans-20)

var(--accent-ultra-dark-trans-40)

var(--accent-ultra-dark-trans-60)

var(--accent-ultra-dark-trans-80)

var(--accent-ultra-dark-trans-90)

base transparencies

var(--base-trans-10)

var(--base-trans-20)

var(--base-trans-40)

var(--base-trans-60)

var(--base-trans-80)

var(--base-trans-90)

base light transparencies

var(--base-light-trans-10)

var(--base-light-trans-20)

var(--base-light-trans-40)

var(--base-light-trans-60)

var(--base-light-trans-80)

var(--base-light-trans-90)

base ultra dark transparencies

var(--base-ultra-dark-trans-10)

var(--base-ultra-dark-trans-20)

var(--base-ultra-dark-trans-40)

var(--base-ultra-dark-trans-60)

var(--base-ultra-dark-trans-80)

var(--base-ultra-dark-trans-90)

shade transparencies

var(--shade-trans-10)

var(--shade-trans-20)

var(--shade-trans-40)

var(--shade-trans-60)

var(--shade-trans-80)

var(--shade-trans-90)

shade light transparencies

var(--shade-light-trans-10)

var(--shade-light-trans-20)

var(--shade-light-trans-40)

var(--shade-light-trans-60)

var(--shade-light-trans-80)

var(--shade-light-trans-90)

shade ultra dark transparencies

var(--shade-ultra-dark-trans-10)

var(--shade-ultra-dark-trans-20)

var(--shade-ultra-dark-trans-40)

var(--shade-ultra-dark-trans-60)

var(--shade-ultra-dark-trans-80)

var(--shade-ultra-dark-trans-90)

Typography

Below is an overview of responsive typography sizes and weights for this site. These are computed from a base size and a mathematical scale.

Headings

H1 (--xxl)

Heading 1 Regular

Heading 1 Medium

Heading 1 Bold

H2 (--xl)

Heading 2 Regular

Heading 2 Medium

Heading 2 Bold

H3 (--l)

Heading 3 Regular

Heading Medium

Heading 3 Bold

H4 (--m)

Heading 4 Regular

Heading 4 Medium

Heading 4 Bold

H5 (--s)

Heading 5 Regular

Heading Medium

Heading 5 Bold

H6 (--xs)

Heading 6 Regular

Heading 6 Medium

Heading 6 Bold

Body Text

BODY TEXT (--m)

Text m Regular

Text m Medium

Text m Bold

SMALL TEXT (--s)

Text s Regular

Text s Medium

Text s Bold

XTRA SMALL TEXT (--xs)

Text xs Regular

Text xs Medium

Text xs Bold

Examples

Heading 1 (H1)

This is large text. 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.