Site-wide design standards

Reusable pieces for this page.

A working reference for visual standards, reusable components, and interaction patterns that are worth carrying into other LifeWise campaign pages.

Site-wide design standards

Headers

Use big, condensed, expressive headers for emotional moments, then keep supporting copy simple and high-contrast. For section headers, use the no-orphan-heading utility and bind final phrases with keep-together spans when needed.

Call it: Header hierarchy

Site-wide design standards

Section title

One director away.

Compact headline

Get your church involved

Fonts

The page mixes bold display type with sturdy body copy. Protect the display fonts for headers and button labels; keep paragraphs readable.

Call it: Font pairing

Call it: Zing Rust display heading

Zing Rust

Primary display voice for hero and emotional section headlines.

Call it: Bebas Kai label heading

Bebas Kai

Navigation, buttons, category labels, and compact component titles.

Call it: Bogart editorial accent

Bogart

Optional editorial accent when we need a softer, more literary tone.

Call it: Lato body copy

Lato body copy

Standard paragraph and UI body text. Use bold weights sparingly for clarity.

Colors

Core tokens used across the page. Red carries urgency, yellow carries action, blue carries media controls and supportive motion.

Call it: Color palette

Call it: LifeWise red token

LifeWise red

#DB2F3C

Call it: Dark red token

Dark red

#B91F2C

Call it: LifeWise yellow token

LifeWise yellow

#F5D536

Call it: LifeWise blue token

LifeWise blue

#499ED7

Call it: Ink token

Ink

#282828

Call it: Muted token

Muted

#77716F

Call it: Warm white token

Warm white

#FDFBF9

Call it: Line token

Line

#E9E1D7

Spacing

Use one consistent section edge distance so the page feels intentional. The current standard is 112px on desktop and 56px on mobile.

Call it: Section rhythm

Call it: Standard section padding

py-28

112px desktop

Use on standalone content bands where the section border should breathe before and after the content.

Call it: Mobile section padding

py-14

56px mobile

This is the mobile spacing shown in the Russellville red CTA band and should be the default mobile section edge.

Call it: Split-section rule

Outer edges only

When one visual section is split into multiple React components, apply the standard to the outside edges only. Do not stack row padding plus section padding at a boundary.

px-[clamp(1.5rem,8vw,8.125rem)] py-28 max-[560px]:py-14

Photography

Use real program moments, students, leaders, and community context. Favor full-bleed images and strong human faces over abstract stock.

Call it: Photography carousel

Graphics

Use doodles and hand-drawn emphasis as supporting energy, not as decoration everywhere. They work best over photography or red panels.

Call it: Doodle texture panel

Doodle texture

Your recommendation could change everything.

Icons

Use simple line icons inside red circles for action lists and soft badges for cards. Icons should clarify, not compete with the type.

Call it: Red icon badge grid

Call it: person icon badge

person

Call it: church icon badge

church

Call it: gift icon badge

gift

Call it: message icon badge

message

Buttons

CTA buttons

Hero pills and soft UI buttons are the main reusable action styles. Edit the label and tone to see the component respond.

Call it: CTA button set

Call it: Yellow video pill

Call it: Yellow action pill

Call it: Red video pill

Call it: Red action pill

Call it: Blue video pill

Call it: Blue action pill

Call it: White video pill

Call it: White action pill

Call it: Text play control

Watch the video

Call it: Hero pillApply now

Call it: Soft button

Button labelHero toneSoft variant

CodeTSX

<ButtonLink href="#role" size="hero">
  Apply now
</ButtonLink>

<ButtonLink href="#role" size="hero" tone="secondary">
  Explore the role
</ButtonLink>

<ButtonLink href="#role" size="hero">
  Apply now
</ButtonLink>

<SoftButton variant="primary">
  Apply now
</SoftButton>

Lists

Action button list

Use this for stacked rows where each item is a direct action. Descriptions are optional, so the same component can be compact on landing pages and more descriptive in guides.

Call it: ActionList + ActionListButton

Call it: Action list with optional subtext

Get your church involvedReceive a starter church packet
GiveSponsor Russellville's first year
Get connectedStay in the loop as the launch moves forward

Call it: Action list without subtext

Apply now
Recommend someone

CodeTSX

<ActionList>
  <ActionListItem>
    <ActionListButton
      title="Get your church involved"
      description="Receive a starter church packet"
      href="/churches"
    />
  </ActionListItem>

  <ActionListItem>
    <ActionListButton title="Give" href="/give" />
  </ActionListItem>
</ActionList>

Lists

Collapsible action list

Use this when each item needs supporting detail. On mobile it saves space, exposes one detail at a time, and still looks tappable.

Call it: Collapsible action list

Receive a starter church packet and help churches rally around the launch.

Sponsor Russellville's first year and help the program start strong.

Tell the launch team you are interested and want to stay in the loop.

CodeTSX

<button aria-expanded={isOpen} onClick={toggleOpen}>
  <span>{icon}</span>
  <span>Get connected</span>
  <Chevron />
</button>

<div className={isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"}>
  <p>Tell us you are interested.</p>
</div>

Embedded videos

Embedded videos should sit in rounded, photo-led frames with the play control in a predictable top-right or bottom-right location.

Call it: Embedded video frame

Call it: Video guidance card

Video treatment

Keep the poster visible while the player loads. Avoid black bars, avoid default Vimeo end screens, and keep the primary control obvious.

Media

Full-bleed video

Use this for mobile full-bleed video moments where the media should stay in the same tall container and use our controls instead of Vimeo's native control bar.

Call it: MobileVerticalVimeoPlayer

Call it: Full-bleed player

Same container, custom controls

On mobile, the vertical Vimeo crop fills the section and uses our pause and mute controls. Desktop can still use the full horizontal embed when that layout is stronger.

CodeTSX

<section className="relative min-h-[620px] overflow-hidden bg-black">
  <MobileVerticalVimeoPlayer
    title="LifeWise vision vertical video"
    videoId="1203448400"
    videoHash="9a36f4b253"
    initialMuted
  />
</section>

Looping videos

Looping video tiles should feel like moving photography: cropped intentionally, muted by default, and paired with text below the image.

Call it: Looping video tile row

Call it: Looping video tile

Story tile

Short description lives below the image.

Call it: Looping video tile

Story tile

Short description lives below the image.

Call it: Looping video tile

Story tile

Short description lives below the image.

Media

Photo/video card

A reusable vertical story tile pattern: media fills the card, controls sit inside the tile, and copy lives below the visual.

Call it: Photo/video story card

Call it: Vertical story tile

Connor's Story

Copy stays below the video so the image can breathe.

Call it: Quiet soft button

CodeTSX

<article className="w-[min(360px,31vw)]">
  <div className="relative h-[520px] overflow-hidden rounded-[28px]">
    <video className="h-full w-full object-cover" muted loop autoPlay />
    <button aria-label="Pause video">...</button>
  </div>
  <h3>Connor's Story</h3>
</article>

Title copy

Use short, directional headlines. Lead with the need, the opportunity, or the next action. Supporting copy should do the explaining.

Call it: Title copy set

Call it: One director away.

One director away.

Clear need, campaign-ready.

Call it: Who do you know?

Who do you know?

Referral-oriented and conversational.

Call it: The greatest opportunity to reach the next generation

The greatest opportunity to reach the next generation

Vision-first emotional statement.

Call it: Not the director? There's still a place for you.

Not the director? There's still a place for you.

Inclusive secondary CTA framing.

UI design

Reusable UI should feel warm and tactile, but not overly glossy. Cards, forms, modals, and accordions need visible edges and clear focus states.

Call it: Warm tactile UI

Cards

Soft UI cards

These are best for forms, CTA panels, and compact stat areas. They keep a visible edge, tactile surface, and accessible focus states.

Call it: Soft UI card

Call it: Primary soft card

I might be the one

A primary path for someone ready to explore the role.

Call it: Quiet soft card

I know someone

A referral path that stays calm and clear.

Call it: Yellow soft card

Get connected

A next step for people who want to learn more.

CodeTSX

<SoftCard className="p-6">
  <SoftIconBadge>{icon}</SoftIconBadge>
  <SoftCardHeader>
    <SoftCardTitle>I might be the one</SoftCardTitle>
    <SoftCardDescription>
      A warm, tactile reusable card.
    </SoftCardDescription>
  </SoftCardHeader>
</SoftCard>

<SoftButton variant="primary">
  Copy message
</SoftButton>

<SoftButton variant="quiet">
  Start here
</SoftButton>

Sections

Hero composition

The hero is reusable as a photo-led conversion section: background media, centered need statement, location context, and paired CTAs.

Call it: Photo-led hero

Russellville, Arkansas

One director away.

School approved. Churches committed. Now Russellville needs a leader.

Apply now Explore role

CodeTSX

<section className="relative min-h-[760px] overflow-hidden">
  <Image src={asset("hero-program-director-group.png")} fill alt="" />
  <div className="relative z-10">
    <h1>One director away.</h1>
    <ButtonLink href={applyHref} size="hero">Apply now</ButtonLink>
  </div>
</section>