Brand Guidelines

This document provides the core brand identity specifications for Tekspace. Adhering to these guidelines ensures consistency across all brand communications.

Typography

Our typography is clean, modern, and highly legible.

Heading 1

Element: <h1>

Font-Family: 'Inter Tight'

Font-Size: 3.75em (60px)

Font-Weight: 800

Line-Height: 1.17

Colour: --grey-100

Heading 2

Element: <h2>

Font-Family: 'Inter Tight'

Font-Size: 3.125em (50px)

Font-Weight: 800

Line-Height: 1.2

Colour: --grey-100

Heading 3

Element: <h3>

Font-Family: 'Inter Tight'

Font-Size: 1.5625em (25px)

Font-Weight: 800

Line-Height: 1.6

Colour: --grey-100

Section Introduction Text

Class: .section-intro

Font-Family: 'Inter Tight'

Font-Size: 1.5625em (25px)

Font-Weight: 600

Line-Height: 1.6

Colour: --grey-50

This is standard paragraph text. It's used for the majority of written content. It should be legible and well-spaced to ensure a comfortable reading experience on all devices.

Element: <p> / body

Font-Family: 'Inter'

Font-Size: 1em (16px)

Font-Weight: 400

Line-Height: 1.39

Colour: --grey-50

Colours

Our colour palette is simple and professional, built around a core of neutral greys and a vibrant blue used only for calls to action.

Semantic Name	HEX Value	RGBA Value
`--grey-100`	`#243447`	`rgba(36, 52, 71, 1.0)`
`--grey-50`	`#708398`	`rgba(112, 131, 152, 1.0)`
`--grey-30`	`#E7E8EB`	`rgba(231, 232, 235, 1.0)`
`--grey-20`	`#EEF0F1`	`rgba(238, 239, 241, 1.0)`
`--blue-cta`	`#0072FF`	`rgba(0, 114, 255, 1.0)`
`--blue-light`	`#CDDFF2`	`rgba(205, 223, 242, 1.0)`
`--white`	`#FFFFFF`	`rgba(255, 255, 255, 1.0)`

Tables

Tables are used to display structured data clearly and efficiently. Our table styles are minimalist to keep the focus on the content.

Styling Guidelines

Tables use the inherited body font 'Inter'.
Borders are collapsed for a clean, single-line look.
All cells have 15px of padding for ample spacing.
Content is vertically aligned to the top and horizontally aligned to the left by default.
When on a --grey-20 background:

Borders: 1px, solid line in white (--white)
Header Cells: White background (--white), 'Inter Tight' font in semibold weight with dark (--grey-100) colour.

When on a --white background:

Borders: 1px, solid line in medium grey(--grey-30)
Header Cells: Soft grey background (--grey-20), 'Inter Tight' font in semibold weight with dark (--grey-100) colour.

Example Table

Service Plan	Users Included	Storage	Monthly Cost (AUD)
Starter	Up to 10	100 GB	$150.00
Business	Up to 50	1 TB	$550.00
Enterprise	Unlimited	5 TB	$1,200.00

Buttons

Buttons and Call-to-Action (CTA) links are designed to be prominent and accessible, guiding users to key actions.

Primary Actions

The primary button style is for the most important action on a page.

<button>Register Now</button>

Learn More

<a href="#" class="cta">Learn More</a>

Secondary Actions

Secondary actions offer an alternative, less-emphasised choice. This includes outlined buttons and text links with a directional indicator.

<button class="btn-secondary">View Plans</button>

Contact Sales

<a href="#" class="link-caret">Contact Sales</a>

Icons

Tekspace uses the Phosphor Icons library for all icons.

Always select the Regular variant from Phosphor Icons and insert icons as SVG to ensure crisp rendering at any size and consistent styling via CSS.

Aspect	Specification
Library	Phosphor Icons
Weight and styling	Regular only
File format	SVG only

Corner Radius

Rounded corners create a softer, more modern aesthetic that is approachable and friendly.

We use a consistent corner radius across all UI elements like buttons, containers, and media to create a unified visual language. This consistency applies to both digital and print media.

Specifications

Screen

15px

4mm

The print value of 4mm is derived from the screen value of 15px, based on a standard print resolution of 300 DPI. This ensures that the perceived roundness is consistent between on-screen and printed materials.