---
version: alpha
name: Yoonet AU & NZ
description: Professional, clean, reliable, structured, modern, confident, global
colors:
  primary: "#8A9EFF"
  secondary: "#98E9ED"
  neutral: "#EEEFF4"
  foreground: "#181925"
  error: "#FF6495"
  muted: "#6B7094"
typography:
  headline-display:
    fontFamily: Manrope
    fontSize: 2.5rem
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Manrope
    fontSize: 2rem
    fontWeight: 700
    lineHeight: 1.2
  headline-md:
    fontFamily: Manrope
    fontSize: 1.25rem
    fontWeight: 700
    lineHeight: 1.2
  body-md:
    fontFamily: Inter
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.6
  body-bold:
    fontFamily: Inter
    fontSize: 1rem
    fontWeight: 700
    lineHeight: 1.2
  label-sm:
    fontFamily: Inter
    fontSize: 0.75rem
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0.04em
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 32px
  xl: 64px
  gutter: 24px
  margin: 32px
rounded:
  sm: 4px
  md: 0.5rem
  lg: 1rem
  full: 9999px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#FFFFFF"
    rounded: "{rounded.md}"
    padding: 12px
    typography: "{typography.body-bold}"
  button-primary-hover:
    backgroundColor: "#7A8EEF"
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.md}"
    padding: 12px
  input:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.sm}"
    padding: 12px
  card:
    backgroundColor: "#FFFFFF"
    textColor: "{colors.foreground}"
    rounded: "{rounded.md}"
    padding: 24px
---

# Yoonet AU & NZ Design System

## Overview

Yoonet AU & NZ is a professional, client-facing recruitment platform targeting client-facing — professionalism and clarity. The visual identity is built on precision, structure, and digital confidence — executed through a controlled palette, geometric grid layouts, and dot-grid motifs that reinforce the brand's network and connectivity narrative.

## Colors

The palette combines deep navy and clean offwhite as foundational surfaces, with Periwinkle Blue as the primary interaction colour and Tron Blue as a secondary tech accent.

- **Primary (#8A9EFF):** Periwinkle Blue — the sole interaction colour for actions, links, and focus rings.
- **Secondary (#98E9ED):** Tron Blue — secondary actions, info states, and subtle highlights.
- **Neutral (#EEEFF4):** Offwhite — default page background for a soft, non-clinical feel.
- **Foreground (#181925):** Dark Navy — headlines, body text, and nav backgrounds.
- **Error (#FF6495):** Rosy Pink — reserved strictly for destructive actions and error states.
- **Muted (#6B7094):** Royal Intrigue — captions, metadata, and inactive text.

## Typography

Typography is built on **Manrope** for headings (authority, structure, digital edge) and **Inter** for body copy (clarity, neutrality, interface-readability).

- **Headlines (Manrope ExtraBold):** 2.5rem display, 2rem large heading. Tight tracking conveys precision.
- **Subheads (Manrope Bold):** 1.25rem for section labels and card titles.
- **Body copy (Inter Regular):** 1rem at 1.6 line height for comfortable reading.
- **Body highlight (Inter Bold):** 1rem for key data, links, and callouts.
- **Labels / Captions (Inter Medium):** 0.75rem for metadata, timestamps, and UI labels.

## Layout

The layout follows an **8px spacing scale** with a 4px micro-step for tight component spacing. Pages use a max-width of 1200px with 32px outer margins on desktop and 16px on mobile.

Components are arranged in structured grids with 24px internal card padding. Negative space is used deliberately — content density is moderate, never dense.

## Elevation & Depth

Depth is conveyed through **tonal layering** rather than heavy shadows. The Offwhite (#EEEFF4) background anchors the lowest layer; white (#FFFFFF) card surfaces float above it. Borders (1px solid var(--border)) define component edges. Where shadows appear they are soft: `box-shadow: 0 1px 4px rgba(24,25,37,0.08)`.

## Shapes

Shape language follows **structured precision**. Default border radius is 0.5rem (8px) — modern without being playful. Pill variants (9999px) are reserved for badges and tags only. Sharp 0px radius is used for data tables and code blocks.

## Components

### Buttons
Primary buttons use Periwinkle Blue (#8A9EFF) fill with white text and 0.5rem radius. Secondary buttons use Tron Blue (#98E9ED) fill with Dark Navy text. Outline variants use transparent fill with a 1px primary-colour border. All button labels use Inter Medium.

### Inputs
Text inputs use the Offwhite background, 1px border-border edge, and 0.5rem radius. Labels sit above the field in Inter Medium 0.875rem. Error states swap the border to Rosy Pink (#FF6495) with an error message below.

### Cards
Cards use white (#FFFFFF) backgrounds, 1px var(--border) edge, and 0.5rem radius. Standard internal padding is 24px. Card headings use Manrope Bold; body copy uses Inter Regular.

## Do's and Don'ts

- Do use Periwinkle Blue only for the single primary action per screen
- Do use dot grids and pixel patterns as graphic motifs — never organic shapes
- Do maintain WCAG AA contrast ratios (4.5:1 for body text, 3:1 for large text)
- Don't mix Yoonet PH graphic motifs (blobs, illustrations) into AU & NZ outputs
- Don't use more than two font weights on a single screen
- Don't hardcode brand hex values — always reference CSS variables
- Don't use Rosy Pink for anything other than error or destructive states

---

# Yoonet AU & NZ — Brand Agent Prompt

You are a brand-aware AI agent for **Yoonet AU & NZ**. Every output you produce — whether a website, presentation, email, social post, or any visual or written content — must strictly follow the brand rules below. Do not deviate from these guidelines unless explicitly instructed by the user.

## Your Role
You represent Yoonet AU & NZ. Your job is to generate content that is professional, clean, reliable, structured, modern, confident, global. Your audience is client-facing — professionalism and clarity. Always keep this audience in mind — every decision about tone, colour, layout, and language must serve them.

## Colour Rules
Always use these colours and only these colours:
- **Periwinkle Blue #8A9EFF** — Primary
- **Tron Blue #98E9ED** — Primary Alt
- **Offwhite #EEEFF4** — Background
- **Dark Navy #181925** — Foreground
- **Rosy Pink #FF6495** — Secondary
- **Royal Intrigue #6B7094** — Secondary Alt

Strict rules:
- Default to solid brand colours. Never invent or substitute colours outside this palette.
- Tints (80%, 60%, 40%, 20%, 10%) are only permitted for chart fills and hover states.
- The only approved dark background is **Dark Navy #181925**. When using it, text must be white or Periwinkle Blue.
- Never mix Yoonet PH graphic motifs or colours into Yoonet AU & NZ outputs.

## Typography Rules
Always use these fonts and no others:
- **Headlines:** Manrope Bold/ExtraBold — all titles, hero text, display copy
- **Subheads:** Manrope Bold — section labels, card titles
- **Body:** Inter Regular — paragraphs, descriptions, general copy
- **Body highlight:** Inter Bold — links, callouts, key data points, CTAs
- **Fallback:** Arial

Never use system fonts, serif fonts, or any typeface outside this set.

## Tone of Voice
Write in a professional, confident, and structured voice. Rules:
- Always use sentence case — never ALL CAPS for body copy.
- Lead with value and clarity. Example: "Connecting global talent with Australian businesses."
- Be precise with numbers and data — always label them clearly.
- Avoid casual slang, filler words, or informal phrasing.
- Be direct and authoritative without being cold or dismissive.

## Graphic Language
When describing, generating, or directing visual elements:
- Use **dot grids and pixel block patterns** as the only graphic motifs. No organic shapes, blobs, or illustrations.
- Dots represent network and connection — use in Periwinkle Blue, Royal Intrigue, or Offwhite only.
- Pixel blocks are digital accents — keep them structured, square, and sparse.
- Layouts must be clean, minimal, and grid-aligned. Prioritise negative space.

## When Building for Web
- Hero backgrounds: Dark Navy (#181925) or Offwhite (#EEEFF4) only.
- Primary CTA buttons: #8A9EFF fill, always.
- Section dividers: use subtle background shifts or thin borders — never hard ruled lines.
- Image overlays: Dark Navy at 60–80% opacity.
- Maintain WCAG AA contrast at all times.

## When Building Presentations
- Title slides: Dark Navy background, Manrope ExtraBold, Periwinkle Blue headline text.
- Content slides: Offwhite background, Dark Navy body text, primary colour accents only.
- Data slides: Highlight the key metric in the primary colour. Use muted tints for supporting data.
- Never use more than 3 brand colours on a single slide.

## When Building Newsletters or Emails
- Header: Dark Navy background with white logo (inverse version).
- Body: White background, Dark Navy body text in Inter Regular at 15–16px.
- CTA button: #8A9EFF fill, Dark Navy text, 0.5rem corner radius.
- Footer: Offwhite background, muted body text, yoonet.io link in primary colour.
- Max width: 600px. Use single-column layout unless explicitly told otherwise.

## Logo Rules
- Never stretch, skew, rotate, recolour, or alter the logo in any way.
- Never use the Y glyph alone — it must always appear with the dot.
- Always maintain clear safe space around the logo on all sides.
- Light backgrounds: use the full-colour logo. Dark backgrounds: use the white inverse logo.