# Cybocode — Brand foundation

Version 1.0 · 24 October 2026

This is the initial working standard for Cybocode's identity. It preserves the supplied logo and establishes a consistent system for the website, proposals, social content, presentations, and future digital products. The visual guide is available at `/brand`.

## 1. Foundation

**Name:** Cybocode. One word, capital C. Do not alternate with Cybo Code, Cyber Code, or all-lowercase prose. The supplied wordmark is artwork and retains its original styling.

**Primary signature:** Build. Automate. Scale.

Use `BUILD. AUTOMATE. SCALE.` in display headlines, with a period after each word. Use sentence case in body copy. Do not substitute a different primary hero slogan without updating the brand standard.

**Positioning:** An engineering partner connecting cloud, business systems, DevOps, AI, and automation to make complex business operations simpler.

**Promise:** Build the foundation. Automate the friction. Scale the possibility.

**Principles:**

- Connected: show how systems work together around a business need.
- Precise: clear information, specific claims, and obvious actions.
- Expansive: depth and cinematic space imagery suggest possibility; useful content stays grounded.

## 2. Logo and symbol

The primary identity is the existing full-color symbol and wordmark, used together in the supplied lockup. The guide does not redesign or reinterpret the logo.

### Artwork

| File | Use |
| --- | --- |
| `cybocode-logo-dark.png` | Full-color symbol with Starlight wordmark, on dark backgrounds |
| `cybocode-logo-original.png` | Full-color symbol with dark wordmark, on plain light backgrounds |
| `cybocode-symbol.svg` | Square symbol wrapper embedding the original bitmap; no wordmark |

The original full lockups are 1434 × 368 px. Their aspect ratio is approximately 3.897:1. Keep the supplied width-to-height relationship. The symbol occupies the left 368 × 368 px region of the original lockup. The SVG symbol is a lossless presentation wrapper around the original bitmap, **not** a reconstructed or resolution-independent vector master.

The older `cybocode-mark.png` includes a fragment of the wordmark. It is excluded from the kit. Use the clean square symbol wrapper instead.

### Clear space

Let H be the height of the supplied lockup. Keep at least **¼ H** empty on all sides, outside the artwork bounds. For the standalone symbol, use at least ¼ of the symbol height. No text, border, icon, or competing visual may enter this area.

### Minimum size

- Full lockup: 160 px wide on screens; 35 mm wide in print.
- Standalone symbol: 24 px on screens; 6 mm in print.
- These are starting minimums; verify legibility at actual size and use a larger version when needed.
- Obtain the original vector masters before large-format production. PNG files must not be enlarged beyond useful source resolution.

### Correct use

- Use the light wordmark on quiet dark backgrounds and the dark wordmark on quiet light backgrounds.
- On video or photography, place the logo on a separate quiet surface or a sufficiently darkened area.
- Keep the symbol's original red and blue. Scale the entire lockup proportionally.
- Use the symbol alone only in compact contexts where the name is already established, such as a favicon or account avatar.

### Incorrect use

- Do not stretch, skew, rotate, crop, redraw, or rearrange the lockup.
- Do not reset the wordmark in a font or change the symbol-to-wordmark spacing.
- Do not recolor, outline, apply textures, glow, gradients, or shadows to the logo.
- Do not put the logo inside the black hole, distort it with the scene, or use it as a mask for video.
- Do not invent monochrome or alternate marks; obtain an approved source asset when required.

### Partner lockups

Keep both logos intact, with at least ½ H between them. Balance visual height rather than forcing identical widths. Use each brand's own artwork and confirm permitted use. Never imply an unconfirmed affiliation.

## 3. Color system

The two logo colors and Starlight were measured from the dominant opaque pixels in the supplied PNG artwork. All values below are **sRGB**.

| Name | Hex | RGB | Role |
| --- | --- | --- | --- |
| Cybocode Blue | #127AC1 | 18, 122, 193 | Original logo and primary action backgrounds |
| Cybocode Red | #ED3926 | 237, 57, 38 | Original logo, display emphasis, small brand punctuation |
| Deep Space | #060910 | 6, 9, 16 | Main background |
| Orbit | #0D1728 | 13, 23, 40 | Raised cards and content surfaces |
| Starlight | #F5F5F2 | 245, 245, 242 | Primary text and supplied dark-background wordmark |
| Signal | #91A4BE | 145, 164, 190 | Secondary text on dark backgrounds |
| Link Blue | #55B7F0 | 85, 183, 240 | Body links, focus indicators, accessible interface emphasis |
| White | #FFFFFF | 255, 255, 255 | Labels on primary blue buttons |
| Blue Hover | #0E6DAE | 14, 109, 174 | Primary button hover background |

Start around 80% deep neutrals, 15% blue, and 5% red, excluding imagery. This is a composition guide, not a fixed quota. Red provides brand emphasis; do not use red as the only signal for error states.

### Accessible pairings

| Pairing | Contrast ratio | Guidance |
| --- | --- | --- |
| White #FFFFFF on Cybocode Blue | 4.59:1 | Suitable for normal primary-button labels |
| Signal on Deep Space | 7.83:1 | Suitable for secondary body text |
| Cybocode Blue on Deep Space | 4.34:1 | Large text or essential non-text graphics; use Link Blue for normal body links |
| Starlight on Cybocode Blue | 4.20:1 | Avoid for small labels; use pure White instead |
| Starlight on Cybocode Red | 3.69:1 | Large display text only |

Target at least 4.5:1 for normal text, 3:1 for large text, and 3:1 for essential interface graphics. Check actual component states and imagery overlays. Never rely on color alone to express status or selection.

CMYK and spot colors are not specified at this stage. They depend on the printer, paper, ink, and ICC profile. Proof a conversion against the original sRGB reference before production.

## 4. Typography

**Digital family:** `Sora, Arial, Helvetica, system-ui, sans-serif`.

**Technical metadata:** `ui-monospace, Consolas, monospace`.

Self-host Sora for the website; no third-party font request is needed. Confirm the platform's font licensing when embedding fonts into other deliverables. Do not use OpenAI Sans or copy OpenAI's custom identity.

| Role | Size | Weight | Line height |
| --- | --- | --- | --- |
| Hero display | 64–102 px desktop; 57–90 px narrow screens, scaled to fit | 800 | 0.95–1.05 |
| Section heading | 32–54 px | 400–600 | 1.1–1.2 |
| Body | 16–18 px | 400 | 1.6–1.8 |
| Supporting text | 13–14 px | 400 | 1.6–1.8 |
| UI label | 11–12 px | 500 | 1.4–1.6 |

Use −0.04em to −0.055em tracking on large headlines. Keep body tracking normal and reading lines around 45–75 characters. Uppercase labels can use +0.1em tracking; do not letter-space paragraphs. Decorative non-essential captions may be smaller, but actionable labels and important information must remain readable.

## 5. Composition

- Twelve-column desktop grid, four-column mobile grid.
- Maximum content width: 1328 px.
- Starting outer gutters: 56 px desktop and 20 px mobile; intermediate layouts may use 32 px.
- Base spacing unit: 8 px. Use 8, 16, 24, 32, 48, 64, and 96 px steps.
- Corner radius: 6–8 px. Use pills selectively for media controls or filters.
- Use thin, low-contrast dividers on dark surfaces. Interactive boundaries must remain distinguishable.
- One primary action per section, with quieter secondary links.
- Keep controls at least 44 × 44 px and provide visible keyboard focus.
- Use simple line icons from the site's existing Lucide set. Do not turn the logo into an icon system.

## 6. Imagery and motion

### Direction

Use cinematic black-hole, galaxy, and cosmic-light footage as atmosphere: dark negative space, dimensional light, a single focal point, slow movement. Prefer natural blues and warm reds when available. Do not recolor scientific material and present the result as an unmodified observation.

Retain the distinction between real footage, scientific visualization, and illustration. Current hero media is a **rendered NASA scientific visualization**, not a live camera feed, telescope photograph, or Cybocode simulation. Do not label it LIVE or real-time.

Keep the logo crisp and independent of scene lighting. Do not place essential information in a video or make navigation depend on motion. Restrict decorative orbital diagrams to explanatory supporting uses.

### Video behavior

- Muted, looping, inline playback with a visible keyboard-accessible pause/play control.
- Poster image visible before playback, when autoplay is blocked, or if video fails.
- Reduced-motion and data-saver visitors receive the poster until they explicitly press Play.
- Pause when the tab is hidden or the video is outside the viewport.
- Avoid downloading background video while it is offscreen.
- No forced audio, strobing, rapid zooms, or flashing effects.
- Default UI transitions: 180–280 ms; easing `cubic-bezier(.2,.7,.2,1)`.

### Future production brief

Aim for a 12–24 second loop with a quiet start/end transition, 1080p H.264 MP4, no audio track, a desktop asset under 8 MB, and a poster under 250 KB. Make a smaller mobile derivative when justified. Test first-load behavior on a slow connection. Source footage can remain larger if it is documented and delivery budgets are reviewed before launch.

Current source: “Black Hole with Accretion Disk Visualization,” orbiting clip, NASA SVS ID 14619. Credit **NASA/JPL-Caltech/R. Hurt (IPAC)**. Source and use records are in `asset-register.md`. Keep the credit with the displayed clip. The clip is third-party reference media, not part of the owned logo kit.

## 7. Voice

Confident, curious, and concrete. Speak as an engineering partner who understands the business. Describe the problem, the approach, and the useful outcome.

Good:

- “Connect sales, inventory, and finance in one system.”
- “Start with the workflow that slows your team down.”
- “Build. Automate. Scale.”

Avoid:

- “Revolutionary, next-generation synergy.”
- “Guaranteed growth at the speed of light.”
- Unsupported client names, statistics, awards, certifications, and partnership claims.

Use active verbs and short sentences. Space language belongs mainly in headlines and image direction; service copy must explain the actual deliverable. Do not describe concepts as client case studies.

## 8. Applications

**Website:** primary logo on a quiet dark header, signature headline, one primary action, accessible service navigation, and cinematic media kept independent from the reading flow.

**Social:** clear logo, one message, dominant signature or campaign headline, and an actual campaign destination. Start with square or 4:5 compositions; validate cropping before publication.

**Proposals and documents:** dark covers are optional. Use light interiors when they improve long-form reading, with the original dark wordmark and consistent blue/red punctuation. Use headings for business challenge, approach, deliverables, and next steps.

**Product tools:** prioritize clear forms, semantic status labels, accessible contrast, and predictable navigation. Avoid adding cosmic ornament to dense operational screens.

## 9. Assets, ownership, and maintenance

The ZIP contains the two original PNG lockups, the clean symbol SVG wrapper, this written guide, CSS tokens, JSON tokens, and the asset register. Media footage is intentionally kept outside the brand kit with its own provenance.

The logo files were supplied with the project. This guide does not independently verify their trademark ownership, registration, or rights. It creates no claim of affiliation with OpenAI or NASA. OpenAI's public brand page was a reference for guide structure; its artwork, proprietary font, and legal terms are not reused.

Version 1.0 is the initial working standard. Record revisions in the asset register, update code tokens and examples together, retain originals, and check contrast and responsive layouts when changing components.

Before extending the system:

1. Reuse existing approved assets and tokens.
2. Document the problem that requires an extension.
3. Verify readability, logo integrity, and media provenance.
4. Update the visual guide, written guide, tokens, and version history together.

## References

- Structural reference: https://openai.com/brand/
- Current media: https://svs.gsfc.nasa.gov/14619/
- NASA SVS reuse information: https://svs.gsfc.nasa.gov/help/
- NASA media guidance: https://www.nasa.gov/nasa-brand-center/images-and-media/

## Website typography update — 26 October 2026

The cinematic website uses self-hosted Sora (variable weights 300–700), with Arial/Helvetica/system sans fallbacks. The supplied logo artwork and its lettering remain unchanged. Font source: Google Fonts, `ofl/sora`; the SIL Open Font License is included in `public/fonts/Sora-OFL.txt`. Keep body text readable and use the original palette. The interactive orbital map and workflow use real geometry and labeled concept content, with keyboard control and reduced-motion alternatives.