Net P&L · 30D
+$3,058.50
↑ +4.62% · 4 accounts
Design System · Landing Surface · v1.0
Serious software/ serious work.
The Senti landing surface is a Bloomberg terminal that learned restraint from a Swiss bond prospectus. Dark by default, monospaced where it counts, zero ornament — every pixel earns rent. This document defines the system: how the marketing page looks, feels, and reads when it has to sell automated trading to a quant who does not want to be sold to.
01Brand
The lens, not the subject.
The product reads numbers; the data reads back. The landing page introduces the lens — and gets out of the way. Brand identity rides on typography, density, and one signature interaction. No mascot, no gradient, no decorative blob.
01.1Thesis
Serious software/serious work.
— User's own words. Every decision below serves this single line.
Senti·Quant
Self-hosted trading-bot SaaS · Vietnam-first
Logo system
PRIMARY · HORIZONTAL LOCKUP · on dark · default
ON LIGHT · full-color inverse · #0B0D11
GLYPH · ACCENT · chrome use · nav · tab bar
KNOCKOUT · on accent · bg color · single-button mark
The full-color inverse uses --bg (#0B0D11), not pure black — keeps the lockup in the same surface family as the rest of the system.
Clearspace & minimum sizes
X
X
X
X
Clearspace · X = mark height
Reserve at least 1× the mark height on every side. No copy, control, or other mark inside the clearspace.
Minimum sizes
16px · favicon
24px · nav
32px · footer
48px · marketing
72px · hero
Below 16px the glyph silhouette collapses. For favicons at 16/32px use the rounded-square app icon, not the bare glyph.
Don't
Off-system colors. The mark is emerald or neutral, never anything else.
Distortion. Never skew, stretch, or rotate the mark.
Gradient backdrops. The system has none.
Glow, drop-shadow, outer effects. The line is a line.
Three pillars (binding)
P1Restraint over decoration
Typography, grid, and 1px hairlines do all the work. No gradient backgrounds, no glow filters, no rounded-corner SaaS cards floating in pastel space.
P2Density over white space
The product is data-dense. The landing tells that truth — tables, ruled sections, tabular numerics. Marketing surface is spacious, but never empty.
P3Numbers as the hero
Real metrics, explicit precision, en-dash negatives. +$1,247.30 not "+$1.2k". The audience can spot a fake number in 200ms.
What we are · What we are not
Lineage
- Bloomberg Terminal · information density
- Carta · typographic discipline
- Linear · precision and restraint
- Stripe Dashboard · institutional craft
Explicitly not
- Robinhood / Phantom · retail gloss
- Gradient hero CTAs · 2021 crypto tell
- Mascot / emoji-led branding
- "Delightful" micro-animation
02Color
One chromatic color. Two roles.
Emerald serves UI chrome and P&L direction up. Red serves P&L direction down. Everything else is the cool-neutral surface family hsl(220 8% L). No third hue. Restraint is the brand.
02.1Tokens
Dark
default
default
10%
10%
Light
first-class
first-class
10%
8%
Consistency check — any new color must answer yes to one
- 01Is it in the surface family? It must match
hsl(220 8% L)for some lightness L. Same in both modes — only lightness varies. - 02Is it
--pos/--accent(emerald)? Use for UI chrome — active state, focus ring, crosshair, brand mark — or P&L direction up. Dual role is the point. - 03Is it
--neg(red)? Use only on values that represent P&L direction down. Never on landing-page chrome. - 04Is it pure black or pure white? Allowed only inside imagery, charts, or color swatches as ground-truth references.
If a color is none of these, it does not enter the system. No brand pink, no info blue, no warning yellow, no gold accent.
03Typography
Mono signals terminal, not marketing.
Three families, strictly assigned. Display in Geist Mono, body in Geist Sans, every number in JetBrains Mono with tabular-nums lining-nums. The hero feels like a Reuters splash, not a Vercel template.
03.1Families
Display · Headers
Geist Mono · 500 / 600
Geist Mono
Aa Bb Cc Dd 0123456789 — / · % $ +
Body · UI
Geist Sans · 400 / 500 / 600
Geist Sans
Aa Bb Cc Dd 0123456789 — / · % $ +
Numbers · Data · Code
JetBrains Mono · 400 / 500 · tnum
JetBrains Mono
+$1,247.30 –$3.247% 1.847 62.4% 0.85
Type scale
--text-hero
Serious software/
--text-h1
Senti runs your strategy 24/7.
--text-h2
A monitor, not a casino.
--text-h3
Pricing
--text-lead
Link MT5, pick a strategy, monitor the deals. Senti does the rest.
--text-body
Body copy on the landing surface sits at 14px — slightly larger than dashboard's 13px — for one extra notch of legibility on a marketing read.
--text-body-s
Supporting copy. Footnotes. Inline disclaimers.
--text-eyebrow
Section · 02 · Color
--text-mono-meta
SHARPE 1.847 · PROFIT FACTOR 3.10 · WIN RATE 62.4%
Number rendering — binding
+$1,247.30
P&L → 2 decimals · prefix sign · currency before number, no space.
1.847
Sharpe / Sortino / Calmar → 3 decimals · never auto-tinted by value.
–3.247%
Negatives use en-dash, never hyphen. Drawdown is always negative.
Never abbreviate numbers as $1.2k on landing surfaces. That's retail. The whole pitch is that we don't talk down to the audience.
04Spacing & layout
Spacious density, on a 4px base.
The dashboard runs compact; the landing page runs spacious. Both share the same 4px base unit, the same scale, the same radii. No bubble radii anywhere — 12px+ is a retail tell.
04.1Scale
Spacing scale (px)
2
xs
4
base
8
2x
12
3x
16
4x
24
6x
32
8x
48
12x
64
16x
Section gap
72px · 16x desktop
Section padding
56–64px horiz
Hero padding
80px top · 64px bottom
Max width
1280px content
Border radius — strict
sm
2px
Buttons · tags · chips
md
4px
Inputs · panels · tables
lg
6px
Modals only
full
9999px
Live-status pill only
No 12px or higher radius anywhere. The "soft, friendly card" is a retail tell. Hairlines do the visual grouping.
Layout grid
Editorial-asymmetric — a 200px left rail for section-numbering + a fluid right column that may split into 1, 2, or 3 sub-columns. The left rail keeps the page legible the way a long-form article does, and the asymmetric split keeps it from feeling like a SaaS template.
200px rail
1fr — copy
1fr — terminal/visual
05Motion
Kill 90% of typical SaaS motion.
The only animations earn their place by carrying information: the live pulse dot signals "this is real-time", the tick flash signals "this just changed", the crosshair signals "you are pointing here." Everything else is a hard cut.
05.1Specs
Removed
- Page transitions hard cut
- Skeleton shimmer static
- Accordion bounce instant
- Hover lift / shadow color only
- Number rolling instant
- Curve glow filter line is line
- Hero "breathe" scale still
- Logo float / parallax none
Kept (earns its place)
- Live-status pulse dot 1.6s ease-in-out
- Cell flash on tick 200ms · decay
- State change opacity 80ms
- Theme transition 150ms color
- Focus ring appear 0ms
- Hover background 80ms linear
- Tab switch instant
- Synchronized crosshair no anim · realtime
Live demos
Pulse dot
1.6s scale 1 → 1.6 → 1, opacity 1 → 0. Signals "this is live data," and nothing else.
Live · streamingCell flash on tick
200ms background flash in pos-soft / neg-soft, decays to transparent. Click to retrigger.
$1,247.30
–3.247%
prefers-reduced-motion: reduce disables both the pulse and the cell flash — dot stays solid, cells hard-cut.
06Iconography
1.5px stroke, square corners.
Icons are terminal-grade, not decorative. Always inline SVG, 16/20px box, 1.5px stroke, square line-cap, no fill, currentColor. Lucide is the reference set; never use a filled or duotone icon.
06.1Set
trending-up
trending-down
crosshair
activity
grid · panels
terminal
chart-up
clock
shield
ledger
vault
strategy
07Components
Primitives the landing page draws from.
Buttons, inputs, badges, status dots, dividers, code blocks. No floating cards — every visual grouping is a 1px hairline on a surface change.
07.1Primitives
Button
Tone
Input
Email · login
Badge · status
Status
LIVE
PAUSED
+12.4%
–3.2%
Dots
online
paused
error
Tabs
Code · terminal
Token usage example
config.tstypescript// landing hero — only token-level color export const hero = { eyebrow: "var(--accent)", title: "var(--fg)", slash: "var(--accent)", subcopy: "var(--fg-muted)", stripBg: "var(--surface)", stripBorder: "var(--border)", };
Divider
Hairline (default)
Dashed
Bold
Accent rule
08Landing patterns
The page, assembled.
Each pattern below is a real, working block ready to lift into /index.html. They use only tokens defined above — no new colors, no new radii, no new fonts.
08.1 · Landing top nav
08.2 · Hero block
Senti·QUANT TRADING-BOT PLATFORM
Link MT5.
Link MT5.
Pick a strategy.
Senti does the rest.
A self-hosted bot platform for traders who'd rather read a Sharpe ratio than a marketing email. Vietnam-first, broker-agnostic, audit-friendly.
No credit card · cancel anytime
"Serious software/ serious work."
Sharpe
1.847
90-day rolling
Profit factor
3.10
126 deals
Max DD
–3.247%
recovered in 4d
Win rate · 30D
62.4%69 W / 57 L
Volume traded
84.97 lotsXAUUSD · EURUSD · BTCUSD
08.3 · Feature row — number-led, terminal-paired
/01Live positions
Every open deal, on one ruled surface.
Senti shows every position across every linked MT5 account in a single audit-friendly table. P&L flashes on tick. Magic numbers and order IDs sit in their own mono column. SL/TP edit in-row — no modal, no loss of context.
No striping, no "delightful" hover-lift cards. Just the table you wished MT5 had built.
positions · live · all accounts
| Ticket | Symbol | Type | Vol | P&L |
|---|---|---|---|---|
| 847203 | XAUUSD | BUY | 0.50 | +$248.30 |
| 847204 | EURUSD | BUY | 1.00 | +$112.40 |
| 847205 | BTCUSD | SELL | 0.20 | –$47.10 |
| 847206 | XAUUSD | BUY | 0.25 | +$87.20 |
| 847207 | USDJPY | SELL | 2.00 | +$203.80 |
/02Equity curve
One synchronized crosshair, every chart.
Hover any chart on a page — equity, drawdown, trade-density — and the full-width vertical guide snaps to the same timestamp on every visible chart. Pair it with the dashboard's compact density and you can audit a month of strategy decisions in under a minute.
Nobody else does this.
equity · 30D · XAUUSD-NN-v22026-05-13 14:32:08
2026-04-13−15D−7Dcursor 2026-05-09today
/03Audit-ready
Every deal, every magic number, every server.
Senti keeps a full audit trail per MT5 account. Filter by strategy, magic, or session. Export to CSV. Pipe to your fund's reporting stack. Nothing is hidden behind a black-box "AI score" — every decision is traceable to a deal ticket on a real broker.
Compliance
CSV export · per-deal magic · session-stamped
Privacy
Self-hosted VPS · keys never touch our DB
deals · last 12h · account #847
| Time | Magic | Symbol | Source | Profit |
|---|---|---|---|---|
| 14:08:22 | 200847 | XAUUSD | ROBOT | +$48.20 |
| 13:42:01 | 200847 | EURUSD | ROBOT | +$32.10 |
| 12:11:47 | 200201 | BTCUSD | MANUAL | –$74.50 |
| 11:08:18 | 200847 | XAUUSD | ROBOT | +$118.40 |
| 10:32:55 | 200847 | USDJPY | ROBOT | +$22.80 |
08.4 · Testimonial — mono pull-quote
/Q1Quant fund · HCMC
I run four EAs across three brokers. Before Senti, my morning was eleven browser tabs. Now it's one ruled surface. The synchronized crosshair alone justified the migration.NQ Nguyễn Quang · portfolio manager · 4 accounts · $1.2M AUM
08.5 · Pricing tiers
/05Pricing
One linear ladder. No "Enterprise" dance.
Pay monthly, cancel anytime. Pricing scales with the number of MT5 accounts under management — not features, not "seats," not "AI credits."
Starter
$29/mo
1 MT5 account · 1 strategy
- Self-hosted bot runtime
- 5 prebuilt EAs
- 30-day deal history
- Email support
Most picked
Pro
$99/mo
Up to 5 accounts · multi-strategy
- Everything in Starter
- Synchronized crosshair
- Custom EA upload (MQL5)
- 1-year deal history · CSV export
- Priority support · 4h SLA
Fund
Custom
15+ accounts · SLA · dedicated node
- Everything in Pro
- Dedicated VPS node manager
- SSO · audit log export
- Onboarding engineer
- Custom integrations
08.6 · Footer
09Signature
Two deliberate departures.
If a visitor remembers anything from the landing page, it should be these. They are what makes Senti recognizable from any other fintech SaaS — and they are what keep the audience from feeling sold to.
09.1Departures
+Tables and rules, not cards
Every section is a table or a ruled block. 1px hairlines do the grouping. No card shadows, no rounded "feature cards." 2× the information density at a glance.
| Sharpe | 1.847 |
| Sortino | 2.214 |
| Profit factor | 3.10 |
| Max DD | –3.247% |
+Right-aligned mono numerics
Every numeric value is mono, tabular, right-aligned, and carries explicit precision. Negatives use en-dash. Currency before number, no space. The "rivers" scan in 200ms.
| XAUUSD | +$1,247.30 |
| EURUSD | +$284.10 |
| BTCUSD | –$47.10 |
| USDJPY | +$203.80 |
Costs · wins
— What it costs
Less "modern SaaS" aesthetic. Marketing screenshots will read as austere to retail visitors. Horizontal space is tighter on mobile.
+ What it wins
Instantly recognizable. Audit-friendly. Reads as an Excel that grew up. The quant audience knows on first scroll they are not the mark.
Senti·Quant — Landing surface design system · v1.0
Derived from /docs/DESIGN.md · Bunny Fonts: Geist · Geist Mono · JetBrains Mono