Brand
Style Guide
Logo, color, typography and components for anything made with or about Space Data Network. Free to use.
1 · Logo
The Mark
Faint ringThe Earth and the network around it
Amber dotThe satellite being tracked, at top center
Amber tailIts orbit, fading in from 6 o’clock
Three linked nodesPeers exchanging digitally signed data
Rules
- Use the SVG files. Never redraw, stretch, rotate or re-proportion the mark.
- The satellite and its tail are always amber, the tail fading from transparent at 6 o’clock to full amber at the satellite. Everything else takes the background variant’s ink.
- Minimum size 16 px on screen, 6 mm in print. Clear space: one quarter of the mark’s width on every side.
- No gradients, shadows, outlines, glows, badges or other colors.
- Write “Space Data Network” in full in headings and titles. “SDN” is fine in body copy after first use, in the product and in code.
2 · Color
Dark First, One Accent
Near-black surfaces, off-white text and amber. Supporting colors each do one job.
Black
#000000 · --bgPage backgroundDiagram
#0b0b0c · surfaceDiagrams, charts, codePanel
#161617 · --panel-solidOpaque panelsText
#f5f5f7 · --textHeadings, primary textMuted
#8e8e93 · --mutedCaptions, labelsAmber
#f5a524 · --accentThe accent: links, eyebrows, orbitsSignal cyan
#59d9ff · second seriesA second object beside amberAlert red
#ff3b30 · alerts onlyWarnings and conjunctionsSatellite
#b3e0ff · globe dotsSatellites over the EarthAmber on light
#c77d00 · light surfacesThe accent on whiteInk on light
#1d1d1f · light surfacesText and mark on whiteRules
- One accent. No other brand hues.
- Never amber text on light backgrounds; use Amber on light or ink.
- Red means danger, always with an icon or a word.
- Text over imagery sits on a panel or carries the standard shadow. Buttons never do.
3 · Typography
System Fonts Only
Nothing loads from a font service. Sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial. Mono: ui-monospace, SF Mono, Menlo, Consolas.
Display · h1
40–76px · 700Space Data NetworkSection · h2
28–40px · 700 · Title CaseWhat The Network DoesCard title · h3
19px · 600 · Sentence caseDigitally signed at the sourceEyebrow
12px · 600 · 0.12emWhy it existsLede
17–21pxOne open network that hosts space data, modules and services.Body
16–17px / 1.6Every record carries its publisher’s Ed25519 digital signature, verified before your node stores it.Code
13px monocurl -fsSL https://spacedatanetwork.org/install.sh | bash4 · Layout and components
Pills, Panels And Eyebrows
- Content width 1120 px, reading columns 720–860 px, 20 px gutters, 72 px section padding, centered pages.
- Radii: 20 px cards, 12 px panels, images and tables, 18 px diagram frames, pills for buttons.
- Cards: translucent panel, hairline border, backdrop blur. Icons: 24 px line icons, 1.7 px stroke, amber.
- Buttons: the hovered button turns white with black text; the primary gives up its white meanwhile.
- Header bars: fixed at the top, translucent and blurred; their text is not selectable.
- Every stack site shares one top bar, stack section and footer: the SDN mark and site name, the site's links, a light and dark switch, and a menu button on narrow screens.
- Every section: eyebrow, Title Case heading, a one- or two-sentence lede. No horizontal scroll at 390 px.