Renewables

Design System

Logos & Brand

Combomark

Full logo with icon and wordmark. Use this as the default.

Blue

Primary brand color

Combomark - Blue - large
/logos/Marks/Combomarks/Blue/Combomark-blue-large.svgDownload

Greyscale

For neutral contexts

Combomark - Greyscale - large
/logos/Marks/Combomarks/Greyscale/Combomark-greyscale-large.svgDownload

White

For dark backgrounds

Combomark - White - large
/logos/Marks/Combomarks/White/Combomark-white-large.svgDownload

Wordmark

Text only. An alternative when the full logo is too large.

Blue

Primary brand color

Wordmark - Blue - large
/logos/Marks/Wordmarks/wordmark-blue-large.svgDownload

Logomark

Icon only. Use on mobile or when a small mark is required.

Default

Standard logomark

Logomark - Default - large
/logos/Marks/logomark/logomark-large.svgDownload

Colors

No colors tokens defined yet.

Add tokens to styles/tokens/colors.css

Typography

No typography tokens defined yet.

Add tokens to styles/tokens/typography.css

Grid

No grid tokens defined yet.

Add tokens to styles/tokens/grid.css

Breakpoints

No breakpoints tokens defined yet.

Add tokens to styles/tokens/breakpoints.css

Spacing

Uses Tailwind CSS default spacing scale. Reference for mapping design values to utility classes.

Tailwind ClassREM ValuePX ValueExample
p-1, m-10.25rem4px
p-2, m-20.5rem8px
p-3, m-30.75rem12px
p-4, m-41rem16px
p-5, m-51.25rem20px
p-6, m-61.5rem24px
p-8, m-82rem32px
p-10, m-102.5rem40px
p-12, m-123rem48px
p-14, m-143.5rem56px
p-16, m-164rem64px
p-20, m-205rem80px
p-24, m-246rem96px
p-28, m-287rem112px
p-32, m-328rem128px

Usage: Use p-4 for padding, m-4 for margin,gap-4 for flex/grid gap, space-y-4 for vertical spacing between children.

Border Radius

No radius tokens defined yet.

Add tokens to styles/tokens/radius.css