Brand system · v1 · 2026
The CodeGenIT brand, in one place.
Logo, colour, typography, voice and motion — the single source of truth for presenting CodeGenIT consistently, everywhere.
Logo
The mark
The CodeGenIT logo pairs a blue “CodeGen” wordmark with an orange “IT” — the blue + orange split is the single most recognisable element of the identity. Keep it intact.
Primary — on dark
Primary — on light
Monochrome — print / watermark
Emblem — app icon / favicon
Emblem — on light
Clear space & minimum size
- Leave clear space on all sides equal to the height of the “IT” mark.
- Minimum full-lockup width: 120px. Minimum emblem size: 24px.
- Always use the supplied vector files — never re-key or re-trace the logo.
Misuse — don’t
- ✕Don’t recolour the logo outside the palette, or swap the blue / orange roles.
- ✕Don’t stretch, rotate, skew or add drop shadows, glows or bevels.
- ✕Don’t place the logo on a busy photo or a low-contrast background.
- ✕Don’t recreate the wordmark in a different typeface.
Colour
Palette
A deep navy ink system carries the brand, with orange for energy and action and blue for trust. Accents are reserved for large text, UI and graphics — never small body copy.
Surfaces
Ink 900
Primary background
Ink 800
Surface
Ink 700
Elevated surface / cards
Ink 600
Borders / hover
Brand accents
Blue
“CodeGen”, links, trust
Azure
Secondary accent
Orange
“IT”, CTAs, energy
Orange Soft
Gradient highlight
Neutral
Paper
Light bg / dark-bg text
Slate
Muted / secondary text
Success
Positive signal (restrained)
Signature gradient
Typography
Type system
Three typefaces, each with a clear job: Space Grotesk for display, Inter for everything you read, and JetBrains Mono for code and technical accents.
Engineering the intelligent enterprise.
We design, build and ship AI-powered software — LLM agents, RAG systems, web platforms and mobile apps — engineered to be fast, secure and production-ready. The quick brown fox jumps over the lazy dog. 0123456789.
const brand = { ink: "#0b1424", blue: "#1575bc", orange: "#f58423" };Type scale (rem)
One <h1> per page. Display headings use letter-spacing: -0.01em.
Voice & tone
How we sound
Confident & outcome-led
We talk about results and shipped software — not framework names or buzzwords.
AI-fluent, not hype
Explain LLM agents, RAG and automation in plain business terms anyone can act on.
Enterprise-credible
Polished enough to share with clients as a reference build. Precise, never sloppy.
Tagline: “Transform Your Ideas Into Reality” — evolving toward outcome-led lines such as “AI-powered software that moves your business forward.”
Motion & imagery
In use
Motion
Animate transform and opacity only — it protects Core Web Vitals. Use scroll reveals, subtle node-network backgrounds and animated metric counters. Always respect prefers-reduced-motion.
Imagery
Abstract gradient meshes, node / particle networks and real product screenshots in device frames. No generic “businessman + hologram” stock photography.
Get the assets
Logos in every format, the full colour palette and the complete guidelines — packaged and ready to use.