Brand & Design System
WhiteBoard.church
Strategy tools for ministry teams — built on Whiteboard Leadership principles
02 — Color
Color palette
The palette is split into three tiers: Brand (teal), Neutrals (layout and text), and Semantic (status and principle coding). All colors have a dedicated -light tint for backgrounds and a -dark shade for text on light surfaces.
Brand — Teal
Primary / --teal
#00a896
Buttons, links, active states, icons
Dark / --teal-dark
#007a6e
Text on teal-light backgrounds, hover
Light / --teal-light
#e6f7f5
Active nav bg, notices, pill backgrounds
Neutrals
--text
#1c1c1e
Primary text
--text-2
#6c6c70
Secondary / supporting text
--text-3
#aeaeb2
Placeholder, section labels
--bg
#f2f1ec
App background (warm off-white)
--card
#ffffff
Card / panel surface
--border
#e5e5ea
Dividers, input borders
Semantic — Status & Principles
Orange — Start
#b45309 · #fff8ec
Green — Flex / Done
#15803d · #f0faf3
Purple — Explore
#7c3aed · #f5f0ff
Red — Eraser / Danger
#ff3b30 · #fff1f0
Blue — Perspective
#1d4ed8 · #eff6ff
Grey — Reset / Draft
#4b5563 · #f3f4f6
03 — Typography
Type system
The single typeface is Outfit by Rodrigo Fuenzalida — a geometric sans with high legibility at small sizes and excellent display weight at large sizes. System fallback chain: Outfit, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif. Monospace (code, join codes): 'SF Mono', Menlo, monospace.
Display
40px · 900
Strategy starts here.
Heading 1
28px · 800
Think strategically together.
Heading 2
22px · 800
Your Board at a glance
Heading 3
17px · 800
Topbar title · Modal heading
Body (base)
15px · 400
Don't wait for perfect — just get after it. A card in Start is better than an idea stuck in your head.
Body medium
14.5px · 500
Descriptive supporting copy for cards, notices, and onboarding prompts.
Label / nav
14px · 500–600
My Board · Team Board · History
Caption
12–13px · 400–600
Section label / form label
Micro / badge
10.5–11px · 700
SPACES · PRINCIPLES · TOOLS
Outfit weight specimen — "WhiteBoard.church"
400 Regular WhiteBoard.church
500 Medium WhiteBoard.church
600 SemiBold WhiteBoard.church
700 Bold WhiteBoard.church
800 ExtraBold ✦ WhiteBoard.church
900 Black WhiteBoard.church
✦ Primary brand weight — used for all headings and the wordmark.
04 — Spacing & Shape
Spacing & border radius
Spacing follows a loose 4pt base. Border radii use two values: a large radius for cards and panels, and a smaller radius for inputs, buttons, and badges.
Spacing scale
4px
Tight gaps, icon padding
8px
Internal element spacing
12px
Nav items, small card padding
16px
Card padding, section gaps
20–24px
Card padding (comfortable), page gutter
32px
Section separation
48px
Hero padding, large breaks
Border radius
--radius: 14px
Cards, modals, panels, large containers, hero blocks
--radius-sm: 10px
Buttons, inputs, dropdowns, nav items, small cards
100px (pill)
Principle tags, status badges, notification dots
Shadow
Standard card shadow
0 1px 6px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05)
05 — Components
Buttons
All buttons use Outfit 600 at 14px. Hover and press use filter: brightness(0.94) — never change the background color on hover. Destructive actions use the danger variant, never a solid red.
Primary actions
Background: --teal · Text: white · Radius: --radius-sm · Padding: 11px 18px
Secondary & ghost
Secondary: --border bg · Ghost: transparent bg, teal text · Link: no bg, 13.5px, weight 500
Danger
Background: --red-light · Text: --red · Never use solid red as a button background
Form elements
Inputs and selects use a 1.5px border at rest, switching to teal on focus. Labels are always uppercase 12.5px 600 in --text-2.
Error state
Please enter a valid email address.
Notice / info block
An invite email has been sent. They'll be added to the workspace once they create their account.
Join code (monospace)
ABC-1234
Cards & containers
The card is the fundamental surface. It uses a white background, 14px radius, and the standard shadow. Item cards (icards) are slightly more compact with a pointer cursor and a hover lift.
Standard card
Team Members (4)
Caleb Lewis
clewis@heritagecc.org
Background: white · Radius: 14px · Padding: 16–20px
Item card (icard)
Develop a discipleship pathway for new believers
⚡ Start
Background: white · Radius: 14px · Padding: 13px · has hover state
Active · Caleb Lewis
Stat card
12
Total Items
5
In Start
4
In Flex
3
In Explore
Principles & Status tags
Principle tags communicate the strategic state of a card. Status tags communicate its workflow state. Both use the pill shape (border-radius 100px), 11px Outfit 600.
Principle tags — P_WRITE (writable by marker holder or manager)
⚡ Start
Just get it down — first thoughts, raw ideas, unfiltered. Default for all new cards.
.p-start
⇄ Flex
Something we may need to adapt, pivot, or rethink. Requires intentional move.
.p-flex
◎ Explore
Uncharted territory — an area we haven't addressed yet.
.p-explore
Action principles — triggered via dedicated views
✎ Give Marker
Invite collaborative input from the team.
.p-marker
⌫ Give Eraser
Remove what no longer serves the mission.
.p-eraser
👁 Perspective
Look across the room — external viewpoints.
.p-perspective
↺ Start Over
Erase everything and begin again.
.p-reset
Status tags
Draft
Saved but not yet made active.
.s-draft
Active
Live and in play on the board.
.s-active
Done
Completed successfully.
.s-complete
Erased
Removed from active view.
.s-erased
06 — Visual language
Gradients
Two gradients define the brand's visual identity. Use them for full-bleed hero sections, the auth screen, and presentation mode.
Brand gradient
Auth screen · Topbar hero · Email templates
CSS
background: linear-gradient(
  160deg, #0ecab6 0%, #007a6e 100%
);
Text on this gradient is always white. Subtext uses rgba(255,255,255,0.6–0.75).
Dark gradient
Presentation / projector mode
CSS
background: linear-gradient(
  160deg, #05120f 0%, #0b2219 100%
);
Used exclusively for full-screen presentation overlay (z-index: 8000).
UI patterns
Common repeating patterns across the app — navigation, section labels, and layout structure.
App shell
WhiteBoard.church
Spaces
Principles
Team Board
Your strategic plan at a glance
⚡ Start
Launch a mid-week Bible study
Connect families who can't make Sunday mornings...
⇄ Flex
Revisit volunteer onboarding process
Current flow takes too long — people drop off...
Navigation section labels
Spaces
Principles
Tools
10.5px · weight 700 · uppercase · letter-spacing 0.08em · color --text-3
Persistent topbar action

"Write Something" appears as a primary button in the topbar on every view except the writing form itself. It is always one tap away regardless of where the user is in the app.

07 — Usage guidelines
Do's & Don'ts
Rules that keep the brand coherent across all surfaces — in-app, emails, slides, and print. When in doubt: warm, plain-spoken, whiteboard-native. That's the test.
✓ Logo
  • Use the W-mark icon with its container background
  • Use Outfit 800 for the wordmark, always
  • Pair the icon with the full "WhiteBoard.church" wordmark
  • Use the teal gradient for email headers and hero sections
✕ Logo
  • Don't use the W-mark without its rounded container
  • Don't use weights below 700 for the wordmark
  • Don't separate "WhiteBoard" from ".church"
  • Don't stretch, rotate, or recolor the icon
✓ Color
  • Use --teal (#00a896) as the primary action color
  • Use -light tints for tag and badge backgrounds
  • Use --text-2 for supporting / secondary copy
  • Maintain the warm off-white (#f2f1ec) as the app background
✕ Color
  • Don't use pure black or pure white as text or bg
  • Don't use solid red/green/orange as button backgrounds
  • Don't mix multiple gradient directions on the same screen
  • Don't introduce new brand colors — extend the existing palette
✓ Typography
  • Use Outfit exclusively for all UI text
  • Use 800 weight for all section and card headings
  • Use 600 for labels, buttons, and active nav items
  • Use monospace (SF Mono) only for codes and technical values
✕ Typography
  • Don't introduce a second typeface
  • Don't use italic style — Outfit's geometry reads poorly in italic
  • Don't use weights below 400 for body copy
  • Don't use all-caps for anything larger than 13px
✓ Voice & copy
  • Write in plain, direct, ministry-aware language
  • Use action-first labels: "Write Something", "Give the Marker"
  • Be encouraging — "Don't wait for perfect — just get after it"
  • Use the Whiteboard Leadership principle names exactly
✕ Voice & copy
  • Don't use corporate jargon — this is a ministry tool
  • Don't rename or abbreviate principle labels (Start/Flex/Explore)
  • Don't use passive voice for primary CTAs
  • Don't write error messages that blame the user
WhiteBoard.church
Brand & Design System · app.whiteboard.church