Brand workbench

A calmer, clearer design system for UEF.

This page is the design lab for UEF. Use the A/B toggle to switch between variant A (white background, clean) and variant B (warm sand background, original). The goal is to define a coherent visual language that the existing WordPress site can implement.

We are keeping what works: warmth, depth, books, courses, and spiritual seriousness. We are improving what doesn't: inconsistency, weak hierarchy, and fragmented journeys.

North star

Human flourishing rooted in wisdom traditions.

Our goal is to enhance human flourishing by integrating knowledge across the silos of time, civilizations, geographies, and the academic disciplines of social and physical sciences, and by sharing actionable insights validated through science and lived experience.

Every aspect of our design system must serve this mission. We are in a fortunate position creatively — we can draw from all wisdom traditions across all of space and time. The visual language should feel as expansive as the ideas it carries.

Warm scholarship

Use the visual calm of a thoughtful editorial publication, but keep the ideas approachable and human.

Meaning over clutter

Give every section a job. Dense is good when it improves scanning, not when it turns into noise.

Guided exploration

Treat the site like a map of ideas and journeys. Help people drill down without getting lost.

Consistency with life

Reuse clear patterns across pages so the brand feels coherent even when the content types vary wildly.

Color system

Topbar Rose

#ea6f7d

Current top navigation bar background

Background

#ffffff

Page background (variant A: white, variant B: sand #f8f3e9)

Sand

#f7f1e3

Section accents, hero fields, soft panels

Ink

#1f2f37

Primary controls, dense contrast

Sky

#d8edf6

Hero and generous atmospheric surfaces

Blush

#f3c6cf

Flourishing band and softer callout zones

Stone

#d8d1c4

Borders, rails, and subtle structure

Footer Coral

#f47d53

Current footer section headings: Reach Us / Other Links

CTA Orange

#df740b

Current homepage CTAs and other warm action buttons

Search Blue

#0b78c3

Current top search button

Newsletter Blue

#166fd1

Current footer newsletter submit button

Current-state note: the orange and blue accents are not fully rationalized yet. The footer coral, CTA orange, search blue, and newsletter blue are all in active use today, which is exactly the kind of inconsistency this brand page should surface.

Type rhythm

Display

Cormorant Garamond

Body

Source Sans 3

Current working rule

Use serif display for thought and invitation. Use clean sans body for guidance, navigation, and dense reading.

Love Learn Play palette

The LLP pillar colors should be first-class brand tokens.

These are not accent colors to sprinkle around loosely. They are semantic colors tied to the three core human longings.

Use Primary for the main pillar color: section headers, key highlights, and the strongest moments of emphasis. Use Variant 1 for larger supporting surfaces such as feature panels or section backgrounds. Use Variant 2 for the quietest layer: subtle cards, hover states, chips, and soft separators.

Love

#F97770

Human warmth, care, closeness, and invitation.

Variant 1#F97770CC

Variant 2#F9777088

Learn

#00797A

Reflection, inquiry, wisdom, and calm structure.

Variant 1#00797ACC

Variant 2#00797A88

Play

#D9C64D

Lightness, energy, movement, and embodied joy.

Variant 1#D9C64DCC

Variant 2#D9C64D88

Brand imagery

Core visual assets.

The UEF animated logo and the four circular focus-area icons form the foundation of the visual identity.

Animated logo

Focus-area icons

Love

Learn

Play

About

Typography scale

Every typographic class in one view.

Each specimen shows the class name and a rendered example so designers and developers can see exactly what they get.

.uef-display

The flourishing life begins with wonder

.display-title

A calmer, clearer design system

.uef-lede

We are keeping what already works: warmth, depth, books, courses, and a sense of spiritual seriousness.

.uef-kicker

Brand workbench

.uef-micro-label

Variant 1

Body text

Use serif display for thought and invitation. Use clean sans body for guidance, navigation, and dense reading.

prose-uef block

The flourishing life

What does it mean to flourish?

Flourishing is the state of living well — of realizing your potential in a way that benefits yourself and others. It combines purpose, connection, growth, and joy.

“The good life is one inspired by love and guided by knowledge.” — Bertrand Russell

Cultivating meaningful relationships
Pursuing lifelong learning
Embracing play and creativity

Start with self-awareness
Build on your strengths
Serve the community

Learn more about the UEF approach to flourishing and how you can integrate these principles into daily life.

Surfaces & containers

Panels, papers, and structural elements.

These classes define the layered depth of the UEF design system — from bright white panels to dark contrast surfaces.

.uef-panel

Primary white panel with strong shadow