Skip to main content

Brand

The Sentro brand kit.

Marks, palette, type, and motion — the rules behind how Sentro shows up. Use it for slides, signatures, marketing partners, or anywhere a logo is asked of you.

Mark

Solid indigo, white rows, one cyan accent.

Built on a 32×32 frame: a solid indigo body, three white rows of varied widths, and a single cyan row as the active highlight. Reads as a mini KPI card — the most literal translation of what Sentro is.

Icon

32 × 32

Lockup

Wordmark · 144 × 40

Sentro

Mono

currentColor · inverse

Clear space

Keep at least the height of the icon as breathing room around the mark on every side. Minimum size: 20px on screens, 8mm in print.

Don't

  • Don't recolor or re-gradient the mark.
  • Don't rotate, skew, or warp the proportions.
  • Don't drop the cyan accent — it's the brand's only highlight.
  • Don't place the mark on busy photography without a contained surface behind it.
Color

A dark-first, two-accent palette

Indigo carries every interaction. Cyan is the supporting accent — used sparingly. Click any value to copy.

Brand

Primary — Indigo

Anchors interactive elements: buttons, links, focus rings.

HSL
HEX
Token

Accent — Cyan

Used sparingly to highlight or signal liveness.

HSL
HEX
Token

Surface

Background

App canvas. Dark by default; light variant available.

HSL
HEX
Token

Card

Surfaces that elevate content above the canvas.

HSL
HEX
Token

Muted

Secondary surface for chips, table headers, inactive states.

HSL
HEX
Token

Border

Hairline dividers, card outlines, input borders.

HSL
HEX
Token

Type

Foreground

Primary body and heading text.

HSL
HEX
Token

Muted Foreground

Secondary copy, labels, captions.

HSL
HEX
Token

Signal

Destructive

Used only for irreversible actions and error states.

HSL
HEX
Token

All values use the dark theme as canonical. The light theme uses the same primary and a slightly desaturated cyan; Tailwind tokens resolve automatically via CSS variables.

Typography

Geist Sans for everything, Geist Mono for code

One typeface family carries body, headings, and tabular numerals. Monospaced is reserved for code, version strings, and CLI snippets.

Geist Sans · Display & body

  • Display / 48Admin panel for your data.
  • Title / 32Admin panel for your data.
  • Headline / 24Admin panel for your data.
  • Subhead / 20Admin panel for your data.
  • Body / 16Admin panel for your data.
  • Caption / 14Admin panel for your data.
  • Micro / 11Admin panel for your data.

Geist Mono · Code & data

pnpm add @sentro/connector
sentro init --project ops
sentro deploy --env production

Tabular numerals

Required on prices, counters, timers, and table cells so columns don't shift.

MRR

€48,210

Rows

1,142,008

p99

12 ms

Motion

One easing curve, three duration tiers

Every transition uses the same cubic-bezier so the product feels of a piece. Animations express cause and effect — never decoration.

Easing

cubic-bezier(0.32, 0.72, 0, 1)

Tailwind utility: ease-smooth. Sharp departure, long deceleration — feels more native than the default ease-in-out.

Durations

Click any chip to replay; respects prefers-reduced-motion.

Micro

200ms

Buttons, hover, focus

In-view

320ms

Section reveals

Hero

600ms

Page entrance

Press, partners, signatures

The mark variants above are downloadable as SVG. For a co-marketing kit, raster exports, or anything else, email hello@sentrodb.com.

IconLockupMono