component

TuxCTA

The loudest editorial surface short of a page header. Solid-color block, oversized heading, action area on the right (stacks below on narrow viewports). Use sparingly — it's meant to interrupt. Three tones: maroon (canonical), gold (friendlier), neutral (info-only).

canonical

Maroon · primary CTA

get started

Point Landscape at your first directory

Five minutes, no commitment, runs entirely in your tenant.

<TuxCTA
  eyebrow="get started"
  title="Point Landscape at your first directory"
  dek="Five minutes, no commitment, runs entirely in your tenant."
>
  <template #actions>
    <TuxButton intent="primary" size="lg">Start scan</TuxButton>
    <TuxButton intent="ghost"   size="lg">Read the docs</TuxButton>
  </template>
</TuxCTA>

tones

Maroon / gold / neutral

Maroon for primary calls. Gold for secondary, friendly framings ("subscribe", "join the cohort"). Neutral for informational blocks that need a CTA but shouldn't shout.

ship it

Build production surfaces with tux

Eleven Tux components, three style variants, themeable per institution.

stay current

Quarterly research bulletin, in your inbox

Three-paragraph summaries of our most-read reports. No marketing copy, no upsell.

reference

Token + theme documentation

The authoritative source for color, typography, and spacing across all tux consumers.

style variants

Per-variant heading face

Default = Oswald (italic uppercase, gold-bar). Bold = Work Sans 800 with stacked-bar punctuation. Elegant = Georgia italic.

default

Editorial flagship — Oswald display

The most common framing. Reads as institutional, not promotional.

bold

Athletic flagship — Work Sans bold

Mixed-case, heavy weight. Right for events and student-facing surfaces.

elegant

Refined flagship — Georgia italic

Mixed-case serif. Right for research bulletins and policy announcements.

props

Props + slots

  • title — headline. Required.
  • eyebrow — tracked-out lead-in. Optional.
  • dek — one- or two-sentence description. Optional.
  • tone — "maroon" | "gold" | "neutral". Defaults to "maroon".
  • variant — "default" | "bold" | "elegant".
  • Default slot — richer body content (replaces dek when present).
  • #actions slot — buttons, form, or link list. Sits in the right column on ≥48rem viewports, stacked below otherwise.