PBEF Design System & Component Library
The permanent visual, structural, technical, accessibility, content, and publishing standard for the Precision Business Education Foundation website.
1. Purpose and Governance
This design system is the single source of truth for every page, calculator, guide, tool, template, learning center, trade page, and future application built for the Foundation.
One Visual Language
All pages use the same colors, typography, spacing, cards, buttons, forms, and section patterns.
Reusable Components
New pages are assembled from tested components rather than redesigned from scratch.
Mandatory Standards
No page is published until it passes SEO, accessibility, mobile, linking, and content checks.
2. Design Foundations
The PBEF design language is professional, practical, accessible, educational, trustworthy, and action oriented.
Visual Direction
White backgrounds, navy authority sections, green calls to action, light-gray content areas, soft shadows, rounded cards, generous spacing, and high-contrast typography.
Content Direction
Clear explanations, practical examples, direct next steps, calculators, related learning, business journey guidance, and mission-connected calls to action.
User Experience
Visitors should always know where they are, what they should learn next, which tool to use, and what action to take.
Accessibility
Every interface must be keyboard accessible, readable on mobile, semantically structured, labeled correctly, and understandable without color alone.
3. Color System
Navy communicates trust and authority. Green communicates progress, education, action, and positive business movement.
Color Usage Rules
| Color | Use | Do Not Use |
|---|---|---|
| Navy | Heroes, headers, authority sections, dark CTAs, headings | Large body-copy areas |
| Green | Primary buttons, positive status, tags, progress, links | Long paragraphs or decorative overuse |
| Light Gray | Alternate sections, form areas, card backgrounds | Low-contrast text combinations |
| Gold | Warnings and caution states | Primary calls to action |
| Red | Errors, critical risks, invalid inputs | General emphasis |
4. Typography
Typography must remain highly readable, professional, mobile responsive, and appropriate for educational content.
Build a Stronger Business
Business Growth Calculator
Calculate Sustainable Growth
Review Your Capacity
Practical tools and education help business owners make stronger financial and operating decisions.
Heading Rules
- Use one H1 per page.
- H2 headings define major page sections.
- H3 headings define supporting topics within an H2 section.
- Do not skip heading levels for visual appearance.
- Headings should describe content, not merely decorate the page.
- Body text should normally remain at 16 pixels or larger.
5. Spacing, Radius, and Shadows
Spacing should create clear visual groups without producing dense or cramped educational pages.
| Token | Value | Typical Use |
|---|---|---|
--pbef-space-2 |
8px | Small inline gaps |
--pbef-space-4 |
16px | Field spacing and card details |
--pbef-space-6 |
24px | Card padding |
--pbef-space-10 |
40px | CTA padding and large groups |
--pbef-space-16 |
64px | Standard desktop section spacing |
--pbef-radius-lg |
16px | Cards and content panels |
--pbef-radius-xl |
24px | Heroes, calculators, and major CTAs |
6. Layout Standards
Layouts must support scanning, clear hierarchy, mobile responsiveness, and predictable user journeys.
Maximum Width
Use a maximum page width of approximately 1180 pixels with 16 pixels or more of side spacing.
Long-Form Content
Keep educational paragraphs near 720–800 pixels whenever possible for readability.
Mobile First
Multi-column layouts collapse to one column, buttons expand naturally, and sticky panels become static.
Approved Page Layouts
Educational Guide
Hero → Introduction → Educational sections → Examples → FAQ → Continue Your Learning → Related Resources → Related Calculators → Business Journey → CTA.
Calculator Page
Hero → Inputs and sticky results → Explanation → Interpretation → FAQ → Related Calculators → Related Guides → CTA.
Hub Page
Hero → Overview → Featured resources → Categories → Learning paths → Featured calculators → FAQ → CTA.
Trade Page
Hero → Trade overview → Licensing → Startup costs → Equipment → Pricing → Marketing → Customers → Hiring → Growth → Related tools.
7. Button Components
Buttons must describe the action clearly. Avoid vague labels such as “Click Here.”
8. Card Components
Cards organize related information. Each card should have one primary purpose and one clear action.
Employee Cost Calculator
Calculate wages, payroll taxes, benefits, overhead, and productive-hour cost.
Understanding Gross Margin
Learn how gross margin affects pricing, hiring, marketing, and expansion.
Grow Your Business
Follow a structured path from capacity and hiring through sustainable expansion.
9. Form Components
Forms must use visible labels, clear help text, meaningful validation, and appropriately sized controls.
- Every input must have a connected label.
- Do not use placeholder text as the only label.
- Error messages must explain how to fix the problem.
- Required fields must be identified in text.
- Currency, percentages, months, years, and units must be clear.
- Do not clear user inputs after a validation error.
10. Status and Alert Components
Status messaging must use both words and visual styling. Color alone must never communicate meaning.
11. FAQ Component
FAQ questions should match real user concerns and support both education and search visibility.
How often should a calculator be reviewed?
Should every page include structured data?
12. Call-to-Action Component
Calls to action should connect the page topic with the Foundation’s mission and the visitor’s next step.
Need Help Applying What You Learned?
Explore practical business education, calculators, and Foundation programs.
13. Calculator Standards
Every calculator must be educational, transparent, mobile responsive, accessible, and connected to related learning.
Input Panel
Group related fields in fieldsets with legends. Use visible units, help text, sensible defaults, and validation without deleting entries.
Results Panel
Display one primary result, supporting metrics, a detailed breakdown, interpretation, risk status, and print capability.
Educational Context
Explain the formula, business meaning, assumptions, limitations, and practical actions users should take after receiving results.
Required Calculator Features
- Complete HTML, CSS, and JavaScript in one Squarespace Code Block.
- Unique page-specific IDs and CSS prefixes.
- Input validation with human-readable errors.
- Responsive two-column desktop layout and one-column mobile layout.
- Primary result, supporting results, detailed breakdown, and interpretation.
- Clear educational disclaimer.
- Print-results function when appropriate.
- Related calculators and related educational guides.
- WebApplication schema when the page qualifies.
- FAQ schema only when matching FAQs are visible on the page.
14. Accessibility Standards
Accessibility is a publishing requirement, not an optional enhancement.
Semantic Structure
Use header, nav, main, section, article, aside, footer, form, fieldset, legend, table, headings, lists, and buttons correctly.
Keyboard Access
Every link, input, button, accordion, modal, and interactive control must work without a mouse.
Color and Contrast
Maintain readable contrast and never rely on color alone to indicate errors, success, warnings, or selected states.
Images and Media
Informative images require meaningful alt text. Decorative images should use empty alt text when inserted with HTML.
Mandatory Accessibility Checks
- Page has a logical heading hierarchy.
- All form fields have programmatically connected labels.
- Focus indicators remain visible.
- Interactive controls have clear accessible names.
- Tables use header cells for row or column labels.
- Link text describes the destination.
- Content remains usable at 200% zoom.
- Animations respect reduced-motion preferences.
- Mobile tap targets are large enough to use comfortably.
15. SEO Standards
SEO must accurately describe the page, support user intent, and strengthen the site’s topic architecture.
| Element | Standard |
|---|---|
| URL slug | Lowercase, descriptive, concise, hyphen separated, no dates unless required |
| SEO title | Primary topic first, brand or value statement second |
| Meta description | Clear benefit, accurate summary, natural call to action |
| H1 | One clear page topic matching the primary search intent |
| Internal links | Contextual, descriptive, relevant, and directed to final URLs |
| Schema | Use only when page content genuinely qualifies |
| Canonical | Self-referencing unless another canonical is intentionally required |
16. Internal Linking Standards
Every page must strengthen the educational ecosystem and provide a logical next step.
Parent Hub
Link back to the page’s primary hub, learning center, trade center, or calculator category.
Related Topics
Link to closely related guides, adjacent business concepts, and supporting resources.
Supporting Tools
Link to calculators, worksheets, templates, checklists, and detailed guides.
Next Learning Step
Tell the visitor what to learn or do next in the business journey.
Foundation Action
Link to programs, contact, membership, support, or another mission-aligned action.
Final URLs Only
Internal links must point directly to final 200-status URLs, not redirected or broken destinations.
Required Page-Ending Framework
- Continue Your Learning
- Related Resources
- Related Calculators when applicable
- Your Business Journey or next-step guidance
- Need More Help?
- Foundation mission or support CTA
17. Naming Conventions
Consistent naming prevents code conflicts and makes hundreds of pages easier to maintain.
| Item | Standard | Example |
|---|---|---|
| URL slug | Lowercase and hyphen separated | /employee-cost-calculator |
| Wrapper ID | pbef + page topic | pbef-employee-cost-calculator |
| CSS prefix | pbef + short page key | pbef-employee- |
| JavaScript IDs | Unique camel-case page prefix | pbefEmployeeAnnualCost |
| Image filename | Topic plus descriptive subject | plumbing-business-owner-estimating-job.jpg |
| Download filename | Brand plus resource topic and version | PBEF-Cash-Flow-Worksheet-v1.pdf |
18. Website Quality Checklist
No page is considered complete until every applicable item is verified.
Architecture and Content
- Page has a clear purpose and belongs to a defined hub and topic cluster.
- Primary audience and search intent are clear.
- Content provides practical educational value.
- Examples, interpretation, or action steps are included when useful.
- Page leads visitors to the next logical step.
SEO
- Recommended URL slug is final and correct.
- SEO title is unique and accurate.
- Meta description is unique and useful.
- Primary and secondary keywords are documented.
- One descriptive H1 is present.
- Heading hierarchy is logical.
- Canonical is correct.
- Appropriate schema is included and matches visible content.
Internal Linking
- Page links to its parent hub.
- Three to six meaningful contextual internal links are included.
- Continue Your Learning is present.
- Related Resources is present.
- Related Calculators is present when applicable.
- Business Journey or next-step guidance is present.
- Need More Help and Foundation CTA are present.
- All internal links point directly to final destinations.
Accessibility and Mobile
- All form controls have visible labels.
- Keyboard navigation works.
- Focus states are visible.
- Text and controls have sufficient contrast.
- Images have appropriate alt text.
- Page works at mobile widths without horizontal scrolling.
- Buttons and links have usable tap targets.
- Content remains readable at browser zoom.
Technical Quality
- HTML tags are properly closed.
- CSS is scoped to the page wrapper.
- IDs are unique.
- JavaScript does not create global conflicts.
- Calculator validation works.
- Reset and print functions work when included.
- No broken links or unintended redirects remain.
- Page is added to the Website Master Index.
Design System Governance
Future pages, calculators, resources, and platform features must follow this system unless a documented architectural decision approves an exception.