DESIGN.md inspired by OpenSSL

---
name: "OpenSSL"
tagline: "Public-interest security expressed through quiet space and clear mission."
updated_at: 2026-08-23T11:57:38.568Z
published_at: 2026-08-23T11:57:38.568Z
author: webdesignhot
source_url: "https://www.openssl.org/"
spec: webdesignhot/0.2
profile: catalog
quality: curated
featured: false
categories: [oss, dev-tools]
tags: [oss, security, cryptography, infrastructure, systems]
preview_swatch: ["#ffffff", "#6a1720", "#303743"]
related: [wireguard, curl, nginx]
description: "The current OpenSSL homepage is a spacious, mission-led security foundation site: white canvas, compact top navigation, thin Roboto headings, a bold italic belief statement, burgundy OpenSSL identity, and a three-card ecosystem row. Translate its public-interest calm without losing technical routes or security context."

aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  accent: accent-blue
  muted: text-soft
  border: border
  ring: accent-blue

colors:
  bg: "#ffffff"
  surface: "#ffffff"
  text: "#303743"
  brand: "#6a1720"
  on-brand: "#ffffff"
  border: "#e2e5e8"
  text-soft: "#69727d"
  accent-blue: "#49a7e8"
  surface-soft: "#f6f7f8"
  shadow: "rgba(20, 30, 40, 0.16)"

typography:
  display:
    family: "Roboto, system-ui, -apple-system, sans-serif"
    weights: [300, 500, 700]
  body:
    family: "Roboto, system-ui, -apple-system, sans-serif"
    weights: [400, 500, 700]
  mono:
    family: "ui-monospace, SFMono-Regular, Menlo, monospace"
    weights: [400, 500]
  scale:
    display-hero: { size: 40, weight: 700, lineHeight: 1.15, tracking: '0', family: display }
    display-lg: { size: 34, weight: 500, lineHeight: 1.2, tracking: '0', family: display }
    h1: { size: 30, weight: 300, lineHeight: 1.2, tracking: '0', family: display }
    h2: { size: 26, weight: 400, lineHeight: 1.25, tracking: '0', family: display }
    h3: { size: 22, weight: 700, lineHeight: 1.25, tracking: '0', family: display }
    body-lg: { size: 18, weight: 400, lineHeight: 1.6, tracking: '0', family: body }
    body: { size: 16, weight: 400, lineHeight: 1.5, tracking: '0', family: body }
    body-sm: { size: 14, weight: 400, lineHeight: 1.45, tracking: '0', family: body }
    label: { size: 14, weight: 500, lineHeight: 1.4, tracking: '0', family: body }
    caption: { size: 12, weight: 400, lineHeight: 1.4, tracking: '0', family: body }

radius:
  micro: 2
  sm: 4
  md: 6
  lg: 8
  xl: 12
  pill: 9999

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128]

layout:
  page-width: 1160
  prose-width: 760
  header-height: 64

motion:
  ease-standard: 'cubic-bezier(0.2, 0, 0, 1)'
  duration-fast: 120
  duration-standard: 200
  duration-slow: 320
  reduced-motion: 'remove reveal transforms and preserve content order'

breakpoints:
  mobile: 640
  tablet: 960
  desktop: 1200
  wide: 1440

components:
  button-primary: { bg: brand, text: on-brand, padding: '10px 16px', radius: 4 }
  button-ghost: { bg: transparent, text: text, border: border, padding: '10px 16px', radius: 4 }
  card: { bg: surface, border: border, radius: 6, padding: 24 }
  input: { bg: bg, border: border, text: text, radius: 4, padding: '9px 12px' }

lineage:
  summary: "Recorded from the live OpenSSL homepage during the 2026-08-23 catalog audit."
  influences:
    - name: "OpenSSL public site"
      role: "Supplied the white mission-led canvas, restrained Roboto hierarchy, burgundy library identity, belief statement, and ecosystem card row."
      url: "https://www.openssl.org/"
---

## 1. Visual Theme & Atmosphere

OpenSSL is calm, spacious, and mission-led. The current page places a short top navigation above a large field of white space, a thin MISSION heading, a bold italic belief statement, and a restrained route into the organization's purpose. A row of ecosystem cards then grounds the mission in actual libraries and projects.

The system should communicate security as a public good, not as fear. Technical documentation, releases, and advisories still need direct routes even when mission content leads the page.

**Key Characteristics**
- Expansive white canvas
- Burgundy OpenSSL identity
- Thin Roboto section labels
- Bold italic mission statement
- Minimal top navigation
- Three-column ecosystem cards
- Restrained blue secondary accent
- Soft, purposeful card shadow

## 2. Color Palette & Roles

White is the dominant canvas and card surface. Use #303743 for primary reading, #6a1720 for OpenSSL identity and primary actions, and #49a7e8 for a secondary ecosystem or focus accent. Light gray borders and surfaces should remain almost invisible until they clarify grouping.

## 3. Typography Rules

Use Roboto throughout. Mission labels are 30px with light weight; the belief statement is 34-40px, bold, italic, and centered; card names are 22px/700; body copy is 16-18px. Monospace is reserved for commands, algorithms, versions, and API names. Do not use the mission quote treatment for ordinary instructions.

## 4. Component Stylings

Primary buttons use burgundy with white text. Secondary actions are underlined dark text or bordered white buttons; tertiary actions are plain underlined links; destructive actions use an explicit danger token and confirmation. Ecosystem cards use white, 6px radius, a restrained shadow, visible title, and direct action. Navigation remains textual. Technical inputs require labels, examples, validation, and visible blue focus.

## 5. Layout Principles

Use a 1160px shell with a centered 760px mission or prose column. Allow generous vertical whitespace around the main statement, then use a stable three-column card grid. Documentation pages can use a narrower reading column and side table of contents, but should retain the same quiet white ground.

## 6. Shapes & Radius Scale

Use 4px controls, 6px cards, 8px menus, and 12px only for a major callout. Keep navigation and text sections unframed. Pills are limited to release, security, or support status.

## 7. Depth & Elevation

Cards may use a soft shadow such as 0 4px 18px rgba(20,30,40,.16). Everything else stays flat. Shadows identify selectable ecosystem objects, not every content section. Overlays need a clear title, close action, and focus restoration.

## 8. Interaction & Motion

Use 120ms link feedback, 200ms menu or card transitions, and at most 320ms for a one-time content reveal. Focus is a 2px blue ring with 2px offset. Reduced motion removes reveal transforms and leaves all mission and technical content present immediately.

## 9. Accessibility & A11y

Maintain strong dark-on-white contrast and verify white on burgundy. The italic mission statement must remain readable at narrow widths and should not be the only statement of purpose. Project cards need semantic headings and meaningful logo alternatives. Security notices require severity, date, affected versions, and next action in text.

## 10. Responsive Behavior

Below 960px, reduce the card grid to two columns; below 640px, use one column and left-align long mission text if centering harms readability. Keep 16px body copy, 44px targets, bounded code overflow, and a labeled navigation disclosure.

## 11. Content & Voice

Write principled but concrete copy: "Discover our mission", "Open the library documentation", "View releases", and "Read the advisory". Avoid fear-based security claims. State algorithms, versions, affected systems, and remediation steps precisely.

## 12. Dark Mode & Theming

The audited page is light-only. A dark technical reader mode requires dedicated burgundy, blue, code, border, and semantic tokens. Do not invert logos or mission illustrations and do not erase the quiet white-space character of the canonical theme.

## 13. Lineage & Influences

OpenSSL combines nonprofit mission sites with open-source library documentation. Its current presentation moves from public purpose to concrete cryptographic projects, using editorial whitespace to create trust rather than relying on security motifs.

## 14. Do's and Don'ts

**Do**
- Keep the mission concise and visible.
- Use white space deliberately.
- Retain direct documentation routes.
- Use burgundy for OpenSSL identity.
- Label security state in text.
- Make ecosystem cards semantic.
- Preserve readable line lengths.
- Reflow the quote on mobile.

**Don't**
- Do not use fear-based imagery.
- Do not fill every white region with cards.
- Do not use the quote style for instructions.
- Do not hide advisories behind mission copy.
- Do not rely on logos without names.
- Do not overuse shadow.
- Do not animate security content continuously.
- Do not invent neon cyber styling.

## 15. Agent Prompt Guide

**Quick colors:** background #ffffff; text #303743; OpenSSL burgundy #6a1720; blue accent #49a7e8; soft surface #f6f7f8; border #e2e5e8.

**Example prompts**
- Create an OpenSSL mission section with expansive white space, a thin heading, and a bold italic belief statement.
- Design an ecosystem card row for security libraries with visible names and direct documentation actions.
- Build a security advisory page with affected versions, severity text, and remediation steps.
- Create a responsive mobile layout that keeps mission copy readable and cards single-column.

**Iteration guide:** establish mission and technical routes; tune white space; apply burgundy identity; build semantic project cards; verify advisory detail; then test mobile typography and focus.