Skip to content
Kovra

Typography & Colors

Type scale

Plus Jakarta Sans for everything, JetBrains Mono for code and ids

text-display48 / 800 · -1

Revenue is up 18.4%

text-h136 / 800 · -0.6

Good morning, Maya

text-h228 / 800 · -0.3

Revenue overview

text-page22 / 800

Analytics

text-h418 / 700

Sessions by country

text-card16 / 700 · +0.1

Recent conversions

text-body-lg15 / 400

Paid sign-ups grew 9% week over week across every channel.

text-body14 / 400

Revenue is up 18.4% on last year and three new reports are waiting for you.

text-small13 / 400

Values in USD thousands · last 12 months, all channels

text-meta12 / 500

Updated Oct 14, 2026 · 09:12

text-caps11 / 700 · +0.6

Total revenue

text-mono13 / 400

/api/v1/orders?status=paid&limit=50

Font families

Two Google Fonts, both open source

Plus Jakarta Sans

UI, headings and numbers · tabular figures

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz 0123456789 $%&@

KovraRegular · 400
KovraMedium · 500
KovraSemi · 600
KovraBold · 700
KovraExtra · 800

JetBrains Mono

Code, ids, paths and API keys

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz 0123456789 $%&@

KovraRegular · 400
KovraBold · 700

In context

Total revenueINV-2026-0142

$482,92018.4%

Paid sign-ups grew 9% week over week across every channel.

Updated Oct 14, 2026 · 09:12

Colour tokens

36 variables, each with a light and a dark value — reference them as var(--name)

Light mode

Default theme · cards on a cool grey canvas

Mode: Light

Surfaces & lines

  • --bg#F2F3F8
  • --surface#FFFFFF
  • --surface-2#F7F8FC
  • --surface-3#EEF0F7
  • --line#E6E8F1
  • --line-strong#D3D7E5
  • --screen-edge#D6D9E6

Text & ink

  • --text#0E1122
  • --text-2#4B5272
  • --text-3#868CA8
  • --ink#0E1122
  • --on-ink#FFFFFF

Brand & accent

  • --primary#5B4DF5
  • --primary-2#8B5CF6
  • --primary-soft#EEECFF
  • --primary-ink#4234D6
  • --lime#C4F04B
  • --lime-soft#F2FBD8
  • --lime-ink#4A6600

Sidebar

  • --sidebar#0C0F1F
  • --sidebar-2#161A31
  • --sidebar-line#1F2442
  • --sidebar-text#9EA4C6
  • --sidebar-text-2#5E6488

Status tones

  • --up#10B57F
  • --up-soft#E2F7EF
  • --down#EF4459
  • --down-soft#FDE9EC
  • --amber#F4A21E
  • --amber-soft#FEF3DF
  • --sky#2B97EF
  • --sky-soft#E5F2FD
  • --pink#E8489A
  • --pink-soft#FCE8F3
  • --teal#14B8C4
  • --teal-soft#E0F7F9

Dark mode

Same names, deep navy surfaces and brighter tones

Mode: Dark

Surfaces & lines

  • --bg#080A13
  • --surface#10132A
  • --surface-2#161A34
  • --surface-3#1D2240
  • --line#22284A
  • --line-strong#2E3560
  • --screen-edge#2A3058

Text & ink

  • --text#EEF0FB
  • --text-2#A9AFCF
  • --text-3#6E7598
  • --ink#EEF0FB
  • --on-ink#0E1122

Brand & accent

  • --primary#7A6FFF
  • --primary-2#A07BFF
  • --primary-soft#221E4E
  • --primary-ink#B9B2FF
  • --lime#C4F04B
  • --lime-soft#232D14
  • --lime-ink#D6F57F

Sidebar

  • --sidebar#0B0E1D
  • --sidebar-2#151933
  • --sidebar-line#1F2442
  • --sidebar-text#9EA4C6
  • --sidebar-text-2#5E6488

Status tones

  • --up#2FD39D
  • --up-soft#0E2C25
  • --down#FF6679
  • --down-soft#38171F
  • --amber#FFB84D
  • --amber-soft#372911
  • --sky#52B2FF
  • --sky-soft#10263B
  • --pink#FF6BB5
  • --pink-soft#3A1730
  • --teal#3FD6E0
  • --teal-soft#0D2D33

Gradients

Used for hero cards, active nav and the logo mark

Brandprimary → primary-2
Nightsidebar → primary-ink
Limelime → teal

Corner radius

Six radii — cards always 16

6pxBadge
8pxTab
10pxButton
12pxAlert
16pxCard
fullPill

Spacing

4px base unit · card gaps 24, card padding 22

4space-1
8space-2
12space-3
16space-4
24space-6
32space-8