Roots Design System
Internal reference. Every Component on the live site is defined here with all variants visible. Edit one master, every instance updates.
Component — Global
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
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
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
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
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).
Roots es una escuela secundaria pública chárter gratuita con cinco acres de granja en funcionamiento y doscientos estudiantes.
Una filosofía mantiene unido todo el lugar. La llamamos 243. Significa Te queremos.
.jpg)
Component — Global / Reused
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
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
Charcoal-background editorial section: eyebrow + H2 + 3-column grid of evidence-tile instances. Used on Home (Why It Matters) and About.
Component — Content blocks
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
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
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
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.
Para familias
→Sin costo de matrícula. Público. Inscripción abierta con sorteo si superamos nuestra capacidad. Sigue los pasos en inglés o español y luego reserva una visita.
Component
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
Single styled button used in CTAs, banners, and inline links across the site. Three variants.
Component
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
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.
Formas de donar
Cada donación alimenta la granja, llena la despensa y envía a un niño al campamento. Elige la opción que prefieras.
Component — Conversion
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
Component — Conversion
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.
Component — Conversion
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
Roots is a public charter high school. No tuition, ever. Applications for 2026–27 are open now.
Start an applicationComponent — Compliance / Content blocks
“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
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
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
Single accountability item: numeric index + name + CTA arrow. Used 3x in trust-section. Wrapper = layout only; typography inherits from base tag styles.
Component — CMS
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
CMS-bound to News collection. Featured image + category label + date + title + summary + read link. Bound at page-assembly time. Wrapper = layout only.
Component — CMS
CMS-bound to Programs collection. Image + title + summary + link. Bound at page-assembly time. Wrapper = layout only.
Component — CMS
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.
Long tables on the farm. Food the students grew. Bring the whole family.
RSVP by May 14 →Component — Reused
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).
If a fee is a barrier, ask. Roots grants fee waivers without asking for proof of hardship beyond the standard form.
Roots Charter High School · 2250 South 1300 West, West Valley City, UT 84119 · (385) 715-2591
counselor@rootshigh.orgThe Suicide and Crisis Lifeline. Free. Confidential. Trained counselors. English and Spanish.
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.
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.
Amar primero. Pertenecer siempre.
243 · Te queremos
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.
Component - form
Form components to make it easier to construct forms.
Formulario de interés para voluntariado a largo plazo. El personal se pondrá en contacto en el plazo de una semana para confirmar la idoneidad y programar la formación.
Cuéntanos sobre tu equipo. Nuestro personal se pondrá en contacto en el plazo de una semana para hablar sobre el día y el regalo que mejor lo complementa.
