Light background
Official brand standards
NitroFlow Brand Guidelines
This document defines how NitroFlow should look, sound, and behave across product, marketing, and communications. It is the source of truth for consistent and professional brand execution.
Brand foundations
NitroFlow helps teams orchestrate people, data, and AI with operational clarity and measurable outcomes. We are precise, confident, and human-centered—direct and pragmatic in how we speak, explaining systems in actionable terms and avoiding empty hype.
Logo system
Use the official NitroFlow logo variants based on background contrast. Keep clear space equal to the height of the logomark icon.
Dark background
- Minimum digital width: 120px for full logo, 32px for icon-only usage.
- Never alter logo proportions, color values, or orientation.
- Avoid busy image backgrounds unless a contrast container is applied.
Color system
NitroFlow uses tokenized colors to keep product and marketing visual output aligned, scalable, and accessible.
Primary
--md-sys-color-primary
#4F46E5
Primary actions and key highlights.
On Primary
--md-sys-color-on-primary
#FFFFFF
Text and icons on primary surfaces.
Secondary
--md-sys-color-secondary
#475569
Supporting UI emphasis and metadata.
Tertiary
--md-sys-color-tertiary
#0D9488
Expressive accents and state emphasis.
Surface
--md-sys-color-surface
#F1F5F9
Application and page backgrounds.
On Surface
--md-sys-color-on-surface
#0F172A
Primary text and iconography.
Nitro Accent Chaos
--nitro-accent-chaos
#FF6B35
Marketing energy accents and badges.
Nitro Accent Flow
--nitro-accent-flow
#818CF8
Marketing gradients and chapter highlights.
Typography
Inter is the primary typeface across product and marketing. Maintain hierarchy with tokenized type scales.
Display
Aa Bb Cc 123
Headline
Workflow run #4821 — Legal approval pending
Title
Owner · Next step · Status
Body
Use concise, direct language. Keep copy actionable and outcome-driven.
UI expression
System behavior
Use rounded geometry, subtle depth, and clear boundaries. Build UI from semantic tokens for maintainability.
Primary actionSecondary actionActive status
Accessibility baseline
Prioritize legibility in all states. Use on-surface/on-primary text roles and avoid decorative-only information.
- Target WCAG AA contrast for body text combinations.
- Do not encode meaning by color alone; pair with labels or icons.
- Preserve readable line length and spacing on mobile.
Correct and incorrect usage
Do
- Use official logo files only and preserve clear space around the mark.
- Keep contrast strong for readability across light and dark surfaces.
- Use the design token system instead of hardcoded visual values.
Don't
- Do not stretch, rotate, or apply effects directly to the logo.
- Do not combine low-contrast text with accent or gradient backgrounds.
- Do not introduce arbitrary colors outside the approved token palette.
Assets
Download and use only approved files. If you need additional formats, request them through the NitroFlow team.
