Design system

The Bootstrap building blocks Neon Law's surfaces share, painted with the brand cyan primary (Tailwind cyan-500 #06b6d4). Each block below is the same component the live app renders.

Color

One cyan everywhere — "primary", "the blue", and "the cyan" all resolve to it.

Buttons

Cyan solid for the primary action, outline for the secondary.

Cards

The shared Card component — plain, highlighted (cyan anchor), and with a footer.

Pricing cards

The featured tier gets the cyan band and a solid CTA.

Toasts

Server-rendered with the static .show class; the brand cyan is the Primary tone.

Navbar

The same Bootstrap navbar PageLayout renders site-wide — brand mark, collapsible links, and a mobile hamburger.

Forms

The shared FormCard — labeled fields, a cyan submit, in a centered card.

Code

Real, copy-pasteable component source — each block is verified against its file by the drift test, the same grounding the talk slides use.

pub struct Card {
    header: Option<Markup>,
    body: Markup,
    footer: Option<Markup>,
    emphasis: Emphasis,
    full_height: bool,
    center_body: bool,
    shadow: bool,
}

    pub fn highlighted(mut self) -> Self {
        self.emphasis = Emphasis::Highlighted;
        self
    }

pub enum ToastTone {
    /// Red — errors and "you must sign in" gates.
    Danger,
    /// Green — confirmations.
    Success,
    /// Brand cyan — neutral notices.
    Primary,
    /// Amber — non-blocking warnings.
    Warning,
}

pub fn toast_overlay(toasts: &Markup) -> Markup {
    html! {
        div."toast-container"."position-fixed"."top-0"."end-0"."p-3" { (toasts) }
    }
}