One design system.
One voice.

Brand

OpenEndo is an open, weekly-refreshed data hub for endometriosis research: clinical trials, papers, funding and policy. The mission: make an invisible disease impossible to ignore.

The name says it: open (everything MIT-licensed, data is a public good) + endo (the word the patient community itself uses). The symbol is the yellow awareness ribbon — the ribbon of endometriosis. We never use it decoratively; it stands for the people behind the data.

Personality: hopeful, not alarmist; rigorous, not academic; warm, not sentimental. Apple-clean structure carrying an editorial, human voice.

Logo

The mark is a single continuous line forming the ribbon loop and crossing tails — a minimal, geometric interpretation that stays crisp down to favicon size. It ships as an inline SVG; never use raster images of it.

Color

Apple-inspired neutrals carry the structure; rose → lavender is the signature gradient (hope); yellow is reserved for the ribbon only. Blue is always the color of action.

Typography

Fraunces (500–700, with italics) is the display face — the editorial, hopeful voice. System sans is everything else: clean, fast, Apple-familiar. One display accent rule: key emotional words can take the italic gradient treatment.

Layout & components

Container 1060px. Frosted sticky nav (64px, blur 20px). Sections breathe: 88px vertical padding, alternating white / #F5F5F7. Radii: cards 18px, KPI 14px, pills 999px. Shadows: 0 2px 8px (rest) / 0 10px 34px (hover).

• Buttons — pill, 980px radius: blue (primary action), ghost (secondary), btn-sm for nav. Hover: lift 1px + deepen shadow.
• Cards — white, hairline border, radius 18, hover lift 2px. Tag chip top-left (blue tint), title, muted body, source line, blue CTA.
• Status pills — green = recruiting, blue = active, grey = completed, red = terminated/withdrawn, amber = unknown.
• Eyebrows — numbered sections (01–05) with the rose→lavender gradient underline.
• Live badge — white pill with pulsing green dot; only for the live data section.
• Tables — uppercase micro-headers, hover row tint, NCT ids in muted micro-type.
• KPIs — big numbers; gold for headline stats; gradient numbers only in the hero stats.

Voice & tone

• Patient-first: "people with endometriosis", never "sufferers" or "victims". The patient is the expert of their own body.
• Evidence-first: every number carries a source. Never invent citations. If it isn't verified, it isn't published.
• Hope, not hype: "promising phase 3 results" — not "a breakthrough". No miracle-cure framing, ever.
• Plain language: say it so a 14-year-old and a professor both understand.
• Not medical advice: always point treatment decisions to specialists.

Data & i18n conventions

• Data: JSON in docs/data/ — trials_*.json (from ClinicalTrials.gov), pubmed_*.json, funding.json (curated, deadlines ISO YYYY-MM-DD), content.json (editorial, bilingual), meta.json (generated).
• i18n: every user-facing string in app.js I18N (EN + DA); content.json strings carry {"en":…,"da":…}. New languages welcome.
• Assets: when app.js or style.css change, bump ?v=N in index.html — GitHub Pages caches hard.
• Pipeline: scripts/update_data.py regenerates data weekly (ClinicalTrials.gov API v2: use filter.overallStatus, query.locn, ISO dates in RANGE — the naive filter syntax 400s).

For AI agents

If you are an agent extending this project, the rules are the same as for humans, plus:

• Never hallucinate a source — verify every link returns HTTP 200 before merging.
• Follow the JSON schemas exactly; run python3 scripts/update_data.py and keep meta.json honest.
• Update this style guide and BRAND.md when you change a token — the guide must always match reality.
• Keep the MIT license and the mission: data as a public good, patients first.