Bezel
Get Started

Shader

Pixel Beams

The signature background is a live particle field painted with primary and secondary. Move your cursor across it to see the ink flow.

Colors
Ink cycles between primary and secondary on a pure black base. No other colors appear in the field.
Motion
Particles sit still until a cursor passes through. Ink is painted along the path and slowly settles.
Usage
Reserved for hero areas and feature cards on dark surfaces. Keep copy over it inside the clear center zone.

Logos

Lockups and marks

Each asset is named for the surface it sits on. Dark theme files carry light ink for dark backgrounds, light theme files carry dark ink for light backgrounds.

  • Bezel horizontal lockup for dark surfaces

    Horizontal lockup

    Dark surface · SVG

  • Bezel horizontal lockup for light surfaces

    Horizontal lockup

    Light surface · SVG

  • Bezel horizontal lockup, color for dark surfaces

    Horizontal lockup, color

    Dark surface · SVG

  • Bezel horizontal lockup, color for light surfaces

    Horizontal lockup, color

    Light surface · SVG

  • Bezel vertical lockup for dark surfaces

    Vertical lockup

    Dark surface · SVG

  • Bezel vertical lockup for light surfaces

    Vertical lockup

    Light surface · SVG

  • Bezel mark for dark surfaces

    Mark

    Dark surface · SVG

  • Bezel mark for light surfaces

    Mark

    Light surface · SVG

  • Bezel mark, color for dark surfaces

    Mark, color

    Dark surface · SVG

  • Bezel mark, color for light surfaces

    Mark, color

    Light surface · SVG

Colors

Color palette

Colors are defined in OKLCH and exported from the Bezel design system. Hex values are sRGB approximations for tools that cannot read OKLCH.

Brand

The three colors that carry the identity.

  • Primary

    Brand green. Primary actions and the core of the identity.

    Token
    --primary
    Dark
    #00E17B
    Light
    #00E17B
    OKLCH
    oklch(0.7978 0.204 153.321)

  • Secondary

    Cyan. Pairs with primary in the shader and accents.

    Token
    --secondary
    Dark
    #00BFC9
    Light
    #00D6E1
    OKLCH
    oklch(0.7322 0.1245 201.46)

  • Tertiary

    Lime. Reserved for highlights and data emphasis.

    Token
    --tertiary
    Dark
    #00C90A
    Light
    #00E10B
    OKLCH
    oklch(0.7244 0.245 142.685)

Status

Feedback colors used across the product.

  • Success

    Token
    --success
    Dark
    #00CD59
    Light
    #00CD59
    OKLCH
    oklch(0.7406 0.2094 148.92)

  • Info

    Token
    --info
    Dark
    #2892F0
    Light
    #2892F0
    OKLCH
    oklch(0.6487 0.1679 250.416)

  • Warning

    Token
    --warning
    Dark
    #EB8230
    Light
    #EB8230
    OKLCH
    oklch(0.7098 0.1575 53.935)

  • Destructive

    Token
    --destructive
    Dark
    #E76045
    Light
    #E76045
    OKLCH
    oklch(0.6558 0.1735 33.091)

Neutrals

Surfaces, text, and dividers in the dark theme.

  • Background

    Token
    --background
    Dark
    #000000
    Light
    #FCFEFD
    OKLCH
    oklch(0 0 0)

  • Foreground

    Token
    --foreground
    Dark
    #FFFFFF
    Light
    #002011
    OKLCH
    oklch(1 0 0)

  • Muted

    Token
    --muted
    Dark
    #171717
    Light
    #E5EAE8
    OKLCH
    oklch(0.2046 0 0)

  • Muted Foreground

    Token
    --muted-foreground
    Dark
    #8B8B8B
    Light
    #73857C
    OKLCH
    oklch(0.6368 0 0)

  • Border

    Token
    --border
    Dark
    #464646
    Light
    #B7C1BD
    OKLCH
    oklch(0.3942 0 0)