OEFF Design DNA

Extracted from hosts.oneearthfilmfest.org — tokens, patterns, and principles

Color Palette

Brand Colors

OEFF Black

#231F20

OEFF Blue

#3960AC

OEFF Aqua

#42A7C2

Light Aqua

#BAE1E2

OEFF Sage

#92BEAA

OEFF Ivory

#FFF3DF

Extended Palette

Blue Deep

#2d4a8a

Sage Deep

#6a9a84

Sage Light

#c8ddd2

Neutrals (Sage-Tinted)

Warm White

#FAFAF8

Sage Mist

#F5F8F6

Sage Whisper

#EEF3F0

Border

#e5e2dc

Text Colors

Token	Value	Use
`--color-text`	#231F20	Primary text
`--color-text-soft`	#4a4542	Secondary text
`--color-text-muted`	#7a746f	Tertiary / labels

Key insight: Neutrals have a subtle sage/green tint — not pure gray. This creates warmth and connects to the environmental theme.

Typography

Role	Font Stack	Use
`--font-display`	'Avenir Next', 'Avenir', 'Segoe UI', system-ui, sans-serif	Headlines, labels, nav, buttons, tables
`--font-body`	Georgia, 'Times New Roman', serif	Body text, paragraphs, quotes

Type Settings

Property	Body	Headlines
line-height	1.7	1.2-1.3
letter-spacing	0.01em	-0.02em (tighter)
word-spacing	0.02em	normal
font-feature-settings	'kern' 1, 'liga' 1, 'onum' 1

Pattern: Sans-serif (Avenir) for functional UI; Serif (Georgia) for reading. This creates clear hierarchy with 0KB web font overhead.

Spacing Scale

Token	Value	Px @ 17px base
`--space-2xs`	0.25rem	4.25px
`--space-xs`	0.5rem	8.5px
`--space-sm`	0.75rem	12.75px
`--space-md`	1rem	17px
`--space-lg`	1.5rem	25.5px
`--space-xl`	2rem	34px
`--space-2xl`	3rem	51px
`--space-3xl`	4rem	68px

Base font size: 17px (desktop), 16px (mobile)

Border Radius

Organic Radius Pattern

OEFF uses asymmetric border-radius for a hand-crafted, organic feel:

Standard
6px

Organic
10-12-9-11

Organic SM
5-7-6-8

--radius: 6px;
--radius-lg: 10px;
--radius-organic: 10px 12px 9px 11px;
--radius-organic-sm: 5px 7px 6px 8px;

When to use: Organic radius on cards, buttons, callouts — anything that should feel "natural." Standard radius on tables, inputs, small UI elements.

Shadows

Shadows are sage-tinted, not gray — this is distinctive:

--shadow-soft:
1px 2px rgba(146, 190, 170, 0.08),
4px 8px rgba(146, 190, 170, 0.06),
8px 16px rgba(35, 31, 32, 0.03);

--shadow-elevated:
2px 4px rgba(146, 190, 170, 0.10),
8px 16px rgba(146, 190, 170, 0.08),
16px 32px rgba(35, 31, 32, 0.04);

The rgba(146, 190, 170, ...) is sage (#92BEAA). This creates warmth even in shadows.

Motion

Easing	Value	Use
Standard ease	`cubic-bezier(0.4, 0, 0.2, 1)`	General transitions
Spring (interactive)	`cubic-bezier(0.34, 1.4, 0.64, 1)`	Buttons, pills, hover states — slight overshoot

Animations

Name	Duration	Use
logo-breathe	continuous	Subtle logo rotation (1.5deg)
gentle-pulse	4s	Carbon dot, status indicators
timeline-pulse	3s	Current timeline marker glow
fade-in-up	0.3s	FAQ answers, content reveal

Texture

The site uses layered grain overlays (SVG noise patterns) for organic texture:

Grain Implementation

Fine grain: 128px tile, 0.08 opacity
Medium grain: 256px tile, 0.04 opacity, multiply blend
Applied via ::before and ::after on body
Fixed position, pointer-events: none

Component Patterns

Gate Pattern (User Routing)

Two-button choice: "Curious" vs "Already committed"
Scrolls to relevant section rather than hiding content
All content remains accessible regardless of choice
LocalStorage remembers returning visitors

Stage Navigation Pills

Horizontal scrolling pill navigation
Background: sage-whisper, text: sage-deep
Hover: spring easing scale (1.05) + translateY(-1px)
Used for in-page section jumping

Timeline

Vertical with connecting line (light-aqua)
Circular markers with month abbreviations
States: complete (faded), current (pulsing glow), upcoming
Current marker: aqua with animated box-shadow

FAQ Accordion

+ / − toggle indicator
Question has hover state (sage background)
Answer fades in with fade-in-up animation
Some items default open

Next Step Callout

Gradient background (sage-whisper → sage-light)
Left border accent (3px sage)
Small marker dot
Label + content structure

Carbon Badge

Top-right corner, subtle
Pulsing green dot + "~0.02g CO₂"
Links to expandable detail in footer
Signals sustainability values

Accessibility

Feature	Implementation
Skip link	Hidden until focused, jumps to #main
Focus visible	2px solid aqua, 2px offset
Reduced motion	@media query disables animations
ARIA	Expandable sections have aria-expanded, aria-controls
Keyboard	All interactive elements support Enter/Space

Design Principles (Inferred)

1. Warm but Professional

Sage-tinted everything (shadows, backgrounds, borders)
Serif body text for reading comfort
Organic radii soften edges

2. Sustainability-First

~55KB total page weight
No external scripts (except Cloudflare)
No web fonts (system stacks)
Carbon badge as visible signal

3. Progressive Disclosure

Gate routes users to relevant content
FAQ expands on demand
Webinars in collapsible details
Carbon detail hidden until clicked

4. Nature-Inspired

Sage as dominant accent (not blue)
Organic, asymmetric shapes
Grain texture like paper
Breathing/pulsing animations

Integration with CogCommons

To add OEFF as a domain theme in the design system:

/* themes/oeff.css */
[data-domain="oeff"] {
  --accent-primary: #92BEAA;      /* sage */
  --accent-secondary: #42A7C2;    /* aqua */
  --accent-tertiary: #3960AC;     /* blue */

  --surface-warm: #FAFAF8;
  --surface-tinted: #F5F8F6;
  --surface-accent: #EEF3F0;

  --shadow-color: 146, 190, 170;  /* sage RGB for shadows */

  --radius-organic: 10px 12px 9px 11px;

  --font-display: 'Avenir Next', system-ui, sans-serif;
  --font-body: Georgia, serif;
}