• 48

  Dossiers

• ∞

  Possibilities

• 1

  Universe

The Q-Orbit mark is one vector geometry — an open prismatic orbit crossed by a portal stroke, with an inner orbit and a single node. Every surface reuses it: web favicon, PWA icons, Android adaptive foreground, Apple touch icon and the social share card. Minimum size 24px; keep clear space equal to the node diameter; never recolour the accents individually, never add outer glow, never stretch the lockup.

• Primary symbol

  Prismatic orbit + portal tail

• Small-size symbol (16–32px)

  Simplified: no inner orbit, thicker ring

• Monochrome

  currentColor for print, masking, single-ink

• QosmosQHDM Social OS

  Wordmark lockup

  Tracking-led, never distorted

• Compact icon tile

  Nav, chips, avatars

• App / launcher icon

  Obsidian field, one aurora sweep

• Dark-background treatment

  Default product surface

• Light-background treatment

  Daylight theme, print, partner decks

• Master mark (SVG)/brand/q-mark.svg
• Monochrome light / dark/brand/q-mark-mono-light.svg
• Primary lockup/brand/qosmos-lockup.svg
• Compact lockup/brand/qosmos-lockup-compact.svg
• QosmOS runtime lockup/brand/qosmos-os-lockup.svg
• Social share card (1200×630)/brand/og-qosmos.png
• App icon 512/icons/qosmos-512.png
• Maskable icon 512/icons/qosmos-maskable-512.png

Naming: Qosmos is the product and the domain. QosmOS is the runtime shell (web, installable PWA, and a capability-detected native wrapper) — it is not a 49th dossier and never replaces the Qosmos name in product copy.

• Social & IdentityQosmiQ ID, QopQrew, Qommunities
• Creator & MediaQreators, QAMERA, Qomix, SQYRoqet
• Business & WorkQompany, Qapital, MarQet, Qabinet
• Learning & CampusQollege, Vybbzz, NeuropleQ, Qream
• Finance (Demo)Qash, Qoin, Qredit, banQing, Qosmybank
• Tech & InfraQLOUD, Qmulonimbus, BloQchain, Qrypto
• Health & WellbeingMediQube, MediQure, ResQ, EqoPulse

• Obsidian

  App foundation

  --background

• Graphite

  Panels and rails

  --surface-2

• Warm White

  Type and icons

  --foreground

• Prismatic Cyan

  Primary action, identity

  --cyan

• Electric Lime

  Growth, learning, live

  --lime

• Coral

  Care, alerts, wellbeing

  --coral

• Amber

  Value sandbox, commerce

  --amber

• Violet

  Creation, frontier, media

  --violet

Qosmos Display · Space Grotesk

Qosmos Text · Outfit

The future is social, creative and decentralized.

Display for headings and marks; text for body, labels and data. Letter-spacing tightens only on display.

Every dossier category resolves to exactly one accent, so cards, rails and chips stay consistent across the atlas, feed and workspaces.

• Campus & Learninglime
• Civic & Humanitarianlime
• Cloud & Intelligencecyan
• Creator & Mediaviolet
• Creator & Projectsviolet
• Discoveryamber
• Frontier Infrastructureviolet
• Frontier Technologyviolet
• Health Resourcescoral
• Human Supportcoral
• Identity & Credentialscyan
• Knowledgecyan
• Learninglime
• Mobilitycyan
• Places & Propertyamber
• Planet & Climatelime
• Planet & Wellbeingcoral
• Productivitycyan
• Researchviolet
• Social & Campuslime
• Social & Civiccyan
• Social & Identitycyan
• Social & Knowledgecyan
• Social Discoverycoral
• Trust & Governancecyan
• Value Sandboxamber
• Work & Earningamber
• Work & Servicesamber
• Work, Commerce & Organizationsamber

• Obsidian (dark)

  Dark-first QHDM default

• Daylight (light)

  Warm paper, same accents

• Match system

  Follows your device setting

Switch themes in Settings. Accents are re-tuned per theme so contrast holds in both.

• Q Orb

  The constellation mark: prismatic ring, graphite core, orbit node.

• Orbit

  Elliptical rails that connect dossiers and relations.

• Matrix Dots

  56px grid texture for canvases and atlas surfaces.

• Aurora Glow

  Restrained depth wash — never behind body copy.

Motion, elevation, blur, icon sizing and border strength are CSS variables in src/styles.css. Components reference the token, never a hand-picked value, so a change propagates across all 48 dossiers and every shell.

• Motion — micro

  --dur-micro 140ms · --dur-interaction 200ms

• Motion — panels & pages

  --dur-panel 280ms · --dur-page 380ms

• Easing

  --ease-standard / --ease-entrance / --ease-exit

• Elevation

  --elev-1 / --elev-2 / --elev-3 (q-elev-* utilities)

• Blur

  --blur-sm 6 · md 10 · lg 20 · xl 34

• Icons

  --icon-xs 12 → --icon-xl 28

• Borders

  --border-hairline · --border · --border-strong

• Radii

  --radius 0.75rem with sm → 3xl derivations

Every screen composes these instead of re-inventing header rows, empty cards and error blocks. Status meaning is carried by icon and text as well as colour.