Brand

Visual identity guidelines for Open Security Architecture. Use these when referencing, embedding, or extending OSA materials.

Colour Palette

Five colours derived from a cool blue progression. The palette is intentionally restrained to maintain a professional, trustworthy appearance appropriate for security architecture.

White

#FFFFFF

rgb(255, 255, 255)

--osa-white

Backgrounds, cards, content areas

Midnight

#00171F

rgb(0, 23, 31)

--osa-midnight

Headings, header, footer

Navy

#003459

rgb(0, 52, 89)

--osa-navy

Body text, secondary elements

OSA Blue

#007EA7

rgb(0, 126, 167)

--osa-blue

Primary brand, links, CTAs, accents

Sky

#00A8E8

rgb(0, 168, 232)

--osa-sky

Hover states, highlights, pattern badges

CSS Variables

:root {
  --osa-white: #FFFFFF;
  --osa-midnight: #00171F;
  --osa-navy: #003459;
  --osa-blue: #007EA7;
  --osa-sky: #00A8E8;
}

Typography

System font stack for fast loading and native feel. No custom web fonts.

Page Title text-3xl font-bold / Midnight

Security Design Principles

Section Heading text-2xl font-bold / Midnight

Key Control Areas

Card Title text-xl font-semibold / Midnight

Zero Trust Architecture

Body Text text-base / Navy

OSA patterns define the proven control sets for specific architectural scenarios, with NIST 800-53 Rev 5 controls mapped to each control area.

Link font-medium / OSA Blue → Sky on hover

Browse security patterns

Font Stack System fonts, no web font dependency 
font-family: ui-sans-serif, system-ui, -apple-system,
  BlinkMacSystemFont, "Segoe UI", Roboto,
  "Helvetica Neue", Arial, sans-serif;

Components

Cards

Default Card

White background, subtle shadow, lifts on hover.

Accent Top Card

4px Sky accent border. Used for pattern and framework cards.

Accent Left Card

4px OSA Blue left border. Used for founder profiles and key content.

Badges

Control Family

Access Control (AC) Incident Response (IR) System & Comms Protection (SC)

Baselines

Low Moderate High Privacy

Pattern Status

Draft New in Rev 5 Reserved

Buttons

Diagram Conventions

Pattern diagrams are interactive SVGs rendered inline for full clickability on all platforms.

SVG Standards

  • - ViewBox: 960 x 720 pixels
  • - Colours: OSA palette only
  • - NIST badges: clickable links to control pages
  • - References: clickable links to external sources
  • - Rendering: inline via fs.readFileSync + Fragment
  • - Responsive: width 100%, height auto

Visual Techniques

  • - White lozenge: semi-transparent white rect behind text on coloured backgrounds
  • - Trust boundaries: dashed lines in Navy
  • - Data flows: solid arrows with direction indicators
  • - Control placement: badges positioned near the component they protect
  • - Layout: logical flow, left-to-right or top-to-bottom
  • - Icons: 73 security architecture SVGs in the icon library

Logo & Assets

OSA favicon

Favicon (SVG)

Scalable vector mark

OSA favicon on dark

On Dark Background

Midnight header/footer

Open Security Architecture

Wordmark

System font, Midnight colour

Design Approach

Professional Trust

Cool blues convey authority and reliability. No gradients, no decoration. The palette is deliberately restrained for a security audience.

Content First

Typography, whitespace, and hierarchy do the work. No stock imagery, no illustrations. Diagrams are the visual language.

Data-Driven

All content is structured JSON rendered at build time. Patterns, controls, and frameworks are data, not pages. This enables machine consumption as well as human reading.

Zero Dependencies

System fonts, no analytics trackers, no third-party JS. The site loads fast, respects privacy, and works everywhere. Built with Astro and Tailwind CSS on Cloudflare Pages.

License

All OSA materials including patterns, controls, diagrams, and icons are freely available under the Creative Commons Attribution-ShareAlike 3.0 license. You may use these brand assets when referencing or embedding OSA materials, provided you credit Open Security Architecture and include a link to opensecurityarchitecture.org.