---
version: alpha
name: Gecko
description: "[MISSION, IN ONE SENTENCE: pending client]"
colors:
  primary: "#aca337"
  secondary: "#978c39"
  tertiary: "#381ae3"
  accent-hover: "#2a14ab"
  accent-gradient-from: "#aca337"
  accent-gradient-to: "#381ae3"
  neutral: "#f8f8f8"
  surface-elevated: "#fcfafa"
  ink-primary: "#171314"
  ink-muted: "#565252"
  brass-100: "#efeee8"
  brass-200: "#cec985"
  brass-400: "#aca337"
  brass-500: "#978c39"
  brass-700: "#6e6728"
  amber-400: "#f4ba40"
  ultramarine-500: "#381ae3"
  ink-950: "#100d0e"
  ink-900: "#171314"
  ink-800: "#18130a"
  ink-700: "#312628"
  ink-600: "#454256"
  ink-500: "#565252"
  ink-400: "#888888"
  ink-300: "#c2c2c2"
  ink-200: "#d7d0d1"
  ink-100: "#efefef"
  ink-050: "#f5f5f5"
  surface-sunken: "#f5f5f5"
  border-default: "#d7d0d1"
  ink-on-accent: "#ffffff"
typography:
  h1:
    fontFamily: Doto
    fontSize: 34px
  h2:
    fontFamily: Doto
    fontSize: 30px
  h3:
    fontFamily: Doto
    fontSize: 18px
  h4:
    fontFamily: Doto
    fontSize: 16.96px
  body:
    fontFamily: Haffer
    fontSize: 18px
  body-sm:
    fontFamily: Haffer
    fontSize: 17px
  caption:
    fontFamily: Haffer
    fontSize: 12px
  label:
    fontFamily: ""
    fontSize: 16.02px
rounded:
  sm: 4px
  md: 6px
  lg: 6px
  xl: 6px
  2xl: 10px
  3xl: 12px
  photo: 4.27px
  full: 9999px
  avatar: 6px
  chip: 0px
  none: 0px
  page: 22.55px
spacing:
  3: 12px
  11: 160px
  6xl: 160px
  4xl: 80px
  5xl: 120px
  xs: 0.25rem
  sm: 8px
  md: 16px
  lg: 1.5rem
  xl: 32px
  2xl: 48px
  3xl: 60px
  section-sm: 2rem
  section: 3rem
  section-lg: 3.5rem
  stack-tight: 0.5rem
  stack: 1rem
  stack-loose: 1.5rem
  stack-header: 2rem
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.ink-on-accent}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
  button-primary-hover:
    backgroundColor: "{colors.accent-hover}"
  page:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.ink-primary}"
    typography: "{typography.body}"
  heading:
    textColor: "{colors.primary}"
    typography: "{typography.h2}"
  card:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink-primary}"
    rounded: "{rounded.none}"
    padding: 24px
  card-sunken:
    backgroundColor: "{colors.surface-sunken}"
    textColor: "{colors.ink-primary}"
    rounded: "{rounded.none}"
  text-muted:
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
  divider:
    backgroundColor: "{colors.border-default}"
    height: 1px
  badge-brand:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.ink-primary}"
    typography: "{typography.caption}"
  gradient-start:
    backgroundColor: "{colors.accent-gradient-from}"
  gradient-end:
    backgroundColor: "{colors.accent-gradient-to}"
---

# Gecko design system

Generated from the live site and its brand guide: https://www.gecko.security/brand. Tokens in the front matter are the values the site renders.

## Overview

Everything an agency, designer, printer or coding assistant needs to represent Gecko: the story, the voice, the logo, colour, type and the files to download.

Mission: [MISSION, IN ONE SENTENCE: pending client]

The voice is:

On your level. Practitioners talking to practitioners, part of the security community

Educators. We lead with understanding the problem and guiding, not pitching

Deep specialists. Laser-focused on one problem, understood completely

Determined finishers. Bold about outcomes we will actually deliver, and we stay until the problem is solved

Warm and human. Likeable, positively affirming, a genuinely nice working relationship

Calm and trustworthy. Quiet assured confidence, safe hands for sensitive data

Honest. Plain about limits (“we don’t have this yet, but here’s our thinking”)

Weighted. Sentences that commit, claims that carry their mechanism, no hedge clauses

## Colors

- **Brand Primary** {colors.primary} #aca337, CMYK 0 · 5 · 68 · 33 (approximate), Pantone PMS 613 C.
- **Brand Secondary** {colors.secondary} #978c39, CMYK 0 · 7 · 62 · 41 (approximate), Pantone PMS 619 C.
- **Accent Default** {colors.tertiary} #381ae3, CMYK 75 · 89 · 0 · 11 (approximate), Pantone PMS 2736 C.
- **Accent Hover** {colors.accent-hover} #2a14ab, CMYK 75 · 88 · 0 · 33 (approximate), Pantone PMS 2738 C.
- **Accent Gradient From** {colors.accent-gradient-from} #aca337, CMYK 0 · 5 · 68 · 33 (approximate), Pantone PMS 613 C.
- **Accent Gradient To** {colors.accent-gradient-to} #381ae3, CMYK 75 · 89 · 0 · 11 (approximate), Pantone PMS 2736 C.
- **Surface Default** {colors.neutral} #f8f8f8, CMYK 0 · 0 · 0 · 3 (approximate), Pantone PMS 656 C.
- **Surface Elevated** {colors.surface-elevated} #fcfafa, CMYK 0 · 1 · 1 · 1 (approximate), Pantone PMS 656 C.
- **Ink Primary** {colors.ink-primary} #171314, CMYK 0 · 17 · 13 · 91 (approximate), Pantone PMS 426 C.
- **Ink Muted** {colors.ink-muted} #565252, CMYK 0 · 5 · 5 · 66 (approximate), Pantone PMS 445 C.
- **Brass 100** {colors.brass-100} #efeee8, CMYK 0 · 0 · 3 · 6 (approximate), Pantone PMS 427 C.
- **Brass 200** {colors.brass-200} #cec985, CMYK 0 · 2 · 35 · 19 (approximate), Pantone PMS 617 C.
- **Brass 400** {colors.brass-400} #aca337, CMYK 0 · 5 · 68 · 33 (approximate), Pantone PMS 613 C.
- **Brass 500** {colors.brass-500} #978c39, CMYK 0 · 7 · 62 · 41 (approximate), Pantone PMS 619 C.
- **Brass 700** {colors.brass-700} #6e6728, CMYK 0 · 6 · 64 · 57 (approximate), Pantone PMS 5825 C.
- **Amber 400** {colors.amber-400} #f4ba40, CMYK 0 · 24 · 74 · 4 (approximate), Pantone PMS 136 C.
- **Ultramarine 500** {colors.ultramarine-500} #381ae3, CMYK 75 · 89 · 0 · 11 (approximate), Pantone PMS 2736 C.
- **Ink 950** {colors.ink-950} #100d0e, CMYK 0 · 19 · 12 · 94 (approximate), Pantone PMS 426 C.
- **Ink 900** {colors.ink-900} #171314, CMYK 0 · 17 · 13 · 91 (approximate), Pantone PMS 426 C.
- **Ink 800** {colors.ink-800} #18130a, CMYK 0 · 21 · 58 · 91 (approximate), Pantone PMS 419 C.
- **Ink 700** {colors.ink-700} #312628, CMYK 0 · 22 · 18 · 81 (approximate), Pantone PMS 440 C.
- **Ink 600** {colors.ink-600} #454256, CMYK 20 · 23 · 0 · 66 (approximate), Pantone PMS 533 C.
- **Ink 500** {colors.ink-500} #565252, CMYK 0 · 5 · 5 · 66 (approximate), Pantone PMS 445 C.
- **Ink 400** {colors.ink-400} #888888, CMYK 0 · 0 · 0 · 47 (approximate), Pantone PMS 444 C.
- **Ink 300** {colors.ink-300} #c2c2c2, CMYK 0 · 0 · 0 · 24 (approximate), Pantone PMS 537 C.
- **Ink 200** {colors.ink-200} #d7d0d1, CMYK 0 · 3 · 3 · 16 (approximate), Pantone PMS 5315 C.
- **Ink 100** {colors.ink-100} #efefef, CMYK 0 · 0 · 0 · 6 (approximate), Pantone PMS 656 C.
- **Ink 050** {colors.ink-050} #f5f5f5, CMYK 0 · 0 · 0 · 4 (approximate), Pantone PMS 656 C.

Every text and control pairing holds WCAG AA (4.5:1 text, 3:1 edges) in both themes; the site refuses a palette that breaks it.

## Typography

- **Display and headings:** Haffer (Light 300, Regular 400). Headings h1 to h3. Two weights only, and never uppercase.
- **Body:** Inter. Everything else you read: body, h4 to h6, labels, eyebrows, nav, buttons and figures.
- **Monospace:** Space Mono. Code only.

## Layout

Mobile first: 375px base, breakpoints at 768, 1024 and 1440. Content sits in a centred container; sections carry their vertical rhythm on the section itself.

## Elevation & Depth

Hierarchy comes from surface steps (default, elevated, sunken) and hairline borders before shadows.

## Shapes

Corners are square: containers, cards and fields use no radius; only round markers (dots, avatars) are circular.

## Components

- **Buttons:** the accent fill is for the one primary action in a view; secondary actions use a hairline border.
- **Focus:** every control shows the site focus ring on keyboard focus; never remove it.
- **Icons:** Gecko dot icons. Every icon is drawn on the same dot grid in olive tones, with one Accent Blue dot as the focal point. Use them as they are: don’t add strokes, fills or a second blue dot, and don’t mix them with outline icon sets in the same view.

## Do's and Don'ts

- Do use the accent colour for one primary action per view.

The voice is not:

Above you. Elitist, PhD-speak, walls of jargon that assume prior knowledge

Marketers. Pitch-first, buzzword-heavy, the AI slop the community tunes out

Everything platforms. Vague breadth, generic claims about every security surface

Magicians. Overpromisers of absolutes (“zero false positives”) that make security engineers wince

Cutesy or gimmicky. Mascots and toy-shop colour disconnected from meaning

Fear-mongers. Dark, foreboding, adversary theatre

Startup energy. Overexcited, unpolished, small-company vibes that spook enterprise buyers

Throwaway. Thin, airy, non-committal copy that reads as bleak rather than modest