Color Palette

    Background 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

    Quaternary

    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 surfaces
    bg-liftedElevated surfaces
    bg-elevatedElevated surfaces
    bg-enlightenedHighest elevation

    Interactive States

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

    Foreground Tokens

    --ypng-color-bg-base

    Elevated text

    fg-elevated
    --ypng-color-bg-base

    Lifted text

    fg-lifted
    --ypng-color-bg-base

    Main text

    fg-main
    --ypng-color-bg-base

    Detail text

    fg-muted
    --ypng-color-bg-base

    Placeholder

    fg-placeholder
    --ypng-color-bg-main

    Elevated text

    fg-elevated
    --ypng-color-bg-main

    Lifted text

    fg-lifted
    --ypng-color-bg-main

    Main text

    fg-main
    --ypng-color-bg-main

    Detail text

    fg-muted
    --ypng-color-bg-main

    Placeholder

    fg-placeholder
    --ypng-color-bg-lifted

    Elevated text

    fg-elevated
    --ypng-color-bg-lifted

    Lifted text

    fg-lifted
    --ypng-color-bg-lifted

    Main text

    fg-main
    --ypng-color-bg-lifted

    Detail text

    fg-muted
    --ypng-color-bg-lifted

    Placeholder

    fg-placeholder
    --ypng-color-bg-elevated

    Elevated text

    fg-elevated
    --ypng-color-bg-elevated

    Lifted text

    fg-lifted
    --ypng-color-bg-elevated

    Main text

    fg-main
    --ypng-color-bg-elevated

    Detail text

    fg-muted
    --ypng-color-bg-elevated

    Placeholder

    fg-placeholder
    --ypng-color-bg-enlightened

    Elevated text

    fg-elevated
    --ypng-color-bg-enlightened

    Lifted text

    fg-lifted
    --ypng-color-bg-enlightened

    Main text

    fg-main
    --ypng-color-bg-enlightened

    Detail text

    fg-muted
    --ypng-color-bg-enlightened

    Placeholder

    fg-placeholder

    Border Tokens

    border-subtleSubtle 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: surface, surface-hover, border, solid, solid-hover, text, and text-on-solid.

    primary

    Aa
    border
    Aa
    surface
    Aa
    surface-hover
    Aa
    solid
    Aa
    solid-hover

    secondary

    Aa
    border
    Aa
    surface
    Aa
    surface-hover
    Aa
    solid
    Aa
    solid-hover

    tertiary

    Aa
    border
    Aa
    surface
    Aa
    surface-hover
    Aa
    solid
    Aa
    solid-hover

    quaternary

    Aa
    border
    Aa
    surface
    Aa
    surface-hover
    Aa
    solid
    Aa
    solid-hover

    accent

    Aa
    border
    Aa
    surface
    Aa
    surface-hover
    Aa
    solid
    Aa
    solid-hover

    Status Color Semantic Tokens

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

    success

    Aa
    border
    Aa
    surface
    Aa
    surface-hover
    Aa
    solid
    Aa
    solid-hover

    warning

    Aa
    border
    Aa
    surface
    Aa
    surface-hover
    Aa
    solid
    Aa
    solid-hover

    error

    Aa
    border
    Aa
    surface
    Aa
    surface-hover
    Aa
    solid
    Aa
    solid-hover

    info

    Aa
    border
    Aa
    surface
    Aa
    surface-hover
    Aa
    solid
    Aa
    solid-hover

    Nature 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
    surface
    Aa
    surface-hover
    Aa
    solid
    Aa
    solid-hover

    grass

    Aa
    border
    Aa
    surface
    Aa
    surface-hover
    Aa
    solid
    Aa
    solid-hover

    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-secondary

    Secondary

    Aa
    ypng-gradient-invert-secondary

    Secondary Invert

    Aa
    ypng-gradient-radial-secondary

    Secondary Radial

    Aa
    ypng-gradient-accent

    Accent

    Aa
    ypng-gradient-invert-accent

    Accent Invert

    Aa
    ypng-gradient-radial-accent

    Accent Radial

    Aa
    ypng-gradient-success

    Success

    Aa
    ypng-gradient-invert-success

    Success Invert

    Aa
    ypng-gradient-radial-success

    Success Radial

    Aa
    ypng-gradient-info

    Info

    Aa
    ypng-gradient-invert-info

    Info Invert

    Aa
    ypng-gradient-radial-info

    Info Radial

    Aa
    ypng-gradient-warm

    Warm

    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

    Heading 1 - header font

    text-5xl font-bebas-neue

    Heading 2 - header font

    text-4xl font-bebas-neue

    Heading 3 - header font

    text-3xl font-bebas-neue

    Body Text Large - body font

    text-lg font-quicksand

    Body Text Base - body font

    text-base font-quicksand

    Body Text Small - body font

    text-sm font-quicksand

    Monospace Code Font

    font-mono

    Buttons

    Button Variants

    Button Sizes

    Button States

    Button with Icons

    Form Controls

    Input Fields

    Textarea

    Checkboxes & Switches

    Radio Groups

    Select Menu

    Sliders

    Feedback Components

    Alerts

    Progress & Loading

    Progress60%

    Loading States

    LoadingRefresh

    Skeleton Loading

    Badges

    Default
    Secondary
    Destructive
    Outline
    Success
    Warning
    Info

    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

    March 2026
    1234567
    891011121314
    15161718192021
    22232425262728
    2930311234
    567891011

    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