Codrlabs Solutions
Brand Guidelines
The official visual identity, color system, typography, and voice guidelines for Codrlabs Solutions. Use this as the reference for all branded communications.
01
Logomark & Logotype
The Codrlabs logo is built from four geometric shapes — two circles and a connecting arc — paired with a custom wordmark. Use only the supplied SVG files; never recreate the logo in text.
Symbol
Used standalone for favicons, app icons, and avatar crops.
Light background
Dark background
Primary logotype
Full logo with SOLUTIONS tagline. Default for all branded materials.
Light background
Dark background
Compact logotype
CODRLABS without tagline. Use in headers, footers, and space-constrained contexts.
Light background
Dark background
Logo typography
Code Next — Thin (100)
The thin weight creates elegant contrast against the bold LABS. Uppercase only.
Code Next — ExtraBold (800)
Maximum weight anchors the logomark. The visual emphasis of the brand name.
Code Next — Light (300)
Letter spacing at 90% — spread wide beneath the logo, reinforces the tagline hierarchy.
02
Color palette
Four brand colors that create a vibrant, dynamic palette. The contrast between Magenta and Turquoise anchors the warm Apricot and Burnt Orange for a harmonious system.
Energy, passion, and creativity. The boldest element of the palette — used for strong CTAs, highlights, and key UI moments.
Sunshine and optimism. Introduces warmth and positivity — used for stat counters, highlights, and warm gradient stops.
Passion, energy, and intensity. Bridges Magenta and Apricot in gradients — adds depth and draws attention.
Calmness, trust, and reliability. The primary interactive color — used for buttons, links, and interactive elements.
Brand gradient
CSS (diagonal)
linear-gradient(135deg,
#AC0C90 0%, #E37343 50%, #F6BD51 100%)CSS (horizontal)
linear-gradient(to right,
#AC0C90 0%, #E37343 50%, #F6BD51 100%)Usage
Banners, section backgrounds, and decorative dividers only. Never on buttons or body text.
Neutral palette
Dark Gray
#282828
Primary text
Light Gray
#D3D3D3
Secondary text, dividers
Off White
#F7F7F7
Backgrounds, surfaces
Pure White
#FFFFFF
Primary background
Dark Navy
#14142B
Dark backgrounds, footer
Product palettes
Each product has its own distinct color identity, separate from the Codrlabs brand palette. Used exclusively within product UIs and their marketing materials.
SpeakshApp
Maestronom
03
Typography system
Two typefaces — Plus Jakarta Sans for headings and UI labels, DM Sans for body text. Together they balance authority with warmth.
Display / Headings / UI
Aa
Plus Jakarta Sans
Weights: 400 · 500 · 600 · 700 · 800
Body / UI text
Aa
DM Sans
Weights: 300 · 400 · 500
Light body — used for hero subtitles and introductory paragraphs.
Regular body — the default for all descriptive content, card text, and longer prose across the site.
Medium small — used for nav links, tags, captions, and supporting metadata.
04
Logo usage rules
Consistent application of the logo builds recognition. Follow these rules in all branded materials.
Use the full logomark on white or dark backgrounds only
Maintain clear space equal to the height of the "C" on all four sides of the logo
Keep the logo at a minimum of 120px wide for digital, or 30mm for print
Use the brand gradient (Magenta → Burnt Orange → Apricot) for decorative elements
Use Turquoise as the primary CTA color across all digital touchpoints
Place the logo on busy photographic backgrounds without a solid color backing
Stretch, skew, rotate, or alter the proportions of the logo in any way
Use unapproved colors or add drop shadows, outlines, or effects to the logomark
Use the brand gradient as a button fill or body text color — it is decorative only
06
Brand assets
Download the complete brand kit including SVG logomarks, PNG exports at all required sizes, color swatches, and the full brand guidelines PDF.
05
Social & digital presence
Consistent handles across all platforms. The icon buttons below are the approved format for footer and email use.
Icon buttons — footer format
Facebook
@codrlabs
Instagram
@codrlabs
LinkedIn
Codrlabs
YouTube
@codrlabs
Blog
codrlabs.com/blog
Website
codrlabs.com