Skip to content

Color system

Visual language
Color carries meaning.

A violet-black foundation creates continuity. Magenta identifies source and ownership, cyan communicates verification, and yellow or red signal states requiring attention.

Color is semantic before it is decorative.

The same color must communicate the same concept across QVTM diagrams, Infinitrust interfaces, documentation, presentations and generated assets.

Foundation surfaces

Geometry of Trust uses a deliberately shallow surface system.

Canvas

Void

The continuous background for websites, documentation and applications.

#0D0917
--got-void
Interface

Dark ceramic

The standard surface for cards, navigation, forms, tables and dashboards.

#171326
--got-surface

Additional dark values support borders and contextual separation. They do not represent independent elevation levels.

Preview Name Value Token Role
Panel #201B32 --got-panel Navigation, controls and contained regions requiring stronger separation
Selected surface #2A2440 --got-elevated Explicitly selected or expanded content
Border strong #3B3453 --got-border-strong-color High-emphasis separators and structural edges

Note

Panel and Selected surface are contextual values, not steps in a general elevation system. Use them only when the interface requires clearer structural separation.

Text colors

Text hierarchy is expressed through contrast, not through multiple font weights.

Preview Name Value Token Role
Primary #F5F3FA --got-text-primary Headings and high-emphasis interface text
Secondary #C9C5D4 --got-text-secondary Body copy and standard UI text
Muted #9892AA --got-text-muted Captions, metadata and supporting information
Disabled #68627A --got-text-disabled Disabled content and unavailable actions
Do
  • Use primary text for headings and critical values.
  • Use secondary text for normal reading content.
  • Use muted text only for genuinely secondary information.
  • Maintain WCAG contrast requirements in every context.
Do not
  • Use pure white for long body copy.
  • Use disabled text for information that remains actionable.
  • Create hierarchy only by reducing opacity.
  • Place low-contrast text over gradients or glass.

Brand and semantic colors

Each chromatic color has a defined responsibility.

Identity

Infinitrust Magenta

Identity, ownership, origin and brand presence.

#C93BCE
--got-magenta
Transition

Electric Violet

Transformation, continuity, transition and spatial depth.

#8A48FF
--got-violet
Verification

Current Cyan

Verification, active proof, focus and validated relationships.

#21D4FF
--got-cyan
Attention

Signal Yellow

Pending review, attention and non-destructive warnings.

#FFD34E
--got-yellow
Failure

Revocation Red

Revocation, invalid evidence, destructive actions and failure.

#FF5577
--got-red
Completion

Operational Green

Completed operational actions that are not themselves trust verification.

#36D97A
--got-green

Warning

Green means that an operation completed successfully. Cyan means that evidence or a relationship was verified. Do not use green as a substitute for verification.

Semantic mapping

Concept Color Examples
Identity and source Magenta Owner, issuer, source node, brand object
Transition and continuity Violet Intermediate paths, transformations, spatial atmosphere
Verification and active proof Cyan Verified relationship, active proof path, keyboard focus
Attention and review Yellow Pending review, incomplete configuration, non-critical warning
Failure and revocation Red Revoked evidence, invalid proof, failed operation, destructive action
Operational completion Green Import completed, configuration saved, deployment successful

The semantic mapping must remain stable across products.

Brand gradient

Brand current

var(--got-gradient-brand)

Equivalent value:

linear-gradient(
  135deg,
  #C93BCE 0%,
  #8A48FF 48%,
  #21D4FF 100%
)

Use the brand current for:

  • primary commercial calls to action
  • selected marketing emphasis
  • active relationship paths
  • controlled hero reflections
  • small brand-signature details

Do not use it as:

  • a full-page background
  • routine card decoration
  • body-text fill
  • a generic status color
  • the background of every primary interface control

Verified current

var(--got-gradient-current)

Equivalent value:

linear-gradient(
  135deg,
  #8A48FF 0%,
  #21D4FF 100%
)

Use for:

  • active proof paths
  • verification focus
  • graph edges leading to a validated state
  • restrained technical emphasis

The gradient must not replace an explicit verification label or icon.

Product expression

QVTM and Infinitrust share identical color semantics but use different chromatic intensity.

Protocol

QVTM

Restrained, technical and suitable for diagrams, specifications and monochrome-safe output.

Approximately 85% neutral surfaces, 10% cyan, 4% magenta or violet and 1% warning or destructive color.
Commercial platform

Infinitrust

Uses the same semantics with richer atmospheric color, commercial emphasis and active product visualization.

Approximately 70% neutral surfaces, 12% cyan, 16% magenta or violet and 2% warning or destructive color.

These proportions are compositional guidance, not strict mathematical quotas.

Core rules

Do
  • Use magenta for identity and origin.
  • Use cyan for verification and focus.
  • Use yellow only when review or attention is required.
  • Use red for failure, invalidity, revocation and destructive actions.
  • Use color together with labels, boundaries or icons.
Do not
  • Use semantic colors interchangeably.
  • Use magenta as a generic error color.
  • Use green to mean verified.
  • Use gradients as decoration without a semantic role.
  • Communicate state through color alone.
Knowledge graph