Brighter futures.
Up to 66% lower odds of mental health, violence, and substance abuse problems in adulthood, for teens who felt connection in school.
Steiner et al., 2019. Pediatrics. n = 14,800.
Roots Design System
Component Library
Internal reference. Every Component on the live site is defined here with all variants visible. Edit one master, every instance updates.
Component — Global
nav-header
Site-wide header: compliance crisis bar + sticky nav with brandmark, 4 dropdown menus, language toggle, Apply CTA, mobile hamburger. Appears on every page. Dropdown open/close and mobile menu toggle must be wired as Webflow Interactions (prototype JS does not transfer — project rule). Submenu panels are built but hidden by default; an Interaction reveals them on hover/click.
Component — Global
nav-footer
Site-wide footer. Brand block on the left, 4 link columns on the right. Appears on every page. No Properties — content updates here propagate to every page automatically. No variants planned.
Component — Global / Compliance
legal-footer
Compliance band below nav-footer. Title IX, accessibility, non-discrimination, privacy, GRAMA. Appears on every page. Properties: copyright-year (text), lea-number (text). No variants.
Component — Rebuilt v3
hero-section
Editorial two-column page hero. v3: caption-label and caption-text are now separate Text Block divs (not inline spans), so each can be selected and bound to its own Property. Real Image element with separate alt-text Property. Stylable gradient overlay div.
Component — Rebuilt to prototype
hero-section
Editorial two-column page hero matching prototype exactly: issue-line (№ + bar + location/year), display H1 with terracotta italic em, two-paragraph Fraunces lede with We Love You italic, info dl (Grades/Founded/Tuition) replacing CTAs, image with overlay and caption (label + text).
Nº 01
A school where belonging is the first lesson.
Roots is a tuition-free public charter high school with five acres of working farm and two hundred students.
One philosophy holds the whole place together. We call it 243. It means We Love You.
.jpg)
Photograph Nº 01
Morning chores. Violet and Pixie, our rescue donkeys, are loud but well-groomed.
Component — Global / Reused
page-hero
Single-column inner-page hero, used on every page except Home (About, Parents, Tour, Donate, Contact, Staff, Farm, Apply, Notices). Eyebrow + H1 + lede. Heading + lede should be converted to Rich Text in Designer for per-page em accents (recipe). Props: eyebrow, heading (Rich Text), lede (Rich Text).
Component — Content blocks
mission-section
Centered editorial mission block. Eyebrow + H2 (with italic em accent) + Fraunces italic body + CTA. Used on Home and About per discipline rule (2+ instances).
Component — Content blocks
why-section
Charcoal-background editorial section: eyebrow + H2 + 3-column grid of evidence-tile instances. Used on Home (Why It Matters) and About.
Component — Content blocks
evidence-tile
Single evidence tile: gold SVG icon + gold Fraunces stat + claim + italic source. Designed for use inside why-section on charcoal background. Icon is an HTML Embed (paste SVG per instance). Used 3x in why-section.
Component — Content blocks
character-section
Meet The Students: two-column photo (with overlay caption) + text (eyebrow, H2 with em accent, two body paragraphs, Fraunces italic pull quote). Used on Home and About.
Component — Content blocks
two-doors-section
Section wrapper holding 2 pathway-card Component instances side by side. Heading area + grid. Inner pathway-card instances will be inserted into the Component definition next.
Component — Conversion
pathway-card
Single “path” card. Eyebrow (audience label) + H3 (with em accent) + body + dual CTAs. Used 2x inside two-doors-section. Wrapper holds layout only; typography inherits from base tag styles.
For Families
→Apply for 2026–27.
Tuition-free. Public. Open enrollment with a lottery if we go past capacity. Walk the steps in English or Spanish, then book a tour.
Component
quote-block
Pull quote with attribution and optional role. Gold left rule. Used in editorial sections, About, donor stories. Properties: text (rich), attribution, role. No variants yet.
I give because these kids show up. Most of them have real reasons not to. That's worth funding.
Component
button
Single styled button used in CTAs, banners, and inline links across the site. Three variants.
Component
cta-banner
Full-width call-to-action band. Heading + body + button. Used at the bottom of landing pages to drive donations, applications, or tour requests. Three color variants.
Primary (Donate)
Enroll (navy)
Tour (sage)
Component — Rebuilt v2 / Conversion / Homepage
ways-to-give-carousel
Homepage Ways To Give rail. v2 rebuild: inner cards are now give-card Component instances (sealed sub-components), so the auto-suggested Properties panel shows only the 3 outer fields (eyebrow, heading, sub) instead of 19. During page assembly, the rail will be CMS-bound to a Giving Options collection or filled with explicit give-card instances.
Ways To Give
More than one way to plant Roots.
Every gift feeds the farm, stocks the pantry, sends a kid to camp. Pick the path that fits.
Component — Conversion
give-card
Single giving-option card. Image + gradient + ribbon (optional) + kicker + title (with gold italic em accent) + CTA arrow. Used in the homepage ways-to-give-carousel. Aspect ratio 3:4. Title em accents are gold (not terracotta) to read on dark image overlays. Property spec in the updated spec doc.
.jpg)
Monthly · $5–$243
Won’t you be our neighbor?
Start giving →
Component — Conversion
tour-request-form
Visual structure for the tour request form. Used on multiple pages. The native Webflow Form element + submission handling is wired in the dedicated forms phase (HTML form logic does not transfer — project rule). Wrapper = layout; labels use text-style-eyebrow; inputs styled by a shared form-input class.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Component — Conversion
enrollment-cta
Image + heading + body + CTA. Audience variants via combo class set up as Webflow Variants: is-new-family (default), is-current-family, is-transfer. Wrapper = layout; heading uses base H2 tag.
New Families
Tuition-free. Open enrollment. Always.
Roots is a public charter high school. No tuition, ever. Applications for 2026–27 are open now.
Start an applicationComponent — Compliance / Content blocks
trust-section
“Open by default” section: heading block + 3 trust-item Component instances stacked. Used on Home and potentially About. Inner trust-item instances inserted into Component definition next.
Component — Current Families Priority
resource-grid
Flex/grid wrapper that holds resource-tile instances. Used as the homepage quick-access strip directly below the global header. Wraps to 2 columns on tablet, single column on mobile. No Properties — the contained tile instances carry the content. No variants.
Component — Current Families Priority
resource-tile
Single quick-access link for current families: ASPIRE, CANVAS, Calendar, Bell Schedule. Reduces clicks between landing page and academic resources — a primary KPI. Used in the homepage quick-access strip and the parents dashboard. Properties: icon, label, destination, is-external (switch — shows the ↗ arrow). Variants: Default, Compact (smaller padding for sidebar use).
Component — Compliance
trust-item
Single accountability item: numeric index + name + CTA arrow. Used 3x in trust-section. Wrapper = layout only; typography inherits from base tag styles.
Component — CMS
staff-card
CMS-bound to Staff collection. Photo + role label + name + contact. Bound to fields at page-assembly time inside a Collection List — minimal Property setup. Wrapper holds layout only; name uses base H3 tag, role uses text-style-eyebrow utility.
Component — CMS
news-card
CMS-bound to News collection. Featured image + category label + date + title + summary + read link. Bound at page-assembly time. Wrapper = layout only.
Component — CMS
program-card
CMS-bound to Programs collection. Image + title + summary + link. Bound at page-assembly time. Wrapper = layout only.
Component — CMS
event-card
CMS-bound to Events collection. Two-column: date/meta block + body (title, description, detail). Featured variant adds terracotta left border + bone-warm background. Bound at page-assembly time.
Spring Harvest Dinner
Long tables on the farm. Food the students grew. Bring the whole family.
RSVP by May 14 →Component — Reused
prose-section
Generic editorial text block reused across inner pages (About method/farm/who-for sections, etc.). Eyebrow + H2 + body. Heading converts to Rich Text in Designer for em accents. Props: eyebrow, heading (Rich Text), body (Rich Text).
Title IX
If a fee is a barrier, ask. Roots grants fee waivers without asking for proof of hardship beyond the standard form.
School Counselor
Alisa Muhlestein
Roots Charter High School · 2250 South 1300 West, West Valley City, UT 84119 · (385) 715-2591
counselor@rootshigh.org20,000
Eggs the farm gathers each year
988 Lifeline · 24/7
Call or text 988
The Suicide and Crisis Lifeline. Free. Confidential. Trained counselors. English and Spanish.
Tap to call 988 →
English
If you or someone you know is struggling, call or text 988. For confidential 24/7 crisis support in Utah, contact SafeUT. If someone is in immediate danger, call 911.
Español
Si tú o alguien que conoces está pasando por un momento difícil, llama o envía un mensaje al 988. Para apoyo confidencial 24/7 en Utah, comunícate con SafeUT. Si alguien está en peligro inmediato, llama al 911.
Love first. Belong always.
243 · We Love You
Long-term · Weekend animal care
Weekend animal care.
Animals don't take weekends off. Trained volunteers cover Saturday and Sunday shifts.
Right fit if: you can commit to a recurring weekend shift, you show up when you say you will, and you're comfortable around large animals.
Title IX Nondiscrimination.
2025–26 key dates
This is some text inside of a div block.
This is some text inside of a div block.
Component - form
Form
Form components to make it easier to construct forms.
Weekend animal care
Long-term volunteer interest form. Staff reach out within a week to confirm fit and schedule training.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Group volunteer day
Tell us about your team. Staff reach out within a week to talk through the day and the gift that pairs with it.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.