Monogram
Use for avatars, favicons, social icons, and tight square placements.
AvatarsFaviconsSocial badges
Partner resources
Branding
Official Rawkode Academy artwork, color values, and simple usage rules. Keep it consistent, legible, and uncluttered.
Logo assets
Use the right lockup for the space
Preview the source artwork as a solid ink mark, then download the variant you need.
Icon
Use for app tiles, partner lockups, product UI, and compact brand moments.
App tilesPartner cardsProduct UI
Wordmark
Use when the full Rawkode Academy name needs to be legible at a glance.
HeadersBannersPrint
Color
One canonical palette
The editorial palette - warm paper surfaces, deep ink type, and three restrained accents - is the single brand treatment across the academy, streams, partner materials, and product surfaces. Flat color only: no gradients, no glows, no drop shadows.
Paper
Light surface. The default ground for the mark and all print.
Ink
Primary type and the default solid logo treatment on light surfaces.
Spruce
Primary accent: links, section marks, and action states.
Amber
Live and on-air signals. Decorative use only; never body text on light surfaces.
Rust
Secondary accent: difficulty tags and kickers.
Type
Three typefaces, three jobs
Serif italic for display, a geometric sans for body, and a mono for labels and meta. Do not substitute or mix roles.
Engineering journal meets terminal
Instrument Serif
Italic display headings and headline-scale text.
Tutorials, deep dives, and curated events.
Inter Tight
Body copy and interface text, weights 300–700.
§01 · PARTNER RESOURCES
JetBrains Mono
Labels, meta strips, code, and microcopy.
Usage
Keep the mark simple
The brand works best with contrast, room to breathe, and no extra effects competing with the logo.
Rules
- Keep clearspace around the mark on all sides.
- Do not stretch, skew, outline, or add shadows to the logo.
- Do not apply gradients to the logo; tint it as a single solid color.
- Use the wordmark where the full name needs to be understood quickly.
- Use the monogram or icon in constrained square placements.
- Avoid busy backgrounds unless there is enough contrast.
Inline SVG tinting
.brand-logo svg * {
fill: currentColor !important;
stroke: currentColor !important;
}
.brand-logo--spruce {
color: oklch(0.50 0.09 165);
}