Skip to foundations

ASIG 0.7.0 ยท Foundations

A shared visual language

Choose a theme, inspect its semantic roles, and copy the variables into your existing components.

Copy a variable to keep your implementation connected to ASIG.

Semantic colors

Roles describe intent. Border is decorative; border strong defines controls. Pair status with text, never color alone.

Background

--as-color-background

#edf4f8

Surface

--as-color-surface

#ffffff

Surface Muted

--as-color-surface-muted

#e5eef4

Foreground

--as-color-foreground

#102538

Foreground Muted

--as-color-foreground-muted

#466176

Border

--as-color-border

#c6d7e2

Border Strong

--as-color-border-strong

#6f8798

Input

--as-color-input

#f5f9fb

Primary

--as-color-primary

#1f5d98

Primary Hover

--as-color-primary-hover

#174b7d

On Primary

--as-color-on-primary

#ffffff

Accent

--as-color-accent

#78b9e7

On Accent

--as-color-on-accent

#102538

Focus

--as-color-focus

#1f5d98

Success

--as-color-success

#15803d

Warning

--as-color-warning

#b45309

Danger

--as-color-danger

#b91c1c

On Danger

--as-color-on-danger

#ffffff

Danger Strong

--as-color-danger-strong

#991b1b

On Danger Strong

--as-color-on-danger-strong

#ffffff

Info

--as-color-info

#0369a1

Navigation Blue Surface

--as-color-navigation-blue-surface

#dbeafe

Navigation Blue Ink

--as-color-navigation-blue-ink

#1e40af

Navigation Cyan Surface

--as-color-navigation-cyan-surface

#cffafe

Navigation Cyan Ink

--as-color-navigation-cyan-ink

#155e75

Navigation Emerald Surface

--as-color-navigation-emerald-surface

#d1fae5

Navigation Emerald Ink

--as-color-navigation-emerald-ink

#065f46

Navigation Amber Surface

--as-color-navigation-amber-surface

#fef3c7

Navigation Amber Ink

--as-color-navigation-amber-ink

#92400e

Navigation Violet Surface

--as-color-navigation-violet-surface

#ede9fe

Navigation Violet Ink

--as-color-navigation-violet-ink

#5b21b6

Navigation Sky Surface

--as-color-navigation-sky-surface

#e0f2fe

Navigation Sky Ink

--as-color-navigation-sky-ink

#075985

Navigation Rose Surface

--as-color-navigation-rose-surface

#ffe4e6

Navigation Rose Ink

--as-color-navigation-rose-ink

#9f1239

Typography by purpose

Inherit the product font. Choose heading levels by structure; choose roles by hierarchy. Typography guidance

Title

var(--as-font-size-2xl)

Vendor procurement

Section

var(--as-font-size-xl)

Receiving details

Body

var(--as-font-size-md)

Keep the next action and its context together.

Label

var(--as-font-size-sm)

Receiving location

Caption

var(--as-font-size-xs)

Required when placing the vendor order.

Numeric

var(--as-font-size-xl)

$12,480.00

Spacing and shape

Use small gaps within a field and larger gaps between tasks. Let controls grow with their labels.

Space 0

--as-space-0

0

Space 1

--as-space-1

0.25rem

Space 2

--as-space-2

0.5rem

Space 3

--as-space-3

0.75rem

Space 4

--as-space-4

1rem

Space 6

--as-space-6

1.5rem

Space 8

--as-space-8

2rem

Space 12

--as-space-12

3rem

Control radius

--as-radius-control

0.5rem

Panel radius

--as-radius-panel

0.75rem

Pill radius

--as-radius-pill

9999px

Depth with a purpose

Reserve higher elevation for floating content. Dense tables and financial review stay calm and opaque.

Raised

--as-elevation-raised

Lifted

--as-elevation-lifted

Floating

--as-elevation-floating

Popup

--as-elevation-popup

Dialog

--as-elevation-dialog