Monogram
Use for avatars, favicons, stickers, or anywhere the brand needs to fit in a square. Keep plenty of breathing room so the M shape stays crisp.
- Avatars & profile badges
- Social icons
- Overlays on content
Our brand assets, color system, and recommended usage for partners
Our master artwork ships in black so you can tint it for any surface. Inline the SVGs and apply currentColor to match blue or green palettes without exporting variants.
Preview treatments
Toggle between the solid fill and official gradients to see how the lockups glow when you tint them.
Use for avatars, favicons, stickers, or anywhere the brand needs to fit in a square. Keep plenty of breathing room so the M shape stays crisp.
Square logo built for UI chrome, app tiles, or partner lockups that need a bold geometric mark.
Full logotype for hero sections, brochures, and anywhere legibility is critical. Only scale proportionally; never stretch.
The PDF mandates two gradients: purple→blue for Rawkode and teal→green for Rawkode Academy, both running on a 45° angle from top-left to bottom-right. Use these for hero panels, gradient logos, and any glowing dividers.
45° sweep
Academy visuals run from teal into green (page 8), mirrored across hero cards and merch.
Use when the Academy is the lead brand story: curriculum launches, learning hub surfaces, etc.
45° sweep
Primary Rawkode lockups transition from purple into blue as documented in the PDF (page 5).
Keep for Rawkode logos, backdrops, and partner lockups tied to the core company brand.
Rawkode runs two first-class themes. Use the Green theme by default and switch to the Blue theme when a partner already leans blue. Partners must stick to one of these two treatments — no custom palettes.
Default
Everyday Rawkode Academy brand moments — content, docs, livestreams, and merch.
Primary actions & hero gradients
Glow accents & CTA outlines
Typography & surfaces
System
Use when we co-brand with developer tooling or infra partners who lean blue.
Primary headlines & hero sweeps
Buttons, inputs, status
Depth, borders, typography
We keep only the black source file in the repo and theme it with CSS. Inline SVGs work best; when using an <img/>, use filter or CSS masking if needed. Prefer the following approach for inline SVGs:
/* Define colors as variables */
:root {
--brand-primary: #6B46FF;
--brand-on-surface: #23282D; /* base black */
}
/* Inline svg -- set svg children to currentColor */
.brand-logo svg * {
fill: currentColor !important;
stroke: currentColor !important;
}
/* Usage: tint the svg by setting color */
.brand-logo--primary { color: var(--brand-primary); }
.brand-logo--dark { color: var(--brand-on-surface); }