Mark
Hexagonal shield. Primary symbol.
Brand system
Certexi brand — operational by construction.
The full set of deliverables you need to apply the Certexi brand correctly — identity, voice, colour, typography, surfaces, components, motion and the don'ts. Every artefact here is generated from the live design tokens; if the platform changes, this page changes with it.
01 · Identity
The mark, the wordmark, the lockup.
Three forms, one geometry. The mark stands alone for tight UI; the lockup carries the full operating system context.
Certexi
Wordmark
Inter Semibold · −0.02 em tracking.
Certexi
Primary lockup
Mark + wordmark. The canonical form.
Certexi/ Evidence OS
Extended lockup
Adds the operating-system tagline in mono.
Certexi
Clear space · 1× mark height around the lockup
Reserve a margin equal to the mark height on all four sides. Nothing — text, ui, imagery — encroaches inside the dashed frame.
Mono — primary
Signal — accent only
Verify — sealed states
02 · Thesis & voice
Operator-grade. Unsentimental. Evidential.
The brand has a single thesis and a deliberately quiet voice. Marketing tone is rejected by construction.
The thesis
If you can't prove it, it didn't happen.
Operator-grade
Write the way an operator on the floor would phrase it. No metaphor, no marketing arc.
Precise
Say the exact thing. "Sealed at the moment of execution" — not "captured in real-time-ish".
Unsentimental
No inspirational filler. No mission-statement adjectives ("amazing", "revolutionary").
Evidence-first
Claim only what can be sealed and shown. If we cannot evidence it, we do not say it.
Quiet
No exclamation marks. No emojis in body copy. The thesis is loud enough.
Do say
- Verified execution.
- Sealed at the moment of execution.
- Operational evidence chain.
- Continuously audit-ready.
Don't say
- Revolutionary AI-powered audit experience.
- Real-time-ish evidence (when possible).
- World-class blockchain-based compliance platform.
- Boost your operational excellence today!
03 · Colour
Graphite, hairlines, text — plus one signal.
Every value is an RGB channel triple in CSS so opacity modifiers compose. Hex values shown for reference.
Graphite · surfaces
The dark base. Three steps from page background → raised panel → elevated inset.
cx.bg
#08090B
rgb 8 9 11
Page base. The deep graphite.
cx.raised
#0D0F12
rgb 13 15 18
Cards, ledger panels, alternating sections.
cx.elevated
#13161A
rgb 19 22 26
Inset surfaces, hover states, header strips.
Hairlines
Two-tier border system. Lines are always thin; emphasis comes from contrast, not weight.
cx.line
#1F2329
rgb 31 35 41
Default 1 px border. Section dividers, card edges.
cx.line-strong
#2E333C
rgb 46 51 60
Emphasised border. Panels at rest, button outlines.
Type
Three-step text ramp on graphite. Never use pure white.
cx.fg
#F0F1F3
rgb 240 241 243
Primary text. Body, headlines, key labels.
cx.fg-muted
#999FA8
rgb 153 159 168
Secondary text. Captions, intros, nav.
cx.fg-faint
#5C626B
rgb 92 98 107
Tertiary text. Mono indices, scaffolding.
Signal · accents
A single bright accent + a verify green + an alert amber. The signal is a marker, never a fill.
cx.signal
#CAFB4C
rgb 202 251 76
Primary CTA, key underlines, marker squares.
cx.verify
#4ADB8A
rgb 74 219 138
Verified / sealed state. After-side of the comparison.
cx.alert
#F08E58
rgb 240 142 88
Caution. Evidence-gap warnings, "before" indicators.
04 · Typography
Inter sans. Monospace for technical labels.
The display scale is fluid (clamp); body sizes are fixed. Mono carries every technical marker — eyebrows, indices, timestamps, hashes.
Display
clamp(2.4rem, 5.6vw, 4.3rem) · −0.035 tracking · 1.04 leading
InterFrom reported execution to verified execution.
Section title
clamp(1.6rem, 3.6vw, 2.55rem) · −0.025 tracking · 1.12 leading
InterDesigned to be measured.
Card title
1.05 rem · semibold · −0.015 tracking
InterOperational Surfaces
Body
1.0125 rem · 1.65 leading
InterCertexi captures cryptographically sealed evidence at the moment execution happens — turning every critical transition into an institutionally admissible record of truth.
Body small
0.9 rem · 1.65 leading
InterSealed records link into an immutable, ordered operational evidence chain.
Eyebrow
0.68 rem · 0.20 em tracking · uppercase · mono
ui-monospaceOperational Evidence & Compliance Execution System
Mono small
0.66 rem · 0.14 em tracking
ui-monospace41.3851°N 2.1734°E · 14:02:07Z · 0x9f3a…4e1c
Mono micro
0.6 rem · uppercase · structural labels
ui-monospaceArchitectural guarantee · Populates on activation
05 · Surfaces & hairlines
Three graphite tones, two hairline tiers.
Depth is built from tonal steps, not shadows. Every card sits on a 1 px line, not a glow.
cx.bg · page base
#08090Bcx.raised · panel
#0D0F12cx.elevated · inset
#13161AHairlines
cx.line — default
cx.line-strong — emphasised
cx.signal — key underlines only
Corner ticks
Four 10 px brackets at the corners of a panel. Used to frame instrument-grade surfaces like the evidence ledger. Render via the CornerTicks primitive.
framed surface
06 · Components
A small, precise set of parts.
The whole site is assembled from these. If a new screen needs something not here, the system extends — it doesn't redesign.
Use signal for the single primary action on a screen. Ghost for the secondary action. Quiet for inline links.
SealedSealingQueued
Verify · signal · neutral. The same three states power the evidence ledger.
Operational signals
A 6 px signal square + mono uppercase label. Marks every section opening and major panel header.
FlowhashImmutable chainOn-premiseYour keys
Compact, mono, hairline-bordered. Used inside layer / capability cards.
live · sealing · attention
Pulsing live indicator. Reserved for surfaces that are genuinely receiving signal.
Flowhash seal
256-bit immutable chain link.
07 · Iconography
One icon set. Lucide.
Outline icons at 1.5 px stroke. No custom illustrations, no brand-specific glyphs — the operational vocabulary stays interchangeable.
- ScanLine
- Lock
- Link2
- BadgeCheck
- Hexagon
- Fingerprint
- ShieldCheck
- Check
- PenLine
- Clock
- MapPin
- Cctv
- RadioTower
- LogIn
- LogOut
- PackageCheck
- Scale
- FileCheck
- Truck
- Ship
- Train
- Warehouse
- Factory
- Server
- Cloud
- Unplug
- Cpu
- Workflow
- LayoutDashboard
- Network
- WifiOff
- Activity
08 · Motion
One easing curve. Nothing bounces.
Content rises into place once, on scroll. Reduced-motion users get the same compositions with transforms snapped to the final state.
cubic-bezier(0.16, 1, 0.3, 1)
A single industrial curve. Fast start, settled end. Applied to every reveal, hover-colour transition and stagger.
Rise-in duration0.7 s
Stagger interval0.08 s
Reduced motiontransforms disabled
Eyebrow + heading enter together
Body + supporting text follow at 60 ms
CTAs / panels last at 120 ms
Reveal once per session per element (once: true). Off-screen animations never restart.
09 · Textures
Four CSS-only background motifs.
No raster, no SVG decoration. Every texture is a single CSS rule and respects reduced-motion.
Grid field
.cx-grid-field
72 px blueprint grid. Used as page background under the hero and closing CTA.
Tick rule
.cx-tick-rule
Repeating 14 px measurement ticks. Used on instrument-grade panel edges.
Scanline
.cx-scanline
5.5 s vertical sweep with a soft signal gradient. Reserved for live evidence surfaces.
Vignette
.cx-vignette
Radial signal tint at 5 % opacity. Seats hero content over the grid.
10 · Don'ts
What the brand is not.
The system is defined as much by what we refuse as by what we ship. These are the rules that keep Certexi from drifting into generic SaaS.
No gradient type fills
Headlines are solid foreground. The only "gradient" in the system is the soft top-edge signal glow on the closing band.
No glow halos on signal
The signal accent is a flat marker. Box-shadows on signal elements should be near-invisible.
No neon or cyberpunk hues
Magentas, cyans, violet-pinks. Keep the palette graphite + signal lime + verify green + alert amber.
No signal as content background
Signal is for markers, dots, key underlines and the single primary CTA. Never as a large area fill behind paragraph text.
No startup gradients
No sky-to-purple, no rainbow, no abstract blob art. Industrial, machined, monochrome foundations.
No glassmorphism on surfaces
Only the nav uses a backdrop blur. Cards are flat graphite with hairline borders.
No SaaS illustration sets
No floating people, no isometric devices, no 3D characters. Diagrams are technical, structural, terminal-grade.
No exclamation marks
No "!", no all-caps body copy, no marketing emojis. Quiet, precise, evidential.
11 · Assets
Download what you need.
Source-of-truth assets served straight from the platform. No PNG copies — SVG only, scales for every surface.
End of system
Every artefact above is live in the platform. Apply the brand by composing these parts — never by replacing them.