EDT Brand Style Guide

01 — Brand Identity

Logo Options

The EDT logo comprises the wordmark in lowercase bold, and the signature pink dot — the only element that carries a colour value. The dot may never be removed or replaced with a different decorative element.

Navy Dark

White letterforms on EDT Navy (#302649). For branded digital surfaces, presentations, and coloured backgrounds.

Aubergine Dark

White letterforms on EDT Aubergine (#55335D). For use on deep brand-colour backgrounds where the dark logo creates sufficient contrast.

Deep Violet — Raspberry dot

White letterforms on deep violet (#261F3B). Dot: #A7426E. Rich, dark alternative for branded surfaces.

Midnight Purple — Logo Pink dot

White letterforms on midnight purple (#1D172C). Dot: #BE4B7E. Deepest dark variant for premium contexts.

Dark Slate — Logo Pink dot

White letterforms on deep teal (#1B3A4B). Dot: #BE4B7E. A bold contrast alternative outside the core palette.

Aubergine — Berry Blush dot

White letterforms on Aubergine (#3E1F47). Dot: #BE4B7E. Deep purple accent variant.

Primary Light

Black letterforms on white. Use for documents, light-mode digital interfaces, and print on white stock.

Primary Dark

White letterforms on black. Preferred for dark backgrounds, printed materials on dark stock, and reversed-out layouts.

✓ Do

Always maintain clear space equal to the height of the "e" around the logo on all sides
Use only approved background colours from this guide
Maintain the original proportions — never stretch or distort
Use the light variant on white or very pale backgrounds
Use the dark variant on navy, aubergine, plum, or black backgrounds
Ensure the dot always appears in #BE4B7E

✗ Don't

Change the dot to any colour not approved in this guide
Place the logo on busy photographic backgrounds without a clear container
Apply drop shadows, outlines, or glow effects to the letterforms
Use dark letterforms on dark backgrounds (insufficient contrast)
Reproduce the logo at a size smaller than 80px wide in digital or 15mm wide in print
Rearrange, reorder, or animate individual elements without brand approval

02 — Visual System

Colour Palette

The EDT palette moves from deep navy through a considered range of purple-blues and rose-plums to the signature logo pink. All primary colours pass WCAG 2.1 AA with white text.

Primary Palette

Navy #302649 AAA 14.05:1

Deep Purple #392E58 AAA 12.31:1

Aubergine #55335D AAA 10.41:1

Plum #703863 AAA 8.62:1

Rose Plum #8B3D69 AAA 7.07:1

Raspberry #A7426E AA 5.76:1

Berry #B3446C AA 5.30:1

★ Logo Pink #BE4B7E AA 4.67:1

Optional Palette — Ocean & Plum

An alternative palette moving from deep teal through midnight blues and purples to dark plum. Every colour achieves AAA compliance against white. Can be used independently or combined with the primary EDT palette for extended UI depth.

Teal#006466AA 6.97:1

Dark Teal#065A60AAA 7.96:1

Deep Teal#0B525BAAA 8.85:1

Ocean#144552AAA 10.49:1

Dark Slate#1B3A4BAAA 11.98:1

Night Blue#212F45AAA 13.49:1

Midnight#272640AAA 14.61:1

Deep Purple#312244AAA 14.55:1

Aubergine#3E1F47AAA 14.08:1

Dark Plum#4D194DAAA 13.45:1

Ocean & Plum — 85% Tints

Teal Tint#D8E7E8

Dark Teal Tint#D9E6E7

Deep Teal Tint#DAE5E6

Ocean Tint#DBE3E5

Dark Slate Tint#DCE1E4

Night Blue Tint#DDDFE3

Midnight Tint#DEDEE2

Deep Purple Tint#E0DDE2

Aubergine Tint#E2DDE3

Dark Plum Tint#E4DCE4

Ocean & Plum — 92% Pale Backgrounds

Teal Pale#EAF2F2

Dark Teal Pale#EBF1F2

Deep Teal Pale#EBF1F1

Ocean Pale#ECF0F1

Dark Slate Pale#ECEFF0

Night Blue Pale#EDEEF0

Midnight Pale#EDEDEF

Deep Purple Pale#EEEDF0

Aubergine Pale#EFEDF0

Dark Plum Pale#F0ECF0

Neutral Scale

Black#0A0A0A

Grey 800#27272E

Grey 600#52525A

Grey 400#9898A0

Grey 200#D4D4D8

Grey 100#EDEDEF

Grey 50#F8F8F9

White#FFFFFF

Semantic Colours

Success#8AB4A2

Warning#D8B4A0

Error#B3446C

Info#302649

03 — Visual System

Tints & Background Colours

Tints are derived by mixing each primary colour with white at 85% and 90% opacity. Use these for page backgrounds, sidebar fills, table row highlights, subtle navigation bars, and card surfaces. All tints maintain excellent contrast with body text in Navy or Grey-800.

85% Tints — Surfaces & Panels

Navy Tint#E0DFE3

Deep Purple Tint#E1DFE5

Aubergine Tint#E5E0E6

Plum Tint#E9E1E7

Rose Plum Tint#EDE1E8

Raspberry Tint#F1E2E9

Berry Tint#F3E2E8

★ Logo Pink Tint#F5E4EB

90% Tints — Very Pale, Page Backgrounds

Navy Pale#EBE8ED

Deep Purple Pale#EBEAEE

Aubergine Pale#EEEAEE

Plum Pale#F0EBEF

Rose Plum Pale#F3EBF0

Raspberry Pale#F6ECF0

Berry Pale#F7ECF0

Logo Pink Pale#F8EDF2

Usage guidance

Page backgrounds: Use 90% tints (Pale range) as full-page background colours in light-mode interfaces. Navy Pale (#EBE8ED) is the recommended default alternate background.

Panels & sidebars: Use 85% tints to distinguish navigation panels, sidebars, and content zones from the main white surface.

Emphasis: Logo Pink Tint (#F5E4EB) is recommended for highlighting selected states, active rows, and callout blocks. Pair with Berry (#B3446C) or Navy (#302649) text.

04 — Visual System

Typography

EDT uses two typefaces. Syne is the display and heading face — geometric, confident, and distinctive. Karla is the body face — humanist, readable, and warm. Together they balance authority with approachability.

Display Face

Syne

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz
0123456789

Weights: 400, 500, 600, 700, 800

Body Face

Karla

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz
0123456789

Weights: 300, 400, 500, 600, 700

Display XL Syne 800
64px / 1.05
tracking: -0.03em

Evidence.

Display Syne 800
48px / 1.1
tracking: -0.02em

Secure by design.

Heading 1 Syne 700
36px / 1.15
tracking: -0.015em

Case Management Overview

Heading 2 Syne 700
28px / 1.2
tracking: -0.01em

Evidence Chain of Custody

Heading 3 Syne 600
22px / 1.3

Document Review Queue

Heading 4 Syne 600
18px / 1.35

Exhibit Reference: EXH-0042

Body Large Karla 400
18px / 1.7

The eDiscovery platform enables legal teams to review, tag, and produce digital evidence with complete audit trail integrity.

Body Karla 400
16px / 1.65

All documents ingested into the platform are subject to hash verification on import and on export, ensuring tamper-evident handling throughout the review lifecycle.

Body Small Karla 400
14px / 1.6

Last modified: 12 Feb 2026 at 14:32 AEST by J. Smith (Senior Analyst). Custodian: NAB Regulatory Affairs.

Caption Karla 500
12px / 1.5
tracking: 0.02em

Figure 1 — Hash verification log for RSMF import batch #REF-2024-0887

UI Label Syne 700
11px / 1.4
ALL CAPS, 0.12em

Status · Priority · Custodian

05 — Accessibility

WCAG 2.1 Contrast

EDT targets WCAG 2.1 Level AA as a minimum, with AAA achieved wherever possible. The audit below covers all palette combinations in use across the brand system — including primary, Ocean & Plum, tints, semantic, and logo background colours.

★ Recommended Combinations — Safe to use anywhere

⚠ Use with Care — AA only, large text and UI elements only

✗ Never Use — These combinations fail WCAG at all levels

Semantic Colour Usage Rules

Success (#8AB4A2) and Warning (#D8B4A0) are pastel fills — they must only be used as background colours, never as text. Always pair with Navy (#302649) or dark body text on top. Both achieve AAA when used this way (8.61:1 and 10.33:1 vs black).

Error (#B3446C) passes AA at 5.30:1 on white — suitable for alert text and borders. For maximum legibility use white text on the Berry background in filled error states.

Info (#302649) is the Navy colour and achieves AAA at 14.01:1 — completely safe for all text sizes and uses.

Full Contrast Reference — All Palette Colours vs White

Colour	Hex	Ratio vs White	AA ✓	AAA ✓	Safe for
Navy (updated)	`#302649`	14.01:1	✓	✓	All text sizes
Deep Purple	`#392E58`	12.31:1	✓	✓	All text sizes
Aubergine	`#55335D`	10.41:1	✓	✓	All text sizes
Plum	`#703863`	8.62:1	✓	✓	All text sizes
Rose Plum	`#8B3D69`	7.07:1	✓	✓	All text sizes
Raspberry	`#A7426E`	5.76:1	✓	—	16px+ body, buttons
Berry	`#B3446C`	5.30:1	✓	—	16px+ body, buttons
Logo Pink ★	`#BE4B7E`	4.67:1	✓	—	Large text, buttons, icons
Teal	`#006466`	6.97:1	✓	—	16px+ with white text on bg
Dark Teal	`#065A60`	7.96:1	✓	✓	All text sizes
Deep Teal	`#0B525B`	8.85:1	✓	✓	All text sizes
Ocean	`#144552`	10.49:1	✓	✓	All text sizes
Dark Slate	`#1B3A4B`	11.98:1	✓	✓	All text sizes
Night Blue	`#212F45`	13.49:1	✓	✓	All text sizes
Midnight	`#272640`	14.61:1	✓	✓	All text sizes
Deep Purple (O&P)	`#312244`	14.55:1	✓	✓	All text sizes
Aubergine (O&P)	`#3E1F47`	14.08:1	✓	✓	All text sizes
Dark Plum	`#4D194D`	13.45:1	✓	✓	All text sizes
Deep Violet (logo bg)	`#261F3B`	15.65:1	✓	✓	All text sizes
Midnight Purple (logo bg)	`#1D172C`	17.34:1	✓	✓	All text sizes
Success ⚠	`#8AB4A2`	2.30:1	—	—	Background fill only — never text
Warning ⚠	`#D8B4A0`	1.92:1	—	—	Background fill only — never text
Error	`#B3446C`	5.30:1	✓	—	Alert text & borders on white
Info	`#302649`	14.01:1	✓	✓	All text sizes

⚠ One hard fail to note

Black text on Teal (#006466) scores only 2.84:1 — a hard failure at all WCAG levels. Always use white text on Teal backgrounds, never black or dark grey. This is the only combination in the EDT palette set that outright fails.

06 — Components

Buttons

Buttons use Syne for labels with consistent tracking and weight. Three sizes, five styles. Primary and Accent are the main action buttons. Outline and Ghost are for secondary interactions.

Filled Styles

Primary Action Accent Action Destructive Action

Outline & Ghost

Outline Navy Outline Pink Ghost / Tertiary

Sizes

Large Button Default Button Small Button

On Dark Backgrounds

Accent Action White Outline Subtle Ghost

07 — Components

Badges & Labels

Badges communicate status, category, and metadata. Use filled badges for primary classification and light/tinted badges for secondary labelling.

Filled Badges

Evidence Active Privileged Rose Plum Aubergine Produced Pending Review Redacted

Light / Tinted Badges

Navy Light Pink Light Plum Light Aubergine Light Complete In Progress Urgent

08 — Components

Form Elements

Form inputs use a 2px border that transitions to Logo Pink on focus, with a soft pink glow to confirm selection. Labels are uppercase Syne for clear scanability.

Case Reference

Custodian Name

Status

Notes

09 — Components

Navigation

Two navigation modes: dark (Navy background for primary application chrome) and light (white background for document-centric contexts). Active and hover states use Logo Pink as the indicator accent.

Dark Navigation

edt.

Dashboard Cases Evidence Reports Admin

Pro

Light Navigation

edt.

Dashboard Cases Evidence Reports Admin

10 — Components

Cards & Alerts

Cards provide structured content containers. Alerts use left-border accent treatment with tinted backgrounds for immediate status communication.

Content Card

Case REF-2024-0887

NAB Regulatory Review · Opened 14 Jan 2024

4,821 documents under review. 312 flagged for privilege. Production deadline: 28 Feb 2026.

Active Due Soon

Alert States

Information Your session will expire in 15 minutes. Save your work to avoid losing changes.

Production complete Batch #EXH-0042 has been exported and verified successfully.

Review overdue 18 documents in queue have exceeded the 72-hour SLA target.

Hash mismatch detected Evidence item EV-2241 failed integrity check on import. Do not use.

New assignment You have been assigned as lead reviewer on Case REF-2025-0012.

11 — Reference

Spacing Scale

EDT uses a 4px base spacing unit. All spacing values are multiples of 4px to maintain visual rhythm and predictability across the interface.

--space-1

4px

--space-2

8px

--space-3

12px

--space-4

16px

--space-5

20px

--space-6

24px

--space-8

32px

--space-10

40px

--space-12

48px

--space-16

64px

--space-20

80px

--space-24

96px

12 — Reference

CSS Variables

Copy these variables into your project's root stylesheet. All components in this guide are built using these tokens exclusively.

:root {
  /* Primary Palette */
  --edt-navy:             #302649;
  --edt-deep-purple:      #392E58;
  --edt-aubergine:        #55335D;
  --edt-plum:             #703863;
  --edt-rose-plum:        #8B3D69;
  --edt-raspberry:        #A7426E;
  --edt-berry:            #B3446C;
  --edt-logo-pink:        #BE4B7E;  /* Brand accent */

  /* 85% Tints */
  --edt-navy-tint:        #E0DFE3;
  --edt-aubergine-tint:   #E5E0E6;
  --edt-plum-tint:        #E9E1E7;
  --edt-logo-pink-tint:   #F5E4EB;

  /* 90% Pale (backgrounds) */
  --edt-navy-pale:        #EBE8ED;
  --edt-plum-pale:        #F0EBEF;
  --edt-logo-pink-pale:   #F8EDF2;

  /* Neutrals */
  --edt-grey-50:          #F8F8F9;
  --edt-grey-100:         #EDEDEF;
  --edt-grey-200:         #D4D4D8;
  --edt-grey-400:         #9898A0;
  --edt-grey-600:         #52525A;
  --edt-grey-800:         #27272E;

  /* Typography */
  --font-display:         'DM Sans', sans-serif;
  --font-body:            'Karla', sans-serif;

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;
}

Design withpurpose.

Logo Options

Navy Dark

Aubergine Dark

Deep Violet — Raspberry dot

Midnight Purple — Logo Pink dot

Dark Slate — Logo Pink dot

Aubergine — Berry Blush dot

Primary Light

Primary Dark

✓ Do

✗ Don't

Colour Palette

Tints & Background Colours

Typography

WCAG 2.1 Contrast

White on Navy

White on Deep Violet

Navy on White

Navy on Logo Pink Tint

White on Aubergine

White on Dark Slate

Navy on Navy Tint

Ocean on Teal Tint

White on Logo Pink

White on Teal

Logo Pink on Logo Pink Tint

White on Raspberry

Black on Teal

Success Green as text on White

Warning Terracotta as text on White

Black on Logo Pink