Rights for Nature / Design system
A living visual language
for a living world.
Bold civic energy. Clear next steps. A consistent voice and visual system across the campaign.
01 / Foundations
Color with a purpose
Blue gives the movement a recognizable voice. Yellow and orange make key moments impossible to miss. White gives the message room to breathe.
--color-primary Identity, dark sections, headings --color-accent Highlights and action on blue --color-cta Primary action fill and icons --color-green Supporting campaign accent --color-white Main canvas and cards --color-bg-light Subtle separation --color-text Body copy and text on orange --color-muted Secondary information --color-link-on-light Text links on white Spacing
Use one repeatable scale for rhythm across pages.
xs 4px sm 8px md 16px lg 32px xl 64px 2xl 128px Responsive layout
A grid that adapts to the message
Use four columns on small screens, eight on medium screens and twelve on wide screens. Content stacks by default; wider spans are intentional.
Example: 8 + 4 on desktop, 4 + 4 on tablet, stacked on mobile
02 / Typography
A poster voice, built for reading
NewEdge666 carries the rallying message. Space Mono handles explanation, labels and calls to action.
Nature has rights.
Used for page and section headingsPeople across Europe are coming together to put nature’s rights into law. Explain the idea clearly, then show a useful next step.
16px / 1.6 line height on the siteH1Stand up for nature
H2Why nature needs a voice
H3What your support makes possible
BodyKeep line lengths comfortable and paragraphs short. Read the content principles.
03 / Components
Ready for real tasks
Actions are easy to distinguish, cards are calm, and forms make the next step clear.
Use one primary action per decision area and a direct verb.
Yellow and white outline variants stay distinct on blue.
Keep related actions on one row, left-aligned and equal in width.
What are Rights for Nature?
It is a way to recognize that ecosystems have a right to exist and thrive, with people able to speak up for them.
Explore the cause04 / Imagery
People and nature together
Use authentic campaign photography. The dragonfly is the primary mark; river, tree and mountain support the story.
05 / Principles
Make action feel possible
Explain before asking
Give visitors the context they need before a high commitment action.
Be precise about progress
Show the actual campaign stage and avoid implying an outcome is guaranteed.
Let everyone participate
Keep content readable, navigation predictable and controls keyboard accessible.
The full rules, tokens and implementation notes live in DESIGN.md at the project root.