---
version: alpha
name: "OpenSSL"
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."
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:
    fontFamily: "Inter"
    fontSize: "40px"
    lineHeight: 1.5
    letterSpacing: "0"
  body:
    fontFamily: "Inter"
    fontSize: "16px"
    lineHeight: 1.5
  mono:
    fontFamily: "SFMono-Regular"
rounded:
  button: "6px"
  card: "8px"
  pill: "9999px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "32px"
  xl: "64px"
---

## Overview

## Overview

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

## Colors

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.

## Typography

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.

## Layout

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.

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.

## Elevation & Depth

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.

## Shapes

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.

## Components

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.

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.

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.

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.

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.

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.

## 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.

**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.