Skip to content
Codexa

Company

Brand guidelines

Colours, typography, and the rules for using the Codexa name and mark. The values are the design tokens the product is built with.

Colour

Each token has a light and a dark value; the product switches automatically. Swatches below render the live token in your current theme.

  • Background

    #ffffff light · #0b0c0f dark

  • Foreground

    #0b0c0f light · #f2f3f5 dark

  • Surface

    #f6f7f9 light · #111318 dark

  • Muted

    #f1f3f6 light · #1a1d23 dark

  • Border

    #e3e6eb light · #23262d dark

  • Primary

    #2f6bff light · #4d80ff dark

  • Accent

    #6d5cff light · #8b7bff dark

  • Success

    #15803d light · #22c55e dark

  • Warning

    #b45309 light · #f59e0b dark

  • Danger

    #dc2626 light · #ef4444 dark

Typography

Geist Sans for interface and marketing text; Geist Mono for code, file paths, and values.

Geist Sans

Build software at the speed of thought.

Regular for body, medium for labels, semibold for headings. Headings use tight letter-spacing.

Geist Mono

npm run dev
src/components/Invoice.tsx
429 Too Many Requests

Logo usage

Do

  • Use the mark in the foreground colour on light or dark backgrounds.
  • Keep clear space of at least half the mark's width.
  • Set the wordmark in Geist Sans, semibold, uppercase, 0.18em tracking.
  • Use Primary for one action per screen; use Muted and Border for structure.

Don't

  • Recolour, rotate, stretch, or add shadows to the mark.
  • Place the mark inside another shape or badge.
  • Use the name to imply endorsement or partnership.
  • Use Danger or Warning colours decoratively.

Need the files?

The mark is served as SVG at /icon; the social image at /opengraph-image.

Press kitBrand