Color palette

All SCSS color variables defined in application.scss. Each swatch pulls its color from the compiled SCSS var via a --palette-* CSS custom property, so this page never drifts from the source palette.

Application identity

The brand blue-gray used for the top navigation bar and identity surfaces.

$brand-dark
$brand-medium
$brand-light

Neutral grays

The gray scale anchors all text, backgrounds, and borders. Darker values are text; lighter values are surfaces and dividers.

$gray-900
$gray-800
$gray-700
$gray-600
$gray-500
$gray-400
$gray-300
$gray-200
$gray-100
$gray-50

Primary (blue)

Used for links, active states, selected items, and interactive affordances.

$primary-dark
$primary-focus
$primary
$primary-hover
$primary-lighter
$primary-light

Danger (red)

Validation errors, destructive actions, and alert states.

$danger-dark
$danger-dark-hover
$danger
$danger-hover
$danger-light
$danger-lighter

Success (green)

Confirmations, saved states, and positive feedback.

$success-dark
$success
$success-hover
$success-light

Warning (yellow / amber)

Caution states, pending actions, and informational alerts.

$warning-dark
$warning
$warning-lighter
$warning-light

Purple

Document type accents and secondary highlights.

$purple
$purple-light

Black & white

Pure black and white are not variablized — they stay as literal #fff and #000 throughout the stylesheet.

#000
#fff

Foreground on background

How each text color reads against the common surface colors.

fg \ bg
#fff
$gray-50
$gray-100
$gray-200
$primary-light
$danger-lighter
$success-light
$warning-light
$gray-900
#000
$gray-900
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
$gray-700
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
$gray-600
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
$primary
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
$danger
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
$success
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
#fff
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc

Banners

Full-width notices using .app-banner with palette-specific modifiers. All share consistent border treatment.

This project is inactive.
This project is in the America/New_York timezone (+1h from your time)
You are viewing a read-only snapshot from March 12, 2025.
Something went wrong while saving. Please try again.
This view is shared — changes apply to all sheets of this kind.

Status tags

Inline status indicators used on profiles, documents, and invitations.

Profile status

Superadmin Level 1Superadmin Level 2Superadmin Level 3Public ProfilePrivate ProfileAmerica/Denver

Invite status

MemberPendingAcceptedDeclinedExpired

Other

Systemtag-name

Semantic elements

Colors in context: how the palette works in common UI patterns.

Buttons

Document roles

OwnerEditorViewer

Input states

This field is required