DESIGN SYSTEM
Components Guide
Patterns beyond the homepage, built as native Beaver Builder modules and paired with the .fot- classes in tops-styles.css.
01 — HERO
Hero
Four weights. The split hero is the homepage treatment and stays reserved for the front page — section landing pages use the stat rail, interior pages the compact variant, and campaigns the centered navy band.
A · SPLIT — HOMEPAGE ONLY
Together, we make more TOPS possible.
Friends of TOPS brings families together to support the programs, experiences, and resources that help TOPS students learn, explore, and belong.
Empowering students. Strengthening community. Creating opportunity.
This is the live homepage hero, copied in for reference. Reserved for the front page — don't reuse it on interior pages.
B · STAT RAIL + BRAND GRAPHIC — SECTION LANDING PAGES
ABOUT
A diverse K–8 community
One sentence that states plainly what the page is about — no more.
K–8
Grades served
DHH
District's primary K–8 program
501(c)(3)
Nonprofit
Use where a section landing page has no photography ready. Stats must be verifiable facts, never invented counts.
C · COMPACT — INTERIOR PAGES
GET INVOLVED
Volunteer with us
Every classroom, event, and field trip runs on parent hours.
Single full-width row, one column. Heading + text only — no photo, no buttons.
D · CENTERED ON NAVY — CAMPAIGNS
SPRING CAMPAIGN
Help us reach $50,000
Same row, background Navy, text centered. Eyebrow switches to Sky for contrast; button inverts to white.
02 — CALLS TO ACTION
Calls to action
One CTA band per page, placed above the footer. The navy band is the default ask; use the cream band when the request is time-sensitive but not financial, and the inline strip inside long article pages.
EVERY GIFT COUNTS
Fund one more field trip.
$40 sends a student on every trip this year. Recurring gifts help us plan ahead.
Ways to get involved
Two hours a month keeps the library open, the garden planted, and the auction running.
INLINE STRIP
Enrolling a new family this fall?
The only place a left accent border is permitted — it marks an interruption in running text, never a card.
03 — TABS
Tabs
For parallel content of similar length — grade bands, volunteer areas, giving levels. Four tabs maximum; past that the labels wrap and the pattern stops reading as a row. Never nest tabs inside tabs.
Help make each classroom run smoothly. Teachers post a sign-up at the start of each unit; commitments are as small as one hour.
- Copy and prep classroom materials
- Read with small groups or listen to reading logs
- Chaperone field trips when a teacher requests extra hands
04 — ACCORDIONS
Accordions
For questions and reference content a reader scans rather than reads — FAQs, policies, handbook sections. First item opens by default so the pattern is legible on arrival. Multiple items may be open at once; do not force single-open.
Create an account on our volunteer portal and browse open roles by time commitment. Most sign-ups take less than five minutes.
ANATOMY
Spacing
12px between items
Border
1px solid #E7EEF8
Radius
18px
Open background
#FBFCFE
Icon
fa-plus / fa-minus, Blue, right-aligned
Content width
460px max
Content
Plain HTML only — p, ul/li, h5, strong, a. Divs, classes, and inline styles are stripped on save.
05 — SECTION NAV
Section nav
A second sticky bar under the site header, for long pages with four or more anchored sections. Four to six links; if a page needs more, it needs to be two pages.
Overview
Open Roles
How to Sign Up
FAQ
Header 81px + nav 53px = 134px of sticky chrome. Anchored sections need scroll-margin-top: 150px or their headings land behind the bars.
06 — EDITORIAL PANELS
Editorial panels
Two ways to give a block of prose weight without turning it into a card grid. Use the cream statement panel once per page at most — it is the loudest quiet thing in the system.
STATEMENT PANEL
A mission, a value, or a promise — set in the serif at 32px regular, never bold, so it reads as voice rather than as a heading.
Supporting detail splits into two columns beneath a Cream Rule divider. Each column holds one paragraph — if you need three, the content belongs in its own section.
The eyebrow switches to Bronze here. Blue on cream is the one eyebrow pairing the system does not use.
01
Every family belongs
TOPS serves Deaf, hard-of-hearing, and hearing students side by side, with ASL woven into daily school life.
02
Parents make it possible
Every program on this page exists because a parent showed up first — to organize, to donate, or to volunteer an afternoon.
07 — PROCESS FLOW
Process flow
For explaining how two bodies or two stages relate. Two stages only, left to right, ending on an outcome.
From idea to action
How decisions move through Friends of TOPS
STAGE ONE
Who decides
Site Council
Principal
PTA Board
Staff Input
STAGE TWO
Who acts
Once the Site Council approves a request, the PTA treasurer releases funds and a parent lead coordinates the rollout.
The program launches within two weeks.
08 — DATA LISTS
Data lists
Rosters, committees, and document links. Both are two-part rows in a bordered card with a Mist header — not HTML tables, which fight the responsive grid.
Roster card
Chair
Maria Chen
Treasurer
James Okafor
Volunteer Coordinator
Open
Secretary
Priya Patel
Document rows
New Family Handbook
PDF · Updated August 2026
Volunteer Handbook
PDF · Updated August 2026
Committee Calendar
Google Sheet
09 — PLACEHOLDERS
Placeholders
Content the client still owes is designed as a visibly empty shape, never as plausible-looking filler. A wrong meeting date on a school site does more damage than an obvious blank.
PHOTO — IMAGE SLOT
Prototype only. In WordPress this is a Photo module pointed at a media-library placeholder named for the shot.
TEXT — BRACKETED FILL-IN
[ Meeting date ]
[ Time ] · [ Location and Zoom link ]
Square brackets, italic, one tint down from the live value, with a dashed rule on headline-scale fills.
10 — EVENTS
Events
Upcoming dates for the school and PTA community, grouped by day so a full evening of sessions still reads as one row in the list.
SEP
2
First Day of School!
SEP
22
Dine Out at Mioposto Pizzeria Eastlake
6:00 – 7:00 PM
2501 Eastlake Ave E, Seattle, WA 98102
SEP
22
First Community Site Council Meeting
7:00 – 8:30 PM
All TOPS families are welcome. ASL interpretation provided.
Each event gets its own date badge, even when two events share a day — repeating the date removes any doubt about which entry belongs where.
11 — TAG PILLS
Tag Pills
Small rounded chips for tags, categories, or commitment types. A dashed-border variant signals content that's coming soon. Built as Box-wrapped text — plain rich-text loses its padding and background on save, so pills always need a wrapping Box.
Advocacy
Fundraising
More coming soon
ANATOMY
Structure
Box wrapping one rich-text. Never a bare rich-text — padding/background don't survive on that alone.
Padding / radius
7px 14px, fully rounded (radius 999)
Filled variant
bg #EEF4FD, text #0B2B5B, 13.5px/600
Placeholder variant
border 1px dashed #C9D9EE, text #8FA6C6 italic, no fill
12 — DOCLIST / LINK ROWS
Doclist / Link Rows
Icon-circle + title/meta + trailing arrow, stacked with hairline dividers. Used for resource link lists (Community's Learn & Participate, Funding's resource links). The row itself is a Box with its own link field — no separate anchor tag needed.
Resource title
Short meta description
Second resource
Another short meta line
ANATOMY
Row
Box, flex row, gap 14– 18px, link set on the Box itself
Icon circle
Icon module, size 16, bg_color wash (e.g. #EEF4FD), color matches
Title / meta
Box(flex:grow 1, column, gap 3) — title 16px/600, meta 14px muted
Trailing icon
fa-arrow-up-right-from-square, 12px, #8FA6C6
Divider
border-bottom 1px #F1F5FB on every row except the last
13 — STATS / FACTS CARD
Stats / Facts Card
Border-left accent stat items — a big serif value over a small muted label. Used in the Funding hero's facts card and dark panels like Funding's Employer Matching stat box (there, white/light-blue on navy instead).
2026–27
Label describing the stat
25–30%
Label describing the stat
501(c)(3)
Label describing the stat
ANATOMY
Item
Box, border-left 2px solid #C9D9EE, padding-left 18px
Value
Source Serif 4, 30px/700, line-height 1.1, #0B2B5B
Label
13.5px, line-height 1.45, #5B6B85
Stack gap
26px between items, in a column-flex card
14 — DECORATIVE CIRCLE GRAPHIC
Decorative Circle Graphic
Hand-built concentric-circle art for a hero that needs a decorative graphic but has no photo (Get Involved). Pure native Box modules — no image assets except the centered logo. Every layer is absolutely positioned inside one relatively-positioned 400×400 container.
ANATOMY
Container
Box, 400×400px, bb_css_code: position:relative; — width/height stay as native fields, never in bb_css_code
Circles
5 layered Box modules, each absolute + centered via top/left math. Radius = half the box's own width/height (native px field, not %) for a true circle.
Sizes
400 / 322 (dots + ring) / 234 (cream) / 152 (white) — each centered, so offset = (400 − size) ÷ 2
Dot pattern
bb_css_code background: radial-gradient(#C6D7EE 1.5px, transparent 1.6px) 0 0 / 20px 20px — no native field for a repeating pattern
Logo
Photo module, 88px wide, the ONE in-flow child — the parent's place_content centers it since every circle around it is position:absolute
Accent dots
3 small circles, one per brand color (blue/gold/green), placed by eye at the ring's edge