Wordmark: dark background
Full logo for dark UI, presentations, and hero sections.
Brand Kit
The Stepwik brand, documented
Logo files, typography, color foundations, and resources for press, partners, and teams building with Stepwik. Use these guidelines to represent our brand consistently.
Stepwik design system
A cohesive set of foundations and patterns for product UI, marketing, and partner materials. Built for clarity on dark surfaces, accessible contrast, and a developer-first tone.
Color & contrast
Stepwik blue anchors interactive states and accents. Surfaces stay deep and neutral so content and code blocks remain the focus.
Layout & rhythm
Generous spacing, rounded containers, and pill-shaped actions create a calm, modern feel across landing pages and the studio.
Components
Buttons, chips, cards, and expansion panels share the same border, radius, and hover treatments for a consistent Stepwik experience.
Stepwik Blue
#00A3FF
Marketing accents, links, eyebrows
Product Primary
#2196F3
Primary actions in the app
Sky Highlight
#60AAFF
Hover states, inline links
Brand Gradient Start
#2AC2FC
Logo mark gradient
Surface
#1E1E1E
Cards and elevated panels
Background
#121212
App and page background
Logo
Download official Stepwik marks. Always use approved artwork. Do not recreate the logo from type or screenshots.
Download SVG
Wordmark: light background
Full logo for light documents, slides, and print.
Wordmark: white
Monochrome wordmark for overlays and partner lockups.
Color wordmark
Full-color horizontal lockup for co-branding.
Mark: gradient
Standalone symbol for avatars, favicons, and compact placements.
App Icon
Simplified mark for small sizes and social avatars.
Usage guidelines
- Maintain clear space equal to the height of the mark on all sides.
- Do not stretch, rotate, recolor, or add effects to the logo.
- Use the light-background lockup on white or pale surfaces; use dark-background variants on black or navy.
- Minimum width for the full wordmark is 120px; use the app icon below 32px.
Typography
Three type families work together: display headlines, readable UI copy, and monospace for code.
Display & marketing headlines
Clash Grotesk
Light 300 · Regular 400 · Medium 500 · Semibold 600 · Bold 700
Build interactive learning
Hero titles, section headings, and high-impact landing copy.
UI & body text
Roboto
Regular 400 · Medium 500 · Bold 700
Turn documentation into hands-on labs.
Product interface, paragraphs, buttons, and form labels.
Code & technical labels
Space Mono
Regular 400 · Bold 700
npx stepwik init --lab
Code snippets, terminal output, and monospace UI elements.
Resources
Additional materials and channels for teams, press, and the Stepwik community.
Guides
Product documentation and how-to articles for teams using Stepwik.
Release notes
Stay current on new features, improvements, and platform updates.
Press & partnerships
Request high-resolution assets or approval for co-marketing use.
Security disclosure
Report vulnerabilities through our responsible disclosure program.
Need something else?
For custom formats, event assets, or co-marketing approval, reach out to our team.
Contact us