Skip to main content
    DevOps
    Way of Working
    1. Home
    3. Assets
    DevOps
    Way of Working

    DevOps practices for the entire delivery lifecycle

    © 2019-2026 devopswow.com. Created by Burhan Öcüt

    PartnersAboutPrivacyTermsCookies

    Brand & Design System

    DevOps WoW • Turn maturity into momentum

    Single source of truth for brand assets, color tokens, typography, and design standards. Token-first styling with maturity-responsive colors and clean filled vector paths.

    Logo Variants

    Header/Footer Logo (with text)
    DevOps
    Way of Working
    DevOps
    Way of Working

    Maturity-responsive filled vector paths with "DevOps Way of Working" text

    Animated Infinity Loop
    DevOps

    Phase-sequenced animation (PLAN to CODE to BUILD to TEST to RELEASE to DEPLOY to OPERATE to MONITOR)

    Components

    Default
    Secondary
    Outline
    Loading spinner uses the same flat infinity geometry.

    Download Assets

    Download the current public assets for offline use. Files are served from the site root.

    • Infinity loop icon (SVG)
    • Default OG image (PNG)

    Colors

    Token-driven
    HSL CSS vars
    Background
    --background
    Sample text
    Surface
    --card
    Sample text
    Primary
    --primary
    Sample text
    Accent (CTA)
    --brand-accent
    Sample text
    Link
    --link
    Sample text
    Hero Accent
    --hero-accent
    Sample text
    Loop Stroke
    --loop-stroke
    Sample text
    Status - Info
    --status-info
    Sample text
    Status - Success
    --status-success
    Sample text
    Status - Warning
    --status-warning
    Sample text
    Status - Danger
    --status-danger
    Sample text
    FAB
    --fab-bg
    Sample text
    Muted
    --muted
    Sample text
    Border
    --border
    Sample text
    Viz 1
    --viz-1
    Sample text
    Viz 2
    --viz-2
    Sample text
    Viz 3
    --viz-3
    Sample text
    Viz 4
    --viz-4
    Sample text
    Viz 5
    --viz-5
    Sample text
    Viz 6
    --viz-6
    Sample text

    Usage Rules

    Use semantic tokens (e.g. primary, brand.accent, status.*, link) instead of raw Tailwind palette utilities (e.g. text-blue-500, bg-green-100) or hex literals.

    The infinity loop uses clean filled vector paths (not strokes) with maturity-responsive colors.

    Maturity Color System
    • Foundation: primary - Slate-grey tones for basic DevOps practices
    • Acceleration (+ Security): status-info - Navy tones when security is integrated
    • Optimization (+ AI): brand-accent - Coral tones when AI/ML is integrated
    Allowed use-cases (semantic mapping)
    • Brand identity: primary for brand surfaces and headings; brand.accent for CTAs and key highlights.
    • Links: link for inline links and interactive text.
    • Status: status.info, status.success, status.warning, status.danger for feedback, alerts, and severity.
    • Data visualization: viz.1 to viz.6 for charts/category colors (never raw palettes).
    • Neutrals: background/card/muted/border for surfaces, separators, and quiet emphasis.

    Anything else (e.g. text-indigo-600, bg-purple-100, HEX 3B82F6, rgb ...) is considered non-compliant and should be replaced by the semantic tokens above.

    OG Assets

    OG pages render without layout wrappers for capture/export. These links open the OG-only routes.

    Assessment - Advanced (Elite)Assessment - Basic (High)Roadmap (Medium)AI Readiness (Low)Value Stream Mapping (Elite)