Color Palette
Brand Colors
Extended Palette
Neutrals (Sage-Tinted)
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:
0 1px 2px rgba(146, 190, 170, 0.08),
0 4px 8px rgba(146, 190, 170, 0.06),
0 8px 16px rgba(35, 31, 32, 0.03);
--shadow-elevated:
0 2px 4px rgba(146, 190, 170, 0.10),
0 8px 16px rgba(146, 190, 170, 0.08),
0 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;
}