Levric Systems builds operational infrastructure for B2B companies. We deliver digital employees — full-time-equivalent systems that handle real workloads, not copilots that suggest next steps. The technology is advanced, but the pitch is simple: your operations run, reliably, without adding headcount.
What we are
A systems company. We build and operate digital infrastructure that replaces manual processes with autonomous execution. Reporting, content ops, lead handling, client operations — end to end.
What we are not
An AI company. We don't sell models, APIs, or chatbots. AI is the engine, not the brand. We never lead with “AI-powered” — we lead with what the system does.
Who we serve
B2B manufacturing and industrial companies in Southeast Asia. 200–5,000 employees, $10M–$500M revenue, operating across multiple markets. Their marketing and sales operations leaders are buried in coordination — we give them a digital employee who owns the execution layer.
How we differentiate
FTE-level ownership. Our systems don't assist — they own tasks. They escalate when stuck, report when done, and improve over time. Billed as capacity, not software licenses.
02 — Logo System
A 3×4 dot grid with the L-shape formed by active nodes. Implies a larger system — only the relevant points are lit. Mathematical, minimal, scales cleanly from 20px to 64px.
Lockup Variants
Primary Lockup
Levric Systems
Icon Only
Wordmark Only
Levric Systems
Size Test
64px56px40px28px20px
Progressive fade (by design): Dimmed dots are rgba(255,255,255,0.15). At 64–56px the full grid is visible and the L emerges from context. At 40px the grid ghosts. At 28–20px only the active L-shape dots remain — the mark simplifies itself. This is intentional: at presentation size you see the infrastructure, at favicon size you see the result.
Clear Space
1x
1x
Minimum clear space = 1x (where x = the width of the icon container).
No other visual elements may encroach on this zone. When used as a favicon or app icon, the clear space is built into the container's padding.
Logo Misuse
Don't reduce opacity
Don't change container color
Don't rotate
Don't use circular container
The logomark container is always a rounded rectangle with #23AC62 fill. Never stretch, skew, add effects, or apply drop shadows.
03 — Color Palette
Primary Accent
Levric Green
#23AC62
Green Dim
#1d8f52
Green Muted
#173431
Green Ghost
#0d2419
Backgrounds
Sidebar
#0f1220
Background
#141724
Muted
#191d2b
Card
#1F2330
Secondary
#252937
Border
#2a2e3e
Text
Foreground
#e0e4ec
Secondary
#c5cdd9
Muted
#7b8290
Semantic
Error
#ef4444
Warning
#f59e0b
Info
#6366f1
Purple
#8b5cf6
04 — Typography
Primary — Inter
Levric Systems
All UI text, headings, body copy, navigation, and labels. Geometric sans-serif via Google Fonts CDN. No self-hosting required.
Medium 500
Semibold 600
500 is the body default. On dark backgrounds, 400 suffers from halation (light text appears thinner than intended). Reserve 400 for Paper theme captions or muted metadata where deliberate lightness is needed. Never use 300 or below.
Everything sits on a 4px base grid. All spacing values are multiples of 4. This keeps vertical rhythm consistent and makes layout decisions mechanical, not subjective.
Scale
Token
Value
Visual
space-1
4px
Inline gaps, icon–text
space-2
8px
Tight groups, button padding, input padding
space-3
12px
Related elements, card internal padding (compact)
space-4
16px
Paragraph gap, form field spacing, list item gap
space-6
24px
Card padding, heading top margin, section internal
space-8
32px
Between sections, grid gap, content blocks
space-12
48px
Page section breaks, major content divisions
space-16
64px
Page top/bottom margin, cover padding
Usage Rules
Content Flow
8px Heading → body text
16px Between paragraphs
24px Before a new heading
32px Between content sections
48px Between major page zones
Containers
8px Button padding (vertical)
16px Button padding (horizontal)
16px Compact card padding
24px Standard card padding
32px Page-level horizontal padding
Grids & Gaps
8px Tight grid (icon sets, badges)
16px Form layout, small card grids
24px Dashboard card grid
32px Page-level content grid
Logo & Brand
1x Minimum logo clear space
12px Icon → wordmark gap (lockup)
24px Logo area → first content
64px Page top to logo (cover/header)
The rule: If a spacing value isn't a multiple of 4, it's wrong. The only exceptions are 1px borders and line-height (which is unitless or rem-based). When in doubt, pick the smaller multiple — dense beats airy for a systems brand.
06 — Voice & Tone
Levric speaks like a senior engineer explaining a system — precise, calm, no filler. We sound like the kind of team you'd trust to run your operations unsupervised.
CasualTechnical & GroundedAcademic
Direct
State what the system does. No hedge words, no “helps you” or “enables teams to.” It does the work.
Understated
Let results carry the weight. No superlatives, no “revolutionary.” If it's impressive, the reader will notice.
Frame everything as infrastructure, not magic. Workflows, pipelines, escalation logic — not “intelligence” or “brain.”
Write this: “The system handles inbound leads, scores them, and routes qualified prospects to your pipeline. No manual triage.” Not this:“Our AI-powered platform leverages cutting-edge technology to revolutionize your lead management workflow.”
07 — Accessibility
All text/background combinations must meet WCAG 2.1 AA minimum (4.5:1 for normal text, 3:1 for large text).
Combination
Ratio
AA Normal
AA Large
Preview
Foreground on Background
#e0e4ec / #141724
11.4:1 Pass
Pass
Sample
Secondary on Background
#c5cdd9 / #141724
9.1:1 Pass
Pass
Sample
Muted on Background
#7b8290 / #141724
4.6:1 Pass
Pass
Sample
Levric Green on Background
#23AC62 / #141724
5.3:1 Pass
Pass
Sample
White on Levric Green
#ffffff / #23AC62
4.5:1 Pass
Pass
Sample
Muted on Card
#7b8290 / #1F2330
3.6:1 Large
Pass
Sample
08 — Components
Buttons
Badges
ActivePendingFailedArchived
Status Indicators
Online
Busy
Offline
Metric Card
Tasks Completed
142
Border Radius
4
8
12
pill
09 — Analytics & Data Visualization
Standardized chart library for dashboards, reports, and client presentations. Built on Apache ECharts with branded Levric themes. All charts respond to the global Termius/Paper theme toggle.
Chart Specimens
Line — Multi-series
Traffic trends over time. Use for weekly/monthly cadence.
Conversion pipeline from visitors through to closed-won.
KPI Cards
Metric cards combine a headline number, delta indicator, and inline sparkline. JetBrains Mono for all numeric values.
Sessions
12,847
+18.3%
Leads
342
+7.2%
Conversion
2.66%
−0.4%
Revenue
$48.2K
+22.1%
Chart Color Palette
Five chart colors, used in order. Same values work on both Termius and Paper backgrounds. Never reassign colors within a single visualization.
chart-1
#23AC62
Primary / first series
chart-2
#6366f1
Secondary series
chart-3
#f59e0b
Tertiary series
chart-4
#8b5cf6
Quaternary series
chart-5
#ef4444
Alert / fifth series
Data Typography
Numerics
All numbers, percentages, currency values, and axis tick labels use JetBrains Mono 500. This ensures tabular alignment and clear digit distinction across all chart tooltips and KPI displays.
Labels & Legends
Chart titles, axis names, legend entries, and tooltip headers use Inter 500. Uppercase labels at 10–11px with letter-spacing for section headers within charts.
Chart Usage Rules
Do
Use chart-1 through chart-5 in sequence
Include branded tooltips with Inter labels + Mono values
Animate on scroll entry (300–500ms ease)
Use transparent backgrounds (inherit from theme)
Provide hover states on all interactive elements
Use grid lines sparingly (1px, border color only)
Don't
Use more than 5 series colors in a single chart
Add 3D effects, gradients on bars, or drop shadows
Use pie charts for more than 5 segments
Animate continuously (animate once on viewport entry)
Mix chart libraries within the same view
Override chart-1 green with a different hue
10 — Imagery & Iconography
Visual assets should reinforce the brand position: operational infrastructure, not sci-fi AI.
✓ On brand
Dark UI screenshots, dashboards, terminals
Abstract data visualizations, flow diagrams
Minimal geometric patterns
Architecture diagrams, system schematics
Real product screenshots
✗ Off brand
Robot / humanoid AI illustrations
Glowing brains, neural networks
Stock photos of people at laptops
Neon gradients, sci-fi aesthetics
Busy, colorful infographics
Iconography
Use Lucide icons (line style, 1.5px stroke, 24px default). Consistent stroke weight across all surfaces. Never use filled icons or mix icon sets.
11 — Light Theme — “Paper”
Levric is dark-first. All product interfaces use the dark palette. The light “Paper” theme exists for print materials, PDFs, proposals, invoices, contracts, and any context where dark backgrounds are impractical. Think: Stripe docs, Linear's light mode — clean, quiet, professional.
The dark background (#141724) becomes the text color. The green (#23AC62) is the only constant between both themes.
Backgrounds
Page
#FAFBFC
White
#FFFFFF
Surface
#F0F1F4
Border
#E0E2E8
Text
Foreground
#141724
Secondary
#4B5063
Muted
#8B90A0
Accent
Levric Green
#23AC62
Green Dim
#1d8f52
Green Tint
#E9F5EE
Green Ghost
#F3FAF6
Paper Contrast Ratios
Combination
Ratio
WCAG AA
Preview
Foreground on Page
#141724 / #FAFBFC
15.8:1 Pass
Sample
Secondary on Page
#4B5063 / #FAFBFC
8.2:1 Pass
Sample
Muted on Page
#8B90A0 / #FAFBFC
4.1:1 Large
Sample
Green on Page
#23AC62 / #FAFBFC
3.5:1 Large
Sample
Green on White
#1d8f52 / #FFFFFF
4.6:1 Pass
Sample
Note: Green on light backgrounds uses #1d8f52 (Green Dim) for body text to ensure AA compliance. Use #23AC62 only for large text, icons, and decorative elements.
Document Mock — Proposal
How the Paper theme looks applied to a real document. Note: near-monochrome with green used only for the header rule, one callout, and status badges.
Levric Systems
REF: LS-2026-041
Operational Systems Proposal
Prepared for Acme Corp · February 2026
This proposal outlines the deployment of two digital employees to handle inbound lead processing and monthly client reporting. Both systems operate as full-time equivalents — they own the workflow end-to-end, escalate when blocked, and report on completion.
System
Function
Capacity
Status
Lead Processor
Score, qualify, route to CRM
~200 leads/day
Ready
Report Generator
GA4 + Ads + SEO → PDF
12 clients/week
Configuring
Estimated impact: 32 hours/month of manual work replaced. No additional headcount required. Systems improve through structured feedback loops.
Paper Theme Rules
Green is an accent, not a color scheme
On Paper, green appears in at most 3 places per page: logo mark, one rule/divider line, and status badges or callout borders. Everything else is black, gray, and white.
Backgrounds stay neutral
No colored section backgrounds. Use #FAFBFC (page) and #FFFFFF (card/content) only. For subtle emphasis, use #F0F1F4 (surface).
Text stays dark
Primary text is #141724 (the dark theme's background). Secondary is #4B5063. Muted is #8B90A0. Never use pure black (#000).
Same fonts, same hierarchy
Inter for UI/body, JetBrains Mono for data. Same type scale. Same weight rules. The only thing that changes between themes is color — never layout or typography.
Logo on Light Backgrounds
On White
Levric Systems
On Surface
Levric Systems
Monochrome
Levric Systems
Monochrome variant for single-color printing (fax, stamps, embossing). Green logomark becomes #141724. Use only when color reproduction is unavailable.
12 — Sub-brands
K
Kai
Kai is the digital employee operating system built by Levric Systems. It inherits the full Levric color system and typography — no separate palette. Kai is a product brand, not a company brand.
Usage rules:
• “Levric Systems” on company-level materials: invoices, contracts, website, proposals, legal
• “Kai” on product surfaces: dashboard, CLI, mobile app, status pages, internal tools
• When co-branding: “Kai by Levric Systems” — never “Levric Kai” or “Kai Levric”
13 — Client Colors
Fixed per-client colors used across all charts and visualizations. These are immutable — never override.
LAPP#23AC62
Lecturio#818cf8
JJ Turf#38bdf8
SalesWorks#f59e0b
GMA#f472b6
14 — Guidelines
Do
Use green sparingly as accent (~10% of visual space)
Layer backgrounds for depth: sidebar < bg < card
Use CSS variables or Tailwind classes — never raw hex in components
Use Inter for UI, JetBrains Mono for data and metrics
Keep client colors consistent across all charts
Use semantic colors for state (red / amber / indigo)
Lead with what the system does, not what technology it uses
Refer to outputs as “systems” or “digital employees,” not “bots” or “agents”
Don't
Use green for large background fills or decorative areas
Use hardcoded hex values in component code
Mix fonts within a single context
Override or modify client colors
Put green text on green backgrounds
Use the deprecated Neon theme values
Say “AI-powered,” “intelligent,” or “smart” in external copy
Use robot imagery, neural-network graphics, or sci-fi visuals
15 — Asset Directory
Canonical source files for all brand assets. When building new surfaces, always reference these — never copy values by hand.