Medical care & comfort
Physician oversight
Skilled nursing care
Medications related to the hospice diagnosis
Medical equipment and supplies
LEGACY CARE / DESIGN SYSTEM 2.0
Style guide 2.0.
Apricot Light · Fraunces + DM Sans · Shared classes for every page. This guide is the design reference; page drafts are applications to refine.
Version 2.0 — patterns for the next pages.
Keep the original guide’s warmth and character. The updates below consolidate the agreed button behavior, professional image geometry, quieter reading rows and a prominent referral path.
WHITE GLASS
A little light. A clear next step.
A white translucent surface with subtle blur, a fine highlight and a restrained shadow. Keep copy navy and put enough color behind the panel for the haze to be visible.
Explore hospice care01
Clear information comes first.
Light gray numbers sit above headings. Use fine dividers between rows, with no surrounding border or hover effect.
02
Space makes room to read.
Shared content width: 1,624px. Reading copy stays around 60 characters per line. Use 80px section spacing, reduced to 48px on mobile.
Referral uses a background photograph with a lighter apricot overlay toward the right, preserving the opaque reading area behind the left-hand copy. Keep both actions side by side where space permits. The photograph remains replaceable in Atomic.
A PLACE TO BEGIN
Connect someone with care.
You don’t have to have all the answers. Refer a patient or tell us what’s happening. We’ll listen, explain the options and help coordinate the next step.
Care information patterns
Home uses visible fine grain and a navy timing section with sunlight haze from the left. Timing cards are solid white. Resources have a shared introduction above two aligned columns: a soft-peach photo card and a three-card white stack of equal total height. No oversized horizon decorations. Wider photo frames use the reusable lc-photo-corners-subtle treatment: alternating 2rem and 0.625rem corners, reduced on phones. The commitment section has a soft backdrop shadow.
A private residence
A family member’s home
An assisted living community
A personal care home
A skilled nursing facility
Another residential setting
Help with everyday care
Hospice aide services
Caregiver education and support
Volunteer support
Support for the whole family
Social work
Spiritual care
Grief and bereavement support
CURRENT DIRECTION / CONTENT BLOCK RULES
Content blocks, working together.
Use this system for every page: clear reading surfaces, purposeful image masks, warm light and restrained motion. The homepage remains a draft to refine against this guide. Earlier studies below are alternatives, not ingredients to combine in every section.
Surface
One base surface per panel. A navy photo card can use a textured radial glow; supporting cards reuse an original style-guide pattern.
Pattern
Current care sequence: textured navy with a bottom-left glow, Dawn haze on a white base, then soft peach with corner sunlines. Soft shadows lift the panels.
Mask
Balanced corners is the standard professional mask. Use square proportions for portraits or the landscape adaptation for wider photographs. Keep photographs upright.
Spacing
Use 72px above and below a centered section introduction, 28px between its heading and text, and 40px panel padding. On phones use 48px, 24px and 24px respectively.
Action
Give each actionable card one clear destination. Use the approved light primary on navy and dark primary on light surfaces.
Motion
Use subtle sequential fades. The thin light-gray divider draws once on entry: left line, navy fill inside the visible Legacy icon, then right line. Its animation runs independently of scroll progress. Reduced-motion and editor views stay complete.
01 / Photo card
Navy, with a textured glow.
Use a smaller square masked photograph, inset from every edge. Keep the copy white and use a light primary action.
02 / Team & supporting copy
White / Sunlight haze.
Sunlight haze uses creamy yellow, gold and apricot on white. Keep the reading area quiet, with visible fine grain.
03 / Family & supporting copy
Soft peach / corner sunline.
Soft peach behind the original corner rays and warm glow, with a protected reading area and navy text.
Current surfaces: lc-surface--navy-glow (bottom-left glow and visible grain), lc-bg--haze + lc-bg--haze-sunlight on white, and lc-bg--rays + lc-bg--peach. Divider: thin light-gray lines draw once; the navy Legacy icon fills in, without scroll scrubbing.
Apricot Light
Navy anchors the site. Apricot and golden light add warmth; white and the reading surface keep content clear.
Logo navy
#1A305B
Reading surface
#FFF8EF
Apricot
#F5A45D
Golden light
#F5D28A
Burnt orange
#9B4A25
White
#FFFFFF
Supporting colors · button accents & alternates
Glow coral
#EF7970
Warm alternate
#FFEDDF
Navy alternate
#2A426A
Typography
FRAUNCES / HEADINGS
Care that feels like coming home.
Display 48px / 36px on mobile · headings 28px · weights 400–500
DM SANS / BODY & UI
When someone you love needs care, we’re here to listen, guide, and help you take the next step.
Body 18px / 1.6 line height · navigation 16px / 500 · buttons 16px / 600 · small actions 15px / 600
Aa Bb Gg Rr & 0123456789
Buttons & links — the shared family
Hold hover preview to inspect all four button roles. Use the shared classes for every CTA; the approved warm half-wash and light icon behavior are live here and on the site.
SMALL ACTIONS
SMALL ACTIONS / ON LIGHT
SMALL ACTIONS / ON NAVY
Primary hover: a visible peach–orange wash enters the right half of the button while the navy base stays recognizable. The icon stays light and shifts slightly. Light primary uses the matching warm wash; navy alternate keeps its soft glass finish. All text links use one apricot-to-gold underline.
Backgrounds & patterns
Current palette: Sunlight / Dawn haze on white, Apricot wash, soft-peach Corner sunline, and Tonal horizon. Keep most reading surfaces flat. Luminous veil is retained below as an archived alternative, not a default.
01 / Sunlight — Dawn haze
Recommended foundation · heroes & quiet transitions
ON APRICOT LIGHT
A little clarity. A little comfort.
Space to ask questions, find support, and take the next step.
ON NAVY
A little clarity. A little comfort.
Space to ask questions, find support, and take the next step.
White with creamy yellow, golden light and apricot. This is the current Dawn haze variation; coral pink is not used in the active treatment.
01B / Apricot wash
Keep · quiet single-color background
ON APRICOT LIGHT
A little clarity. A little comfort.
Space to ask questions, find support, and take the next step.
ON NAVY
A little clarity. A little comfort.
Space to ask questions, find support, and take the next step.
A single apricot glow fades into the base surface. A quieter comparison to Dawn haze, without the coral and gold color shifts.
02 / Corner sunline
Recommended signature · closing sections & callouts
ON APRICOT LIGHT
A little clarity. A little comfort.
Space to ask questions, find support, and take the next step.
ON NAVY
A little clarity. A little comfort.
Space to ask questions, find support, and take the next step.
Fine rays converge at the bottom-right corner on both desktop and mobile. The pattern stays anchored to the edge, leaving the center open for content.
03 / Luminous veil — archived alternative
Refined shape · original placement and overlap
ON APRICOT LIGHT
A little clarity. A little comfort.
Space to ask questions, find support, and take the next step.
ON NAVY
A little clarity. A little comfort.
Space to ask questions, find support, and take the next step.
Balanced, softly rounded forms keep the original placement, overlap and translucent colors. The uneven corners are softened without turning the shapes into separate circles.
04A / Rounded horizon
Keep in reserve · warm overlapping layers
ON APRICOT LIGHT
A little clarity. A little comfort.
Space to ask questions, find support, and take the next step.
ON NAVY
A little clarity. A little comfort.
Space to ask questions, find support, and take the next step.
The existing Rounded horizon, kept for comparison. Broad curves retain the warm apricot and gold of the earlier folded treatment.
04C / Tonal horizon
Keep in reserve · softly shaded layers
ON APRICOT LIGHT
A little clarity. A little comfort.
Space to ask questions, find support, and take the next step.
ON NAVY
A little clarity. A little comfort.
Space to ask questions, find support, and take the next step.
The same Rounded horizon shapes in a simpler palette: apricot tints on light, and lighter navy tones on dark. Dimension comes from shading rather than multiple colors.
Background direction
Use Sunlight / Dawn haze on a white base. For softer peach sections, use Apricot wash with its warm single-color fade. Keep yellow restrained. Use corner sunlines for occasional supporting cards, with a clear reading area. Luminous veil remains archived.
Keep most reading sections flat. Use one decorative motif per section and avoid stacking patterned sections. Keep the fine texture; choose movement later, only where it adds something.
REFERENCE COLLECTIONS / ORIGINAL CSS & VECTOR STUDIES
IMAGE MASKS / RETAINED COLLECTION
More shape. More character.
Default: 06 mixed-radius frame / balanced corners, including a landscape adaptation. Keep the expressive star and clover as optional accents; do not repeat them across informational grids. Photographs stay upright and purposeful.
STAR FAMILY
02 / Scalloped eight-point star
Shorter, rounder points make a fuller silhouette. More rhythmic than an oval, without the fine spikes of a sunburst.
ABSTRACT GEOMETRY
03 / Four-lobe clover
Four overlapping rounded lobes create a bold, simple shape. The indents are intentional; image cropping can be adjusted for each photograph.
ABSTRACT GEOMETRY
04 / Curved four-point star
A stronger silhouette with deep curved sides. This deliberately sacrifices more of the photograph to make the shape itself a feature.
YOUR CORNER-RADIUS ADJUSTMENT
06 / Mixed-radius frame
Larger curves at the top left and bottom right; smaller radii at the other two corners. A secondary comparison, not the main direction.
CALL-TO-ACTION SHAPES / SELECTED OPTION B
A shape for the next step.
Option B is retained for call-to-action moments. Informational cards will be designed separately. Keep the rotating background and changing fill, with the copy staying still.
B / Rounded geometry
Navy, apricot, and gold. Hover, keyboard-focus, or hold a state to preview the selected treatment.
B1 / ROUNDED STAR
A little guidance.
A clear next step, at your own pace.
B2 / CLOVER
Someone to listen.
A clear next step, at your own pace.
B3 / SCALLOPED STAR
Support that stays.
A clear next step, at your own pace.
Readability: navy text stays on apricot and gold; white text stays on navy and burnt orange. Navy on the solid apricot base measures 6.4:1 contrast. Small body text is slightly larger and stronger. Reduced-motion preferences remove the animated transition.
REFERENCE DIRECTION / ORIGINAL SVG STUDIES
SMALL ACCENTS / SELECTED COLLECTION
Familiar shapes, smaller details.
Three selected accents for occasional use: the small sparkle, scalloped star, and four-lobe clover. Each appears as a transparent cutout on light and navy, plus a colored accent. Original comparison numbers are retained.
RETAINED / FINE DETAIL
01 / Small sparkle
CUTOUT / LIGHT
CUTOUT / NAVY
Solid-color accent
The original fine four-point cutout. A quiet detail for a photo edge or a small accent beside a heading.
MATCHES IMAGE MASK 02
03 / Scalloped star
CUTOUT / LIGHT
CUTOUT / NAVY
Solid-color accent
The retained eight-point mask in miniature. Rounded points give this cutout a more substantial, recognizable silhouette.
MATCHES IMAGE MASK 03
04 / Four-lobe clover
CUTOUT / LIGHT
CUTOUT / NAVY
Solid-color accent
The same four rounded lobes as the larger image mask. A softer accent that belongs to the established shape family.
Keep these in reserve, rather than repeating them throughout the site. Use one small accent at a time, away from faces and key details. The cutout exposes the actual surface behind the image. Keep the treatment static; use option B for call-to-action interaction.
REFERENCE DIRECTION / WEALTHWELLS + SPACE PIXEL CREATIVE
CONTENT BLOCKS / APPROVED MOTION
A calm rhythm for the page.
Entrance animations are approved as the baseline. Compare the original information cards with three additional layouts below. Call-to-action imagery uses the selected shape library; text, photos, and links remain native Atomic elements.
Scroll to preview each block. Motion is optional; the content is always available.
01 / Photo & story
CARE THAT COMES TO YOU
Comfort in a place you know.
Home means something different to every family. Hospice care comes to you, bringing comfort and support wherever you call home.
Explore hospice care
Image mask 06 gives this call to action its mixed-radius shape. The existing copy fade and upward photo reveal stay the same.
02A / INFORMATION CARDS — ORIGINAL
01
Understanding hospice
Learn about hospice care, the support available, and where care can happen.
Learn about hospice02
Support for your family
Find a place to begin, ask questions, and understand what happens when you call.
Support for families03
Making a referral
A clear next step for healthcare professionals connecting a patient with care.
Refer a patientAll three cards fade in together with a 12px lift. Flat reading surfaces keep the emphasis on the information.
02B / WARM TEXTURED PANELS
Understanding hospice
Learn about hospice care, the support available, and where care can happen.
Learn about hospice Support for your family
Find a place to begin, ask questions, and understand what happens when you call.
Support for families
Making a referral
A clear next step for healthcare professionals connecting a patient with care.
Refer a patientUpdated warm panels reuse the current photo, team and family surface treatments: textured navy, white Sunlight haze and soft peach sunlines. Supplied library icons use the site palette; content remains native Atomic.
02C / PHOTO-LED CARDS
01
Understanding hospice
Learn about hospice care, the support available, and where care can happen.
Learn about hospice
02
Support for your family
Find a place to begin, ask questions, and understand what happens when you call.
Support for families
03
Making a referral
A clear next step for healthcare professionals connecting a patient with care.
Refer a patientPeople-focused imagery with selected masks 06, 03, and 02. A more visual option for resource or service entry points. Each image remains a replaceable Atomic widget.
02D / COMPACT INFORMATION LIST
01
Understanding hospice
Learn about hospice care, the support available, and where care can happen.
Learn about hospice02
Support for your family
Find a place to begin, ask questions, and understand what happens when you call.
Support for families03
Making a referral
A clear next step for healthcare professionals connecting a patient with care.
Refer a patientA quieter alternative for longer informational pages. Three open rows keep the heading, explanation, and next step together, with fine dividing lines.
03 / Photo call to action
A PLACE TO BEGIN
You don’t have to have all the answers.
Tell us what’s happening. Ask your questions. We’ll listen and help you understand the next step.
The heading, copy, and actions fade as one group. The shaped photograph settles from 96% to full size, with no spinning or looping.
04 / Simple invitation
A conversation is a place to start.
We’re here to listen and help you take the next step.
A compact alternative for the end of a reading section. Heading, supporting copy, and action appear together.
EDITOR REFERENCE
Classes & controls.
A quick reference for these blocks and the shaped call to action. The full project cheat sheet lives in docs/style-cheat-sheet.md.
Start with native controls
Edit the content, photo, destination, and global class in Atomic. Typography and panel padding, radius, and surface colors are native class settings. Duplicate a demo block, then remove its review toolbar and caption for page use.
Motion classes
lc-motion-group goes on the common parent. Use lc-motion-fade on a whole copy group or card, lc-motion-clip on an image wrapper, or lc-motion-shape on a decorative/photo wrapper. Keep motion classes on separate elements, not nested.
Timing & behavior
The default fade takes 0.65 seconds; the image reveal takes 0.85 seconds. All marked elements in a group start together. Set --lc-reveal-duration on the group to adjust timing (seconds, 0.2–1.2). No pinning, scrub, autoplay loops, or changes to reading order.
B1 hover colors
B1 uses lc-cta-tone-b1. In Elementor Variables edit lc-cta-b1-fill, lc-cta-b1-hover-fill, lc-cta-b1-ink, and lc-cta-b1-hover-ink. Current pair: navy / white → burnt orange / warm reading-surface text. B2 and B3 retain their previous colors.
Reusable block classes
lc-block-panel controls large panel padding and radius; lc-info-card controls informational cards; lc-block-band controls the small invitation. lc-block-title and lc-block-card-title control heading sizes. Use the existing lcsg-b-body for body copy.
Motion preferences & rollout
Reduced-motion visitors see complete, static blocks. Keyboard focus reveals content immediately; without JavaScript content stays visible. Shared button, surface and motion assets now load on public pages as well as the guide.
Image masks & background grain
Use a selected image mask for call-to-action imagery. Mask 06: lc-block-photo--corners, with lc-block-photo-frame--mask on its wrapper. Also available: lc-block-photo--clover and lc-block-photo--scallop. Add lc-surface-grain for the approved CTA texture; add lc-surface-grain--quiet for a lighter reading surface. Tune --lc-grain-opacity per class. The animation system is approved; no new motion is introduced by the card variants.
VERSION 2 · CONTENT PAGES
Reusable page patterns.
White information card.
Use lc-content-card for clear, visible information. Preserve the navy heading, light border and restrained shadow.
See Paying for HospiceWarm companion card.
Add lc-content-peach for the softer companion surface. Keep photographic use deliberate and unique.
See family resources
Native Atomic form.
The Contact page uses e-form, native field widgets, labeled controls and success/error states. Form classes are grouped under lc-content-form.
See the contact formPage layouts use lc-content-grid-two, lc-content-grid-three, lc-content-stack and the approved lc-v2-container. White, soft peach and navy surfaces retain the established grain and gentle lighting. Use lc-content-photo with the smaller alternating corners; lc-content-focus-upper protects faces in portrait-source crops.
Use the photography register before assigning any image. Choose a suitable unused image, or use lc-stock-image-placeholder with a specific brief. Shared referral styling is global; each page owns its native referral photo.
Care & support: build from Home.
Use the homepage’s white resource cards, warm apricot photography and navy grain surfaces. Keep short pages compact: no section navigation when there are only one or two content sections. Use consistent question backgrounds and readable columns rather than narrow, tall process cards.
lc-care-editorial-grid pairs photography or introductory copy with readable content. lc-care-step-row uses light numbers and dividers. lc-care-resource-grid reuses lc-support-card from Home. lc-care-feature with lc-surface--navy-glow is the expressive reassurance treatment. Native class controls own structure; care-support.css scopes the finishing styles.
ABOUT PAGE · HOME-BASED COMPOSITION
A fuller expression of the same system.
About uses the same apricot photo opening, navy glow, peach corner sunline, white reading surfaces and sunlight haze established on Home and in this guide. Keep backgrounds distinct by section; typography, button treatments, grain and corner sizes stay consistent.
Native layout classes: lc-about-mission-grid, lc-about-mosaic, lc-about-panel, lc-about-values, lc-about-value, lc-about-route and lc-about-photo-frame. Surface modifiers: lc-about-navy, lc-about-sunline and lc-about-haze. There are no new palette colors or speculative staff profiles.
Care Team and Careers are full-card links with visible keyboard focus, warm hover surfaces and the shared gradient underline. Values stay readable without interaction. About’s own motion controller staggers whole blocks and leaves everything visible for reduced motion, missing JavaScript, keyboard focus and restored pages.