Playground

Color Variables

—

--bgBackground

—

--bg2Background 2

—

--bg3Background 3

—

--borderBorder

—

--textText

—

--text-mutedText Muted

—

--text-dimText Dim

—

--text-softText Soft

—

--text-accentText Accent

—

--text-complementaryText Complementary

—

--theme-primaryTheme Primary

—

--primaryPrimary

—

--blueBlue

—

--greenGreen

—

--redRed

—

--yellowYellow

Typography

Sans-serif — UI Font

Heading One

Heading Two

Heading Three

Body text — The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Muted body — Secondary descriptions and helper text appear here, blended toward the background.

Dimmed caption — Timestamps, metadata, and low-priority labels rendered at reduced opacity.

Monospace — Code Font

def fibonacci(n: int) -> int:
    """Return the nth Fibonacci number."""
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

# Compute first 10 values
results = [fibonacci(i) for i in range(10)]
print(f"Sequence: {results}")

Buttons

Badges & Tags

DefaultSoftAccentComplementarySuccessWarningError

pythonsqldata-sciencefeatured

Icons

Play

Terminal

Code

Database

Settings

Bell

Star

Info

Warning

Success

Error

Form Elements

Text Input

Select

Textarea

Alerts & Callouts

Info — This is an informational message using --text-soft for the icon and border accent.

Success — Operation completed using --text-accent tones.

Complementary — Highlighted state using --text-complementary — the function-color variable.

Warning — Caution state using --yellow.

Error — Destructive state using --red.

Lists & Navigation

--text-soft — muted secondary (dim slot)
--text-accent — accent (muted slot)
--text-complementary — fn slot (new)
--theme-primary — keyword highlight