# Teko.com.au Design System

> High-contrast monochrome canvas punctuated by hyper-saturated pink highlights and ultra-wide grotesque typography.

**Source:** https://teko.com.au | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Teko.com.au utilizes a "Dark Mode" foundational aesthetic, where deep blacks (#000000) and dark grays (#131313) serve as the primary canvas for high-impact content. The system's "voltage" is concentrated in a single accent color: Teko Pink (#ea1167), used for critical highlights, primary CTAs, and decorative glows. Typography is dominated by the Switzer family, characterized by extreme scale shifts—ranging from massive 100px display headers to functional 14px navigation. Layouts rely on generous vertical spacing (100px sections) and high-radius containers (up to 50px) to soften the aggressive contrast.

## Signature DNA
1. **The Pink Highlight** (#ea1167 used as a text span or background glow against #000000 to create immediate focal points on the homepage and about pages).
2. **Massive Scale Contrast** (Display type at 94px-100px immediately adjacent to 16px body text, creating a high-fashion editorial rhythm).
3. **Softened Geometry** (Aggressive black backgrounds are tempered by consistent 29px to 50px border radii on cards and surfaces).

## Family Map
Not captured in source (No sub-brands identified in topology).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#000000` | Primary page background, hero sections | 75 | 0.8 | Computed Style |
| `{color.white}` | `#ffffff` | Primary text on dark, button backgrounds | 251 | 1.0 | `--swatches--white-opcaity` |
| `{color.ink}` | `#333333` | Secondary text, button text | 164 | 0.8 | Computed Style |
| `{color.surface-dark}` | `#131313` | Elevated surfaces, footer background | 8 | 0.6 | Computed Style |
| `{color.neutral-gray}` | `#f2f2f2` | Light section backgrounds, subtle text | 9 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#ea1167` | Brand accent, text highlights, primary CTAs | 34 | 1.0 | `--swatches--primary` |
| `{color.link}` | `#0000ee` | Standard hyperlink blue (legacy/fallback) | 16 | 0.8 | Computed Style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Switzer | 100, 200, 300, 400, 500, 600, 700 | All roles (Display, Heading, Body) | Inter or Satoshi | Proprietary (Fontshare) |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-mega}` | 100px | 125px | normal | 400 | Menu links | `a.menu-link.w-inline-block` |
| `{type.display-xl}` | 94px | 94px | normal | 400 | Hero H1 | `h1.h1-hero` |
| `{type.display-lg}` | 86px | 137.6px | normal | 500 | Pink highlights | `span.text-pink-highlight` |
| `{type.h2}` | 35px | 49px | normal | 500 | Section heads | `h2.h2` |
| `{type.h3}` | 28px | 33.6px | normal | 600 | Card titles | `h3` |
| `{type.body-lg}` | 20px | 28px | -0.6px | 500 | FAQ titles | `div.question-title` |
| `{type.body-md}` | 18px | 25.2px | 0.5px | 300 | Footer links | `a.footer-links-wp` |
| `{type.body-sm}` | 14px | 20px | normal | 400 | Navigation | `div.navbar` |

### Principles
1. **Weight as Hierarchy:** Use 200-300 weight for long-form body text to maintain elegance on dark backgrounds.
2. **Tight Display:** Large display sizes (94px+) use 1:1 line-height ratios to maintain visual density.
3. **Pink Emphasis:** Use the `{color.primary}` span specifically for the most critical word in a headline.

## Spacing
**Base unit:** Custom
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 4px | 28 |
| `{space.sm}` | 16px | 17 |
| `{space.md}` | 30px | 37 |
| `{space.lg}` | 40px | 31 |
| `{space.xl}` | 50px | 11 |
| `{space.section}` | 100px | 11 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.input}` | 3px | Form fields | `input#Full-Name` |
| `{radius.card}` | 20px | Feature cards | `div.testimonial-card` |
| `{radius.panel}` | 29px | Main content containers | `div.card` (Tier 1) |
| `{radius.pill}` | 50px | Buttons and large containers | `a.primary-btn` |

## Elevation
Table: | Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All cards and surfaces | Component evidence |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Get a free proposal")
**Pages observed:** https://teko.com.au, https://teko.com.au/about
**Spec:** Background: `#ffffff` / Text: `#131313` / Radius: `50px` / Padding: `13px 28px` / Typography: `20px (600)`
**States observed:** Default: Captured | Hover: Not captured

#### Secondary Button
**Role:** De-emphasized actions
**Pages observed:** https://teko.com.au, https://teko.com.au/about
**Spec:** Background: `transparent` / Text: `#ffffff` / Border: `1px solid rgba(255, 255, 255, 0.4)` / Radius: `50px` / Padding: `11px 20px`

### Tier 2: Patterns

#### Content Card
**Role:** Testimonials and service descriptions
**Pages observed:** https://teko.com.au, https://teko.com.au/about
**Spec:** Background: `#ffffff` / Text: `#333333` / Radius: `29px` / Padding: `40px 30px`
**Typography:** Header 28px, Body 18px.

#### Feature Badge
**Role:** Small category labels (e.g., "About", "Services")
**Pages observed:** https://teko.com.au, https://teko.com.au/about
**Spec:** Background: `rgba(255, 255, 255, 0.2)` / Text: `#ffffff` / Radius: `20px` / Padding: `6px 10px` / Font: `16px (200)`

### Tier 3: Surface-specific

#### Contact Input
**Role:** Lead generation form fields
**Pages observed:** https://teko.com.au/about
**Spec:** Background: `transparent` / Text: `#ffffff` / Border-bottom: `1px solid rgba(255, 255, 255, 0.3)` / Radius: `0px` / Padding: `16px 0px`

#### Pink Highlight Surface
**Role:** High-impact decorative containers
**Pages observed:** https://teko.com.au
**Spec:** Background: `#ea1167` / Text: `#ffffff` / Radius: `50px` / Padding: `13px 23px`

## Layout
| Property | Value |
|----------|-------|
| Section Padding | 100px (vertical) |
| Max Content Width | ~1200px |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Display type scales down; 100px section padding reduced to 40px |

## Imagery & decoration
- **Glows:** Large, soft radial gradients of `#ea1167` behind hero text.
- **Grayscale Imagery:** Client logos and background elements are kept achromatic to let the Pink accent dominate.

## Do's
- Use `#ea1167` for exactly one word in a headline to create "Digital Excellence" style emphasis.
- Maintain `100px` vertical gaps between major content sections.
- Use `Switzer` at weight `200` for body text on dark backgrounds to prevent "ink bleed" visual fatigue.
- Apply `{radius.panel}` (29px) to all white content cards.
- Keep background surfaces at absolute `#000000` for hero areas.

## Don'ts
- **Wrong:** Using `#ea1167` for body text. **Right:** Use `#ffffff` or `#f2f2f2`. **Reason:** Legibility and brand hierarchy.
- **Wrong:** Using sharp corners (0px) for buttons. **Right:** Always use `50px` pill shapes. **Reason:** Brand geometry is rounded.
- **Wrong:** Mislabeling sub-brand colors as parent primary. **Right:** Only `#ea1167` is the parent primary.
- Do not use shadows on cards; use borders or background contrast to define depth.

## Similar brands
- **Vercel** (High contrast, monochrome foundation)
- **Linear** (Dark mode, subtle gradients, precision type)
- **Framer** (Large display type, bold accent colors)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --teko-pink: #ea1167;
  --teko-black: #000000;
  --teko-white: #ffffff;
  --teko-gray: #333333;
  --teko-radius-card: 29px;
  --teko-radius-pill: 50px;
  --teko-space-section: 100px;
}
```

## Agent prompt examples
- "Create a hero section with a #000000 background, a 94px Switzer headline, and a single word highlighted in #ea1167."
- "Design a testimonial card with a #ffffff background, 29px border radius, and 40px internal padding."
- "Generate a primary CTA button using a white background, black text, and a 50px pill radius."

## Known gaps
- Hover states for primary buttons were not captured in the static trace.
- Mobile-specific font scale tokens for display sizes were not fully mapped.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://teko.com.au | 1440px | 2026-06-06 |
| About | https://teko.com.au/about | 1440px | 2026-06-06 |
| Mobile Home | https://teko.com.au | 390px | 2026-06-06 |