eradiant docs

Edit layout and design

Overview

In the Layout and design area you adjust the visual appearance of the event website. You can configure colors and specific layout options without changing content.

Features

Edit layout settings

  1. Open the event whose website layout you want to edit.
  2. In the left menu, navigate to the Website area and select the tab for layout or design.
  3. Change the settings you want to update (e.g. colors).
  4. Click Save (bottom right, blue).

Test layout variants

  1. Apply changes to colors or layout options.
  2. Open the public event website in a new tab or window.
  3. Check how the changes look on different devices (desktop, tablet, smartphone).

Fields

Layout

Choose the layout that should apply to your website.

Logo

  1. Website logo: Image shown in the header of the event website (e.g. event or organization logo).
  2. Dark mode logo: Image shown only in the dark mode version of the event.
  3. Favicon: Image used in browser tabs, bookmarks and app shortcuts. Prefer uploading a square image; otherwise the image may be stretched.

Theme

  1. Light / dark theme: Choose whether the website is shown in light or dark mode (if available).
  2. Automatic mode: Optionally, the theme can follow visitors’ system settings.

Colors

Colors in ERADIANT are organized in layers and functional groups. Ideally all color tones for an event come from one color family (e.g. gray or blue) and are rather muted – this keeps the page calm and easy to read.

  1. Background / canvas: Base background of the page. All content sits on this “canvas”.
  2. Card / panel: Background color for cards, panels or areas where text and input fields sit. In the event module these areas are often referred to as “card” or “panel”.
  3. Raised (backend only): An additional, slightly “raised” card color to subdivide within a panel. This layer is not used on public event pages at present.
  4. Primary (text): Primary brand color as text color for important highlights (e.g. links, important labels). General body text is white or black (depending on mode), not primary text. In some blocks this can be set separately.
  5. Primary (background): Primary brand color as background color (e.g. buttons, active elements). Choose it so that text on top has good contrast.
  6. Secondary (text): Secondary brand color as text color. Use sparingly so the design does not become too busy.
  7. Secondary (background): Secondary brand color as background. Currently rarely used on ERADIANT event pages and mainly for edge cases.
  8. Success: Color for positive feedback or successful actions (e.g. “Saved successfully”). Used mainly for text or badges. We recommend a blue or green tone (note: color vision deficiency).
  9. Error: Color for errors or negative states (e.g. validation errors, error messages). Also mainly for text/badges. We recommend a red tone.
  10. Border: Border line around boxes and similar elements.
  11. Header background: Background color of the header (top of the website).
  12. Footer background: Background color of the footer (bottom of the website).

Note:
The split between primary/secondary as text and primary/secondary as background lets you use different brightness or saturation levels of the same brand – e.g. a stronger variant for buttons (background) and a calmer one for text, to keep readability and contrast.

Usage

With layout settings you align the look of the event website with your organization or event branding. Consistent colors improve usability and the overall impression of the site.