---
title: Tekspace Brand Guidelines
---

- [Typography](https://go.tekspace.com.au/en-au/tekspace-brand#typography)
- [Colours](https://go.tekspace.com.au/en-au/tekspace-brand#colours)
- [Tables](https://go.tekspace.com.au/en-au/tekspace-brand#tables)
- [Buttons](https://go.tekspace.com.au/en-au/tekspace-brand#buttons)
- [Icons](https://go.tekspace.com.au/en-au/tekspace-brand#icons)
- [Corners](https://go.tekspace.com.au/en-au/tekspace-brand#corners)

# 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.

| Swatch | 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:
- When on a `--white` background:

### 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.

Register Now

```
<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.

View Plans

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

Contact Sales

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

---

## Icons

Tekspace uses the [Phosphor Icons](https://phosphoricons.com/) 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

Print

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.