Clear, not simplistic
Explain behavioural patterns in plain English without flattening the nuance.
Brand identity referenceSelected primary accent: signal-teal #32D6B0Dark Editorial Intelligence
Behavioural patterns, made clear enough to act on.
Sonartra is a behavioural intelligence platform that helps people and teams understand how they work, lead, decide, adapt, and develop.
01 Overview
A calm, editorial system for serious behavioural insight.
Dark Editorial Intelligence gives Sonartra a premium and enterprise-credible presence without making the product feel cold or technical. It frames assessments as structured interpretation rather than quizzes, dashboards, or generic HR content.
The direction fits because Sonartra needs to hold complexity clearly. It should make behavioural evidence feel legible, considered, and actionable, while leaving room for human judgement.
02 Brand principles
The rules that keep the brand precise.
Premium, not decorative
Let restraint, spacing, typography, and precision create value. Avoid ornamental effects.
Human, not soft
Speak to real working behaviour without drifting into wellness language.
Structured, not rigid
Use clear hierarchy and repeated patterns while leaving room for interpretation.
Insight-first
Design should reveal what matters and help people decide what to do next.
03 Logo and mark usage
Use the identity with restraint and clear space.
Full wordmark
Use the full Sonartra wordmark for public, report, and expanded navigation surfaces where the brand needs to be immediately understood.
Isolated S mark
Use the mark for compact app icons, favicon-style contexts, collapsed sidebars, and small identity moments where the wordmark would become cramped.
Clear space
Leave clear space around the logo at least equal to the height of the mark. Do not crowd it with labels, badges, or navigation.
Do
Use white assets on dark surfaces and black assets on light paper surfaces. Keep the logo flat, sharp, and undistorted.
Do not
Do not stretch, recolour, outline, rotate, add glow, add drop shadows, or place the logo on noisy backgrounds.
04 Colour
Dark foundations, paper neutrals, and one primary signal accent.
Core colours
sonar-950
#080A0D
Primary dark foundation
sonar-900
#101318
Page background and deep panels
sonar-850
#171B22
Raised surfaces
sonar-700
#2A303A
Borders and quiet dividers
paper-50
#F5F1EA
Primary text on dark
paper-200
#D8D0C3
Secondary text
paper-400
#9A9185
Captions and restrained metadata
paper-100
#EFE8DC
Light report surfaces
ink-900
#171512
Text on light paper surfaces
Accent colours
signal-teal
#32D6B0
Primary Sonartra accent
signal-gold
#D9A441
Important emphasis
signal-amber
#E3A72F
Caution and readiness
signal-clay
#C86B54
Tension and limitation
signal-green
#65C28C
Stable progress
signal-blue
#6FA8DC
Supportive context
Selected primary accent: signal-teal #32D6B0. The primary accent is used for active states, selected answers, CTAs, focus states, and key interpretive highlights. Other accents should support interpretation, status, and comparison, not decoration. Avoid neon colour, heavy gradients, and excessive glow.
Primary accent experiments
Historical comparison set from the accent selection pass. Signal-teal #32D6B0 is now the selected primary accent; the alternatives remain here as context only.
signal-teal
#32D6B0
Selected primary accent. Clean, modern, and now locked as the Sonartra signal colour.
signal-teal-deep
#2FBFA3
Calmer and more mature while keeping the existing teal direction.
signal-cyan-mineral
#4DB8C8
Cooler, more analytical, and more clearly separated from Supabase-style green.
signal-sage
#8FBF9F
Softer, more human and editorial, but less active.
signal-violet
#9B8CFF
More distinctive and behavioural, but a stronger identity shift.
signal-copper
#C9825A
Premium and human, but better suited as a secondary accent than the primary CTA colour.
Decision locked: signal-teal (#32D6B0) remains the Sonartra primary accent. It is the reference colour for primary actions and interpretive emphasis on this brand page.
05 Typography
Editorial hierarchy with practical product legibility.
Display and reports
Use a refined serif style for major report headings and editorial moments. It should feel considered, not literary or ornate.
UI and body
Use a clean sans-serif for interface text, labels, navigation, and long-form guidance. Clarity wins over personality.
Data and diagnostics
Use restrained mono only where it helps parse keys, tokens, statuses, or diagnostics. Do not overuse mono in product or public pages.
06 Voice and tone
Measured language for behavioural evidence.
Use
Clear, measured, behavioural, balanced, premium, plain English, and British English.
Avoid
Hype, exclamation marks, wellness clichés, vague AI claims, corporate buzzwords, and personality absolutes.
BadUnlock your full potential.
BetterUnderstand the patterns shaping how you work.
BadAI-powered insights that transform your team overnight!
BetterSee the decision patterns that shape team momentum and friction.
BadYou are a visionary leader.
BetterVision appears strongly in how you frame direction and future options.
07 Components
Reference patterns for future product polish.
Primary button
Reserved for the next meaningful action.
Secondary button
For considered navigation and non-destructive actions.
Status badge
Short, specific, and calm.
Glassmorphism navbar
A quiet premium navigation surface for high-impact public pages.
Use this pattern on homepage hero surfaces where navigation should feel present but recede behind the content. The full logo can sit centred in the glass surface when the layout stays balanced.
Background: rgba(255,255,255,0.10)
Backdrop filter: blur(20px) saturate(1.35)
Border: 1px solid rgba(255,255,255,0.20)
PlatformSignals
LoginGet Started
Avoid heavy blur, glow, neon colour, or glass effects that compete with the hero message. The background should remain calm and receding.
Result panel
Direction is clear, but adaptation needs range.
The result should explain the behavioural pattern, then show what it enables, where it narrows, and how to apply it.
Assessment answer card
I clarify the outcome first, then adjust the route.
Selected states should be confident and calm, not gamified.
Card
Team decision pattern
Cards should carry one clear idea, a short explanation, and a precise next step.
Sidebar and navigation
Workspace
Assessments
Results
08 Assessment results
Assessment Results Experience
Sonartra results should feel like guided behavioural intelligence briefings: clear enough to scan, deep enough to recognise yourself, and structured enough to act on. They should not feel like PDF reports, form output, schema renderers, dashboards, or assessment worksheets.
A Sonartra result should feel like a guided behavioural intelligence briefing: clear enough to scan, deep enough to recognise yourself, and structured enough to act on.
Reader journey
Standard section flow for monetisable result experiences.
Results pages should render authored, schema-backed sections in a stable journey. The UI supports understanding; it does not generate new interpretation.
1
Introduction
Context
2
Pattern at a Glance
Orientation
3
Core Interpretation
Recognition
4
Signal Profile
Ranked role clarity
5
What Shapes This Pattern
Mechanism
6
How the Pattern Works
Synthesis
7
What Comes Easily
Strengths and value
8
Where It Can Narrow
Constructive limitation and missing range
9
How to Use It
Practical behaviour
10
Take Forward
Closing integration
Schema-backed content
Result pages render authored, schema-backed sections. The UI displays the result contract; it does not write, reinterpret, or recompute meaning.
Ranked pattern signature
Every result should make the pattern visually understandable before deep reading. Use compact signal distribution, not decorative charts or dashboard metrics.
Reading rail
Desktop results use a guided rail for progress and section position, grouped into Understand, Decode, and Apply. Mobile should not force a desktop rail.
Reading modes
Dark editorial mode can remain the default. A warm light reading mode should support longer reflective reading without becoming pure white.
Focus mode
Desktop Focus mode may reduce distractions without browser fullscreen. It should preserve the rail, controls, theme choice, and anchor navigation.
Visual tone
Use warm charcoal and graphite surfaces, restrained signal-teal accents, and clay or amber only for narrowing. Avoid terminal contrast and gamified visuals.
Do
- Make the result shape visible before deep reading.
- Use the reading rail to hold journey, progress, and controls.
- Keep active state, Now reading, and Up next treatments calm and premium.
- Let narrowing areas feel constructive, not like warning or error states.
Avoid
Raw schema labelsPrototype, debug, or source residueEqual-weight card stacksOveruse of metricsDecorative chartsRepeated explanatory model languageReport-like section dumpsVisible import mechanicsUI-side recomputationHardcoded interpretive labels that should be schema-backed
09 Layout and spacing
Spacing should make the intelligence easier to scan.
Generous spacing
Use meaningful section breaks and avoid packing too many competing ideas into one viewport.
Calm report width
Long-form insight should sit in a readable measure, supported by side metadata only when it adds clarity.
Scan-first hierarchy
Headings, labels, panels, and status should let a reader understand the page before reading every line.
Mobile readability
Stack sections deliberately, preserve spacing, and avoid dense text blocks or cramped card grids.
10 Motion
Movement should orient, not impress.
Use
Subtle fades, small state changes, and purposeful transitions that help users track where they are.
Avoid
Bounce, gamified transitions, theatrical reveals, excessive glow, or motion that competes with the insight.
11 Example applications
How the direction translates across Sonartra surfaces.
Public homepage hero
Behavioural intelligence for how teams work
Reveal the patterns behind how people lead, decide, adapt, and develop.
Dashboard card
Your current signal pattern
Results leads your profile, with Vision providing the strongest secondary pull.
Assessment runner question
When a plan becomes uncertain, what do you usually do first?
Choose the response that best reflects your normal working pattern, not your ideal one.
Result opening panel
A practical pattern of direction and delivery
Your result suggests a strong bias towards outcomes, supported by future framing.
Admin validation state
Language coverage needs review
Three driver statements are missing for this draft. Publish remains blocked until coverage is complete.