Skip to main content
QontomcryptPost-Quantum Security

Developer & Design Reference

Brand Guidelines

Everything you need to represent Qontomcrypt consistently — logo, colour, type, spacing, iconography, voice, and usage rules.

The Qontomcrypt logomark is a stylised quantum-lock glyph. Always use the approved SVG assets. Never recreate, distort, or recolour the mark outside the approved variants.

Qontomcrypt

Primary — dark background

Qontomcrypt

Reversed — light background

Mark only — minimum 32px

Maintain clear space equal to the height of the 'Q' glyph on all four sides of the logo.

Do not

  • Do not stretch or distort the logo
  • Do not recolour outside approved variants
  • Do not place on low-contrast backgrounds
  • Do not add drop shadows or effects
  • Do not rotate or flip the mark
  • Do not use the wordmark without the glyph

Colours

The palette is built on CSS custom properties. Always reference tokens — never hardcode hex values in components.

Primary

HEX#0D9488
CSS--primary

CTAs, links, active states, key highlights

Primary Dark

HEX#0F766E
CSS--primary-dark

Hover states on primary elements

Accent

HEX#14B8A6
CSS--accent

Secondary highlights, badges, tags

Background

HEX#0B1628
CSS--background

Page and section backgrounds

Card

HEX#0F1E35
CSS--card

Card and panel surfaces

Secondary

HEX#134E4A
CSS--secondary

Subtle tinted backgrounds, borders

Foreground

HEX#F1F5F9
CSS--foreground

Body text, headings

Muted

HEX#64748B
CSS--muted-foreground

Secondary text, captions, placeholders

Correct usage
/* ✅ Always use CSS custom properties */
style={{ color: 'hsl(var(--primary))' }}
style={{ background: 'hsl(var(--card))' }}

/* ❌ Never hardcode hex values */
style={{ color: '#' + '0D9488' }}
style={{ background: '#' + '0F1E35' }}

Typography

Inter is the sole typeface. Use the CSS variables — never hardcode font-family strings in components.

Font familyInter
CSS variable (body)var(--font-sans)
CSS variable (headings)var(--font-heading)

Display

Size 3.5remWeight 700

H1

Size 2.25remWeight 700

H2

Size 1.875remWeight 600

H3

Size 1.25remWeight 600

Body

Size 1remWeight 400

Small

Size 0.875remWeight 400

Code / Mono

Size 0.875remWeight 400

Spacing

All spacing follows an 8px base grid. Use the named tokens — avoid arbitrary pixel values.

xs4px / 0.25rem
sm8px / 0.5rem
base16px / 1rem
lg24px / 1.5rem
xl32px / 2rem
xxl48px / 3rem
xxxl80px / 5rem
max-w-content1280px / 80rem

Iconography

All icons use Lucide React. Maintain consistent sizing and stroke weight across the interface.

Active (primary)
Active (primary)
Active (primary)
Inactive (muted)
Inactive (muted)
Inactive (muted)
  • Use Lucide React exclusively — no mixing icon libraries
  • Default size: 20px (w-5 h-5) for UI icons, 24px (w-6 h-6) for feature icons
  • Stroke width: 1.5 (Lucide default) — never change strokeWidth
  • Active/interactive icons: use --primary colour
  • Inactive/decorative icons: use --muted-foreground colour

Voice & Tone

Qontomcrypt speaks to CISOs, security architects, and compliance officers. Every word earns its place.

Precise

Use exact technical language. Say 'CRYSTALS-Kyber (ML-KEM)' not 'quantum encryption'.

Do: NIST-standardised ML-KEM-1024 key encapsulation
Don't: Next-gen quantum-safe crypto magic

Confident

State capabilities directly. Avoid hedging language like 'might', 'could', or 'try to'.

Do: Customer-controlled keys. No escrow. No exceptions.
Don't: We try to give you control over your keys where possible.

Trustworthy

Back claims with standards and evidence. Never make unverifiable assertions.

Do: Aligned with NIST SP 800-208 and ISO/IEC 18033-3
Don't: The most secure encryption solution available.

Concise

One idea per sentence. Cut filler words. Respect the reader's time.

Do: Air-gap compatible. No cloud dependency required.
Don't: Our solution is designed in such a way that it can potentially work in environments that may not have internet connectivity.

Usage Rules

These rules protect brand integrity across all touchpoints.

Permitted

  • Use approved logo SVG files from the brand asset pack
  • Reference Qontomcrypt in editorial and technical documentation
  • Use the colour palette via CSS custom properties
  • Apply the Inter typeface via the --font-sans and --font-heading variables

Restricted

  • Do not alter, crop, or recreate the logo
  • Do not use the brand in political, misleading, or harmful contexts
  • Do not imply endorsement without written approval
  • Do not combine the Qontomcrypt name with third-party product names without approval
  • Do not use unapproved colour variants or typefaces

Brand approval

For brand approval requests, partnership co-branding, or press usage, contact the Qontomcrypt team via the contact form on the homepage.

Go to contact form →