Crypton Branding

Official brand guidelines for Crypton. Logo variants, design tokens, typography, and downloadable assets for our dark glass UI.

Name

In the logo, "CRYPTON" is written fully capitalized. This capitalization is reserved for the logo only and should not be used in regular text. In texts, "Crypton" is written as a regular name, with only the first letter capitalized. In URLs or email addresses, the name should be written all lowercase, e.g., crypton.sh. The website is accessible only via crypton.sh.

Brand voice
Approved tagline: "Privacy-first connectivity. Encrypted by default." Use this line on auth, marketing, and partner surfaces unless a locale-specific translation is provided.

Color system

Crypton uses a dark canvas with frosted glass panels and gold accents. Semantic colors are reserved for status meaning only — not for brand CTAs or decorative backgrounds.

#FFCD00 · #FFCA20
Crypton Gold
Primary brand accent — headings, CTAs, logo rims, hover states (#FFCD00 auth · #FFCA20 landing/app)
#0A0A0A → #050505
Canvas Black
Default page background across auth, app, and landing (#0A0A0A → #0F0F0F → #050505)
rgba(255,255,255,0.07)
Glass Surface
Frosted panels, cards, modals, and nav chrome (fill rgba(255,255,255,0.07) · border rgba(255,255,255,0.12))
rgba(255,255,255,0.85)
On-dark Text
Body copy and secondary labels on dark canvas (primary rgba(255,255,255,0.85) · muted 0.6)

Status colors

#22C55E
Success
Operational states, confirmations
#F59E0B
Warning
Degraded service, caution
#EF4444
Error
Failures, major outages
#3B82F6
Info
Maintenance, informational notices

Typography

Roboto — Body & UI specimen

Roboto is the primary UI typeface — body copy, form fields, app labels, and landing descriptions.

The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Poppins — Marketing heading specimen

Poppins is used for marketing headings, landing section titles, hero headlines, and emphasis.

Privacy-first connectivity

Monospace — Monospace specimen

System monospace (ui-monospace, Courier) is used for code snippets, hex values, and technical identifiers.

#FFCD00 · rgba(255,255,255,0.07) · crypton.sh

UI surfaces

Auth cards, app account panels, and landing sections share the same glass material: dark gradient canvas, semi-transparent fill, backdrop blur, and a subtle inset highlight.

Auth card
Welcome back!
Login

Frosted login/register panel on ambient canvas

Account panel
PRIVACY POLICY

Glass panel used across the authenticated app

Usage rules

Correct — logo on Crypton gold
Correct — light mark on dark glass
Incorrect — stretched proportions
Incorrect — busy background

Do's

  • Use the logo on solid Crypton gold or dark glass backgrounds with adequate clear space.

  • Build UI on the dark canvas with frosted glass panels — the pattern used across auth, app, and landing.

  • Use gold for primary actions and brand emphasis; reserve green, amber, red, and blue for semantic status only.

Don'ts

  • Don't use legacy flat grey or full-page yellow backgrounds from the old landing theme.

  • Don't place the logo on busy imagery or unapproved color fields that reduce legibility.

  • Don't allow the logo to touch or overlap other graphic elements.

  • Don't stretch, recolor, or distort the logo; don't use off-palette colors for brand CTAs.