Literacy Stations — Brand Reference

Brand Identity & Design System · v2.0

Literacy Stations

literacystations.com  ·  Elementor + WooCommerce + WordPress  ·  March 2026

1

The Rach Palette

Seven vivid brand colors used for product icons, category tags, station labels, and UI accents. Each maps to a specific content category.

Writing
Rach Red
#CF3A60
CTAs, sale badges, writing centers
Fluency
Rach Orange
#FF914D
Fluency stations, oral reading
Seasonal
Rach Yellow
#F9BF1A
Banners, stars, seasonal packs
Reading
Rach Green
#9DCB6C
Reading comprehension, success
Phonics
Rach Lt Blue
#66A7DE
Phonics, sale prices, SOR
Bundles
Rach Dk Blue
#467FF7
Nav, buttons, year-long bundles
Membership
Rach Purple
#AF5BD6
Library Card, premium content
2

UI System Colors

Neutrals and functional colors for layouts, text, backgrounds, and states. Keep the Rach Palette prominent by pairing it against these clean bases.

Dark Navy
#1A1A2E
Headings, dark backgrounds
Slate Blue
#324A6D
Nav buttons, subheadings
Page BG
#F3F5F8
Site background, alt sections
Light BG
#F9FAFD
Card interiors, inputs
White
#FFFFFF
Cards, panels, overlays
Border Light
#E0E4EA
Card borders, dividers
Muted Text
#6B7280
Captions, meta, placeholders
Gold Star
#F99703
Star ratings, featured badges
Banner Yellow
#FFBF19
Announcement bar background
Red Hover
#b52e51
CTA button hover state
Body Text
#000000
Primary paragraph text
Accent Blue
#47629C
Links, info states
3

Typography — Poppins Only

Display / H1
800 · clamp(2–3.5rem)
Literacy Centers That Run Themselves
Section H2
700 · 1.75–2rem
Featured Bundles
Card Title H3
700 · 1.1–1.3rem
1st Grade Word Work Station — 6-Week Pack
Body / Lead
400 · 1–1.2rem · lh 1.65
Built for K–2 teachers who want structured, science-of-reading aligned stations that are ready to print and use Monday morning.
Eyebrow
700 · 0.75rem · uppercase · ls .08em
Writing Centers
Button
700 · 0.875rem
Get the Free Starter Kit
Meta / Caption
400 · 0.8–0.85rem
PDF download · 47 pages · Grades K–2
4

CSS Design Tokens

All values live in css/variables.css. Never hardcode hex values in Elementor — always reference a token.

Color Tokens
TokenValue
--ls-rach-red#CF3A60
--ls-rach-orange#FF914D
--ls-rach-yellow#F9BF1A
--ls-rach-green#9DCB6C
--ls-rach-ltblue#66A7DE
--ls-rach-dkblue#467FF7
--ls-rach-purple#AF5BD6
--ls-btn-blue#324A6D
--ls-btn-red#CF3A60
--ls-bg-page#F3F5F8
--ls-bg-light#F9FAFD
--ls-border#A4A4A4
--ls-border-light#E0E4EA
--ls-text-body#000000
--ls-text-muted#6B7280
--ls-gold-star#F99703
--ls-banner-yel#FFBF19
Shape & Spacing Tokens
TokenValue
--ls-radius-card10px
--ls-radius-btn8px
--ls-radius-pill999px
--ls-shadow-card0 2px 12px rgba(0,0,0,.07)
--ls-shadow-card-hov0 6px 24px rgba(0,0,0,.13)
--ls-font'Poppins', sans-serif
Elementor CSS Classes
ClassPurpose
.ls-shell1200px max-width container
.ls-heroGradient hero panel
.ls-panelWhite card with shadow
.ls-stackVertical rhythm spacing
.ls-cta-rowFlex row for 2-button CTAs
.ls-eyebrow12px / uppercase / slate
.ls-displayFluid hero headline
.ls-leadFluid hero subhead
.ls-btn-primaryRach Red pill button
.ls-btn-secondaryWhite outline pill button
.ls-metric-grid3-col trust stats grid
5

Buttons

Sizes
Variants
With Emoji / Icon
WooCommerce Add to Cart
6

UI Components

Product Card (WooCommerce Loop)
📝
Sale
✍️
Writing Centers
1st Grade Writing Station — Fall Pack
★★★★★ (42)
$7.00 $9.00
📖
📗
Reading
Word Work Comprehension Stations
★★★★★ (28)
$12.00
Trust Metrics
10k+
Teachers
200+
Resources
4.9★
Avg Rating
Product Badges
SOR Aligned No-Prep Sale Print & Go Members Only Editable New ⭐ Featured
Grade Level Tags
Kindergarten 1st Grade 2nd Grade
Announcement Bar
🎉 New Spring Centers just dropped!  ·  Shop Now
Hero Section Preview
K–2 Literacy Resources
Literacy Centers That
Run Themselves
Ready-to-use, SOR-aligned literacy stations for K–2 teachers. Print, prep in minutes, and watch your students thrive.
10k+
Teachers
200+
Resources
4.9★
Rating
7

Category Color Map

Each category has a fixed Rach Palette color. Apply consistently across icons, archive headers, product badges, nav labels, and social graphics.

✍️
Writing Centers
--ls-rach-red
#CF3A60
Writing centers, writer's workshop, composition
🗣️
Fluency
--ls-rach-orange
#FF914D
Fluency stations, reader's theater, oral reading
🍂
Seasonal
--ls-rach-yellow
#F9BF1A
Holiday packs, back-to-school, seasonal themes
📖
Reading
--ls-rach-green
#9DCB6C
Comprehension, word work, foundational reading
🔤
Phonics / SOR
--ls-rach-ltblue
#66A7DE
Phonics, decoding, science-of-reading resources
📦
Bundles
--ls-rach-dkblue
#467FF7
Year-long bundles, multi-unit packs, grade-level sets
⭐
Library Card
--ls-rach-purple
#AF5BD6
Membership content, premium resources, Library Card
➕
New Category
Request color update
Add new categories by updating variables.css and this reference page.
8

Voice & Copy Patterns

Copy Patterns — Before & After
Element
❌ Don't Write This
✅ Write This Instead
Hero H1
Quality Literacy Resources for Teachers
Literacy Centers That Run Themselves
Hero Sub
We offer a variety of tools that may help K–2 teachers.
SOR-aligned stations built for K–2 teachers. Print Monday, use Tuesday.
CTA Button
Click Here / Learn More / Submit
Get the Free Starter Kit / Explore Bundles
Product Title
Writing Centers Pack
1st Grade Writing Station — 6-Week Fall Pack
Badge Copy
Common Core / Standards-Aligned / Educational
SOR Aligned · No-Prep · Print & Go · K–2
Email Subject
Newsletter — March Update
Your free literacy kit is inside 🎒
9

Do's & Don'ts

✅  DO
  • 🎨Use Rach Palette colors for icons, badges & category labels
  • 🔤Use Poppins for all on-screen text — nothing else
  • 🎯Keep CTAs to one primary action per section
  • 💻Apply CSS class tokens; never hardcode hex in Elementor
  • 📸Use real classroom photos; generic stock looks cheap
  • 🎨Keep each Rach color tied to its category — they're not interchangeable
  • ✍️Write in active voice with specific outcomes and numbers
  • 📱Test every layout at 390px, 768px, and 1280px
  • 🔢Use numbers in copy: "47 pages," "6-week pack," "K–2"
  • ⭐Show social proof near every purchase CTA
❌  DON'T
  • 🚫Introduce new brand colors without updating the CSS token file
  • 🚫Use a second typeface alongside Poppins
  • 🚫Stack multiple primary CTAs in the same section
  • 🚫Use inline hex values in Elementor's color picker fields
  • 🚫Use generic stock classroom photos
  • 🚫Apply Rach colors randomly — each has a fixed category assignment
  • 🚫Use passive or vague copy ("tools that may help" → "tools that work")
  • 🚫Skip mobile QA before deploying any redesigned section
  • 🚫Use "Click Here" or "Learn More" as CTA text
  • 🚫Mix button shapes — always use the pill (999px) for primary CTAs
10

Responsive Breakpoints

390px
iPhone 15 / small phone — most critical mobile target
430px
iPhone 15 Plus / large phone
768px
iPad portrait — nav collapses, sidebar becomes drawer
1024px
iPad landscape / small laptop
1280px
Standard desktop — primary design target
Elementor Responsive Notes
Elementor Pro uses three breakpoints by default: Desktop (≥1025px), Tablet (768–1024px), Mobile (<768px). Add a custom 390px breakpoint in Elementor > Site Settings > Breakpoints to catch small-phone layout issues. Product card grid: 4-col desktop → 3-col tablet → 2-col mobile. Never go to 1-col product grid on mobile — it makes the page feel empty and hurts conversions.
11

CSS Quick Reference

Copy this into the Elementor Kit > Site Settings > Custom CSS field to ensure all WooCommerce elements inherit brand tokens globally.

/* ── Elementor Kit Global CSS — Literacy Stations ── */

/* Base */
body {
  font-family: var(--ls-font);
  background: var(--ls-bg-page);
  color: var(--ls-text-body);
}

/* Headings */
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3 {
  letter-spacing: -0.01em;
}

/* WooCommerce Buttons */
a.button, button.button,
.woocommerce button[type="submit"] {
  background: var(--ls-rach-red) !important;
  color: #fff !important;
  border-radius: var(--ls-radius-pill) !important;
  font-family: var(--ls-font) !important;
  font-weight: 700 !important;
}

/* Prices */
.woocommerce-Price-amount { color: var(--ls-rach-ltblue); font-weight: 700; }
del .woocommerce-Price-amount { color: var(--ls-text-muted); font-weight: 400; }

/* Sale badge */
.onsale {
  background: var(--ls-rach-red);
  border-radius: var(--ls-radius-pill);
  padding: 4px 12px;
  font-family: var(--ls-font);
  font-weight: 700;
}

/* Stars */
.star-rating span::before { color: var(--ls-gold-star); }

/* Tab active underline */
.woocommerce-tabs ul.tabs li.active a {
  border-bottom: 3px solid var(--ls-rach-red);
}