Operational calm
Quiet by default. Attention only when it matters.
The operationalbackbone,made visible.
A monochrome-first identity for operational intelligence, built to hold across product, documentation, and financial operating surfaces.
Download assetsPrinciples
Five operating commitments
The operating logic behind every Claura surface: quiet by default, precise when action is required.
Invisible until needed
Infrastructure stays below the surface until a decision is due.
Signal over noise
Every visible element must earn its place.
Infrastructure-grade trust
Predictable behavior is part of the product.
Monochrome discipline
Neutral systems. Violet only where intelligence is active.
Primary direction
One mark, one idea
Rails is the only approved direction. The rest of the identity system exists to make this mark easy to choose, reproduce, export, scale, and deploy.
Approved identity direction
Fragmented sources resolving to one operational baseline.
The four rails represent upstream sources. The shared baseline is the reconciled truth Claura creates. Every variant below is a production adaptation of this single drawing.
PrimaryMonochrome-safeFavicon-ready
Primary mark introduction
Rails mark
Rails is the approved primary mark. It is built for small UI, monochrome reproduction, and the dark operational surfaces where Claura lives.
Approved production mark
- Primary export
- claura-symbol-primary.svg
- Default surface
- Dark UI / product chrome
- Minimum primary
- 24px digital
- Favicon switch
- 12–23px
- Safe area
- 1x bar width minimum
- Accent rule
- Second rail only
Construction
Built on a 64-unit square. Rails snap to a 2-unit grid and share the same baseline.
- Canvas
- 64 x 64 units
- Bar width
- 6u
- Inter-bar gap
- 4u
- Corner radius
- 3u
- Shared baseline
- y = 52
- Heights
- 24 · 38 · 32 · 28
Operational rules
Approved
Fixed geometry
Accent discipline
Variant switch
Variant system
Approved logo matrix
Eight production variants cover the environments Claura actually ships into. Each variant has a defined surface, constraint set, and export path.
Primary
Approved default- Use
- Default mark for product UI, docs, launch screens, and owned dark surfaces.
- Environment
- Dark or near-black canvases: #0E0E13, #121217, #16161D.
- Rules
- Keep exactly one violet rail. Do not recolor or rebalance heights.
Monochrome
Approved utility- Use
- Single-color print, embossing, partner lockups, stamps, and legal documents.
- Environment
- Neutral dark surfaces or production contexts that reject color.
- Rules
- No violet rail. Use only white, black, or approved ink values.
Inverted
Approved light- Use
- Light documents, invoices, PDFs, white UI panels, and sales collateral.
- Environment
- White, bone, or pale neutral surfaces with at least AA contrast.
- Rules
- Retain violet only on the second rail. Never use on saturated color.
Accent
Approved rare- Use
- Small active-state badges where the container already carries Claura violet.
- Environment
- Solid #7C6DF2 only. Use sparingly inside product feedback states.
- Rules
- All rails reverse to white. Do not place full-color mark on violet.
Minimal
Approved compact- Use
- Dense tables, sidebar footers, loading indicators, and low-emphasis UI.
- Environment
- Dark product chrome where the mark must be present but quiet.
- Rules
- Use from 24px upward. Below 24px switch to favicon-safe geometry.
Claura
Favicon-safe
Approved 16px- Use
- Browser tabs, bookmarks, pinned tabs, tiny notification affordances.
- Environment
- 16px, 24px, and 32px browser-rendered contexts.
- Rules
- Uses thickened rails. Do not downscale the primary SVG below 24px.
Social-safe
Approved social- Use
- LinkedIn avatar, OG images, social cards, share previews, and profile fields.
- Environment
- Cropped square or wide social formats with centered safe area.
- Rules
- Keep 18% inner safe area. Avoid text over the mark.
App-tile-safe
Approved app- Use
- Mobile app icons, PWA icons, macOS tiles, and internal launcher grids.
- Environment
- Rounded or square tiles from 192px to 1024px.
- Rules
- Center mark in tile. Preserve 22% corner radius for rounded icon.
Usage contexts
Where the identity operates
Surface first, size second, format third. Each context inherits the same rail geometry — only the weight and tone adapt to the environment.
partner
Clauraapp.claura.ai
File exports
Production files
The asset system is deployable by default: individual downloads for implementation and grouped bundles for handoff.
Full identity package
All mark, favicon, app icon, social, email, token, and motion files in one ZIP.
Core approved marks
Start here for product, docs, and high-confidence brand implementation.
Grouped bundles
Individual files
Primary SVGclaura-symbol-primary.svg
Primary SVGclaura-symbol-primary-bg.svg
Primary PNGsymbol-512.png
Primary PNGclaura-symbol-primary-square-512.png
Light SVGclaura-symbol-primary-light.svg
Light SVGclaura-symbol-primary-light-bg.svg
Monochrome darkclaura-symbol-mono-dark.svg
Monochrome darkclaura-symbol-mono-dark-bg.svg
Monochrome lightclaura-symbol-mono-light.svg
Monochrome lightclaura-symbol-mono-light-bg.svg
Accent SVGclaura-symbol-accent.svg
Accent SVGclaura-symbol-accent-bg.svg
Browser and app surfaces
Small-format assets for tabs, launchers, PWAs, product chrome, and raster handoff.
Grouped bundles
Wordmark and email usage
Horizontal lockups and signature assets for communication surfaces.
Grouped bundles
Scaling system
Size rules and variant switches
The primary mark is stable from 24px upward. Below that, switch to the favicon-safe drawing so the rail gaps do not collapse.
10pxDo not useFails
12pxFavicon-safeMinimum
16pxFavicon-safeBrowser
24pxMinimalCompact
32pxPrimarySidebar
48pxPrimaryDashboard
64pxPrimaryApp chrome
96pxPrimaryHero
Favicon12–32px
Use favicon-safe geometry. Primary gaps collapse below 24px.
Mobile navigation24–32px
Use primary or minimal. Keep 8px touch-safe padding around the mark.
Dashboard sidebar28–40px
Primary mark with wordmark allowed when sidebar width exceeds 180px.
Notification badge16–24px
Use favicon-safe or monochrome; avoid full lockups.
App tile192–1024px
Use app-tile-safe asset with centered 64-unit mark.
Clear space rules
Spacing that protects recognition
Clear space equals one rail width around the live mark. In dense UI, preserve the same optical padding inside the component.
1x clear space1x
12px component padding
invoice queue
Incorrect usage
Prohibited treatments
The mark earns trust by being repeated unchanged. These are production blockers, not stylistic preferences.
Do not stretch
Correct
Reject
Do not recolor
Correct
Reject
Do not use gradients
Correct
Reject
Do not rotate
Correct
Reject
Do not lose contrast
Correct
Reject
Do not overcrowd
Correct
NEW AI FINANCE AUTOMATION PLATFORM
RejectReal surface examples
The system deployed
These previews show the mark operating in product, browser, social, notification, email, and app contexts.
/ Operations
Q2 · 2026SYNCED
last sync · 12s ago
LinkedIn avatar
Clauraapp.claura.ai/invoices
Rate variance detected
Claura Finance Opssource coordination · reconciliation
The operational backbone for finance.
Wordmark
claura
The wordmark is an Inter-derived logotype, not raw typed text. It keeps the lowercase operational calm, then adds enough optical tuning to sit beside the constructed rails.
Optical refinements
- Custom a
- Slightly opened aperture, softened ending
- Kerning
- Tighter cl, au, and ur pairs
- Weight
- Raised from Medium to optical 620
- Micro asymmetry
- Subtle r shoulder offset, not a gimmick
System relationship
- Rounded letter endings echo the rails without redrawing the alphabet
- Violet stays in the mark; the wordmark remains monochrome
- The wordmark supports the symbol instead of competing with it
- Use typed Inter for product UI, tuned logotype for brand lockups
Lockup ruleConstructed mark + tuned wordmark + monochrome wordform.
The rail can carry signal violet. The wordmark does not. This keeps the identity disciplined while making the typography feel authored.
Iconography
System icons
Lucide foundation. 24px grid, 1.5px stroke, round joins. Functional, not decorative — they label actions and indicate states.
Color
Monochrome first. Violet for signal.
The system is overwhelmingly neutral. Violet is treated as activation, not branding: reserved for active states, intelligence indicators, signal detection moments, and the one rail in the mark.
Ink / 1000
Primary canvas
#121217Ink / 900
Elevated surface
#1C1C24Ink / 800
Borders, dividers
#22222DBone / 050
Light canvas
#F6F6FBInk / 050
Primary text on dark
#E8E8F1Ink / 400
Secondary text
#9E9EB2Ink / 600
Tertiary metadata
#5E5E70Violet / 500
Active signal
#7C6DF2Violet / 600
Hover / pressed
#6557D4Violet / 300
Soft highlight
#B8AFF7Violet / Alpha-16
Background tint
rgba(124,109,242,.16)White
Reverse mark
#FFFFFFDiscipline rule: violet should never exceed roughly 5% of any given screen. If a layout starts to feel violet, it has stopped being Claura.
Typography
Inter for product. Tuned logotype for brand.
Inter remains the system typeface across product, marketing, and documentation. The Claura wordmark is the only customized typographic object, reserved for brand lockups and production identity assets.
Operational clarity, by default.
- Role
- Display
- Family
- Inter
- Weight
- 500
- Size
- 56-96px
- Tracking
- -0.04em
Coordinate every invoice in one operational layer.
- Role
- H1 / Page
- Family
- Inter
- Weight
- 500
- Size
- 40px
- Tracking
- -0.03em
Multi-source aggregation, automated reconciliation, and structured signal routing.
- Role
- H2 / Section
- Family
- Inter
- Weight
- 500
- Size
- 24px
- Tracking
- -0.02em
Claura ingests fragmented financial signals from every system your finance org touches and produces one structured, reconciled, queryable operational layer.
- Role
- Body
- Family
- Inter
- Weight
- 400
- Size
- 15px
- Tracking
- 0
Spacing
4-pixel base. Powers of intent.
Every spatial decision in product and brand surfaces resolves to a multiple of 4. Custom values break grid alignment and create the kind of micro-inconsistency enterprise buyers learn to distrust.
space.14px
space.28px
space.312px
space.416px
space.624px
space.832px
space.1248px
space.1664px
space.2496px
space.32128px
r.1 · 4
r.2 · 8
r.3 · 12
r.5 · 20
r.7 · 28
Grid & layout
Spatial framework
The grid defines how Claura pages organize density: navigation stays narrow, primary work areas span wide, and supporting panels attach without drifting.
Grid specifications
- Columns
- 12
- Max width
- 1200px
- Gutter
- 24px
- Margin (desktop)
- 48px
- Margin (tablet)
- 24px
- Margin (mobile)
- 18px
Breakpoints
- Desktop
- > 980px · 12 columns
- Tablet
- 701–980px · 8 columns
- Mobile
- < 700px · 1 working column
Desktop uses 12 columns. Tablet compresses to 8. Mobile stacks into one working column with the same spacing rhythm.
12-column field24px gutters48px desktop marginsAnimated resize behavior
Navcols 1-3
Primary work areacols 4-9
Signal panelcols 10-12
Operational tablefull width
Desktop12 columns48px margins
Tablet8 columns24px margins
Mobile1 column18px margins
Accessibility
Compliance is infrastructure
Claura targets WCAG 2.1 AA across all product and marketing surfaces. Accessibility is not a feature: it is a structural requirement of enterprise-grade software.
Contrast ratios
Ink 050 on Ink 100015.2:1AA
Ink 400 on Ink 10007.1:1AA
Ink 600 on Ink 10003.4:1Decorative
Violet 500 on Ink 10004.7:1AA
Ink 900 on Bone 05013.8:1AA
Requirements
- All interactive elements must have visible focus states
- Focus rings use 2px solid violet with 2px offset
- Motion respects prefers-reduced-motion
- All images carry meaningful alt text or aria-hidden
- Form inputs have associated labels, never placeholder-only
- Minimum tap target: 44 x 44px on touch devices
Dark & light
Two surfaces, one system
Dark mode is the default canvas. Light mode is the alternate. Both use the same spatial rules, type scales, and component structure. Only color tokens change.
Dark — default
Canvas#121217
Surface#1C1C24
Border#22222D
Text#E8E8F1
Secondary#9E9EB2
Accent#7C6DF2
Light — alternate
Canvas#F6F6FB
Surface#FFFFFF
Border#E0E0EA
Text#1C1C24
Secondary#5E5E70
Accent#7C6DF2
Violet remains constant across modes. It is the single stable reference point between dark and light surfaces.
Motion
The mark behaves like the product
Motion is reserved for moments of state change, not decoration. All sanctioned behaviors use the same cubic-bezier easing and stay under 1.2 seconds, except the slow signal pulse.
Bars rise from baseline in sequence. Used on first paint and loading completion.
Rail reveal
The violet rail emits a soft breath. Indicates the system is active and listening.
Signal pulse
Rails drift fractionally up and resolve to baseline for sync or reconciliation.
Convergence
Co-branding
Partnerships and lockups
Equal visual weight. Monochrome Claura mark. Divider between brands. Match optical height, not pixel height.
Correct
Acme Corp
Monochrome mark, divider, equal optical heightCorrect
Northwind
Host brand first, Claura secondIncorrect
Acme Corp
No divider. Full-color mark in co-brand context.Incorrect
PARTNER
Claura mark too small. Unequal visual weight.partner
32px minimum separation from divider on each sideComponents
The rails become interface
Every component inherits the mark's DNA: rounded rail geometry, monochrome-first surfaces, signal-state violet, and operational spacing rhythm. The UI is the identity system, expanded into an operating environment.
Buttons
Form input
Pick a name your team will recognize.
Stats
Status badges
QueuedSignalReconciledReviewFailed
Table
Notification
New signal detectedACME has 3 invoices over policy threshold. Review recommended before next reconciliation cycle.
Dropdown
Command surface
Empty state
No invoices yetConnect a source to begin receiving invoices. Claura organizes records and surfaces source signals.
Modal
Inside the product
/ Operations
Invoice queue
Reconciled · 30d$4.21M↑ 12.4%
In queue1,284↓ 3.1%
Sources12no change
Signals · active3live
| Invoice | Vendor | Status | Amount | Received |
|---|---|---|---|---|
| in_3hk2-1018 | ACME Industrial | Review | $32,480.00 | 12s ago |
| in_3hk2-1017 | Northwind Logistics | Reconciled | $1,248.50 | 48s ago |
| in_3hk2-1016 | Vector Cloud Services | Reconciled | $8,400.00 | 2m ago |
| in_3hk2-1015 | Stripe Inc. | Failed | $420.00 | 3m ago |
Production assets
Files ready for use
All production assets are organized by use case. Download individually or reference the paths directly in implementation.
