DO DevsOperative

DevsOperative

Brand Guidelines

Logo, color, typography, and usage standards for DevsOperative brand assets.

These guidelines define the core DevsOperative visual system used across web, documentation, social, and presentation assets.

Brand Assets

Mark Preview

DevsOperative mark

Logo Usage

  • Use the do-mark gradient logo as the primary brand icon.
  • Keep the mark upright. Do not rotate, skew, or distort it.
  • Do not alter the gradient colors or replace the internal “DO” lettering.
  • Preserve clear space around the mark equal to at least 0.5x the logo width.
  • Use SVG where possible for web and print; use PNG for contexts that do not support SVG.

Minimum Size

  • Digital minimum: 24px x 24px
  • Preferred app/site icon size: 38px x 38px
  • Presentation/social usage: 128px+

Color System

Primary brand colors (from live site tokens):

  • #0AB3B0 (--accent)
  • #1895DC (--accent-2)
  • #10243B (--ink)
  • #4F627B (--ink-soft)
  • #EEF4F7 (--bg)
  • #FFFFFF (--surface)

Gradient

  • Primary gradient direction: 135deg
  • Start: #0AB3B0
  • End: #1895DC

Typography

DevsOperative uses a two-font system:

  • Headings: Space Grotesk (500, 700)
  • Body/UI copy: Manrope (400, 500, 700, 800)

Typography Roles

  • h1-h4: Space Grotesk
  • Navigation and controls: Manrope medium/bold
  • Paragraph text: Manrope regular
  • Brand mark letters (“DO”): Space Grotesk bold

Accessibility and Contrast

  • Maintain strong contrast for text on gradient and navy backgrounds.
  • Do not place the logo on similarly saturated cyan/blue backgrounds without a container or sufficient contrast.
  • For dark/complex backgrounds, prefer placing the mark in a solid surface container.

Approved Variations

  • Full-color gradient mark on transparent background
  • Full-color gradient mark on light surface
  • Monochrome white mark for dark backgrounds (when needed)

Incorrect Usage

  • Do not recolor the gradient to non-brand hues.
  • Do not apply effects that reduce legibility (heavy blur, glow, low opacity).
  • Do not replace Space Grotesk lettering with another typeface.
  • Do not crop too tightly around the rounded square.

File Recommendations

  • Web UI: SVG first, PNG fallback
  • Social/profile icons: 1024x1024 PNG
  • Print and large-format: SVG source or 2048x2048+ PNG