01
Executive Header
Clearly states the workspace name, purpose, version, status, or primary mission.
Formationly Executive Operating System
FEOS Design System
The visual, structural, and responsive standards that create a consistent executive experience across every Formationly workspace.
Version 1.0 • July 2026
Purpose of the Design System
Consistency should make FEOS easier to understand and easier to scale.
The FEOS Design System establishes reusable visual and interface standards for executive headers, cards, progress indicators, calls to action, alerts, metrics, navigation panels, and mobile layouts.
Every page should feel like part of the same operating system, even when the content and purpose of the workspace are different.
Design Pillars
Every FEOS interface should reflect six qualities.
01
Clear
The purpose and next action should be immediately understandable.
02
Executive
The presentation should feel credible, focused, and leadership-oriented.
03
Guided
The page should lead users through information in a deliberate sequence.
04
Consistent
Familiar patterns should repeat across every workspace.
05
Responsive
The experience should remain usable and polished on every screen size.
06
Purposeful
Every visual element should support the mission or user action.
Standard Page Structure
Every FEOS page should follow a familiar visual rhythm.
02
Executive Briefing
Explains why the workspace matters and how it supports the partner’s mission.
03
Primary Workspace
Contains the main task, content, workflow, resource collection, or operating capability.
04
AI Guidance Panel
Provides contextual coaching, approved guidance, recommended prompts, or future AI assistance.
05
Progress & Metrics
Displays readiness, activity, progress, ministry impact, status, or completion information.
06
Next Recommended Action
Ends the page with one clear, meaningful action that advances the partner journey.
Color System
A restrained palette reinforces clarity and executive focus.
Executive Black
#050505
Primary page background and executive foundation.
Workspace Charcoal
#101010 / #171717
Cards, panels, secondary surfaces, and content containers.
Formationly Gold
#F5C542
Primary accent, highlights, active states, and strategic emphasis.
Executive Cream
#F7F1DF
Guidance panels, strategic sections, and high-contrast content areas.
Primary Text
#D8D8D8
Body text on dark backgrounds.
Typography Standards
Typography should communicate hierarchy without visual clutter.
Page Title
Executive Headquarters
Section Heading
Today’s Mission
Card Heading
Prepare for Your Next Church Conversation
Body Copy
Use readable spacing, direct language, and short paragraphs to make complex information easier to understand.
Core Component Library
Reusable components should replace one-off designs.
COMPONENT 01
Executive Hero
Page identity, mission statement, status, and one primary action.
COMPONENT 02
Mission Card
A focused action card showing purpose, priority, and completion criteria.
COMPONENT 03
Progress Card
Shows readiness, completion, certification, or journey progress.
COMPONENT 04
Metric Card
Displays a number, label, comparison, and meaningful interpretation.
COMPONENT 05
AI Guidance Panel
Provides recommendations, context, suggested prompts, and approved guidance.
COMPONENT 06
Resource Card
Presents an approved video, document, presentation, template, or download.
COMPONENT 07
Status Badge
Communicates complete, in progress, required, coming soon, or attention needed.
COMPONENT 08
Next Action Panel
Provides one clear action that moves the partner forward.
Button Standards
Actions should be clear, limited, and visually prioritized.
Use one primary action per section whenever possible.
Button labels should describe the action, not use vague wording such as “Click Here.”
Touch targets should remain large enough for comfortable mobile use.
Spacing & Layout
White space should organize information, not waste space.
PAGE WIDTH
1040–1120 pixels
Maintain focused reading width on large screens.
SECTION SPACE
28–32 pixels
Create visible separation between major content areas.
CARD PADDING
22–34 pixels
Provide breathing room without making cards feel oversized.
GRID GAP
14–22 pixels
Keep related components visually connected.
Mobile Standards
Mobile is not a reduced version of desktop.
Multi-column layouts should stack into one clear vertical sequence.
Headings should scale with clamp values rather than fixed desktop sizes.
Buttons should use large touch targets and may expand to full width where appropriate.
Horizontal scrolling should be avoided except for intentionally scrollable data.
Decorative elements should never interfere with text or action areas.
Accessibility Standards
Professional design must remain usable.
Maintain strong text and background contrast.
Do not rely on color alone to communicate status.
Use descriptive links and action labels.
Preserve readable line heights and paragraph lengths.
Use semantic headings and meaningful document order.
Provide alternative text for meaningful images.
Design Governance
New designs should extend the system rather than bypass it.
Reuse an approved component before creating a new one.
New components should solve a repeatable need, not a single-page preference.
Every major page should be tested on desktop and mobile before release.
Significant design changes should be documented and versioned.
Consistency creates confidence.
The FEOS Design System ensures that every workspace can become more capable and sophisticated while remaining familiar, readable, responsive, and easy for partners to use.