Fuller Seminary

Overview

Fuller Seminary's design system embodies Institutional Minimalism—a refined aesthetic that prioritizes clarity, accessibility, and scholarly authority without sacrificing warmth. The brand serves graduate students, faculty, and prospective leaders seeking theological and psychological education rooted in Christian tradition. The visual language combines deep teals (#007fa3, #005776) with warm earth tones (#ca8a35) and generous cream neutrals (#fbfaf9), creating an environment that feels both academically rigorous and humanly welcoming. The UI evokes trust through restrained elegance: clean typography hierarchies, ample whitespace (40px–64px section separations), and purposeful color accents that guide attention without distraction.

Tone of voice: scholarly yet conversational, precise yet pastoral. Fuller speaks with the authority of 75+ years of theological education, but never condescends. Vocabulary favors concrete outcomes ("equip leaders," "share Christ's hope and healing") over abstract mission-speak. The brand personality is confident, inclusive, and deeply purposeful—a guide for those called to vocational ministry and mental health leadership. Example sentence in Fuller's voice: "We equip leaders who share Christ's hope and healing in the church and the world."

Colors

Fuller's color system is rooted in institutional trust and warm accessibility. Primary (#007fa3, rgb(0, 127, 163)) is the signature teal used on all call-to-action buttons, active navigation states, and key interactive elements—it signals clarity and forward momentum. The primary-container variant (#00aec7, rgb(0, 174, 199)) provides a lighter, more energetic hover state. Secondary (#005776, rgb(0, 87, 118)) is a deeper navy-teal reserved for headings, footer backgrounds, and secondary CTAs, reinforcing institutional gravitas. Tertiary (#ca8a35, rgb(202, 138, 53)) is a warm golden-brown accent used sparingly for highlights, tertiary buttons, and footer links—it humanizes the palette and references the campus's architectural warmth. The surface stack progresses from cream (#fbfaf9) as the b

Typography

Fuller's type system pairs Noto Serif for display and headlines with Noto Sans for body and UI text, creating a hierarchy that signals editorial authority while maintaining digital accessibility. Display (60px, 300 weight, -0.02em tracking) and Headline-lg (46px, 300 weight) use the serif family's elegant lightness to anchor hero sections and major page titles—the 300 weight conveys sophistication without heaviness. Headline-md (32px, 400 weight) and Title-lg (20px, 600 weight, Noto Sans) bridge the serif/sans transition, used for section headers and card titles. Body-lg (18px, 400 weight) and Body-md (16px, 400 weight) are the workhorse sizes for article text and UI copy, set at 28px and 24px line-heights respectively to ensure comfortable reading at all viewport sizes. Label-md (14px, 60

Layout

Fuller uses a 12-column grid with a 1280px max-width container, maintaining a 24px gutter on desktop and 16px on tablet. The page rhythm is built on a 40px–64px spacing scale: major section separations use 64px (lg), card-to-card spacing uses 40px (md), and internal component padding uses 24px (gutter) or 12px (sm). The layout philosophy is "generous and breathing"—whitespace is treated as a design element, not wasted real estate. Hero sections occupy 60–70% of viewport height, allowing hero imagery (photography of campus life, faculty, students) to establish emotional connection before content begins. Content sections are typically 2–3 columns on desktop, stacking to 1 column on mobile. The topbar (40px height, #1a1a1a background) houses quick links (Applicants, Current Students, Alumni)

Elevation & Depth

Fuller's elevation system is subtle and restrained, reflecting institutional formality. Level 1 (Base): no shadow; flat surfaces use only border: 1px solid {colors.outline-variant} (rgba(193, 195, 197, 1)) to define edges. Level 2 (Cards, inputs): box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.15) creates a soft, barely-perceptible lift—this is the default shadow for all interactive surfaces. Level 3 (Modals, popovers, elevated cards on hover): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) provides noticeable depth without drama. Level 4 (Rare, for critical overlays): box-shadow: 0 16px 40px rgba(0, 0

Shapes

Fuller's shape language is Refined Institutional—professional, slightly softened, never playful. All rounded corners use border-radius: 4px (0.25rem) as the default, applied to buttons, inputs, cards, and badges. This 4px radius is the brand's signature: it's small enough to feel formal and trustworthy, yet large enough to avoid harsh right angles. Buttons and CTAs use 4px radius with 10px vertical and 40px horizontal padding, creating a compact, clickable target (minimum 48px height). Cards and containers use 4px radius with 1px border in outline-variant (#c1c3c5) to define edges without shad

Components

Action Elements Buttons are the primary interactive element and come in three variants: Primary (teal #007fa3 background, white text, 48px height, 10px 40px padding, 4px radius), Secondary (navy #005776 background, white text, same dimensions), and Tertiary (golden-brown #ca8a35 background, white text, same dimensions). All buttons use Noto Sans, 14px, 600 weight. Hover states darken by 1 shade (primary → primary-container #00aec7) and add box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) over 150ms. Focus states add a 3px outline in primary color with 4px offset. Disabled buttons use opacity: 0.5 and cursor: not-allowed. All button transitions use cubic-bezier(0.4, 0, 0.2, 1) timing for smooth, professional motion.

Containers & Surfaces Cards are the primary content container: 4px borde

Do's and Don'ts

**Do**

• Do use primary teal (#007fa3) exclusively for CTAs, active states, and focus indicators—it's the brand's signature and must remain distinctive.
• Do maintain 40px–64px whitespace between major sections; generous breathing room reinforces institutional authority and readability.
• Do apply 4px border-radius consistently to all interactive elements (buttons, inputs, cards); this is Fuller's shape signature.
• Do pair Noto Serif headlines with Noto Sans body text; the serif/sans contrast signals editorial hierarchy without confusion.
• Do use the tertiary golden-brown (#ca8a35) sparingly—only for accents, tertiary buttons, and footer links to maintain warmth without visual chaos.
• Do ensure all text meets WCAG AA contrast (4.5:1 minimum); midnight (#101820) on cream (#fbfaf9) achieves 11.5:1.

**Don't**

• Don't use primary teal on non-interactive elements (backgrounds, borders, decorative shapes); reserve it exclusively for actions and focus states.
• Don't apply border-radius larger than 4px to buttons, inputs, or cards—the brand's formality depends on this restrained, professional radius.
• Don't mix serif and sans fonts within a single headline or body paragraph; maintain clear family separation (serif for display/headlines, sans for body/UI).
• Don't use shadows larger than 0 16px 40px rgba(0, 0, 0, 0.12); Fuller's elevation is subtle, never dramatic.
• Don't reduce whitespace below 24px (gutter) between components or 40px (lg) between sections; the layout's authority depends on breathing room.
• Don't apply color to more than 3 interactive elements per page; Fuller's palette is restrained—too many colors dilute the primary teal's impact.