Color Palette

    All Color Tokens

    Primary

    50
    100
    200
    300
    400
    500
    600
    700
    800
    900
    950

    Secondary

    50
    100
    200
    300
    400
    500
    600
    700
    800
    900
    950

    Tertiary

    50
    100
    200
    300
    400
    500
    600
    700
    800
    900
    950

    Accent

    50
    100
    200
    300
    400
    500
    600
    700
    800
    900
    950

    Dirt

    50
    100
    200
    300
    400
    500
    600
    700
    800
    900
    950

    Grass

    50
    100
    200
    300
    400
    500
    600
    700
    800
    900
    950

    Success

    50
    100
    200
    300
    400
    500
    600
    700
    800
    900
    950

    Warning

    50
    100
    200
    300
    400
    500
    600
    700
    800
    900
    950

    Error

    50
    100
    200
    300
    400
    500
    600
    700
    800
    900
    950

    Info

    50
    100
    200
    300
    400
    500
    600
    700
    800
    900
    950

    Neutral

    50
    100
    200
    300
    400
    500
    600
    700
    800
    900
    950

    Semantic Tokens

    Semantic tokens provide meaningful, context-aware color values that automatically adapt between light and dark modes. Use these tokens instead of numbered color values for consistent theming.

    Background Tokens

    Elevation Hierarchy

    bg-basePage background
    bg-mainPrimary tints
    bg-liftedElevated tints
    bg-elevatedElevated tints
    bg-enlightenedHighest elevation

    Interactive States

    bg-hoverHover state
    bg-activeActive/pressed state
    bg-selectedSelected state

    Foreground Tokens

    bg-base

    fg-base

    fg-main

    fg-lifted

    fg-elevated

    fg-enlightened

    bg-main

    fg-base

    fg-main

    fg-lifted

    fg-elevated

    fg-enlightened

    bg-lifted

    fg-base

    fg-main

    fg-lifted

    fg-elevated

    fg-enlightened

    bg-elevated

    fg-base

    fg-main

    fg-lifted

    fg-elevated

    fg-enlightened

    bg-enlightened

    fg-base

    fg-main

    fg-lifted

    fg-elevated

    fg-enlightened

    Border Tokens

    border-baseSubtle dividers
    border-mainDefault borders
    border-strongEmphasized borders
    border-liftedLifted borders
    border-elevatedElevated borders
    border-enlightenedEnlightened borders

    Focus Ring

    focus-ringFocus indicator

    The focus ring token provides consistent keyboard navigation feedback across all interactive elements. It uses the primary color for clear visibility.

    Brand Color Semantic Tokens

    Each brand color has 7 semantic roles: tint, tint-hover, border, solid, solid-hover, text, and text-on-solid.

    primary

    Aa
    border
    Aa
    tint
    Aa
    tint-hover
    Aa
    tint-active
    Aa
    solid
    Aa
    solid-hover
    Aa
    solid-active

    secondary

    Aa
    border
    Aa
    tint
    Aa
    tint-hover
    Aa
    tint-active
    Aa
    solid
    Aa
    solid-hover
    Aa
    solid-active

    tertiary

    Aa
    border
    Aa
    tint
    Aa
    tint-hover
    Aa
    tint-active
    Aa
    solid
    Aa
    solid-hover
    Aa
    solid-active

    accent

    Aa
    border
    Aa
    tint
    Aa
    tint-hover
    Aa
    tint-active
    Aa
    solid
    Aa
    solid-hover
    Aa
    solid-active

    Status Color Semantic Tokens

    Status colors follow the same 7-role pattern for consistent feedback UI.

    success

    Aa
    border
    Aa
    tint
    Aa
    tint-hover
    Aa
    tint-active
    Aa
    solid
    Aa
    solid-hover
    Aa
    solid-active

    warning

    Aa
    border
    Aa
    tint
    Aa
    tint-hover
    Aa
    tint-active
    Aa
    solid
    Aa
    solid-hover
    Aa
    solid-active

    error

    Aa
    border
    Aa
    tint
    Aa
    tint-hover
    Aa
    tint-active
    Aa
    solid
    Aa
    solid-hover
    Aa
    solid-active

    info

    Aa
    border
    Aa
    tint
    Aa
    tint-hover
    Aa
    tint-active
    Aa
    solid
    Aa
    solid-hover
    Aa
    solid-active

    Extra Color Semantic Tokens

    Nature colors (dirt, grass) are used for softball-themed views. They follow the same 6-role pattern as brand colors.

    dirt

    Aa
    border
    Aa
    tint
    Aa
    tint-hover
    Aa
    tint-active
    Aa
    solid
    Aa
    solid-hover
    Aa
    solid-active

    grass

    Aa
    border
    Aa
    tint
    Aa
    tint-hover
    Aa
    tint-active
    Aa
    solid
    Aa
    solid-hover
    Aa
    solid-active

    Buttons

    Filled

    Outline

    Inverted / Soft

    Neutral / Utility

    Sizes

    States

    With Icons

    Badges

    Default
    Neutral
    Outline
    Primary
    Primary Outline
    Secondary
    Secondary Outline
    Tertiary
    Tertiary Outline
    Quaternary
    Quaternary Outline
    Accent
    Accent Outline
    Error
    Error Outline
    Success
    Success Outline
    Warning
    Warning Outline
    Info
    Info Outline
    Dirt
    Dirt Outline
    Grass
    Grass Outline

    Special Effects

    Gradient Utilities

    Simple 3-color diagonal gradients with customizable angles and color stops. Each gradient uses color-1, color-3, and color-5 from the palette, evenly distributed by default.

    Default Gradients

    Aa
    ypng-gradient-primary

    Primary

    Aa
    ypng-gradient-invert-primary

    Primary Invert

    Aa
    ypng-gradient-radial-primary

    Primary Radial

    Aa
    ypng-gradient-radial-invert-primary

    Primary Radial Invert

    Aa
    ypng-gradient-secondary

    Secondary

    Aa
    ypng-gradient-invert-secondary

    Secondary Invert

    Aa
    ypng-gradient-radial-secondary

    Secondary Radial

    Aa
    ypng-gradient-radial-invert-secondary

    Secondary Radial Invert

    Aa
    ypng-gradient-tertiary

    Tertiary

    Aa
    ypng-gradient-invert-tertiary

    Tertiary Invert

    Aa
    ypng-gradient-radial-tertiary

    Tertiary Radial

    Aa
    ypng-gradient-radial-invert-tertiary

    Tertiary Radial Invert

    Aa
    ypng-gradient-quaternary

    Quaternary

    Aa
    ypng-gradient-invert-quaternary

    Quaternary Invert

    Aa
    ypng-gradient-radial-quaternary

    Quaternary Radial

    Aa
    ypng-gradient-radial-invert-quaternary

    Quaternary Radial Invert

    Aa
    ypng-gradient-accent

    Accent

    Aa
    ypng-gradient-invert-accent

    Accent Invert

    Aa
    ypng-gradient-radial-accent

    Accent Radial

    Aa
    ypng-gradient-radial-invert-accent

    Accent Radial Invert

    Aa
    ypng-gradient-success

    Success

    Aa
    ypng-gradient-invert-success

    Success Invert

    Aa
    ypng-gradient-radial-success

    Success Radial

    Aa
    ypng-gradient-radial-invert-success

    Success Radial Invert

    Aa
    ypng-gradient-info

    Info

    Aa
    ypng-gradient-invert-info

    Info Invert

    Aa
    ypng-gradient-radial-info

    Info Radial

    Aa
    ypng-gradient-radial-invert-info

    Info Radial Invert

    Aa
    ypng-gradient-warm

    Warm

    Aa
    ypng-gradient-warm-radial

    Warm Radial

    Aa
    ypng-gradient-cool

    Cool

    Aa
    ypng-gradient-cool-radial

    Cool Radial

    Customization Examples

    90°

    Custom Angle (90deg)

    --gradient-angle: 90deg
    30%

    Custom Stops

    --gradient-mid: 30%
    180° + 70%

    Combined

    angle: 180deg, mid: 70%

    Customization: Use CSS variables to control gradients:

    • --gradient-angle - Direction (default: 135deg)
    • --gradient-start/mid/end - Color positions (default: 0%, 50%, 100%)
    • For warm/cool: --gradient-warm-1/2/3 or --gradient-cool-1/2/3

    Typography

    Headers (defaults)

    Heading 1

    Heading 2

    Heading 3

    Heading 4

    Heading 5
    Heading 6

    Font Sizes

    text-5xl

    text-4xl

    text-3xl

    text-2xl

    text-lg

    text-md

    text-base

    text-sm

    text-xs

    Fonts

    font-header

    font-body

    font-tight

    font-mono

    font-code

    Form Controls

    Input Fields

    Textarea

    Checkboxes & Switches

    Radio Groups

    Select Menu

    Sliders

    Feedback Components

    Alerts

    Progress & Loading

    Progress60%

    Loading States

    LoadingRefresh

    Skeleton Loading

    Navigation Components

    Tabs

    Make changes to your account here. Click save when you're done.

    Accordion

    Interactive Components

    Toggles & Toggle Groups

    Avatars

    CNABVC

    Tooltips

    Hover Cards

    Overlays & Modals

    Dialog

    Popover

    Menus

    Dropdown Menu

    Context Menu

    Right click here

    Menubar

    Toolbar

    Custom Components

    Container

    full

    percent90

    percent80

    percent70

    xl3

    xl2

    xl

    lg

    md

    sm

    xs

    Section

    xl

    lg

    md

    sm

    xs

    none

    Loading States

    Password Input

    Calendar

    August 2026
    2627282930311
    2345678
    9101112131415
    16171819202122
    23242526272829
    303112345

    Time Picker

    Image Upload

    Search Select

    Layout Components

    Scroll Area

    Item 1

    This is a scrollable item with some content that demonstrates the scroll area component.

    Item 2

    This is a scrollable item with some content that demonstrates the scroll area component.

    Item 3

    This is a scrollable item with some content that demonstrates the scroll area component.

    Item 4

    This is a scrollable item with some content that demonstrates the scroll area component.

    Item 5

    This is a scrollable item with some content that demonstrates the scroll area component.

    Item 6

    This is a scrollable item with some content that demonstrates the scroll area component.

    Item 7

    This is a scrollable item with some content that demonstrates the scroll area component.

    Item 8

    This is a scrollable item with some content that demonstrates the scroll area component.

    Item 9

    This is a scrollable item with some content that demonstrates the scroll area component.

    Item 10

    This is a scrollable item with some content that demonstrates the scroll area component.

    Collapsible

    Separator

    Horizontal Separator

    LeftRight

    Toast Notification

    Navigation Menu

    Animations

    Scale
    Rotate
    Bounce
    Pulse
      Young Professionals Networking Group - Surround Yourself with People Who Inspire You