Design Token

Frame Colors

Customizing frame color variables or starting with the official design system.

Token	Descriptions
`frame-neutral`
`frame-light`	alpha, divider
`frame-lighter`	alpha, dotted, td
`frame-lightest`	alpha, layout, navbar, sidebar

By default, theme modes drive frame variables are meticulously adjusted in light and dark modes.

<div class="light">
    <div class="b:3x|neutral size:96"></div>
</div>
<div class="dark">
    <div class="b:3x|neutral size:96"></div>
</div>

View the default variables on GitHub

Apply the defined frame-* variables using the inherited syntaxes border-top-color, border-bottom-color, border-left-color, border-right-color, border-x-color, border-y-color, border-color, border-top, border-bottom, border-left, border-right, border-x, border-y, border, outline-color, outline.

<div class="outline:$(frame-neutral)">equals</div>
<div class="outline:frame-neutral">equals</div>
<div class="outline:neutral"></div>

Frame Colors

Default

Basic usage

Apply a frame color