Visual Reference

The visual attribute controls colors, textures, typography, and appearance.

Backgrounds

• Background Color - bg:white, bg:primary, bg:[#hex]
• Background Image - bg-image:[url]
• Background Attachment - bg-attachment:fixed, bg-attachment:scroll
• Background Clip - bg-clip:border, bg-clip:text
• Background Origin - bg-origin:border, bg-origin:padding
• Background Position - bg-pos:center, bg-pos:top
• Background Repeat - bg-repeat, bg-no-repeat
• Background Size - bg-size:cover, bg-size:contain
• Background Blend Mode - bg-blend:multiply, bg-blend:overlay

Typography

• Text Size - text-size:small, text-size:big, text-size:giant
• Font Family - font:sans, font:serif, font:mono
• Font Weight - font:normal, font:medium, font:bold
• Font Style - italic, not-italic
• Font Smoothing - antialiased, subpixel-antialiased
• Letter Spacing - tracking:tight, tracking:wide
• Line Height - leading:tight, leading:relaxed
• Line Clamp - line-clamp:1, line-clamp:2, line-clamp:3
• Typography Keywords - prose, heading, body

Text Formatting

• Text Color - text:dark, text:grey, text:primary
• Text Alignment - text:left, text:center, text:right
• Text Transform - uppercase, lowercase, capitalize
• Text Decoration - underline, line-through, no-underline
• Text Overflow - truncate, text-ellipsis
• Text Wrap - text-wrap:wrap, text-wrap:nowrap, text-wrap:balance
• Whitespace - white-space:pre, white-space:nowrap
• Word Break - word-break:normal, break-words, break-all
• Hyphens - hyphens:auto, hyphens:none
• Text Indent - indent:small, indent:medium
• Vertical Align - align:middle, align:top

Lists

• List Style - list-none, list-disc, list-decimal
• Font Variant Numeric - tabular-nums, ordinal

Borders

• Border Color - border:grey, border:primary
• Border Width - border-w:thin, border-w:thick
• Border Radius - rounded:small, rounded:big, rounded:round
• Border Style - border-solid, border-dashed, border-dotted

Effects

• Box Shadow - shadow:small, shadow:medium, shadow:big
• Outline - outline:none, outline:primary
• Text Shadow - text-shadow:small, text-shadow:medium
• Opacity - opacity:[0.5], opacity:[0]
• Blend Modes - mix-blend:multiply, mix-blend:overlay
• Mask - mask-image:[url]

Filter

• Blur - blur:small, blur:medium
• Brightness - brightness:[0.5], brightness:[1.5]
• Contrast - contrast:[0.5], contrast:[1.5]
• Drop Shadow - drop-shadow:small, drop-shadow:medium
• Grayscale - grayscale, grayscale:[0.5]
• Hue Rotate - hue-rotate:[90deg]
• Invert - invert, invert:[0.5]
• Saturate - saturate:[0.5], saturate:[2]
• Sepia - sepia, sepia:[0.5]

Backdrop Filter

• Backdrop Blur - backdrop-blur:small, backdrop-blur:medium
• Backdrop Brightness - backdrop-brightness:[0.5]
• Backdrop Contrast - backdrop-contrast:[0.5]
• Backdrop Grayscale - backdrop-grayscale
• Backdrop Hue Rotate - backdrop-hue-rotate:[90deg]
• Backdrop Invert - backdrop-invert
• Backdrop Opacity - backdrop-opacity:[0.5]
• Backdrop Saturate - backdrop-saturate:[2]
• Backdrop Sepia - backdrop-sepia

Transition

• Property - transition:all, transition:colors
• Duration - duration:fast, duration:slow
• Timing Function - ease:linear, ease:in-out
• Delay - delay:short, delay:long

Animation

• Built-in - animate:spin, animate:pulse, animate:bounce
• Duration - anim-duration:fast, anim-duration:slow
• Delay - anim-delay:short, anim-delay:long
• Iteration - anim-iteration:infinite, anim-iteration:2
• Direction - anim-direction:reverse, anim-direction:alternate
• Fill Mode - anim-fill:forwards, anim-fill:backwards
• Play State - anim-play:paused, anim-play:running

Transform

• Scale - scale:[1.1], scale-x:[0.5]
• Rotate - rotate:[45deg], rotate:[90deg]
• Translate - translate-x:[10px], translate-y:[20px]
• Skew - skew-x:[5deg], skew-y:[10deg]
• Origin - origin:center, origin:top-left

3D Transform

• Perspective - perspective:[500px]
• Perspective Origin - perspective-origin:center
• Transform Style - transform-style:preserve-3d
• Backface Visibility - backface:hidden, backface:visible

Interactivity

• Accent Color - accent:primary, accent:secondary
• Appearance - appearance:none
• Caret Color - caret:primary, caret:transparent
• Color Scheme - color-scheme:light, color-scheme:dark
• Cursor - cursor:pointer, cursor:wait, cursor:grab
• Field Sizing - field-sizing:content
• Pointer Events - pointer-events:none, pointer-events:auto
• Resize - resize, resize:none, resize-x, resize-y
• Scroll Behavior - scroll:smooth, scroll:auto
• Scroll Margin - scroll-m:small, scroll-m:medium
• Scroll Padding - scroll-p:small, scroll-p:medium
• Scroll Snap Align - snap:start, snap:center
• Scroll Snap Stop - snap-stop:normal, snap-stop:always
• Scroll Snap Type - snap:x, snap:y, snap:mandatory
• Touch Action - touch:none, touch:pan-x
• User Select - select:none, select:all
• Will Change - will-change:transform, will-change:opacity
• State Prefixes - hover:, focus:, active:, disabled:

SVG

• Fill - fill:current, fill:none
• Stroke - stroke:current, stroke:primary
• Stroke Width - stroke-w:1, stroke-w:2

Accessibility

• Forced Color Adjust - forced-color-adjust:none, forced-color-adjust:auto

Quick Example

<div visual="bg:white rounded:big shadow:medium text:dark">
  Card with multiple visual properties
</div>