Observer Foundation · ElleAI

Civic Luminance

Design System — v1.0
Export-ready for Figma (Token Studio) & Framer

Color Palette

Navy — Authority & Trust

50 #EEF1F5
100 #D5DCE8
200 #AAB8D1
300 #7F94BA
400 #5470A3
500 #324E7A
600 #1E3560
700 #152649
800 #0D1B2A
900 #070E16

Amber — Wisdom & Warmth

100 #FEEECE
200 #FCDB9E
300 #FAC76D
400 #F8B43C
500 #E8A020
600 #C4841A
700 #9A6714

Teal — Clarity & Intelligence

100 #CBF2EE
300 #63D8CB
400 #30CBBA
500 #0E9F8E
600 #0B8275

Stone — Warmth & Ground

50 #FDFCFA
100 #F5F1EB
200 #EBE5D8
300 #D9D0C0
400 #C4B9A5

Typography

DM Serif Display · Display / Headings

Ethical Intelligence

The Observer Foundation

Transforming Complexity

Community-Driven Action

DM Sans · Body / UI

We believe that intelligence, when guided by ethics, becomes a force for collective good. Our mission is to build systems that are not only capable, but conscientious.

The Observer Foundation creates frameworks, tools, and communities that place human values at the center of artificial intelligence development. From policy to product, we work across every layer of the stack.

Caption · UI label · Meta information · Supporting text at smaller scale

DM Mono · Code / Data

model.evaluate(ethics_score=> 0.95)

Spacing Scale

4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px
96px

Border Radius

sm 4px
base 8px
md 12px
lg 16px
xl 24px
2xl 32px
full 9999px

Components

Buttons

Cards

Ethical Framework

Principled guidelines that govern how AI systems are designed, evaluated, and deployed within communities.

Learn more →

Community Intelligence

Collective knowledge systems that surface insight from diverse lived experiences across the foundation.

Explore →

Observer Protocol

Transparent audit mechanisms ensuring every AI decision can be traced, explained, and challenged.

View protocol →

Badges & Tags

Ethics Community Transparency Research Archive

Form Elements

Stat Cards

1.2M+ People reached ↑ 18% YoY
94% Ethics score Across all models
3,800 Community members Active this quarter

Dark Surface Preview

ElleAI · Observer Protocol

Luminous Intelligence,
Grounded in Ethics

Every interaction is auditable. Every decision is explicable. Community values shape every output.

Elevation & Shadow

sm
base
md
lg
xl
amber-glow
teal-glow

Figma & Framer Export

Figma — Token Studio

Import design-tokens.json via the Token Studio plugin. Tokens are grouped into global, light, and dark sets. Map the light or dark set as your active theme.

Framer — CSS Variables

Paste the CSS custom properties from CustomStyles.astro into a Framer Code Override or global style block. All --aw-* variables map directly to Framer's CSS layer.

Figma — Variables API

Use the W3C-compatible token format to feed into Figma Variables via any token pipeline tool (Style Dictionary, Amazon Style Dictionary, tokens-to-figma).