Outlyne Style Guide

Visual audit of UI primitives and design tokens

Color Scale (--ui-clr-*)

clr-950
clr-925
clr-900
clr-850
clr-800
clr-750
clr-700
clr-600
clr-500
clr-400
clr-300
clr-200
clr-100
clr-50

Semantic Colors

Background
--ui-background
Background B
--ui-background-b
Text Bold
--ui-text-bold
Text
--ui-text
Text Muted
--ui-text-muted
Border
--ui-border
Success
--ui-success-background
Error
--ui-error-background

Typography

Heading 1 - Geist Bold

Heading 2 - Geist Semibold

Body Large - The quick brown fox jumps over the lazy dog.

Body Muted - Standard description text color.

Body Extra Muted - Used for less important metadata.

Buttons (.form-ui-btn)

Form Inputs

InputBoolean

Current state: ON

InputRange

Common Icons

Plus

Checkmark

Trash

Visible

Hidden

Search

Bolt