lion-make 0.1.0

package/guidelines/content-types/general/cta.md

@@ -0,0 +1,52 @@
+# CTA
+
+**Zone:** General — Primary Column, Sideburn, Outro.
+
+## Description
+
+A call-to-action element. Can be a button, a text link, or a phone number link. The primary conversion driver on most pages.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `type` | `'button' \| 'link' \| 'phone'` | Yes | — | Rendering and semantic type |
+| `label` | `string` | Yes | — | Visible label text |
+| `href` | `string` | For button/link | — | Destination URL |
+| `phone` | `string` | For phone | — | Phone number (digits only, e.g. `8005551234`) |
+| `variant` | `'primary' \| 'secondary'` | No | `'primary'` | Visual style |
+| `opensInNewTab` | `boolean` | No | `false` | Opens in new tab (adds rel and target) |
+| `className` | `string` | No | — | Additional CSS class |
+
+## When to Use Which Type
+
+| Situation | Type |
+|---|---|
+| Primary conversion action ("Start for $0.99", "Get a Quote") | `button` + `primary` |
+| Secondary or inline navigation | `link` + `secondary` |
+| Clickable phone number | `phone` |
+
+## Usage
+
+```tsx
+import { CTA } from 'lion-make'
+
+// Primary button
+<CTA type="button" label="Start for $0.99" href="/start" variant="primary" />
+
+// Secondary link
+<CTA type="link" label="Learn more" href="/about" variant="secondary" />
+
+// Phone number
+<CTA type="phone" label="Call us: 800-555-1234" phone="8005551234" />
+```
+
+## Design Tokens
+
+- Background (primary): `var(--color-brand)` → `var(--color-blue)`
+- Text (primary): `var(--color-white)`
+- Border (secondary): `var(--border-width-base)` solid `var(--color-brand)`
+- Text (secondary): `var(--color-link)`
+- Border radius: `var(--border-radius-base)`
+- Padding: `var(--padding-base-vertical)` `var(--padding-base-horizontal)`
+- Font weight: `var(--font-weight-600)`

package/guidelines/content-types/general/lead-form.md

@@ -0,0 +1,56 @@
+# Lead Form
+
+**Zone:** General — Primary Column, Outro only. NOT allowed in Sideburn.
+
+## Description
+
+Gathers personal information from the user with the intent of starting a sale. Each lead form submission is tracked via a media code for campaign attribution.
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `fields` | `LeadFormField[]` | Yes | Form fields to render |
+| `submitLabel` | `string` | No | Submit button label (default: "Submit") |
+| `onSubmit` | `(data: Record<string, string>) => void` | No | Submission handler |
+| `mediaCode` | `string` | No | Campaign tracking code (agency landing pages) |
+| `className` | `string` | No | Additional CSS class |
+
+### LeadFormField
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `name` | `string` | Yes | Field name (used in form data) |
+| `label` | `string` | Yes | Visible field label |
+| `type` | `'text' \| 'email' \| 'tel' \| 'select'` | Yes | Input type |
+| `required` | `boolean` | No | Mark field as required |
+| `options` | `string[]` | For select | Options for select fields |
+
+## Usage
+
+```tsx
+import { LeadForm } from 'lion-make'
+
+<LeadForm
+  fields={[
+    { name: 'firstName', label: 'First Name', type: 'text', required: true },
+    { name: 'lastName', label: 'Last Name', type: 'text', required: true },
+    { name: 'email', label: 'Email', type: 'email', required: true },
+    { name: 'phone', label: 'Phone', type: 'tel' },
+    { name: 'state', label: 'State', type: 'select', required: true, options: ['NE', 'IA', 'KS', 'MO'] },
+  ]}
+  submitLabel="Get a Free Quote"
+  mediaCode="CAMP-2024-Q1"
+  onSubmit={(data) => submitLead(data)}
+/>
+```
+
+## Zone Restriction
+
+Lead Form is not allowed in the Sideburn column. The 4-col Sideburn width is too narrow for form layouts. Use Primary Column (full or 8-col) or Outro instead.
+
+## Design Tokens
+
+- Submit button: `var(--color-brand)` background, `var(--color-white)` text
+- Label weight: `var(--font-weight-600)`
+- Border radius: `var(--border-radius-base)`

package/guidelines/content-types/general/overview.md

@@ -0,0 +1,46 @@
+# General Zone Content Types
+
+**Zone rule:** These content types can only be placed in General zone sections — Primary Column, Sideburn, or Outro. Never use them in Header, Hero, or Footer zones.
+
+General content types make up the bulk of page body content. They are the most versatile category, but they are still zone-locked.
+
+## Zone Availability Matrix
+
+| Content Type | Component | Primary Column | Sideburn | Outro |
+|---|---|---|---|---|
+| CTA | `CTA` | Yes | Yes | Yes |
+| Call-Out | `CallOut` | Yes | Yes | Yes |
+| RTBs | `RTBs` | Yes | Yes | Yes |
+| Confidence Tags | `ConfidenceTags` | Yes | Yes | Yes |
+| Lead Form | `LeadForm` | Yes | No | Yes |
+| Rich Text | `RichText` | Yes | Yes | Yes |
+
+**Note:** Lead Form is not allowed in the Sideburn column — use it in Primary Column or Outro only.
+
+## Placement Example
+
+```tsx
+import { Section, Container, CTA, RTBs } from 'lion-make'
+
+<Section zone="primary-column">
+  <Container type="single">
+    <RTBs items={[
+      { heading: 'Affordable', body: 'Plans starting at $0.99 per month.' },
+      { heading: 'No pressure', body: 'No sales calls. Cancel anytime.' },
+      { heading: 'Real data', body: 'Actual coach contacts and roster openings.' },
+    ]} />
+  </Container>
+  <Container type="single">
+    <CTA type="button" label="Start for $0.99" href="/start" variant="primary" />
+  </Container>
+</Section>
+```
+
+## Files in This Section
+
+- [cta.md](./cta.md)
+- [callout.md](./callout.md)
+- [rtbs.md](./rtbs.md)
+- [confidence-tags.md](./confidence-tags.md)
+- [lead-form.md](./lead-form.md)
+- [rich-text.md](./rich-text.md)

package/guidelines/content-types/general/rich-text.md

@@ -0,0 +1,35 @@
+# Rich Text
+
+**Zone:** General — Primary Column, Sideburn, Outro.
+
+## Description
+
+Renders pre-formatted rich text from the RTE (Rich Text Editor). Accepts trusted HTML — use only for content already sanitized by the CMS. Do not pass user-generated content directly.
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `html` | `string` | Yes | Trusted HTML string from RTE output |
+| `className` | `string` | No | Additional CSS class |
+
+## Usage
+
+```tsx
+import { RichText } from 'lion-make'
+
+<RichText html="<p>Coverage starts on the <strong>first of the month</strong> after your policy is approved.</p>" />
+```
+
+## Design Tokens
+
+- Font family: `var(--font-family-sans-serif)`
+- Font size: `var(--font-size-base)`
+- Line height: `var(--line-height-base)`
+- Color: `var(--color-text)`
+
+## Content Rules
+
+- Only pass sanitized HTML from the CMS RTE. Never pass raw user input.
+- Headings within rich text should start at H2 (H1 belongs to the Hero zone heading).
+- Links within rich text inherit `var(--color-link)` and `var(--color-link-hover)` automatically.

package/guidelines/content-types/general/rtbs.md

@@ -0,0 +1,55 @@
+# RTBs (Reasons To Buy)
+
+**Zone:** General — Primary Column, Sideburn, Outro.
+
+## Description
+
+Multiple text chunks, each paired with an optional spot illustration, that highlight the core value propositions. RTBs are the "why choose us" section.
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `items` | `RTBItem[]` | Yes | Array of reasons (min 2, typically 3–4) |
+| `className` | `string` | No | Additional CSS class |
+
+### RTBItem
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `heading` | `string` | Yes | Short value proposition headline |
+| `body` | `string` | Yes | Supporting explanation (1–2 sentences) |
+| `illustrationSrc` | `string` | No | Spot illustration image URL |
+| `illustrationAlt` | `string` | No | Illustration alt text |
+
+## Usage
+
+```tsx
+import { RTBs } from 'lion-make'
+
+<RTBs items={[
+  {
+    heading: 'Real roster data',
+    body: 'See actual open spots at colleges across all divisions.',
+    illustrationSrc: '/icons/data.svg',
+    illustrationAlt: '',
+  },
+  {
+    heading: 'Direct coach contacts',
+    body: 'Get verified email addresses — no middleman, no sales calls.',
+    illustrationSrc: '/icons/contact.svg',
+    illustrationAlt: '',
+  },
+  {
+    heading: 'Start for $0.99',
+    body: 'Intro month pricing. Cancel anytime.',
+    illustrationSrc: '/icons/price.svg',
+    illustrationAlt: '',
+  },
+]} />
+```
+
+## Design Tokens
+
+- Heading: `var(--h3-font-size)`, `var(--font-weight-600)`
+- Body: `var(--font-size-base)`, `var(--color-text)`

package/guidelines/content-types/header/corporate-universal-header.md

@@ -0,0 +1,36 @@
+# Corporate Universal Header
+
+**Zone:** Header only — Corporate Universal Header subsection.
+
+## Description
+
+A narrow blue bar at the very top of the page. Contains the company logo and a state selector. Present on all pages and platforms.
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `logoSrc` | `string` | Yes | Path to the logo image |
+| `logoAlt` | `string` | Yes | Alt text for the logo |
+| `selectedState` | `string` | No | Currently selected US state |
+| `onStateChange` | `(state: string) => void` | No | Callback when user changes state |
+| `className` | `string` | No | Additional CSS class |
+
+## Usage
+
+```tsx
+import { CorporateUniversalHeader } from 'lion-make'
+
+<CorporateUniversalHeader
+  logoSrc="/logo.svg"
+  logoAlt="Company logo"
+  selectedState="NE"
+  onStateChange={(state) => updateUserState(state)}
+/>
+```
+
+## Design Tokens
+
+- Background: `var(--color-blue-dark)` (`#003a70`)
+- Always the topmost element in the Header zone.
+- Z-index: `var(--z-index-overlays-and-headers)` when sticky.

package/guidelines/content-types/header/global-header-bar.md

@@ -0,0 +1,49 @@
+# Global Header Bar
+
+**Zone:** Header only — Global Header Bar subsection.
+
+## Description
+
+A white header bar below the Corporate Universal Header. Contains the full company logo, underwriting information, and primary CTAs (quotes, sign-in).
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `logoSrc` | `string` | Yes | Path to the logo image |
+| `logoAlt` | `string` | Yes | Alt text for the logo |
+| `underwriterInfo` | `string` | No | Underwriter legal text |
+| `ctas` | `CTAItem[]` | No | Array of CTA buttons/links |
+| `className` | `string` | No | Additional CSS class |
+
+### CTAItem
+
+```ts
+interface CTAItem {
+  label: string
+  href: string
+  type?: 'button' | 'link'
+}
+```
+
+## Usage
+
+```tsx
+import { GlobalHeaderBar } from 'lion-make'
+
+<GlobalHeaderBar
+  logoSrc="/logo-full.svg"
+  logoAlt="Company"
+  underwriterInfo="Underwritten by Mutual of Omaha Insurance Company"
+  ctas={[
+    { label: 'Get a Quote', href: '/quote', type: 'button' },
+    { label: 'Sign In', href: '/login', type: 'link' },
+  ]}
+/>
+```
+
+## Design Tokens
+
+- Background: `var(--color-white)`
+- CTA font-weight: `var(--font-weight-600)`
+- Z-index: `var(--z-index-overlays-and-headers)` when sticky.

package/guidelines/content-types/header/overview.md

@@ -0,0 +1,34 @@
+# Header Zone Content Types
+
+**Zone rule:** These content types can only be placed in the Header zone. Never use them in Hero, General, or Footer zones.
+
+The Header zone is subdivided into subsections. Each subsection accepts a specific content type.
+
+## Header Subsections
+
+| Subsection | Content type | Component |
+|---|---|---|
+| Corporate Universal Header | Corporate Universal Header | `CorporateUniversalHeader` |
+| Global Header Bar | Global Header Bar | `GlobalHeaderBar` |
+| Navigation | Top Nav, Product Nav, Underwriter Nav | *(coming)* |
+
+## Placement Example
+
+```tsx
+import { Section, CorporateUniversalHeader, GlobalHeaderBar } from 'lion-make'
+
+<Section zone="header">
+  <CorporateUniversalHeader logoSrc="/logo.svg" logoAlt="Company" selectedState="NE" />
+  <GlobalHeaderBar
+    logoSrc="/logo-full.svg"
+    logoAlt="Company"
+    underwriterInfo="Underwritten by Mutual of Omaha"
+    ctas={[{ label: 'Get a Quote', href: '/quote', type: 'button' }]}
+  />
+</Section>
+```
+
+## Files in This Section
+
+- [corporate-universal-header.md](./corporate-universal-header.md)
+- [global-header-bar.md](./global-header-bar.md)

package/guidelines/content-types/hero/hero-variants.md

@@ -0,0 +1,68 @@
+# Hero Variants
+
+**Zone:** Hero only.
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `variant` | `'full-bleed' \| 'split' \| 'minimal'` | Yes | Layout style |
+| `heading` | `string` | Yes | Main H1 headline |
+| `subheading` | `string` | No | Supporting text |
+| `imageSrc` | `string` | No | Hero image URL |
+| `imageAlt` | `string` | No | Image alt text |
+| `ctaLabel` | `string` | No | CTA button label |
+| `ctaHref` | `string` | No | CTA destination |
+| `className` | `string` | No | Additional CSS class |
+
+## Variant Details
+
+### full-bleed
+
+Background image or gradient fills the entire hero container edge to edge. Text overlays the image with sufficient contrast.
+
+```tsx
+<Hero
+  variant="full-bleed"
+  heading="Start for $0.99"
+  imageSrc="/bg-hero.jpg"
+  imageAlt=""
+  ctaLabel="Get started"
+  ctaHref="/start"
+/>
+```
+
+### split
+
+Content area on the left (50%), image on the right (50%). Works best with portrait-oriented images.
+
+```tsx
+<Hero
+  variant="split"
+  heading="Life insurance made simple"
+  subheading="No sales calls. No pressure. Just coverage."
+  imageSrc="/family.jpg"
+  imageAlt="Happy family"
+  ctaLabel="See plans"
+  ctaHref="/plans"
+/>
+```
+
+### minimal
+
+Text only, no image. Centered heading and subheading. Use when visual assets are unavailable or the page is utility-focused.
+
+```tsx
+<Hero
+  variant="minimal"
+  heading="Your account"
+  subheading="Manage your policy and coverage details."
+/>
+```
+
+## Design Tokens
+
+- Heading: `var(--h1-font-size)` / `var(--h1-md-font-size)` at `--md-viewport`
+- Heading line-height: `var(--h1-line-height)` / `var(--h1-md-line-height)`
+- CTA background: `var(--color-brand)`
+- CTA text: `var(--color-white)`

package/guidelines/content-types/hero/overview.md

@@ -0,0 +1,41 @@
+# Hero Zone Content Types
+
+**Zone rule:** These content types can only be placed in the Hero zone. Never use them in Header, General, or Footer zones.
+
+The Hero zone is the primary visual area of the page, immediately below the header. It always spans the full width of the page regardless of template.
+
+## Available Content Types
+
+| Content Type | Component | Description |
+|---|---|---|
+| Hero | `Hero` | Full-page-width hero with heading, optional image, and CTA |
+
+## Variants
+
+| Variant | Description |
+|---|---|
+| `full-bleed` | Background image or gradient fills the entire hero area edge to edge |
+| `split` | Content on the left, image on the right (50/50) |
+| `minimal` | Text-only, no image, centered or left-aligned |
+
+## Placement Example
+
+```tsx
+import { Section, Hero } from 'lion-make'
+
+<Section zone="hero">
+  <Hero
+    variant="full-bleed"
+    heading="Protect what matters most"
+    subheading="Affordable life insurance starting at $0.99."
+    imageSrc="/hero-family.jpg"
+    imageAlt="Family at home"
+    ctaLabel="Get a Quote"
+    ctaHref="/quote"
+  />
+</Section>
+```
+
+## Files in This Section
+
+- [hero-variants.md](./hero-variants.md)

package/guidelines/content-types/overview.md

@@ -0,0 +1,60 @@
+# Content Types Overview
+
+Content types are predefined design patterns. Each content type belongs to exactly one zone. You cannot use a content type outside its designated zone.
+
+## Decision Tree: Which Content Type?
+
+1. **What zone is this content going in?** → determines the category.
+2. **What is the purpose of this content?** → determines the specific type within the category.
+
+```
+Is this for the top of every page (logo, nav)?
+  → Header zone → [header content types](./header/overview.md)
+
+Is this the primary visual/headline area?
+  → Hero zone → [hero content types](./hero/overview.md)
+
+Is this informational, promotional, or a form in the body of the page?
+  → General zone → [general content types](./general/overview.md)
+
+Is this legal, compliance, or disclosure content?
+  → Footer zone → [footer content types](./footer/overview.md)
+```
+
+## Content Type Catalog by Zone
+
+### Header Zone (header section only)
+
+| Content Type | Component | Description |
+|---|---|---|
+| Corporate Universal Header | `CorporateUniversalHeader` | Blue bar with state selector and logo |
+| Global Header Bar | `GlobalHeaderBar` | White bar with logo, underwriter info, CTAs |
+
+### Hero Zone (hero section only)
+
+| Content Type | Component | Variants |
+|---|---|---|
+| Hero | `Hero` | `full-bleed`, `split`, `minimal` |
+
+### General Zone (Primary Column, Sideburn, Outro)
+
+| Content Type | Component | Allowed zones |
+|---|---|---|
+| CTA | `CTA` | Primary Column, Sideburn, Outro |
+| Call-Out | `CallOut` | Primary Column, Sideburn, Outro |
+| RTBs | `RTBs` | Primary Column, Sideburn, Outro |
+| Confidence Tags | `ConfidenceTags` | Primary Column, Sideburn, Outro |
+| Lead Form | `LeadForm` | Primary Column, Outro only (not Sideburn) |
+| Rich Text | `RichText` | Primary Column, Sideburn, Outro |
+
+### Footer Zone (footer section only)
+
+| Content Type | Component | Subsection |
+|---|---|---|
+| Disclaimer | `Disclaimer` | Disclaimer subsection |
+| Disclosure | `Disclosure` | Disclosure subsection |
+| Compliance Block | `ComplianceBlock` | Compliance subsection |
+
+## Zone Exclusivity Rule
+
+A content type listed under one zone cannot be used in any other zone. There are no exceptions. See [composition/zones.md](../composition/zones.md) for the complete placement table.

package/guidelines/foundations/breakpoints.md

@@ -0,0 +1,53 @@
+# Breakpoints
+
+Source: `src/tokens/breakpoints.css`
+
+## Breakpoint Values
+
+| Name | Token | Value | Custom media query |
+|---|---|---|---|
+| xs | `--bp-xs` | 432px | — |
+| sm | `--bp-sm` | 535px | `--sm-viewport` / `--max-sm-viewport` |
+| md | `--bp-md` | 767px | `--md-viewport` / `--max-md-viewport` |
+| lg | `--bp-lg` | 981px | `--lg-viewport` / `--max-lg-viewport` |
+| xl | `--bp-xl` | 1301px | `--xl-viewport` / `--max-xl-viewport` |
+| max-width | `--max-width` | 1600px | — |
+
+## Custom Media Queries
+
+Each tier has a min-width and max-width variant:
+
+```css
+/* Min-width (mobile-first, use these) */
+@media (--sm-viewport)  { /* 535px+ */ }
+@media (--md-viewport)  { /* 767px+ */ }
+@media (--lg-viewport)  { /* 981px+ */ }
+@media (--xl-viewport)  { /* 1301px+ */ }
+
+/* Max-width (use sparingly) */
+@media (--max-sm-viewport)  { /* up to 534px */ }
+@media (--max-md-viewport)  { /* up to 766px */ }
+@media (--max-lg-viewport)  { /* up to 980px */ }
+@media (--max-xl-viewport)  { /* up to 1300px */ }
+```
+
+## Utility Class Responsive Variants
+
+The `make-utilities.css` mixin system generates responsive utility classes at each breakpoint:
+
+```
+.u-[name]         /* all sizes */
+.u-sm-[name]      /* 535px+ */
+.u-md-[name]      /* 767px+ */
+.u-lg-[name]      /* 981px+ */
+.u-xl-[name]      /* 1301px+ */
+```
+
+## Container Max Width
+
+The page container should never exceed `--max-width` (1600px):
+
+```css
+max-width: var(--max-width);
+margin: 0 auto;
+```

package/guidelines/foundations/color.md

@@ -0,0 +1,86 @@
+# Color
+
+Source: `src/tokens/colors.css`
+
+## Base Palette
+
+### Gray Scale
+
+| Token | Value | Use |
+|---|---|---|
+| `--color-white` | `#fff` | Backgrounds, inverse text |
+| `--color-gray-darkest` | `#222` | — |
+| `--color-gray-darker` | `#444` | Body text (`--color-text`) |
+| `--color-gray-dark` | `#5d5d5d` | Legal/compliance text |
+| `--color-gray` | `#838383` | Placeholder, muted |
+| `--color-gray-light` | `#bababa` | Borders (`--color-line`) |
+| `--color-gray-lighter` | `#e5e5e5` | Dividers |
+| `--color-gray-lightest` | `#f7f7f7` | Surface backgrounds |
+
+### Brand Colors
+
+| Token | Value |
+|---|---|
+| `--color-blue-dark` | `#003a70` |
+| `--color-blue` | `#105fa8` |
+| `--color-blue-shade` | `rgb(16, 94, 166)` |
+| `--color-teal-dark` | `#03746e` |
+| `--color-teal` | `#03a0ad` |
+| `--color-green` | `#19a38a` |
+| `--color-green-light` | `#d2e6ca` |
+| `--color-yellow` | `#ac9633` |
+| `--color-yellow-light` | `#fbea8e` |
+| `--color-red` | `#c12506` |
+| `--color-red-light` | `#fdf4f2` |
+| `--color-orange` | `#df6903` |
+
+### Supporting Palette
+
+| Token | Value |
+|---|---|
+| `--color-sand` | `#fffbf2` |
+| `--color-gold` | `#f5b93c` |
+
+## Semantic Mappings
+
+Always use semantic tokens in components — not raw palette values.
+
+| Token | Resolves to | Use |
+|---|---|---|
+| `--color-brand` | `--color-blue` | Primary brand color |
+| `--color-brand-primary` | `--color-blue` | Primary actions |
+| `--color-brand-success` | `--color-green` | Success states |
+| `--color-brand-warning` | `--color-yellow` | Warning states |
+| `--color-brand-danger` | `--color-red` | Error/danger states |
+| `--color-text` | `--color-gray-darker` | Default body text |
+| `--color-link` | `--color-blue` | Links |
+| `--color-link-hover` | `--color-blue-dark` | Link hover |
+| `--color-line` | `--color-gray-light` | Borders, dividers |
+
+## Opaque Variants
+
+| Token | Value |
+|---|---|
+| `--color-gray-darker-opaque` | `rgba(68, 68, 68, 0.8)` |
+| `--color-teal-opaque` | `rgba(3, 160, 173, 0.08)` |
+| `--color-white-opaque-focus` | `rgba(255, 255, 255, 0.2)` |
+| `--color-white-opaque-active` | `rgba(255, 255, 255, 0.35)` |
+
+## Tinted Variants
+
+| Token | Value |
+|---|---|
+| `--color-gray-lighter-tint` | `rgb(233, 233, 233)` |
+| `--color-teal-tint` | `rgb(235, 247, 248)` |
+
+## Gradient
+
+| Token | Value |
+|---|---|
+| `--gradient-blue-to-teal` | `linear-gradient(to right, --color-blue-shade 0%, --color-teal 100%)` |
+
+Usage:
+
+```css
+background: var(--gradient-blue-to-teal);
+```