Connected
Show how the pieces work together. Lead with the whole business, then the technology.
THE CYBOCODE IDENTITYFOUNDATION / V1.0
A connected
universe.
A distinct identity.
One identity. Every touchpoint. A practical guide to expressing Cybocode with clarity, confidence, and a sense of possibility.
Download the brand kitBUILD. AUTOMATE. SCALE.ESTABLISHED 24 OCTOBER 2026
01 /
Built to move business forward.
Cybocode connects engineering, business systems, and intelligent automation. Our identity expresses the same idea: distinct parts, working together.
OUR PROMISEBuild the foundation.
Build the foundation.
Automate the friction.
Scale the possibility.
Precise
Make information clear, actions obvious, and claims specific. Every element has a purpose.
Expansive
Use space, depth, and cinematic imagery to suggest what comes next. Keep the interface grounded.
Canonical name: Cybocode, one word, with a capital C. The primary signature is Build. Automate. Scale. Use uppercase for display headlines; use sentence case in prose.
02 /
Our identity, intact.
The existing full-color symbol and wordmark are our primary signature. Use the supplied artwork; preserve its geometry, proportions, spacing, and colors.
¼ H MINIMUM CLEAR SPACEGive the identity room.
H is the height of the supplied lockup. Keep at least ¼ H clear on every side. No text, borders, or imagery may enter this area.
Recognition comes first.
Full lockup: 160 px wide in digital use; 35 mm in print. Symbol: 24 px or 6 mm. Check smaller formats at actual size before use.
A symbol of connection.
Use the symbol for favicons, avatars, and compact product touchpoints where the Cybocode name is already visible. Use the full lockup for first introductions.
The downloadable SVG symbol wraps the original bitmap without redrawing it. It is not a vector master. Request the original vector artwork before large-format printing.
Keep it recognizable
- Dark wordmark on plain light surfaces.
- Light wordmark on plain dark surfaces.
- Place over a quiet, darkened area of imagery.
- Scale the full lockup proportionally.
Keep it unaltered
- Don’t stretch, skew, crop, or rotate the lockup.
- Don’t recolor the red and blue segments.
- Don’t add glow, gradients, outlines, or shadows.
- Don’t rebuild the wordmark with a font.
Partner lockups: separate logos by at least ½ H and balance their visual height. Keep both identities intact. Confirm partner asset permissions before publication; don’t imply an unconfirmed affiliation.
03 /
Two signals. Infinite depth.
The original logo supplies our blue and red. Deep neutrals create space for them to work. These sRGB values are sampled from the supplied artwork.
Select a swatch to copy its hex value.
80% / DEEP NEUTRALS15% / BLUE5% / RED
Use this balance as a starting point, excluding photography. Red is brand emphasis, not the only way to signal errors. Use a separate error message and icon. Print values must be proofed against the chosen paper and ICC profile; no universal CMYK conversion is specified.
Color that stays readable.
| Pairing | Contrast | Use |
|---|---|---|
| White #FFFFFF on Blue #127AC1 | 4.59:1 | Primary button labels |
| Signal #91A4BE on Deep Space | 7.83:1 | Secondary body text |
| Blue #127AC1 on Deep Space | 4.34:1 | Large text or non-text graphics; use Link Blue for body links |
| Starlight #F5F5F2 on Red | 3.69:1 | Large display text only; avoid small reversed labels |
Normal text targets at least 4.5:1; large text and essential interface graphics target at least 3:1. Always test the actual foreground, background, overlay, and state.
04 /
Clear thinking. Clear type.
Use an accessible sans serif with a direct, engineered character. The current digital foundation is self-hosted Sora, with Arial, Helvetica and system-ui fallbacks. Typography complements the supplied wordmark; it never replaces it.
ARIAL / REGULAR + BOLD
abcdefghijklmnopqrstuvwxyz
0123456789 & → + /
Aa Bb Cc
Build what’s next.
abcdefghijklmnopqrstuvwxyz
0123456789 & → + /
Display64–102 px / 800
BUILD. AUTOMATE. SCALE.
Heading32–54 px / 400–600
Connected by design.
Body16–18 px / 400
Engineering that moves your business forward.
Label11–12 px / 500
THE NEXT FRONTIER
Display line height 0.95–1.05; heading 1.1–1.2; body 1.6–1.8. Use −0.04em to −0.055em tracking for large headings and normal tracking for body text. Keep reading lines around 45–75 characters. Use ui-monospace / Consolas for code, values, and technical metadata.
05 /
Space is part of the system.
Create hierarchy with alignment and breathing room. Let one primary idea lead each section. Reserve dense layouts for tools that need them.
12-COLUMN FOUNDATIONA clear direction.
A clear direction.
Room to explore.
Use a 12-column desktop grid and a four-column mobile grid. Cap content at 1328 px. Start with 56 px desktop gutters and 20 px mobile gutters. Space with 8, 16, 24, 32, 48, 64, and 96 px steps.
Use restrained 6–8 px corner radii, thin dividers, and simple line icons. Keep interactive targets at least 44 × 44 px. Use orbit lines as supporting graphics; never place them over reading text.
06 /
A cinematic sense of possibility.
Black holes, galaxies, and light convey scale and discovery. Use real video files or sourced space imagery as atmosphere. Keep business content direct, readable, and grounded.
BEYOND THE EXPECTED
01 / THE NEXT FRONTIER
Possibility has no edge.
Deep blacks, dimensional light, slow camera movement, and a single focal point. Favor natural blue and warm red light when available. Keep logos flat and crisp on a quiet surface. Scientific visualizations must be labeled as visualizations.
Muted, inline, looping video with a visible pause control and poster fallback. Respect reduced motion and data saver. Pause when hidden or offscreen. No flashing, forced audio, parallax-dependent navigation, or essential information inside a video.
UI transitions: 180–280 ms; easing cubic-bezier(.2,.7,.2,1). For future hero commissions: aim for a 12–24 second loop, H.264 MP4 at 1080p, no audio track, a poster under 250 KB, and a desktop video under 8 MB. Current source footage is approximately 18 MB and should be optimized for a bandwidth-sensitive production launch.
Current hero visualization: NASA/JPL-Caltech/R. Hurt (IPAC). Keep its credit and source record. It is a rendered visualization, not real-time telescope imagery. It is not a Cybocode-owned brand asset.
07 /
Confident. Curious. Concrete.
Speak like an engineering partner who understands the business. Explain the problem, the approach, and the useful outcome. Use space language sparingly.
Say this
“Connect sales, inventory, and finance in one system.”
“Start with the workflow that slows your team down.”
“Build. Automate. Scale.”
Skip this
“Revolutionary, next-generation synergy.”
“Guaranteed growth at the speed of light.”
Unsupported client names, awards, statistics, or partnership claims.
Use active verbs, short sentences, and specific deliverables. Name technologies when they help the reader decide. Space imagery can inspire; service descriptions must explain what the company actually does.
08 /
One identity. Every orbit.
Adapt the system to the format. Keep the logo, color roles, and typography consistent across the website, proposals, social posts, and internal tools.
ENGINEERED FOR WHAT’S NEXTBUILD.AUTOMATE.
SCALE.cybocode.com
PROJECT PROPOSAL / 001Connected systems.
Clear outcomes.
Business challenge
Proposed approach
Delivery & next steps
Use light surfaces for long documents when they improve reading. Keep dark brand covers optional, never mandatory for every page. Social examples show composition only; replace copy and destination with the actual campaign.
09 /
Ready for the next touchpoint.
A portable foundation for designers, developers, and partners. The kit contains the existing artwork, documented usage, color values, and reusable CSS and JSON tokens.
Complete brand kitZIP / artwork, guide, tokens, asset notes
Written guidelinesMarkdown / version 1.0
Developer tokensCSS / named color and interface variables
Design tokensJSON / portable values and metadata
Logo for dark backgroundsPNG / original supplied artwork
Logo for light backgroundsPNG / original supplied artwork
Standalone symbolSVG wrapper / embedded original bitmap
A foundation that can evolve.
Version 1.0 establishes the initial working standard. Keep future changes in the version history, update the tokens and examples together, and retain original source artwork. Extensions should preserve the logo, accessible color pairings, and the primary signature.
Before production print, obtain vector masters and proof colors. Before using new third-party media, record its source, permitted use, and credit.
Asset register & version history