Brand Kit

Guidelines and resources for building UIs that align with the Codecannon brand identity.

Logo

The Codecannon logo consists of two elements: the symbol and the wordmark. Use the full logo wherever possible. The symbol alone may be used when space is limited, such as favicons or app icons.

Full logo (dark background)

Full logo (light background)

Symbol only

Wordmark only

Logo usage guidelines

Maintain clear space around the logo equal to the height of the symbol.
Do not stretch, rotate, recolor, or add effects to the logo.
The logo works best on dark backgrounds. On light backgrounds, use the inverted (black) variant.
Minimum size: 24px height for the symbol, 120px width for the full logo.

Colors

Our color palette is built around a high-contrast, dark-first aesthetic. The neon yellow accent is our most recognizable brand element.

Primary brand colors

Yellow (Primary Accent)#EEFF01--color-yellow

Dark Grey (Background)#1A171C--color-dark-grey

Black#000000--color-black

White#FFFFFF--color-white

Secondary colors

Void Purple#260C63--color-void-purple

Purple#C9C0E1--color-purple

Dark Purple#868CC5--color-dark-purple

Lila#E6E9F1--color-lila

Cream#EFF1E6--color-cream

Red#E61300--color-red

Blue#2D5BCA--color-blue

Slate#383943--color-slate

Stone#4D4D4D--color-stone

App UI color scales (PrimeVue tokens)

The application UI uses PrimeVue with a custom Aura-based preset. These are the extended color scales used for semantic UI elements.

Yellow scale

100

200

300

400

500

600

700

800

900

950

Green scale

100

200

300

400

500

600

700

800

900

950

Red scale

100

200

300

400

500

600

700

800

900

Blue scale

100

200

300

400

500

600

700

800

900

950

Typography

Codecannon uses two typefaces from the Funnel family, loaded via Google Fonts.

Display fontFunnel DisplayUsed for headings (h1–h5). Weight: 300 (light).font-family: var(--font-family-display);

Sans fontFunnel SansUsed for body text, labels, and UI elements.font-family: var(--font-family-sans);

Type scale

h1100px / 1.05 line-heightMobile: 38px

Heading 1

h280px / 1.0 line-heightMobile: 35px

Heading 2

h356px / 52px line-heightMobile: 36px

Heading 3

h432px / 36px line-heightMobile: 24px

Heading 4

h524px / 32px line-heightMobile: 20px

Heading 5

Body (p)20px / 26px line-heightMobile: 16px

Body text sample for reference.

Small (p.small)18px / 1.4 line-heightMobile: 14px

Small text sample for reference.

Buttons

The website uses a custom Button component with several variants. The application UI uses PrimeVue buttons with matching semantic tokens.

Website button variants

color="white"

color="black"

color="yellow"

color="void-purple"

color="white" empty

color="black" empty

color="white" dotted

color="black" dotted

font="display"

font="sans" (default)

Button guidelines

Use solid buttons for primary actions (e.g. "Open app", "Get Started").
Use outlined (empty) buttons for secondary actions.
Use dotted buttons for navigation links in the header.
The display font variant is used for prominent CTAs.
Default border-radius is 6.5px, minimum height is 48px.

Spacing & Layout

Consistent spacing and layout patterns ensure visual harmony across all Codecannon surfaces.

Page sections

All page sections use horizontal padding that adapts to screen width:

Desktop: 80px horizontal padding
Tablet (<800px): 40px
Mobile (<500px): 20px

Content within sections is constrained to a max-width of 1350px.

Border radius

Buttons: 6.5px
Cards: 16px
Images (blog): 16px
Header bar: 8px (collapses to 0 on scroll)

Header

The sticky header uses the brand yellow (#EEFF01) as its background. On scroll, it transitions from a floating rounded bar (16px margin, 8px radius) to a full-width bar with backdrop blur.

Dark-first approach

The default background is --color-dark-grey (#1A171C) with light text. Content sections (like blog) may use white backgrounds with dark text. The application UI enforces color-scheme: only dark.

Application UI tokens

The Codecannon app uses PrimeVue with a custom preset based on the Aura theme. All component tokens are forced into dark mode using the .codecannon-dark selector.

Framework

PrimeVue with definePreset(Aura, ...). Custom primitive and semantic color overrides. Components use --p-* CSS variables at runtime.

Primary color

In dark mode (the only mode), primary maps to a white scale. Buttons and tags with severity="contrast" use the brand yellow.

Semantic severities

Primary: White on dark surfaces
Contrast: Yellow (#EEFF01) — brand accent
Success: Green (#249D44)
Info: Cyan/Lila (#E6E9F1)

Typography in app

The app uses Funnel Sans as the primary font at a base size of 15px. Headings inherit size and weight, set contextually per component.

Do's and don'ts

Do

Use the neon yellow as a highlight, not as a background for large areas of text.
Pair dark backgrounds with light text and vice versa for readability.
Use Funnel Display for headings and Funnel Sans for body text consistently.
Keep heading weight at 300 (light) for the clean, modern look.
Use the CSS variable system (--color-*, --font-family-*) rather than hardcoded values.
Use BEM-like class naming with the section prefix (e.g. .home__hero).

Don't

Don't use the yellow for long-form body text — it is an accent color.
Don't mix light and dark mode within the same view in the app UI.
Don't use bold heading weights — the brand uses light (300) headings.
Don't use colors outside the defined palette without design review.
Don't alter the logo proportions or combine it with other graphic elements.
Don't override PrimeVue token variables at the component level unless creating a scoped variant.