Brand Guidelines

Welcome to the gabrielCAM® brand guidelines. This page documents our visual identity, brand rules, and technical implementation details to ensure consistency across all touchpoints.

01. Colours

Primary

The primary brand colour, used for calls to action, highlights, and primary branding elements.

Variable --color-primary-700

OKLCH oklch(54% 0.21 23)

Tailwind Classes

bg-primarytext-primary

Secondary

The secondary brand colour, used for backgrounds, deep accents, and sophisticated branding elements.

Variable --color-secondary-900

OKLCH oklch(27% 0.06 271)

Tailwind Classes

bg-secondarytext-secondary

Base Black

The default background colour for the dark theme.

Variable --color-base-black

OKLCH oklch(0% 0 0)

Tailwind Classes

bg-blacktext-black

Base White

Used for light theme sections and mandatory backdrop for logos.

Variable --color-base-white

OKLCH oklch(100% 0 0)

Tailwind Classes

bg-whitetext-white

Semantic Colours

Success

Used for success states, confirmations, and positive feedback.

Variable --success

Refers To var(--color-green-300)

Tailwind Classes

bg-successtext-success-foreground

Warning

Used for warnings, heavy alerts, and cautionary information.

Variable --warning

Refers To var(--color-amber-300)

Tailwind Classes

bg-warningtext-warning-foreground

Error

Used for errors, destructive actions, and critical alerts.

Variable --error

Refers To var(--color-red-800)

Tailwind Classes

bg-errortext-error-foreground

Info

Used for informational messages and non-critical updates.

Variable --info

Refers To var(--color-sky-300)

Tailwind Classes

bg-infotext-info-foreground

02. Typography

Headings: Source Sans Pro

Used for all headings (H1-H6). It provides a clean, professional, and modern look. Weight: 600 (Semi-bold). Tracking: -1px.

HEADING STANDARDISATION

Do not add manual sizing (text-2xl), font-weight (font-bold), or spacing classes to headings. Visual styles are strictly tied to the semantic tags (H1-H6) and their identical utility classes (.h1-.h6). Do not add utility classes that match the semantic tag (e.g., <h2 class="h2">).

The Override Pattern:

If you need a larger <h3>, use the utility class: <h3 class="h2">Text</h3>

H1

.h1

H2

.h2

H3

.h3

H4

.h4

H5

.h5

H6

.h6

Display Typography (Hero Text)

Used for hero sections and high-impact messaging. These classes provide a fluid scale that goes beyond H1, ensuring a consistent brand feel for large text.

HERO STANDARDS

Hero banners must use these classes instead of ad-hoc Tailwind text sizes (e.g., text-7xl). These classes also manage line-height and font-weight for maximum consistency.

Display LG

.display--lg

Display XL

.display--xl

Display XXL

.display--xxl

Subheadings: .subheading-light

The .subheading-light utility is our preferred way to style secondary headings and straplines. It provides a consistent light weight and fluid scaling (20px to 24px) with a relaxed line height.

SUBHEADING CREEP

Use this utility to prevent ad-hoc Tailwind classes like text-2xl font-light. It ensures all straplines across the site share the same responsive rhythm and brand aesthetic.

Example Subheading

.subheading-light

Usage Pattern:

<p class="subheading-light">
  Your subheading text here
</p>

Body: Open Sans Variable

Used for all body text, paragraphs, and fine print. Optimised for readability on digital screens. Weight: Variable (300-800).

Large Body - Used for descriptions and lead-in text. It has a slightly larger font size and optimised line height for better flow.

Standard Body - Used for general content and paragraphs. This is the default text style for the entire website.

Muted Text - Used for secondary information, meta-data, and less prominent content elements.

03. Themes & Light Sections

The theme-light Pattern

The website follows a "Dark by default" theme. However, specific sections can be forced into a "Light" context using the theme-light class.

This class redefines CSS custom properties (like --background and --foreground) to their light counterparts. To use it, apply the class to a container and ensure it also has the bg-background text-foreground classes to apply the redefined colours.

Usage Example

<section class="theme-light bg-background text-foreground">
								<h2>Light Section Heading</h2>
								<p>This content will have dark text on a white background.</p>
							</section>

04. Logos & Placement

BACKDROP RULE

All company logos (gabrielCAM®, gabrielCAM® Hub and Product Logos) must always be placed on a white backdrop. Never place logos on dark, light grey, or any other background colour.

Primary Brand Logo (Main)

Current Colour

Standard (Fixed Colours)

Brand Logo Alternative (Header/Small Scale)

Current Colour

Standard (Fixed Colours)

Product Logos

gabrielCAM® Pro

Current Colour

Standard (Fixed Colours)

gabrielCAM® Pro Extreme

Current Colour

Standard (Fixed Colours)

gabrielCAM® Lite

Current Colour

Standard (Fixed Colours)

gabrielCAM® Hub

Current Colour

Standard (Fixed Colours)

05. Iconography

Tabler Icons

We use Tabler Icons for all UI and informational icons via the astro-icon component and @iconify-json/tabler dataset.

Icon Usage

To use an icon, use the <Icon /> component with the tabler:icon-name syntax.

<Icon name="tabler:camera" class="size-8" />

06. Copywriting Guidelines

Language & Spelling

Always use UK English spelling:

Colour (not Color)
Centre (not Center)
Optimise (not Optimize)

Ensure consistency across all documentation and site content.

Brand & Product Naming

The brand name should always be written as:

gabrielCAM®

Note: lowercase 'g', uppercase CAM, followed by the registered symbol.

The software/subscription product is:

gabrielCAM® Hub

Naming Rules:

Use Hub Control (never Hub Config, Configure, or Setup)
Never use gabrielCAM® Live

Service Terminology

Always use the hyphenated spelling for time-lapse:

Time-Lapse
time-lapse

The hyphen is mandatory for all variations of the term.

07. Layout & Spacing

Vertical Spacing

We use standardised utility classes for section spacing to ensure consistent rhythm across different device sizes.

Standard Section Spacing: .section--md

Global Class:

.section--md {
  @apply py-16 md:py-24;
}

Use this class on all major page sections instead of manually applying `py-16 md:py-24`.

Gap Spacing

We use standardised gap utility classes to maintain consistent spacing between elements. These can be used with both grid and flexbox layouts.

.gap--sm (1rem/16px) .gap--md (2rem/32px) .gap--lg (4rem/64px)

Global Classes:

/* Gap Spacing Utilities */
.gap--sm {
  @apply gap-4;
}

.gap--md {
  @apply gap-8;
}

.gap--lg {
  @apply gap-16;
}

08. Components

We use Starwind UI Kit for the majority of our components where possible, themed to our brand requirements. We will also create custom components as needed.

Buttons

Core Brand Styles

@components/starwind/button/Button.astro

Usage:

<Button variant="primary">
  Get Started
  <Icon name="tabler:arrow-narrow-right" class="button-icon button-icon--right" />
</Button>

Variants & Utilities

Semantic Styles

Sizes

Icons & Micro-animations

09. Interactive Content & Compliance

To comply with GDPR, third-party interactive content (YouTube, Vimeo, Microsoft Forms) is blocked until consent is granted. The following examples demonstrate the placeholder states and synchronization with the cookie consent banner.

YouTube Verification

Vimeo Verification

Bidirectional Sync

Clicking "Load video" or "Don't ask again" on a specific placeholder will automatically update the "Third-Party Content" category in the main cookie consent banner to "Accepted". This ensures the user's preferences remain consistent across the entire session.