AstrionHub Brand System
The visual identity, interaction language, and voice of AstrionHub. This document governs the appearance of customer-facing web properties, technical documentation, investor materials, and ecosystem tooling.
Logo & Marks
AstrionHub uses a wordmark with a tinted suffix. "Astrion" renders in ink, "Hub" in signal lime. The mark functions standalone as a connected-node glyph inside a rounded square.
Default. Use on white and very light surfaces.
On inverted surfaces. Signal lime shifts one step lighter for contrast.
Reserved for cover slides and marketing hero units.
Used at 16, 32, 180, 512. Available in images/favicon.ico.
Minimum margin equals the cap-height of the wordmark (about 24px at default).
Never render below 14px on screen or 10pt in print.
Misuse
Color System
A restrained palette of one signal lime, a full slate scale for structure, and tightly scoped status hues. Marketing surfaces use the brand hue at full strength. Application UI favors slate neutrals with lime reserved for interactive elements.
Brand
Ink & neutrals
Slate scale. Body uses 900, secondary text 600, hints 500, hairlines 200. Match your ramp to Tailwind slate for vendor alignment.
Status
Contrast matrix
| Foreground | Background | Ratio | Normal | Large |
|---|---|---|---|---|
| #E8E6E1 | #14161A | 15.1 : 1 | AAA | AAA |
| #C9CCD2 | #14161A | 11.4 : 1 | AAA | AAA |
| #8A8F99 | #14161A | 5.6 : 1 | AA | AAA |
| #C6F24E | #14161A | 14.2 : 1 | AAA | AAA |
| #14161A | #C6F24E | 14.2 : 1 | AAA | AAA |
| #E0A23C | #14161A | 7.7 : 1 | AAA | AAA |
| #F2785C | #14161A | 6.2 : 1 | AA | AAA |
Color in context
Typography
Inter for everything human-readable. JetBrains Mono for identifiers, metadata, and data grids. The type scale is tight: eight steps, 1.25 ratio, geared for dense documents.
Pairing rules
- All figures and identifiers use tabular numbers (
font-variant-numeric: tabular-nums). - Body uses sentence case. Headings use sentence case. Labels may use UPPERCASE with 0.06em tracking.
- Never italic. Weight carries emphasis. Bold is 600, not 700.
- Line length caps at 72 characters for prose, 55 for dense UI.
Spacing & Layout
Base unit 4px. The scale doubles roughly at each step. Layouts use an 8-point rhythm; marketing pages loosen to 12.
Container widths
| Breakpoint | Label | Range | Max width | Gutters |
|---|---|---|---|---|
| xs | Phone | 0 - 479 | 100% | 16 / 8 |
| sm | Phone Large | 480 - 767 | 100% | 24 / 12 |
| md | Tablet | 768 - 1023 | 720 | 32 / 16 |
| lg | Desktop | 1024 - 1439 | 1180 | 32 / 24 |
| xl | Wide | 1440+ | 1280 | 48 / 24 |
Grid
12-column grid at lg and above. 8 columns at md. 4 columns at sm. Stack on xs. Marketing hero can break the grid; application UI cannot.
Radius, Borders, Shadows
AstrionHub prefers tight 8px radius across the application. Larger corners are reserved for marketing surfaces. Shadows are always neutral.
Radius
--r-xs
--r-sm
--r
--r-lg
--r-full
Shadow
Never use colored shadows. Never stack more than two shadows on a single surface.
Border
Form Inputs
Clean, flat controls. 8px radius. 3px focus ring at 15% brand alpha. Labels sit above inputs at 13px. Inline validation only after first blur.
Cards & Surfaces
A small family: base card, featured (brand top-rail), media card. Borders over shadows for structure. Shadows reserved for hover states and modals.
ah-001 / payments
Two-way webhook bridge between the Checkout service and the accounting ledger. 99.98% uptime over 30 days.
Private datarooms
Single-tenant document spaces with granular permissioning and watermark-based exfiltration controls.
How Northbridge cut latency 62%
Migration from self-hosted brokers to managed streams, implemented in six weeks.
Data Display
Tables are the core of the application. They use tabular numbers, striped rows past eight lines, and sticky headers when vertical space is limited.
| Connection | Region | Throughput | p99 | Status |
|---|---|---|---|---|
| ah-001 | us-east-1 | 18,204 r/s | 42 ms | Active |
| ah-002 | eu-west-1 | 9,881 r/s | 58 ms | Active |
| ah-003 | ap-south-1 | 2,017 r/s | 118 ms | Degraded |
| ah-004 | us-west-2 | 0 r/s | — | Paused |
- Legal entity
- AstrionHub Inc.
- Jurisdiction
- Delaware, USA
- Support SLA
- 99.95% quarterly
- Certifications
- SOC 2 Type II, ISO 27001
- Data residency
- Configurable per connection
Feedback
Alerts, toasts, loaders, skeletons, progress bars. Terse, specific messaging. No emoji. No exclamation marks.
Iconography
Lucide at 1.5 stroke, 16 / 20 / 24 sizes. Filled icons are disallowed except for chevrons inside selects. Icon color inherits from its surrounding text.
Motion
Short, purposeful. Enter with ease-out. Exit with ease-in. AstrionHub surfaces do not bounce except on intentionally playful product features.
| Token | Value | Use |
|---|---|---|
| --dur-fast | 75ms | Toggle, checkbox flip |
| --dur | 150ms | Hover, focus ring |
| --dur-slow | 250ms | Modal entrance, toast |
| --ease-out | cubic-bezier(.2,.8,.2,1) | Default enter |
| --ease-in | cubic-bezier(.4,0,1,1) | Default exit |
| --ease-spring | cubic-bezier(.34,1.56,.64,1) | Interactive demos only |
Demos
Slide · ease-out · 250ms
Pop · spring (demo only)
Fade · ease-in
Voice & Tone
Quiet. Specific. Declarative. We describe what we do, and what we do not do. We prefer measured nouns over enthusiastic adjectives.
Forbidden words
These words never appear in AstrionHub marketing or documentation:
Usage Rules
Eight guidelines for applying the system consistently across marketing, application, and sales material.
- Use one primary action per surface.
- Pair every claim with a number or date.
- Align numerics with tabular figures.
- Keep the slate neutral scale consistent with Tailwind slate.
- Use sentence case for headings and buttons.
- Restrict signal lime to interactive or emphasized elements.
- Respect prefers-reduced-motion.
- Version every document with DOC-ID and effective date.
- Do not use gradients inside the application UI.
- Do not apply drop shadows to the wordmark.
- Do not mix signal lime with amber in the same surface.
- Do not use sentence-ending exclamation marks.
- Do not italicize text for emphasis.
- Do not use emoji in product copy.
- Do not deploy light shadows above dark surfaces.
- Do not mention any AI vendor by name in customer-facing copy.
Accessibility
The brand system is WCAG 2.2 AA conformant. The figures below are minimums, not targets.
- Body contrast
- Minimum 4.5 : 1. Target 7 : 1 for prose.
- UI contrast
- Minimum 3 : 1 for non-text interactive elements.
- Tap target
- 44 x 44 px on touch devices.
- Focus ring
- 3px solid rgba(43,91,209,0.3) outside the control.
- Motion
- prefers-reduced-motion disables all non-essential animation.
- Keyboard
- Full tab order. Skip-to-content on every page. No key traps.
- Forms
- Visible labels. Errors announced via aria-live.
- Language
- html[lang] set. Content in other languages wrapped in [lang="..."].
Content Patterns
How common content types compose within the system. These examples exist to prevent reinvention on every page.
Feature block
End-to-end encrypted channels
All inter-tenant traffic is encrypted with per-session keys rotated every fifteen minutes. Public keys are pinned at the region level.
- Cipher
- ChaCha20-Poly1305
- Key rotation
- 15 minutes
- Pinning
- Per region
- Audit
- SOC 2 Type II, 2026
Quote pull
"AstrionHub replaced three of our middleware products and reduced reconciliation incidents by 62%."
Diana Morel, VP Engineering, Northbridge Capital
Pricing tier
$0
Up to 500k requests / month
$499
Up to 50M requests / month
Custom
Custom limits, dedicated region
Status line
Code Tokens
A complete :root block. Copy into your stylesheet or download the full .css file from the top-right of this document.
Component Spec Reference
Exact dimensions for every component. When a designer and an engineer disagree, this table is the tiebreaker.
| Component | Height | Padding X | Padding Y | Radius | Font |
|---|---|---|---|---|---|
| Button · default | 36 | 16 | 8 | 8 | 14/500 |
| Button · sm | 28 | 10 | 4 | 6 | 13/500 |
| Button · lg | 44 | 20 | 10 | 8 | 15/500 |
| Input | 36 | 12 | 8 | 8 | 14/400 |
| Select | 36 | 12 | 8 | 8 | 14/400 |
| Textarea | auto | 12 | 10 | 8 | 14/400 |
| Chip | 22 | 10 | 3 | 999 | 12/500 |
| Tab | 40 | 16 | 10 | 0 | 14/500 |
| Card | auto | 20 | 20 | 8 | inherit |
| Alert | auto | 16 | 12 | 8 | 13/400 |
| Toast | auto | 16 | 10 | 8 | 13/400 |
| Table cell | 40 | 12 | 10 | 0 | 13/400 |
| Table header | 36 | 12 | 10 | 0 | 11/600 |
Focus treatment
All interactive elements receive a 3px focus ring at rgba(43, 91, 209, 0.3) offset 0px, using box-shadow so it composes with existing borders without a layout shift.
Density modes
| Mode | Row height | Use |
|---|---|---|
| Comfortable | 44 | Marketing, docs |
| Default | 40 | Most application tables |
| Compact | 32 | Log viewers, trace tables |
Supplementary
Reference material that complements the core system. Reviewed quarterly.
Z-index scale
- base
- 0 · normal document flow
- sticky
- 10 · top navigation, sticky headers
- dropdown
- 20 · select menus, popovers
- tooltip
- 30 · hover-triggered annotations
- overlay
- 50 · modal backdrops
- modal
- 60 · modal content
- toast
- 100 · transient notices
Reserved words per locale
| Locale | Company reference | Product reference |
|---|---|---|
| en-US | AstrionHub, Inc. | AstrionHub (never "Astrion Hub") |
| en-GB | AstrionHub Limited | AstrionHub |
| de-DE | AstrionHub GmbH | AstrionHub |
| ja-JP | AstrionHub 株式会社 | AstrionHub |
Approved integrations
Third-party marks used alongside AstrionHub must appear in their official colors at a size equal to or smaller than the AstrionHub wordmark. Never recolor a partner mark.
Changelog
Revisions to this document.
- v3.0 · 2026-06-23 · Graphite
- Full rebrand. Moved from light/blue to a dark Graphite system: graphite surfaces, warm off-white ink, signal-lime accent, Clash Display display over Inter + JetBrains Mono, technical grid, connected-node logo mark. Recomputed contrast matrix for dark surfaces.
- v2.0 · 2026-04-21
- Expanded to maximum specification. Added full slate scale, shadow tokens, motion system, contrast matrix, accessibility section, icon guidance, component state gallery.
- v1.3 · 2026-02-14
- Introduced DOC-ID governance. Tightened radius scale.
- v1.2 · 2025-12-08
- Added amber status accent. Removed teal.
- v1.1 · 2025-10-22
- Adopted Inter over SF Pro.
- v1.0 · 2025-09-01
- Initial brandbook published.