A stage for ideas, not a theme around them.

The TEDxEleusis system is editorial, architectural and direct. It gives every idea room to speak while making the whole event unmistakably ours.

Purpose

Why we use a design system.

01
Consistency
Pages use the same typography, spacing, colours and interaction patterns.
02
Speed
Teams assemble tested components instead of rebuilding common UI.
03
Accessibility
Semantics, focus states and responsive behaviour are handled consistently.
04
Maintenance
A shared package lets one improvement reach every application.

Decision rules

Four principles.

The system is intentionally restrained. These principles help us decide when to stay quiet and when a moment has earned more energy.

01

Clarity before decoration

Content leads. Every visual decision should make an idea easier to understand, navigate or remember.

02

Structure creates confidence

Consistent grids, borders and spacing give many kinds of content one recognizable TEDxEleusis frame.

03

Contrast creates rhythm

Quiet neutral pages make black panels, red accents and expressive imagery feel deliberate rather than constant.

04

Motion has a purpose

Interaction confirms state, reveals hierarchy and supports orientation. It never competes with the speaker or idea.

Typography

One voice, two registers.

The sans face carries ideas with warmth and clarity. Monospace labels provide orientation, metadata and a subtle institutional voice.

Colour

A restrained palette.

Paper and ink do most of the work. TEDx red identifies ownership. Blue and richer gradients appear only when the experience needs a signal or a shift in energy.

Paper

#FAFAFA

Ink

#000000

TEDx red

#E62B1E

Signal blue

#0057FF

Structure

Borders define the stage.

The outer rails connect pages. Internal rules create rhythm without filling the interface with cards, shadows or decorative containers.

Content frame
Consistent maximum width, gutters and optional vertical rails.
Editorial split
Label and heading on the left; explanation and action on the right.
Data row
Operational facts in a two- or four-column definition list.
Ruled list
Programme and directory content separated with thin borders.
Continuous grid
People, partners and principles aligned without floating cards.

SiteNavigation · SiteFooter

A consistent frame for every page.

Keep the logo and primary action easy to find. Close each page with secondary navigation and a clear way back to the top.

AnnouncementBanner · Button

One visual order for actions.

Use red for the main action, black for a secondary action and ghost styling only for low-priority choices.

ActionCallout

Give campaigns one clear action.

Use one callout for a high-priority campaign such as tickets, volunteering or partnerships. Do not place competing actions inside it.

Ticket release

Be in the room.

A full day of talks, performances and conversations at the VTBD.

Get tickets

NewsletterSignup

Keep newsletter signup self-contained.

Always show a clear email label, consent choice and unsubscribe note. Choose the light or dark version to match its section.

PersonCard

Consistent portraits.

Use a fixed 6:7 crop, grayscale by default, then name and role in mono.

Alexandra Markou

Urban researcher and educator

JournalCard

Consistent story order.

Keep image, date, title, summary and action in the same reading order.

May 18, 2027

A city shaped by memory and possibility

A long-form editorial pattern with image, context and a clear action.

SessionList

Choose the view by task.

Use the timeline when attendees are planning their day. Use the directory when they are browsing talks and speakers.

10:30
Saturday, 18 September
What ancient places can teach future cities
Main stage · 45 min
A conversation about memory, civic space and the futures cities choose to build.
Alexandra Markou (Urban researcher)
11:20
Saturday, 18 September
Designing with collective memory
Main stage · 20 min
How architecture can retain the traces of a place while making room for new uses.
Nikos Pappas (Architect)

FormField · Input · Textarea · Checkbox

Use native controls first.

Shared components add consistent labels, descriptions, focus and validation without replacing browser behaviour.

@tedxeleusis/ui

One package, clear ownership.

21 documented components

packages/ui: Reusable components, types, tokens and shared styles.
apps/design: Live examples, variants, API reference and this deck.
Event apps: Application-specific sections composed from the shared package.

Reuse an existing component first. Add to the package only when the pattern is genuinely shared.

A stage for ideas, not a theme around them.

Why we use a design system.

Consistency

Speed

Accessibility

Maintenance