Dentoo - Control total de tu clínica dental.

Brand Colors

Primary

Brand color

Secondary

Subtle backgrounds

Accent

Highlights

Muted

Disabled states

Semantic Colors

Default

Background + foreground pairing

Badge

Pill

Success

Background + foreground pairing

Badge

Pill

Warning

Background + foreground pairing

Badge

Pill

Danger

Background + foreground pairing

Badge

Pill

Info

Background + foreground pairing

Badge

Pill

Accent

Background + foreground pairing

Badge

Pill

Button Variants

Solid variants

Bordered variants

Flat variants

Ghost variants

Typography & Contrast

Foreground

Primary text using --foreground

Muted text using --muted-foreground

Small text (14px)

Base text (16px)

Large text (18px)

XL text (20px)

Accent Surface

Text over accent background maintains excellent contrast

Even with reduced opacity (70%), text remains readable

Accent Chip

Shadows & Elevation

Shadow Small

Subtle elevation for cards and containers

Shadow Medium

Moderate elevation for dropdowns and tooltips

Shadow Large

Strong elevation for modals and overlays

Inputs & Forms

Default Input

Primary Input

Success Input

Warning Input

Danger Input

Disabled Input

Chips & Badges

Solid chips

Default

Primary

Secondary

Success

Warning

Danger

Bordered chips

Default

Primary

Secondary

Success

Warning

Danger

Flat chips

Default

Primary

Secondary

Success

Warning

Danger

Borders & Dividers

Standard border

Border using --border

Primary border

Primary colored border

Input border

Input-specific border color