🎨 Design System

KentaurSoft — Open Props · UnoCSS · Design Tokens
Brand Colors
Primary
#6c63ff
--brand
Primary Light
#8b85ff
--brand-light
Primary Dark
#4a42d4
--brand-dark
Surface Colors
Background
#0B0E11
--bg-primary
Surface
#14171c
--bg-secondary
Surface Elevated
#1c2028
--bg-tertiary
Elevated
#232830
--bg-elevated
Text Colors
Primary
#f0f0f0
--text-primary
Secondary
#a0a5b0
--text-secondary
Muted
#6b7280
--text-muted
Status Colors
Success / Green
#86efac
--green
Danger / Red
#f87171
--red
Warning / Amber
#fbbf24
--amber
Info / Blue
#60a5fa
--blue
Font Families
Inter
'Inter', system-ui, sans-serif
Used for all UI text
JetBrains Mono
'JetBrains Mono', monospace
Used for code & data
Type Scale
h1 · 2.5rem / 40px
Heading One
font-weight: 800 · line-height: 1.1
h2 · 2rem / 32px
Heading Two
font-weight: 700 · line-height: 1.2
h3 · 1.5rem / 24px
Heading Three
font-weight: 600 · line-height: 1.3
h4 · 1.25rem / 20px
Heading Four
font-weight: 600 · line-height: 1.4
body · 1rem / 16px
Body text — the standard paragraph size used throughout the interface for reading content.
font-weight: 400 · line-height: 1.6
small · 0.875rem / 14px
Small text for labels, captions, and secondary information.
font-weight: 400 · line-height: 1.5 · color: var(--text-secondary)
caption · 0.75rem / 12px
Caption / badge text for timestamps, meta info, and footnotes.
font-weight: 400 · color: var(--text-muted)
mono · 0.875rem / 14px
const hello = "world";
JetBrains Mono · for data, code, values
Spacing Scale
4px
--space-1
8px
--space-2
12px
--space-3
16px
--space-4
20px
--space-5
24px
--space-6
32px
--space-8
40px
--space-10
48px
--space-12
64px
--space-16
Visual Spacing
--space-2 (8px)
--space-4 (16px)
--space-8 (32px)
--space-16 (64px)
Border Radius
4px · --radius-sm
8px · --radius (DEFAULT)
12px · --radius-lg
Full · --radius-full
Responsive Breakpoints
📱
Mobile
375px — 639px
@media (max-width: 639px)
📱
Mobile Large
640px — 767px
@media (min-width: 640px) = sm:
📟
Tablet
768px — 1023px
@media (min-width: 768px) = md:
💻
Desktop
1024px — 1279px
@media (min-width: 1024px) = lg:
🖥️
Wide
1280px — 1535px
@media (min-width: 1280px) = xl:
🖥️
Ultra Wide
1536px+
@media (min-width: 1536px) = 2xl:
Grid System
/* Tailwind-style responsive grid */ .grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }

/* Responsive: 1 col on mobile, 2 on tablet, 3 on desktop */ @media (min-width: 768px) { .md\\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lg\\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); } }
UI Components Live Preview
Buttons
Card
Card Title
Description text that provides context about this card's content.
Form Elements
Badges & Tags
Active Ready Coming Soon Blue Amber Red Green
Navigation
UnoCSS / Tailwind Utility Reference
These utilities are usable in your SvelteKit (Telos) and Next.js (klookup) projects. Installed via UnoCSS
Layout
flex
display: flex
flex-col
flex-direction: column
flex-wrap
flex-wrap: wrap
flex-1
flex: 1
items-center
align-items: center
justify-center
justify-content: center
justify-between
justify-content: space-between
gap-1..gap-12
gap: 4px .. 48px
grid
display: grid
grid-cols-2
grid-template: repeat(2,1fr)
Spacing
p-1..p-12
padding: 4px..48px
px-1..px-12
padding-x
py-1..py-12
padding-y
m-1..m-12
margin: 4px..48px
mx-auto
margin: 0 auto
Typography
text-sm
font-size: 0.875rem
text-lg
font-size: 1.125rem
text-xl
font-size: 1.25rem
text-2xl
font-size: 1.5rem
font-bold
font-weight: 700
font-mono
font-family: monospace
text-center
text-align: center
text-brand
color: #6c63ff
Colors
text-white/80
opacity: 0.8 white
bg-brand
background: #6c63ff
bg-surface
background: #14171c
border-default
border-color: #2a2e38
Responsive Prefixes
/* Prefix any utility with a breakpoint to make it responsive */
sm:flex /* ≥640px */
md:grid-cols-2 /* ≥768px */
lg:flex-row /* ≥1024px */
xl:gap-8 /* ≥1280px */