OwO
AboutNewsResearchCareersDevelopers
OwO © 2026
Visual Design Language

Design System

Reference Guide

Visual reference for the OwO.AI product family. A living catalog of every color, type style, spacing value, motion pattern, and component.

00 — AI-Friendly

AI-Friendly

A complete machine-readable specification of this design system, ready for AI agents, code generators, and automated design tools.

DESIGN_SYSTEM.mdMD
# OwO.AI — Visual Design Language
Colors · Typography · Spacing · Radius · Borders · Effects · Icons · Motion · Components · Design Tokens (JSON)
01 — Color

Color System

Monochrome philosophy: one foreground + opacity = a complete visual hierarchy. No extra hues, ever.

Base Pair
background
#000000
foreground
#F5F5F7
Text Opacity Scale
fg
100%
fg-strong
80%
fg-active
70%
fg-secondary
60%
fg-body
55%
fg-muted
50%
fg-soft
45%
fg-tertiary
40%
fg-faded
35%
fg-hint
30%
fg-ghost
25%
fg-whisper
20%
Border Opacity Scale
border-strong
15%
border
10%
border-light
8%
border-subtle
6%
Surface Opacity Scale
surface-hover
5%
surface-tag
4%
surface-card
3%
surface-tint
2%
Functional Colors (reserved)
Success · #34C759
Warning · #FF9500
Error · #FF3B30
Info · #007AFF
02 — Typography

Typography

HarmonyOS Sans with fluid scaling. Tighter tracking at larger sizes; widest tracking for small uppercase labels.

Type Scale
Display
clamp(2.5rem, 5.5vw, 5.5rem)·600·-0.03em
Design System
H1
clamp(2.2rem, 5vw, 4.5rem)·600·-0.03em
Visual Language
H2
clamp(2rem, 4vw, 4rem)·600·-0.02em
Section Title
H3
clamp(1.5rem, 3vw, 2.5rem)·600·-0.02em
Sub-section
H4
clamp(1.5rem, 3.2vw, 3rem)·600·-0.01em
Card Heading
Body Lg
1.125rem·400·0.02em
The quick brown fox jumps over the lazy dog.
Body
1rem·400·0.01em
The quick brown fox jumps over the lazy dog.
Body Sm
0.875rem·400·0.01em
A smaller variant for secondary content.
Caption
0.875rem·500·0.01em
Navigation · Metadata · 14px
Label
0.75rem·500·0.15em
SECTION LABEL
Overline
0.75rem·500·0.08em
Badge Text · 01
Font Weight
Aa 文字
Regular
400
Aa 文字
Medium
500
Aa 文字
Semibold
600
Aa 文字
Bold
700
03 — Spacing

Spacing

Based on a 4 px grid. Every spacing value is a multiple of this base.

4px
8px
12px
16px
20px
24px
32px
40px
48px
56px
64px
80px
96px
04 — Radius

Radius

Clickable standalone elements use full; content panels use 2xl; lower hierarchy, smaller radius.

sm
4px
md
6px
lg
8px
xl
12px
2xl
16px
full
9999px
05 — Borders

Borders & Dividers

Uniform 1 px width. Hierarchy through opacity alone.

border · 10%
border-light · 8%
border-subtle · 6%
gradient
06 — Effects

Shadows & Glass

Shadows are used sparingly. Frosted glass for translucent overlay contexts.

shadow-float
Glass · Light
Glass · Heavy
07 — Icons

Icons

Keyline Icons — 24×24 grid, 2.5 rounded stroke, monochrome. Rendered inline as SVG with currentColor so each glyph inherits the current text color.

20 · decorative
15 · toolbar
14 · inline
12 · chip
Full icon set

851 · click to copy SVG

08 — Motion

Motion

Default ease-standard. Entrance only, no loops. Hover or tap a card to preview.

Easing Curves
ease-standard
(0.25, 0.1, 0.25, 1)
ease-spring
(0.16, 1, 0.3, 1)
ease-decel
(0.4, 0, 0.2, 1)
Entrance Animations
Standard
500ms · translateY(20px)
Title
600ms · translateY(32px)
Scale In
200ms · scale(0.8)
Spring Expand
350ms · ease-spring
09 — Components

Components

Abstract component patterns — not tied to any specific page structure.

Buttons
Cards
DEFAULT
Card Title
border 10%, no fill
LIGHT
Card Title
border 8%, lighter
FILLED
Card Title
no border, bg 3%
TINTED
Card Title
border 10% + bg 2%
Tag / Badge
Chip TagLabelBorder TagCategoryBADGEV1.0
Section Label
SECTION LABEL
Nav Hover Behavior (link group)
AboutResearchProductsCareers