Glass panel
PREVIEW
Panel
Composable chrome
<div class="glass-panel interactive-panel">
<span class="hud-bracket hud-bracket--tl"></span>
<span class="hud-bracket hud-bracket--br"></span>
<div class="glass-panel-content">…</div>
</div>Add interactive-panel for hover lift, cursor sheen, and viewfinder brackets.
Panel variants
PREVIEW
—reading
| Variant | Changes | Reach for it |
|---|---|---|
| (base) | 14px chamfer, 5% fill | most panels |
--navbar-dense | tighter padding, denser edge | nav pills, compact bars |
--reading | wider chamfer, generous padding | article / content containers |
Button
.talos-button is the primary by default. Combine one variant with one
optional size.
PREVIEW
<a class="talos-button" href="#">Primary</a>
<button class="talos-button talos-button--secondary">Secondary</button>
<button class="talos-button talos-button--ghost talos-button--sm">Ghost · small</button>
<button class="talos-button talos-button--lg">Large CTA</button>| Class | Kind | Default? |
|---|---|---|
.talos-button | variant — primary | yes |
.talos-button--secondary | variant — alternative action | no |
.talos-button--ghost | variant — tertiary, text-weight | no |
.talos-button--sm | size — compact (toolbars) | no |
.talos-button--lg | size — hero CTA | no |
Chamfer utilities
PREVIEW
.chamfer-tr
.chamfer-br
.chamfer-tr (flags) and .chamfer-br (CTAs) cut a single corner via
clip-path. Pair with a host/inset pseudo pair for a hairline border.