Design System
UI Kit
Component library based on owo. Light theme, sharp corners, Roboto Condensed. Drop in kit.css.
Colors owo
owo color tokens. Use via CSS variables.
Base palette
WHITE
#fff
LIGHT
#e0e0e0
MEDIUM
#a4a4a4
DARK
#535353
BLACK
#000
Accent
RED
#ff115c
GREEN
#00ff9b
BLUE
#009bff
BLUE-DARK
#0040ff
ORANGE
#ff9b00
Typography owo
Roboto Condensed. Base font-size: 62.5% on html — 1rem = 10px.
h1
Heading One
h2
Heading Two
h3
Heading Three
h4
Heading Four — bold
h5
Heading Five — regular
h6
Heading Six — light italic
p
Regular paragraph. The quick brown fox jumps over the lazy dog.
code
Use git commit -m "msg" then push. Inline code matches parent size.
pre
function render(el) {
return el.outerHTML;
}
Grid owo
8 columns × 190px, 16px gap. Responsive breakpoints match owo exactly.
1680px → 6 col · 1268px → 4 col · 858px → 3 col · 650px → 2 col · 444px → 2×1fr · 360px → 1 col
1
2
3
4
5
6
7
8
.grid__left-content (1→sep)
.grid__right-content (sep→-1)
<div class="wrapper">
<div class="grid">
<div class="grid__left-content">…</div>
<div class="grid__right-content">…</div>
</div>
</div>
Borders owo
Three utility classes from owo. Hover to see the transition.
.border
LIGHT → DARK on hover
.border_light
LIGHT → WHITE on hover
.border_dashed
dashed LIGHT → solid DARK
Card — media owo
owo's original card. 288px fixed height, absolute text overlay. Uses .border_light.
/* С картинкой — градиент для читаемости текста */
<a class="card__wrapper border_light" href="/path">
<picture class="card__cover-container">
<img src="cover.jpg" class="card__img" alt="cover">
</picture>
<div class="card__text-container"
style="background:linear-gradient(to top,rgba(0,0,0,.6) 0%,transparent 55%);color:#fff">
<h4 class="card__text-header">Title</h4>
<h6 style="color:rgba(255,255,255,.7)">subtitle</h6>
</div>
</a>
/* Без картинки */
<a class="card__wrapper border_light" href="/path" style="background:var(--LIGHT)">
<div class="card__text-container">
<h4 class="card__text-header">Title</h4>
<h6>subtitle</h6>
</div>
</a>
Inputs
Hover → DARK border. Focus → BLUE border. Wrap with .form-group.
Helper text below the field.
Enter a valid email address.
Sizes
<div class="form-group">
<label class="form-label">Email</label>
<input type="email" class="input" placeholder="you@example.com">
</div>
Textarea
Multiline. Resizable vertically.
<div class="form-group">
<label class="form-label">Message</label>
<textarea class="textarea" placeholder="Write here…"></textarea>
</div>
Select
Native <select> with custom arrow.
<div class="form-group">
<label class="form-label">Framework</label>
<select class="select">
<option>Choose…</option>
<option>React</option>
<option>Vue</option>
</select>
</div>
Checkbox & Radio
Flat, checked = RED fill.
Checkbox
Radio
<label class="checkbox"><input type="checkbox"> Option</label>
<label class="checkbox"><input type="checkbox" checked> Checked</label>
<label class="checkbox"><input type="checkbox" disabled> Disabled</label>
<label class="radio"><input type="radio" name="group"> Option A</label>
<label class="radio"><input type="radio" name="group" checked> Option B</label>
Toggle
Hidden checkbox + flat track + square thumb.
<label class="toggle">
<input type="checkbox">
<div class="toggle__track"><div class="toggle__thumb"></div></div>
Label text
</label>
/* Disabled: add opacity + pointer-events:none on the label */
<label class="toggle" style="opacity:.4;pointer-events:none">…</label>
Card — UI
Generic content container. Same flat border as owo. Hover → DARK border.
Simple card
Subtitle
Any content inside .card__body.
With header
New
Header holds title + optional badge or action.
Hover me
Border goes LIGHT → DARK.
<div class="card">
<div class="card__header">…</div>
<div class="card__body">…</div>
<div class="card__footer">…</div>
</div>
Badges
Flat, 1px border, no fill. Add .badge-dot for dot prefix.
Default
Accent
Success
Warning
Error
Info
Online
Offline
Pending
New
<span class="badge badge-default">Default</span>
<span class="badge badge-accent">Accent</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-error">Error</span>
<span class="badge badge-info">Info</span>
/* With dot indicator */
<span class="badge badge-success badge-dot">Online</span>
Alerts
White background, colored 1px border.
Note
A neutral informational message.Success
Changes saved successfully.Warning
This affects all connected services.Error
Failed to process. Please retry.Update
Version 1.2.0 is ready.<div class="alert alert-default">
<span class="alert-icon">ℹ</span>
<div>
<div class="alert-title">Note</div>
Message text here.
</div>
</div>
/* Variants: alert-default alert-success alert-warning alert-error alert-info */
Progress
LIGHT track. Colored fill bar.
Accent (RED)67%
Success100%
Warning42%
Info85%
.progress-lg (8px)
<div class="progress">
<div class="progress-bar" style="width:67%"></div>
</div>
/* Variants: progress-success progress-warning progress-info */
/* Tall track: add .progress-lg */
<div class="progress progress-success">
<div class="progress-bar" style="width:100%"></div>
</div>
Range
LIGHT track, RED thumb. Square thumb, no border-radius.
Hue 0–360
180
Saturation 0–100
65
<div class="range-row">
<input type="range" class="range" min="0" max="100" value="50"
oninput="this.nextElementSibling.textContent=this.value" style="flex:1">
<span class="range-val">50</span>
</div>
Tables
Flat. Hover row → LIGHT background.
| Token | Type | Value | Status |
|---|---|---|---|
--RED |
color | #ff115c | Stable |
--LIGHT |
color | #e0e0e0 | Stable |
--GRID-GAP |
size | 16px | Stable |
--CARD-HEIGHT |
size | 288px | Fixed |
Tabs
Flat bottom border. Active → BLACK underline.
Tab content area
<div class="tabs">
<button class="tab-item active">Overview</button>
<button class="tab-item">Settings</button>
</div>
/* Toggle active tab with JS */
tabs.addEventListener('click', e => {
const btn = e.target.closest('.tab-item');
if (!btn) return;
tabs.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
btn.classList.add('active');
});
Avatars
LIGHT fill, flat border. .avatar-accent → RED border.
XS
MD
LG
XL
AB
IW
CD
EF
<div class="avatar avatar-md">AB</div>
<div class="avatar avatar-md avatar-accent">IW</div>
/* Sizes: avatar-sm (24px) avatar-md (36px) avatar-lg (48px) avatar-xl (72px) */
/* Custom color via inline style */
<div class="avatar avatar-md"
style="background:#fff;color:var(--BLUE);border-color:var(--BLUE)">CD</div>
Toast
White background, LIGHT border, thick left accent.
Build complete
2 artifacts compiled in 1.23s.
Saved
All changes persisted.
Rate limit
3 requests remaining.
Connection lost
Reconnecting in 5s…
<div class="toast toast-accent">
<div style="flex:1">
<div class="toast-title">Build complete</div>
<div class="toast-body">2 artifacts compiled in 1.23s.</div>
</div>
<span class="toast-close"
onclick="this.closest('.toast').style.display='none'">×</span>
</div>
/* Left border variants: toast-accent toast-success toast-warning toast-error toast-info */
Tooltip
Чистый CSS — никакого JS. Оборачиваешь триггер в .tooltip-wrapper, внутрь кладёшь .tooltip.
Plain tooltip
Ctrl + S
что это?
Подсказка на любом элементе
⌘ K
Command palette
<div class="tooltip-wrapper">
<button class="btn btn-default">Save</button>
<div class="tooltip">Ctrl + S</div>
</div>
/* Работает на ЛЮБОМ элементе — кнопке, тексте, иконке, kbd */
<div class="tooltip-wrapper">
<kbd>⌘ K</kbd>
<div class="tooltip">Command palette</div>
</div>
Kbd
Клавиши клавиатуры. Используй для шорткатов в интерфейсе или документации.
Save file
⌘S
Command palette
⌘K
Find in files
CtrlShiftF
Close modal
Escape
⌘⌥I
or
CtrlAltI
— DevTools
<kbd>⌘</kbd><kbd>S</kbd>
/* В таблице шорткатов */
<div style="display:flex;align-items:center">
<span>Save</span>
<span style="margin-left:auto;display:flex;gap:4px">
<kbd>⌘</kbd><kbd>S</kbd>
</span>
</div>
Spinner
CSS-анимация. Типичный кейс — вставить внутрь кнопки во время загрузки.
<div class="spinner"></div> /* default */
<div class="spinner spinner-sm"></div> /* small */
<div class="spinner spinner-lg"></div> /* large */
/* Другой цвет — переопределяем border-top-color */
<div class="spinner" style="border-top-color:var(--BLUE)"></div>
/* Внутри кнопки */
<button class="btn btn-primary" disabled>
<div class="spinner spinner-sm"
style="border-color:rgba(255,255,255,.3);border-top-color:#fff"></div>
Saving…
</button>
Divider owo
Два варианта из owo: простой <hr> и с подписью через .hr_fieldset.
/* С подписью (owo: fieldset + legend) */
<fieldset class="hr_fieldset">
<legend><h6>section title</h6></legend>
</fieldset>
/* Просто разделитель */
<hr>