Design system / 3.0.0Download PDF

Design
system.

Make complex ideas clear, compelling and memorable. A shared identity with room to experiment.

Version 3.0.0 / 29 October 2026
Website · Presentations · Proposals
Case studies · Digital products

The Eidon approach

Built to explain.
Free to explore.

Website, presentations, client proposals, case studies and future digital products. One coherent identity, adapted to the purpose of each medium.

Visual language

Frame / field / focus

Compose precise editorial frames around expressive fields of colour, light and material. Use depth to explain relationships, with one clear focal point.

Motion language

Respond / transform / settle

Motion follows a cause. Forms retain continuity through fluid transformations, gather momentum and settle with believable weight. Pacing follows the argument.

Storytelling

Question / insight / idea / proof / next

Reveal complexity in layers. Give each scene one purpose and connect every expressive moment to something the audience needs to understand.

Creative flexibility

Core / adaptable / experimental

Keep recognition, legibility, truthful content and accessible behaviour constant. Vary composition, material and pacing deliberately within a declared purpose.

Explore the examples. Open “Specifications & usage” for the complete rules.

Working standard. Product patterns are specifications for future implementation; website examples are reference implementations.

01 / Principles

Principles

Intelligent, curious, expressive and human. Eidon combines strategic thinking, creative experimentation and technical making.

The visual grammar

01 / FrameStructure gives the idea a place.
02 / FieldColour and material give it character.
03 / FocusOne focal point makes it memorable.

Where Eidon stays consistent / where it can change

Core

Name and approved mark, type roles, tonal relationships, clear voice, honest evidence and accessible behaviour.

Adaptable

Grid rhythm, emphasis colour, crop, density and pacing adapt to audience and medium.

Experimental

Material, fluid form and composition can break convention with a purpose, fallback and recorded review.

Specifications & usage7 guidelines

Purpose before format

Start with the audience, the question and the desired change. Choose the medium after the story is understood. Strategy, Design, Motion and Experiences are connected capabilities, not competing identities.

Clarity with character

Make the hierarchy understandable before adding expression. Use confident editorial type, generous negative space and a purposeful contrast between quiet reading and expressive visual moments.

Frame / field / focus

The frame establishes order; a field of colour, image or material introduces energy; a focal point carries the idea. Use this relationship in a page, a slide, a proposal spread or a product screen.

A recognisable core

Keep the Eidon name or supplied approved mark, tonal palette relationships, type roles, direct voice and accessible interaction consistent. Do not redraw a mark, stretch lettering or invent a new logo treatment.

Deliberate freedom

Adapt image direction, accent choice, grid rhythm, material and motion to the story. One dominant experiment per scene is a useful default, not a quota. Surround it with enough stable structure to understand it.

Permission to break convention

Break a compositional rule only when it improves meaning. Record the intended effect, preserved brand cues, accessibility fallback and owner in the exception log. An experiment must never obscure a task, misstate evidence or remove access.

Same identity, different context

Expressive moments can lead a website or talk. Proposals prioritise a clear argument and commercial detail; products prioritise task completion. Carry the same visual grammar across all five channels.

02 / Colour

Colour

Anchor in Midnight. Support with Mineral Teal. Choose one lead accent.

Palette and verified solid pairings

Midnight

#08183c

Primary type, navigation and actions

Mineral Teal

#3e6467

Supporting panels, links and secondary actions

Warm coral

#e44b8b

Expressive highlights and selected details

Honey gold

#f6c555

Warm callouts and small moments of emphasis

Electric teal

#41e7d9

Interactive emphasis and energetic details

Soft Stone Glass

#adbabb

Quiet panels and background bands

Canvas

#f3f2ef

Reading surfaces and light text on dark

Midnight on Canvas15.55:1 / AA normal text
Midnight on Electric teal11.32:1 / AA normal text
Midnight on Honey gold10.81:1 / AA normal text
Midnight on Soft Stone Glass8.72:1 / AA normal text
Canvas on Mineral Teal5.82:1 / AA normal text
Midnight on Warm coral4.71:1 / AA normal text

Full tint/shade ramps and feedback roles are in the token export. Pairing claims apply to these solid colours only.

Specifications & usage7 guidelines

Brand palette

Use roughly 65% Canvas, 20% Midnight, 10% support and 5% accents. Choose one lead accent. Keep long copy on quiet surfaces. Underline links and pair status colour with words or icons.

Semantic roles

Canvas and Midnight anchor reading; Mineral Teal supports links and panels. Use Midnight labels on coral, gold, electric teal and Soft Stone Glass. Use Canvas on Mineral Teal. Do not use Midnight text on Mineral Teal. Canvas or white on coral is for large text only.

Tints and shades

The token export supplies 50, 100, 300, 500, 700 and 900 steps for each pigment. The 500 step is the original brand value; lighter/darker steps mix with white/black in sRGB. These are palette resources, not automatic text-safe pairings.

Feedback colours

Success, warning, error and information have distinct semantic values in both themes. Pair each with an icon and explicit text. Field errors explain the correction; never use a colour change as the only signal.

Contrast

Target at least 4.5:1 for normal text, 3:1 for large text and meaningful interface boundaries. The pair table is calculated from solid sRGB values. Recheck gradients, opacity, images, hover states and exports against their actual backgrounds.

Expressive pigments

Warm coral, Honey gold and Electric teal are the expressive accents. Choose one lead accent per composition, supported by Midnight, Canvas and Mineral Teal. Gold and Electric teal controls need Midnight labels and a Midnight border when their edge must stand out on Canvas.

Print and projection

Use sRGB as the digital master. Convert through the printer’s supplied ICC profile and approve a physical proof; no universal CMYK conversion is specified. Check decks on a projector and keep essential distinctions readable in greyscale.

03 / Typography

Typography

Give the idea presence and the explanation room. Type hierarchy carries the narrative across every format.

Editorial and reading hierarchy

Geologica 800 / headlinesTHINK IT THROUGH.
MAKE IT MATTER.

Geologica 400 / readingWe turn complex ideas into clear, compelling and memorable communications, experiences and tools.

Geologica 500–600 / interface, sentence casePrepare email draft · Explore the work · Save changes

Specifications & usage7 guidelines + reference tables

Families and fallbacks

Use Geologica for headlines, body copy and interfaces, with Arial and sans-serif fallbacks. Permanent Marker is reserved for the shared “What’s on your mind?” contact invitation. Use the supplied Eidon SVG logo rather than typesetting the wordmark.

Weights and hierarchy

Geologica is a variable family from 100 to 900. Use 400 for reading, 500–600 for controls and emphasis, and 700–800 for headlines. One H1 names a web page; H2 introduces sections and H3 explains them.

Responsive scale

Web body starts at 16 px; supporting metadata is 13–14 px. Page headings scale from 36 to 84 px and section headings from 32 to 56 px. Aim for two balanced lines on longer headings where the available width allows; short headings can remain on one line. Keep body copy readable and never clip a heading to enforce a line count.

Editorial exception

The homepage message also uses Geologica, with approximately 1.15 line height. The handwritten contact invitation uses Permanent Marker. Keep headings as real text and preserve the accessible reading order.

Leading and measure

Use 1.6-1.75 line height for web reading, 1.1-1.25 for short display lines and 1.4-1.5 for controls. Keep paragraphs near 55-70 characters. Never shrink copy to solve overflow; edit it or add a page.

Tracking and case

Use -0.03em for Geologica headlines and -0.01em for reading text, with +0.08em for short uppercase labels. The Permanent Marker contact invitation retains -0.025em. Sentence case is the default for interface text. Do not use all caps for paragraphs, errors or essential instructions.

Portable fonts

Embed licensed fonts in PDFs and presentation exports. If the recipient cannot use them, use Arial for body and Arial Bold for headings, then reflow the document. Do not assume a narrow display fallback will preserve the layout.

Type by channel
ChannelDisplay / headingsReading / supporting
Website36–84 px page; 32–56 px section16-24 px body; 13-14 px metadata
Presentation (16:9)40-64 pt title; 28-36 pt section22-28 pt body; 16-18 pt source notes
Client proposal (A4)28-40 pt title; 18-24 pt section10.5-12 pt body; 9-10 pt notes
Case studyUse the web or print scale for its mediumKeep captions readable; show attribution
Digital product24-40 px page; 20-28 px section16 px reading/control; 14 px supporting

04 / Layout

Layout

A precise frame makes expressive content legible. Build on a shared spacing rhythm and adapt density to the medium.

A shared grid, three scales

A clear
structure.
12 columns / Wide≥ 1024 px
A clear
structure.
8 columns / Medium650–1023 px
A clear
structure.
4 columns / Compact< 650 px
Repeated alignment edgesReading width ≤ 70chOrdinary content ≤ 1440 px

Shared spacing rhythm

4 px
8 px
12 px
16 px
24 px
32 px
48 px
64 px
96 px
128 px

Do: repeat alignment edges. Don’t: convert the web scale directly into print points.

Specifications & usage7 guidelines + reference tables

Grid

Use 12 columns for large web/editorial layouts, 8 for medium canvases and 4 for compact screens. Spans may change but alignment edges repeat. Reading columns should not stretch across the whole grid.

Spacing

Use the shared 4, 8, 12, 16, 24, 32, 48, 64, 96 and 128 px scale. Use 8-16 px within controls, 24-32 px between related blocks and 64-128 px between narrative chapters. Existing section spacing may use fluid interpolation.

Containers

Use a 1440 px maximum for ordinary content and a 70ch maximum for reading. Immersive imagery can bleed to the viewport edge. Existing editorial website sections may remain full-width with fluid 22-100 px gutters.

Responsive rules

Canonical bands are compact below 650 px, medium 650-1023 px and wide from 1024 px. Stack paired content at 650 px; the complex hero adapts at 760 px. Breakpoints respond to content failure, not device labels.

Alignment and order

Align text to a shared baseline and protect the intended DOM/reading order. Do not use visual reordering to create a different keyboard sequence. Offset images and asymmetry are allowed when the focal point and reading route remain clear.

Print and slide units

Web spacing tokens use px/rem. Print profiles use millimetres and points; slides use proportions of the canvas. Preserve relationships rather than converting one CSS pixel into one print point. Keep page furniture outside the reading column.

Density

Use generous space for storytelling and a compact product mode only when repeated tasks benefit. Product density can reduce gaps to the next spacing step; retain 44 px controls, readable labels and adequate separation.

Canvas profiles
ProfileFrame and marginsComposition
WebsiteFluid 22-100 px gutters; 1440 px standard max12 / 8 / 4 columns; full-bleed story exceptions
Presentation16:9, e.g. 1920 x 1080; 5% safe inset12 columns; one main claim per slide
Client proposalA4 portrait; 18 mm side / 20 mm top-bottom6 columns; 4 mm gutter; numbered pages
Case studyWeb chapters or A4 portrait; 16:9 summaryQuestion, insight, idea, execution, evidence
Digital product4 compact / 8 medium / 12 wide columnsStable app shell; explicit loading/empty/error states

05 / Shape

Shape, material and depth

Precise frames meet fluid fields. Materiality supports the idea without competing with information.

Material vocabulary and form

Paper / matte and precise
Glass / selective depth
Pigment / expressive field
0
4 px
12 px
24 px
Pill
FlatRaisedOverlay

These are visual reference specimens. Essential boundaries remain visible without shadow or blur.

Specifications & usage7 guidelines

Geometry

Use rectangular image/editorial frames, pill actions and restrained rounded utility surfaces. The contrast between a precise frame and a fluid internal field is a signature device. Avoid adding organic silhouettes to every component.

Radius and stroke

Use 0 for editorial frames, 4 px for small fields, 12 px for utility panels, 24 px for feature containers and a full radius for pills. Standard stroke is 1 px; strong boundaries 2 px; keyboard focus 3 px. Decorative hairlines are not sufficient for essential boundaries.

Material vocabulary

Paper: matte reading surface and quiet grain. Glass: occasional transparent overlay with a solid fallback. Pigment: expressive, diffused colour field. Light: image-led glow or reflection. Choose one leading material per scene.

Texture

Texture is decorative, non-repeating where practical and subordinate to copy. Start at 2-4% opacity and review at actual size. Never use grain as the only data encoding or place high-frequency texture behind small text. Print requires a proof at final scale.

Depth and elevation

Use flat composition for reading, a subtle shadow for raised controls, a stronger shadow for popovers and a scrim for dialogs. Establish depth through occlusion, scale and light direction before adding blur. Shadows do not replace visible boundaries.

Layer model

Use content 0, raised surface 10, sticky navigation 20, popover 30, modal 40 and toast/status overlay 50 within a documented stacking context. A status message must not cover focused controls. Keep decorative canvases below content with pointer-events disabled.

Guardrails

Do use one depth cue to explain a relationship. Do not stack glass, glow, noise and parallax simply for atmosphere. Under forced colours or reduced transparency, remove decorative layers and retain system-colour borders and readable text.

06 / Imagery

Imagery

Images should reveal the work, its context and the thinking behind it. Art direction connects physical and digital worlds.

One artifact / two purposeful crops

City illustration with buildings, trees and public space in a wide composition

16:10 / context

Close crop of the city illustration highlighting building and street relationships

4:5 / detail

Existing C40 case-study artifact. The crop changes; the work’s source colour and authorship remain intact.

Specifications & usage7 guidelines

Photography

Prefer purposeful compositions, credible human activity, real materials and clear relationships between detail and context. Look for light, structure, rhythm and making. Avoid interchangeable stock imagery or technology clichés that add no evidence.

Illustration and diagrams

Use editorial simplification: precise structure with selective expressive fields. Diagrams label the relationships they explain. Illustration may introduce impossible forms, but must be identified as a concept when it could be mistaken for a delivered outcome.

Treatment

Preserve source colour and tonal detail in portfolio work. Tonal fields, scrims and fluid ink can frame the story without misrepresenting the artifact. Do not apply a universal brand tint to client work or obscure text in a photographed design.

Composition

Define a focal point and leave breathing room for text. Pair a contextual image with a useful detail, prototype or process view. Vary scale deliberately; repeated hero images without new information do not advance a narrative.

Image frames

Hero: full-viewport cover crop. Project chapter: 4:5 desktop, approximately 1.2:1 compact. Case-study lead: 16:10 desktop, 4:3 mobile. Paired galleries default to 4:3 and wide rows to 16:9; preserve native ratios where the composition needs it.

Focal point and exceptions

Store crop coordinates with the asset and review compact, wide and slide crops. Depth Sessions photography uses native 3:2 gallery proportions and a protected DJ/projection focal point. Document subject-specific exceptions instead of forcing every image into a template.

Attribution and access

Meaningful images need contextual alt text; decorative images use empty alt. Captions identify source, role, date and concept status when relevant. Obtain usage rights and client approval; never fabricate a project outcome or imply authorship of another studio’s work.

07 / Iconography

Iconography

Icons clarify an action or category. A consistent family and optical rhythm make them feel part of the identity.

Small form. Generous target. / enlarged anatomy

44 px minimum target
24 px icon8 px gap to the labelOne family. Consistent optical weight.
Strategy

Existing Material Symbols / 24 px

Strategy
Design
Motion

8 px label gap. Decorative icons are hidden from assistive technology. The clickable target, when required, is at least 44 px.

Specifications & usage7 guidelines

Family

Use the locally supplied Google Material Symbols SVGs for interface and service icons. Use outlined, unfilled forms consistently. Retain the supplied Apache licence. Do not mix families within a functional group.

Size and weight

Use 24 x 24 px as the standard box; 20 px for dense supporting UI and 32 px for feature signposts. Source outlined symbols at weight 400, grade 0 and the nearest matching optical size. Existing supplied icons are the reference set.

Custom geometry

Custom functional icons use a 24 px viewBox, an approximately 2 px optical stroke and consistent terminals. Filled silhouettes are permitted only where the family requires them or to communicate selected state with a text/state cue. Do not apply SVG stroke to outlined path exports to fake a weight change.

Optical alignment

Align the visual mass to the text cap height and centre it within its box. Allow a documented 1 px optical correction; never distort the glyph. Use an 8 px icon-label gap as the default. Arrow direction must agree with the action.

Meaning and labels

Show a text label for unfamiliar actions. Icon-only buttons need an accessible name, a 44 px target and a tooltip on hover and keyboard focus. Hide decorative icons from assistive technology and keep their SVGs unfocusable.

States

Use the same silhouette across default, hover, focus, pressed and disabled states. Selection needs a check, label or native state in addition to colour. Reflect toggles with aria-pressed and disclosures with aria-expanded.

Brand versus function

Expressive symbols and illustration may vary by story, but must not replace familiar task controls. Do not use decorative service icons as clickable controls unless the whole component has an explicit destination.

08 / Motion

Motion

A cause, a continuous transformation and a credible settle. Motion reveals relationships and carries the pace of the story.

Pace follows purpose

Feedback120 ms
State change240 ms
Structure400 ms
Entrance600 ms
Expressive reveal900 ms

Immediate response → controlled deceleration → rest

Transformation with continuity

A fixed origin, one expressive reveal, then rest. No automatic loop.

01Cause
02Gather
03Transform
04Settle
05Read
Specifications & usage9 guidelines + reference tables

Physical behaviour

Respond to input immediately, accelerate purposefully and decelerate into rest. Preserve an object’s origin, direction and visual mass through a transformation. Larger elements travel more slowly. A spring may overshoot once subtly; avoid perpetual bounce or abrupt velocity changes.

Fluid transformations

Keep a recognisable anchor as image, colour or form changes. Let the leading edge flow and the trailing edge settle. The website fluid solver is an expressive approximation, not a physical claim. Always preserve a readable static image and real text.

Pacing and choreography

Use one dominant movement at a time. Introduce context, reveal the focal idea, hold for reading, then resolve. Stagger related elements by 40-80 ms, capped at 300 ms total. Essential text and task controls must never wait for a decorative sequence.

Duration and easing

Use 120 ms for feedback, 240 ms for small state changes, 400 ms for structural transitions, 600 ms for entrances and 900 ms for an expressive reveal. Standard easing is cubic-bezier(.16,1,.3,1); use ease-in for exit and linear timing for progress.

Hero and narrative transitions

The current hero holds a scene for 6 s and uses a 2.4 s fluid image transition, with a soft dissolve fallback. Longer transitions are storytelling exceptions, not defaults for product controls. Menu entrance is 600 ms; exit is 350 ms; link stagger is 55 ms.

Interruption

A new input cancels or retargets the previous transition. Avoid queuing gestures. Manual hero selection pauses autoplay until Play. Pause decorative work off screen and in hidden tabs; keep pointer effects on fine-pointer devices only.

Reduced motion

Respect the system preference and the visible site motion toggle. Replace spatial travel, ink flow, parallax and letter waves with an immediate state change or a short opacity dissolve of at most 120 ms. Never animate essential content out of reach.

Beyond the website

Presentations default to cuts or a short dissolve, with one meaningful transformation per argument. Proposal and PDF exports use a selected still plus explanatory labels. Product transitions communicate state, continuity and feedback before brand expression.

Motion safety

Provide pause controls for ongoing motion and avoid flashing more than three times per second. Do not use scroll hijacking or require pointer movement. Captions/transcripts convey meaningful audio and video content; do not autoplay sound.

Motion presets
PresetTiming / curveUse
Feedback120 ms / standardPress, hover, validation feedback
State240 ms / standardToggle, filter, small reveal
Structure400 ms / standardPanel, disclosure, layout change
Entrance / exit600 ms standard / 350 ms ease-inMenu and narrative entrance
Expressive reveal900 ms / standardOne focal transformation
Fluid hero exception2400 ms; 6000 ms holdExisting image narrative only
Reduced0-120 ms / linearImmediate change or opacity only

09 / Components

Components

Every component has a purpose, a state model and a clear contract. Reference examples do not imply a complete product library already exists.

Action states and a native dialog

Static labels and one next step

  • Animation
  • Projection
  • Event visuals
See Depth Sessions

Only the destination has link styling. Capability labels remain plain text.

Default
Focus specimen
Disabled

Specifications & usage9 guidelines + reference tables

Component anatomy

Document purpose, slots, semantic element, variants, states, token dependencies, responsive behaviour and access requirements. Reuse native controls first. A component is ready only when its required states have been reviewed.

Actions and navigation

Primary actions use solid ink; secondary actions use an outline; destinations use anchors with clear text. Use buttons for actions and preserve native disabled behaviour. Give an editorial section one clear next step; keep additional routes in the relevant navigation or destination page. Never use hover alone to reveal an essential route.

Breadcrumb navigation

Show breadcrumbs on every website content page except Home, including project, sector, legal, error and design-guide pages. Use a labelled navigation landmark and an ordered list. Link ancestors; render the current page as plain text with aria-current="page". Use neutral slash separators, no coloured dots. Wrap long paths and preserve keyboard focus and touch targets.

Fields and forms

Persistent labels sit above fields. State required markers before the form. Support empty, filled, focused, invalid, disabled, read-only and submitting states. Show a field message plus linked error summary; preserve entered data and move focus to the useful next point.

Cards and editorial blocks

Project cards combine cover image, title, discipline, summary and destination. Use consistent destinations for image and title; avoid nested links. Content-only service lists remain static: no underlines, per-item borders, link arrows, pointer cursor or hover treatment. Captions and credits stay attached to their artifacts in all formats.

Overlays and disclosures

Use native dialog for blocking tasks, details/summary for simple disclosures and explicit buttons for menus. Dialogs need a title, sensible initial focus, focus containment, Escape close where safe and return to the opener. Do not nest modals.

Product system states

Future products must include loading, skeleton, empty, error, success and offline/stale states. A loading state preserves layout and announces progress when useful. Empty states explain why and offer a next action. Error states preserve work and provide recovery.

Non-interactive formats

Decks and proposals reuse title, evidence, quote, comparison, process, image/caption and call-to-action blocks. Remove control styling from static content. Interactive states become labelled specimens when shown in print.

Implementation status

Website reference: actions, navigation dialog, project card, service list, accordion, enquiry fields and email-draft outcome. Defined for future implementation: product shell, data table, tooltip, popover, toast, upload, skeleton and offline patterns. These need build and access review before shipping.

Required state contract
FamilyMinimum statesAccess / responsive rule
Button / toggleDefault, hover, focus, pressed/selected, disabled, loading44 px target; name + native state; no layout shift
Field / selectEmpty, filled, focus, invalid, disabled, read-onlyPersistent label; error association; one column compact
Menu / dialogClosed, opening, open, closingKeyboard entry/exit; focus return; compact viewport fit
Card / linkDefault, hover, focus, visited where usefulOne clear destination; no hover-only information
Table / resultsLoading, populated, empty, error, staleSemantic headers; named scroll region or alternate view
Notice / toastInfo, success, warning, error, dismissedStatus announcement; no urgent message that vanishes

10 / Patterns

Patterns and storytelling

Make complexity engaging by revealing it in a purposeful order. Each chapter should change what the audience understands.

One argument, five scenes

  1. 01 / Question
  2. 02 / Insight
  3. 03 / Idea
  4. 04 / Proof
  5. 05 / Next

Explore a five-part story / illustrative scenario

01 / Question

What needs to become clear?

A complex project contains many facts. Start with the audience’s decision and the information they need to make it.

Do: connect each visual change to a new understanding. Don’t: substitute spectacle for evidence.

Specifications & usage8 guidelines + reference tables

Narrative spine

Question: what matters? Insight: what changed our understanding? Idea: what organising concept follows? Proof: how does it work and what evidence supports it? Next: what should happen now? A short story may combine chapters, but should preserve the logic.

Progressive disclosure

Lead with a plain-language claim and a clear visual. Offer a diagram, detail or method next, with full evidence available afterward. On the web use semantic sections and optional details; in a deck use successive slides; in a proposal use headings, summaries and appendices.

Scene anatomy

Give each scene a purpose, one main message, one dominant artifact, a useful caption and a transition to the next idea. Alternate overview, close detail and breathing space. Do not confuse a dramatic visual change with a new argument.

Evidence pattern

State the claim, show the artifact or data, name the source and explain the implication. Separate observation, inference and proposal. Use honest chart scales, direct labels and accessible alternatives. Mark unmeasured outcomes as intended benefits, never achieved results.

Case-study structure

Context and challenge; Eidon’s role and collaborators; insight and concept; execution across formats; outcomes or evidence limits; next step. Identify dates, credits and delivered versus conceptual work. Outcomes can be qualitative when the source supports them.

Proposal structure

Client question; understanding of the audience; proposed direction; scope and deliverables; approach and milestones; team and responsibilities; fees and assumptions; next step. Keep exclusions and terms findable. Never insert invented pricing or commitments.

Product journeys

Define entry point, intent, action, feedback, recovery and completion. Use one primary action per decision area, preserve work across interruption and make back/cancel behaviour predictable. Test both the successful path and recovery from invalid input, empty results and connection loss.

Creative exception pattern

Record the brief, normal rule, intended departure, invariant brand/access cues, static/reduced fallback, evidence and accountable approver. Time-box experiments and either promote them into a documented variant or retire them.

Story by channel
ChannelReusable sequenceWhat remains constant
WebsiteFluid opening → selected work → brief studio introduction → client experience → contact; detailed services and experiments have their own routesReadable routes, semantic order, credible project evidence
PresentationQuestion → insight → big idea → proof → invitationOne claim per slide; source notes; a clear spoken arc
Client proposalUnderstanding → solution → scope → plan → commercial detail → decisionClient relevance, clear responsibilities and assumptions
Case studyContext → role → insight → execution → evidence → nextAuthorship, concept status, attribution and honest outcomes
Digital productOrient → act → feedback → recover or completeTask continuity, clear state and accessible interaction

11 / Content

Content

Sound like thoughtful creative thinkers and makers. Explain the idea, its significance and the next useful action.

Make the next step obvious

Avoid / vague and impersonal

An error occurred.

What happened? What can I do?

Use / clear, calm, useful

Your draft is still here.

We couldn’t save your changes. Try again.

Try again ↗
01 Say what matters02 Explain the situation03 Give a useful action
Specifications & usage8 guidelines

Voice

Be intelligent without posturing, curious without vagueness, confident without exaggeration and human without forced familiarity. Use active voice, connected prose and specific examples. Avoid stock slogans, jargon chains and unsupported claims.

Tone by context

Brand narratives may be exploratory and expressive. Proposals are precise and reassuring. Product instructions are direct. Errors are calm and helpful. Never make a joke at the reader’s expense or imply blame for an interface failure.

Messaging hierarchy

Lead with the audience-relevant proposition, explain the mechanism, provide evidence and offer a clear next step. A headline carries one idea; a summary explains it; detail substantiates it. Do not rely on a visual effect to convey missing meaning.

Labels and microcopy

Name the outcome: Prepare email draft, Download proposal, Save changes. Link text describes its destination. Use sentence case and consistent terms. Avoid Click here, ambiguous Yes/No buttons and instructions based only on colour, shape or screen position.

Feedback

Describe what happened, whether work was saved and what the user can do. Error example: We could not save your changes. Your draft is still here. Try again. Confirmation example: Draft saved. Do not claim an email was sent when only a local draft was prepared.

Accessible language

Use plain English, define acronyms at first use and write descriptive headings. Keep required-field instructions explicit. Supply meaningful image descriptions, captions and transcripts; use real text rather than text baked into decorative imagery.

Editorial practice

Prefer complete thoughts and varied sentence length. Remove decorative ordinals where they add no meaning; retain real steps, dates, quantities and edition numbers. Use questions only when they advance an argument. Preserve client terminology and approved legal wording.

Claims and sources

Attribute collaborators, quotes and third-party work. Record the source and date of factual claims. Mark concepts and proposals clearly. Obtain approval before reusing confidential client information; do not invent metrics, testimonials, costs or outcomes.

12 / Accessibility

Accessibility

Access is part of Eidon’s creative standard. Every expressive treatment needs an equivalent usable experience.

Access, made visible

Explore the work ↗3 px visible outline
See where you areKeyboard focus stays visible.
44× 44 px
Room to interactKeep controls easy to reach.
Aa4.5:1 minimum
Read with confidenceNormal text on solid backgrounds.
Same meaning.
Less movement.
Respect preferencesProvide an equivalent static state.
Specifications & usage8 guidelines

Target and evidence

Use WCAG 2.2 AA as the target for new digital work, while preserving the existing website’s accessibility baseline. This is a delivery target, not a conformance claim. Pair automated checks with manual keyboard, visual and assistive-technology review.

Contrast and alternatives

Check text at 4.5:1, large text at 3:1 and essential non-text UI at 3:1. Never encode meaning with colour alone. Provide alt text for meaningful images, data equivalents for charts and captions/transcripts for meaningful audio or video.

Keyboard and focus

All actions work by keyboard without a trap. Provide a skip link, logical focus order, a visible 3 px focus indicator and focus that is not hidden by sticky content. Dialogs contain focus while open and return it to a sensible opener on close.

Touch and pointer

Use a 44 x 44 CSS px minimum target as the Eidon default. Permit smaller inline text links only when clearly separated and accessible. Provide alternatives to dragging and multi-point gestures. Hover content must also be available on focus and dismissible.

Structure and announcements

Use landmarks, hierarchical headings, semantic tables and native controls. Set accessible names and state attributes. Connect errors to fields; announce useful status changes politely. Do not send decorative letter animations or pointer effects to the accessibility tree.

Reflow and preferences

Test 320 CSS px width, 200% text zoom and 400% page zoom; allow text-spacing overrides. Honour reduced motion, forced colours and system preferences. Spatial layouts may scroll when intrinsically necessary, but preserve a useful text alternative.

Documents and slides

Use selectable text, logical reading order, meaningful links and image descriptions. Author native heading structure and run the destination app’s accessibility checker. Accessible delivery may require tagged PDF/PDF-UA remediation; this generated visual guide alone is not certified as tagged or PDF/UA compliant.

Manual release checks

Review keyboard-only navigation, dialog opening/closing, form errors, focus visibility and mobile reflow. Test the supported browser/assistive-technology combinations, including NVDA with a supported Windows browser and VoiceOver with Safari when a Mac/iOS build is in scope. Log the version, results and remaining issues.

13 / Design tokens

Design tokens

One structured source connects identity decisions to reusable implementation values. Semantic roles let the same system adapt across formats.

One decision → many uses

Primitivecolor.palette.navy.500#08183c
Semantic roleText on light surfacePurpose
ApplicationAaWebsite · Deck · Proposal

Search the token reference

171 tokens

  • color.palette.mist.50#fffefe (color)
  • color.palette.mist.100#fefefd (color)
  • color.palette.mist.300#faf9f8 (color)
  • color.palette.mist.500#f3f2ef (color)
  • color.palette.mist.700#b6b6b3 (color)
  • color.palette.mist.900#6d6d6c (color)
  • color.palette.aqua.50#f7fefd (color)
  • color.palette.aqua.100#ecfdfb (color)
  • color.palette.aqua.300#aaf4ee (color)
  • color.palette.aqua.500#41e7d9 (color)
  • color.palette.aqua.700#31ada3 (color)
  • color.palette.aqua.900#1d6862 (color)
  • color.palette.sage.50#fcfcfc (color)
  • color.palette.sage.100#f7f8f8 (color)
  • color.palette.sage.300#dae0e0 (color)
  • color.palette.sage.500#adbabb (color)
  • color.palette.sage.700#828c8c (color)
  • color.palette.sage.900#4e5454 (color)
  • color.palette.stone.50#fcfcfc (color)
  • color.palette.stone.100#f7f8f8 (color)
  • color.palette.stone.300#dae0e0 (color)
  • color.palette.stone.500#adbabb (color)
  • color.palette.stone.700#828c8c (color)
  • color.palette.stone.900#4e5454 (color)
  • color.palette.navy.50#f5f6f7 (color)
  • color.palette.navy.100#e6e8ec (color)
  • color.palette.navy.300#9097a7 (color)
  • color.palette.navy.500#08183c (color)
  • color.palette.navy.700#06122d (color)
  • color.palette.navy.900#040b1b (color)
  • color.palette.copper.50#fef8fa (color)
  • color.palette.copper.100#fcedf3 (color)
  • color.palette.copper.300#f3aecb (color)
  • color.palette.copper.500#e44b8b (color)
  • color.palette.copper.700#ab3868 (color)
  • color.palette.copper.900#67223f (color)
  • color.palette.cream.50#fffdf8 (color)
  • color.palette.cream.100#fef9ee (color)
  • color.palette.cream.300#fbe5b3 (color)
  • color.palette.cream.500#f6c555 (color)
  • color.palette.cream.700#b99440 (color)
  • color.palette.cream.900#6f5926 (color)
  • color.palette.teal.50#f7f9f9 (color)
  • color.palette.teal.100#ecf0f0 (color)
  • color.palette.teal.300#a8b9bb (color)
  • color.palette.teal.500#3e6467 (color)
  • color.palette.teal.700#2f4b4d (color)
  • color.palette.teal.900#1c2d2e (color)
  • color.palette.plum.50#fef8fa (color)
  • color.palette.plum.100#fcedf3 (color)
  • color.palette.plum.300#f3aecb (color)
  • color.palette.plum.500#e44b8b (color)
  • color.palette.plum.700#ab3868 (color)
  • color.palette.plum.900#67223f (color)
  • color.palette.blue.50#f7f9f9 (color)
  • color.palette.blue.100#ecf0f0 (color)
  • color.palette.blue.300#a8b9bb (color)
  • color.palette.blue.500#3e6467 (color)
  • color.palette.blue.700#2f4b4d (color)
  • color.palette.blue.900#1c2d2e (color)
  • color.feedback.white#ffffff (color)
  • color.feedback.black#000000 (color)
  • color.feedback.successLight#216647 (color)
  • color.feedback.warningLight#795000 (color)
  • color.feedback.errorLight#a22d3b (color)
  • color.feedback.infoLight#2e5388 (color)
  • color.feedback.successDark#93d5b0 (color)
  • color.feedback.warningDark#f4cf7b (color)
  • color.feedback.errorDark#ffb2b9 (color)
  • color.feedback.infoDark#bcd9d7 (color)
  • color.pigment.purple#e44b8b (color)
  • color.pigment.blue#3e6467 (color)
  • color.pigment.orange#e44b8b (color)
  • color.pigment.gold#f6c555 (color)
  • space.40.25rem (dimension)
  • space.80.5rem (dimension)
  • space.120.75rem (dimension)
  • space.161rem (dimension)
  • space.241.5rem (dimension)
  • space.322rem (dimension)
  • space.483rem (dimension)
  • space.644rem (dimension)
  • space.966rem (dimension)
  • space.1288rem (dimension)
  • radius.square0px (dimension)
  • radius.small4px (dimension)
  • radius.panel12px (dimension)
  • radius.feature24px (dimension)
  • radius.pill999px (dimension)
  • stroke.default1px (dimension)
  • stroke.strong2px (dimension)
  • stroke.focus3px (dimension)
  • layer.content0 (number)
  • layer.raised10 (number)
  • layer.sticky20 (number)
  • layer.popover30 (number)
  • layer.modal40 (number)
  • layer.status50 (number)
  • shadow.raised0 2px 8px #08183c14 (shadow)
  • shadow.overlay0 12px 40px #08183c26 (shadow)
  • shadow.modal0 24px 80px #08183c3d (shadow)
  • material.grainOpacity0.03 (number)
  • material.glassBlur12px (dimension)
  • material.scrim#08183caa (color)
  • motion.duration.feedback120ms (duration)
  • motion.duration.state240ms (duration)
  • motion.duration.structure400ms (duration)
  • motion.duration.entrance600ms (duration)
  • motion.duration.exit350ms (duration)
  • motion.duration.reveal900ms (duration)
  • motion.duration.stagger55ms (duration)
  • motion.duration.fluid2400ms (duration)
  • motion.duration.hold6000ms (duration)
  • motion.duration.reduced0ms (duration)
  • motion.easing.standardcubic-bezier(.16,1,.3,1) (cubicBezier)
  • motion.easing.exitease-in (cubicBezier)
  • motion.easing.linearlinear (cubicBezier)
  • font.bodyGeologica, Arial, sans-serif (fontFamily)
  • font.displayGeologica, Arial, sans-serif (fontFamily)
  • font.weight.regular400 (number)
  • font.weight.emphasis600 (number)
  • font.weight.display800 (number)
  • type.leading.body1.75 (number)
  • type.leading.reading1.6 (number)
  • type.leading.display1.1 (number)
  • type.leading.control1.5 (number)
  • type.tracking.display-.03em (dimension)
  • type.tracking.label.08em (dimension)
  • type.tracking.body-.01em (dimension)
  • type.web.body1rem (dimension)
  • type.web.small.875rem (dimension)
  • type.web.label.8125rem (dimension)
  • type.web.sectionclamp(2rem,3.5vw,3.5rem) (dimension)
  • type.web.projectclamp(2.125rem,3.4vw,3.375rem) (dimension)
  • type.web.pageclamp(2.5rem,5.8vw,5.25rem) (dimension)
  • layout.gutterclamp(22px,5vw,100px) (dimension)
  • layout.container1440px (dimension)
  • layout.measure70ch (dimension)
  • layout.breakpoint.compact650px (dimension)
  • layout.breakpoint.hero760px (dimension)
  • layout.breakpoint.wide1024px (dimension)
  • profile.presentation.type.title52pt (dimension)
  • profile.presentation.type.heading32pt (dimension)
  • profile.presentation.type.body24pt (dimension)
  • profile.presentation.type.note16pt (dimension)
  • profile.presentation.ratio16:9 (string)
  • profile.presentation.safeInset5% (dimension)
  • profile.proposal.type.title34pt (dimension)
  • profile.proposal.type.heading22pt (dimension)
  • profile.proposal.type.body11pt (dimension)
  • profile.proposal.type.note9pt (dimension)
  • profile.proposal.marginX18mm (dimension)
  • profile.proposal.marginY20mm (dimension)
  • profile.proposal.gutter4mm (dimension)
  • profile.proposal.pageA4 portrait (string)
  • profile.product.type.title2rem (dimension)
  • profile.product.type.body1rem (dimension)
  • profile.product.type.support.875rem (dimension)
  • component.button.height44px (dimension)
  • component.button.radius{radius.pill} (dimension)
  • component.dialog.radius{radius.panel} (dimension)
  • component.field.radius{radius.small} (dimension)
  • component.icon.size24px (dimension)
  • component.icon.gap{space.8} (dimension)
  • color.brand.midnight#08183c (color)
  • color.brand.mineralTeal#3e6467 (color)
  • color.brand.warmCoral#e44b8b (color)
  • color.brand.honeyGold#f6c555 (color)
  • color.brand.electricTeal#41e7d9 (color)
  • color.brand.softStoneGlass#adbabb (color)
  • color.brand.canvas#f3f2ef (color)
Download typed JSONDownload generated CSS
Specifications & usage7 guidelines

Layers

Primitive tokens hold palette, spacing, type, shape and motion values. Semantic tokens express surface, text, action, focus and feedback roles per theme. Component tokens name their purpose, such as button height or dialog radius. Channel profiles express print and slide units explicitly.

Naming and types

Use stable dotted paths in JSON and --eidon-kebab-case in CSS. Every token has a value and a type; aliases use braces, for example {color.palette.navy.500}. Do not put a channel-specific unit into a generic token without naming the channel.

Exports

tokens.json is the canonical machine-readable definition. tokens.css is generated, with light/dark semantic selectors and compatibility palette names. The HTML/PDF guide and reference tables are built from the same authoring data. Never edit a generated export as the source of truth.

Implementation

The website build includes generated CSS before existing styles. Shared palette, gutter, reading size, heading scale and standard easing map to the new tokens. Legacy local values remain during migration; new components should use semantic/component tokens. Do not describe every existing hard-coded value as migrated.

Modes and channels

Select light/dark with data-theme. Deck, A4 and product profiles supply their own type and layout values in points, millimetres or CSS pixels. Token names preserve the decision’s role even when the output unit changes.

Validation

Resolve every alias, reject cycles and missing references, check declared types and recompute contrast for documented pairings. Validate token export parity with the guide version. A change to a shared primitive requires checking all affected semantic roles and output formats.

Deprecation

Keep a deprecated alias for one minor release when renaming a public token. Mark its replacement in the changelog. Remove it in the next major release after consumers have migrated. Do not silently change a token’s meaning under an unchanged name.

14 / Documentation

Documentation

A system must be usable by someone who did not design it. Show the rule, the reason, a working example and the limits.

One identity, five canvases

WebsiteResponsive stories + interaction
Presentation16:9 / one argument per scene
Client proposalA4 / decision, scope, next step
Case studyContext → approach → evidence
Digital productClear state + useful feedback

Illustrative composition recipes. Use the specifications below for delivery requirements.

Specifications & usage7 guidelines

Reference set

Use this self-contained HTML guide for navigation and interaction, the PDF for visual review, token JSON/CSS for implementation and the source content for maintenance. All carry the same version. The older brand page is a summary linked to this guide.

Component specification

Each component entry records purpose, anatomy, variants, state matrix, content limits, responsive behaviour, keyboard/assistive requirements and tokens. Include a useful do/don’t example and label planned components separately from implemented ones.

Pattern specification

Record audience intent, entry/completion conditions, narrative or task sequence, evidence needs, failure/recovery behaviour and channel adaptations. Case-study, proposal and product patterns should link to the source claims they use.

Example quality

Show light/dark, compact/wide and static/reduced-motion specimens where relevant. Specimens illustrate the standard; they are not proof that every production page or external deck conforms. Keep actual project content and concept examples clearly distinguished.

Delivery checklist

Check text and image rights, source attribution, contrast, reading order, keyboard access, focus, reflow, responsive crops, motion preferences and links. For print, check bleed and physical proofs; for decks, check projector readability and font embedding.

Maintenance path

Edit content.json and tokens.source.json, run the guide/token generators, rebuild the website and run checks. Regenerate and inspect the PDF. Record the change and verification evidence. Publishing is a separate release action using Option 2’s existing site identity.

Known limits

This release defines cross-format standards and visual/reference examples. It does not create editable PowerPoint/Word templates or a complete production product component library. The PDF is searchable but not represented as fully tagged. These are explicit follow-on implementations.

15 / Governance

Governance

Give the system an owner, a release process and a place for useful experiments to become shared practice.

From experiment to shared practice

  1. 01Propose

    Name the problem.

  2. 02Make

    Show the change.

  3. 03Review

    Check craft + access.

  4. 04Release

    Version + document.

  5. 05Maintain

    Learn + improve.

Creative exceptionPurpose → Owner → Fallback → Review date

Exception and release records

Use the supplied record templates to name owners, document evidence and distinguish an experiment from an approved shared variant.

Release record templateCreative exception templateChangelog
Specifications & usage8 guidelines + reference tables

Accountability

The Eidon Creative directors are the accountable brand owners. For each delivery, nominate a design-system steward, an implementation owner and an accessibility reviewer in the release record. One person may hold multiple roles; a role must not be silently unassigned.

Decision rights

Brand owners approve changes to the name/mark, core visual principles and cross-channel direction. The steward approves documented variants and editorial standards. Implementation owners validate exports and compatibility. Accessibility reviewers record evidence and unresolved issues before release.

Contribution process

Submit a problem, audience/channel, existing gap, proposed solution, alternatives and example. Include tokens, states, responsive/static fallbacks and access considerations. Review against real use; update documentation and implementation together, then record approval and release.

Versioning

Use semantic versioning. Major: changed identity, removed token or incompatible component contract. Minor: additive token, component or pattern. Patch: correction or compatible clarification. The guide and token exports share a version; deployment records identify the version actually published.

Quality gate

Require token/alias checks, website build/route checks, contrast calculations, manual visual and access review, PDF layout inspection and channel-specific export checks. Record what was tested and what was not. A failed essential-access check blocks release of the affected component.

Exceptions

Record exception ID, context, normal rule, departure, rationale, invariants, fallback, owner, approval status and review date. Unapproved exceptions remain experiments. Review them at project close; promote useful repeatable variants and retire one-off treatments.

Maintenance cadence

Review at project kick-off and close, triage contributions monthly and audit shared components quarterly. Review supported browsers, fonts, licences, sources and access evidence before major releases. Archive old exports with their version; never overwrite historical release evidence.

Adoption

Start with new work and frequently reused components. Migrate existing pages when they are touched, prioritising readability, access and token consistency. A version number describes the standard, not automatic conformance of every website page, proposal or future product.

Release responsibilities
RoleOwnsRequired record
Brand ownerIdentity and creative directionDecision and approval for core changes
Design-system stewardRules, variants, contribution triageChangelog and accepted specification
Implementation ownerTokens, components, exportsBuild/check results and affected consumers
Accessibility reviewerAccess evidence and remediationManual/automated results and remaining issues
Project leadChannel delivery and release scopeNamed owners, delivered files and publication status

A clear next step.

This local specimen demonstrates a native modal dialog. No message is sent.