A brand that keeps everything in view.

Distribution rule 70 / 22 / 8

Roughly 70 % bone ground, 22 % graphite, 8 % amber. If you need more amber, you usually have too many main actions.

• 70 % Bone (--paper)
• 22 % Graphite (--ink)
• 8 % High-voltage amber (--volt)

• Aa

  Graphite

  --ink

  #15171C

  Primary text, buttons, footer

  on bone

  16.3:1 AAA

• Aa

  Graphite light

  --ink-2

  #23262F

  Depth surfaces, cards on dark

  on bone

  13.7:1 AAA

  on graphite

  1.1:1 below AA

• Aa

  Graphite line

  --ink-3

  #3A3F4B

  Lead text, lines on dark

  on bone

  9.5:1 AAA

  on graphite

  1.7:1 below AA

• Aa

  Bone

  --paper

  #F6F4EF

  Page background

  on graphite

  16.3:1 AAA

• Aa

  Bone light

  --paper-2

  #FFFEFB

  Cards, inputs

  on bone

  1.0:1 below AA

  on graphite

  17.7:1 AAA

• Aa

  Hairline

  --line

  #E4DFD5

  Dividers, decorative

  on bone

  1.2:1 below AA

  on graphite

  13.5:1 AAA

  Decorative: no approved text or UI pairing.

• Aa

  Hairline strong

  --line-2

  #D6D0C4

  Outlines of inputs and buttons

  on bone

  1.3:1 below AA

  on graphite

  11.6:1 AAA

  Decorative: no approved text or UI pairing.

• Aa

  High-voltage amber

  --volt

  #F2A516

  Primary accent: the one main action, status, output

  on bone

  1.8:1 below AA

  on graphite

  8.6:1 AAA

• Aa

  Amber dark

  --volt-d

  #8A5708

  Amber for small text, WCAG AA

  on bone

  5.5:1 AA

  on graphite

  2.9:1 below AA

• Aa

  Amber deep

  --volt-deep

  #7A4D05

  Hover and depth

  on bone

  6.6:1 AA

  on graphite

  2.4:1 below AA

• Aa

  Copper

  --copper

  #C2410C

  Warm secondary note, expired

  on bone

  4.7:1 AA

  on graphite

  3.4:1 AA large

• Aa

  Amber glow

  --glow

  rgba(242,165,22,.30)

  Translucent halo behind the main action and on the focus ring

  Transparent: no contrast claim.

• Aa

  Warm grey

  --muted

  #6B6358

  Muted text, helper text

  on bone

  5.3:1 AA

  on graphite

  3.0:1 AA large

• Aa

  Success

  --ok

  #3F7D4E

  Success, compliance OK

  on bone

  4.4:1 AA large

  on graphite

  3.6:1 AA large

Contrast rules in short

• Amber (--volt) is surface or symbol, as text only on graphite. On bone it is too light for text.
• Small amber-toned text on bone uses --volt-d or --volt-deep.
• Success green (--ok) narrowly misses 4.5:1 on bone: as text on light bone (--paper-2), on bone only large or as a symbol.
• Hairlines (--line, --line-2) are decorative and carry no information.

Approved contrast pairs

Only pairings that pass by calculation. Body text needs at least 4.5:1 (AA), large text and controls at least 3:1. The ratio is truncated to one decimal, never rounded up.

Typefaces

Scale and roles

The table lists the real values from ci.css; the samples next to it are capped at 60 px.

Radii

Cards and panels use --radius-md (14 px, as --radius before), pills use --radius-pill. Inputs keep their 11 px; the buttons of the previous marketing site are square, marketing site D is rounded (shape language D, below).

• --radius

  14px

  Card radius (legacy, = radius-md)

  border-radius: var(--radius);

• --radius-pill

  999px

  Pills, chips, badges

  border-radius: var(--radius-pill);

• --radius-sm

  8px

  Small elements: tags, code chips

  border-radius: var(--radius-sm);

• --radius-md

  14px

  Cards, panels, tables

  border-radius: var(--radius-md);

• --radius-lg

  22px

  Large surfaces: hero cards, dialogs

  border-radius: var(--radius-lg);

Shadows

Graphite-tinted, widely diffused and pulled inwards: shadows lift, they do not dramatise. The glow belongs to the main action only.

• --shadow-sm

  0 4px 14px -8px rgba(21,23,28,.35)

  Subtle lift: chips, table rows

  box-shadow: var(--shadow-sm);

• --shadow-md

  0 12px 28px -12px rgba(21,23,28,.55)

  Cards on hover, select lists

  box-shadow: var(--shadow-md);

• --shadow-lg

  0 24px 48px -20px rgba(21,23,28,.6)

  Dialogs and overlays

  box-shadow: var(--shadow-lg);

• --shadow-glow

  0 8px 24px -8px var(--glow)

  Amber halo behind the main action

  box-shadow: var(--shadow-glow);

Gradients

Gradients are built exclusively from existing colour tokens. Use the signal gradient (amber to copper) sparingly and never behind body text.

• --grad-signal

  linear-gradient(135deg,var(--volt),var(--copper))

  Signal: amber to copper, sparingly for hero accents

  background: var(--grad-signal);

• --grad-dunkel

  linear-gradient(160deg,var(--ink-2),var(--ink))

  Dark surfaces: graphite gradient

  background: var(--grad-dunkel);

Spacing

A 4 px grid with eight steps. Padding and gaps come from this series, no in-between values.

• --space-1

  4px

  Tight: icon to text

  padding: var(--space-1);

• --space-2

  8px

  Compact: chips, rows

  padding: var(--space-2);

• --space-3

  12px

  Padding of small elements

  padding: var(--space-3);

• --space-4

  16px

  Default: small card padding

  padding: var(--space-4);

• --space-5

  24px

  Groups and form fields

  padding: var(--space-5);

• --space-6

  32px

  Card padding, block spacing

  padding: var(--space-6);

• --space-7

  48px

  Small section spacing

  padding: var(--space-7);

• --space-8

  64px

  Large section spacing

  padding: var(--space-8);

Shape language D

Marketing site D is rounded (plan 3.5): the square surfaces of the previous marketing site are gone. The main roles use the radius tokens below. Fixed values remain on small controls (icon, menu and small buttons, skip link: 12 px), on tabs (22 and 26 px), on the phone device frame (40 and 28 px) and on identifiers (8 px); marketing site D does not use --radius-sm yet. The System D section shows the layers E0 to E3.

Primary logo

Four variants: horizontal and vertical, each for light and for dark backgrounds. On light, mark and wordmark are graphite; on dark, bone and paper; the eye is always amber. The files are cropped to the artwork; the clear space is added when you place them.

Mark and wordmark on their own

The mark on its own for avatars, loading indicators or watermarks; the wordmark on its own close to body text or in very wide formats. For stamps, fax, engraving and foil, every form also comes in single-colour black and white (in the brand kit).

Construction and clear space

The clear space derives from H, the height of the mark (for the horizontal logo, the logo height). At least 0.5 × H around the logo stays free: no text, no edge, no other logo.

• Clear space: at least 0.5 × H all around.
• Horizontal logo: cap height of the wordmark 0.4 × module, gap between mark and wordmark 0.26 × module; the wordmark sits on the optical centre of the mark.
• Wordmark: Archivo at 84 % width, “Eagle” bold (800), “Desk” lighter (500), letter spacing +0.01 em, converted to paths – never retype it.
• Vertical logo: mark 1.3×, cap height 0.29 × module × 1.3, gap 0.18 × module × 1.3, centred.

Minimum sizes

Below these sizes the logo loses its shape. When space gets tighter, use only the mark, never a shrunken wordmark; below 24 px the compact version (favicon, from 16 px). The mail header is at least 20 px high. The examples are shown at actual size.

• 

  Horizontal logo
  Width 100 px · print 25 mm

• 

  Vertical logo
  Width 64 px · print 18 mm

• 

  Mark
  Edge length 24 px · print 6 mm

• 

  Wordmark
  Width 80 px · print 20 mm

Never

Six typical misuses, recreated with the real logo files. Each one is labelled as a mistake and does not belong in use. Also: do not add or rearrange lines, do not move the lamp or let it blink, never write the name with a space or in all caps in running text.

Filament sidebar

At the top left of the sidebar sits the horizontal logo in the variant of the colour mode: light uses “Horizontal logo, light”, dark uses “Horizontal logo, dark”.

• Dashboard
• Staff
• Assignments
• Hours
• Invoices

• Dashboard
• Staff
• Assignments
• Hours
• Invoices

Favicon in the browser tab

Only the compact mark appears in the tab, never the wordmark. It stays recognisable at 16 px: the SVG adapts to light and dark tabs, ICO and PNG sit on the graphite tile.

EagleDesk New tab

Social avatar

The app icon shows the compact mark in light lines on the graphite tile with an amber eye: it stays legible in any crop, whether round, rounded or square.

EagleDeskSoftware for temporary staffing

PDF letterhead of the operator

The horizontal logo at the top left, below it the sender line, at the bottom the mandatory details. All texts are placeholders; no company and no number appears. For a tenant, the tenant logo appears instead.

[Company name] · [Street no.] · [Postcode City]

[Recipient] / [Address]

[Company register] · [VAT ID] · [Bank]

Operator

[Tenant logo]

[Company name] · [Street no.] · [Postcode City]

[Recipient] / [Address]

[Company register] · [VAT ID] · [Bank]

powered by EagleDesk

Tenant

Portal header

The header belongs to the tenant: tenant logo or app name. The EagleDesk logo does not appear there, at most a discreet “powered by” at the end of the page. Mockup at 375 px width.

Platform mail header

Platform mails, for example about the trial, carry the brand mail header on graphite at the top. Tenant mails show the tenant logo, the EagleDesk logo only discreetly as “powered by”.

[Mail subject]

Platform mail

[Tenant logo]

[Mail subject]

powered by EagleDesk

Tenant mail

Mark

Downloads: Mark

Preview	Asset and use	SVG	PNG
	Mark, light Mark for light backgrounds: graphite lines, amber eye. Avatar, loading indicator, watermark.	SVG Vector · 823 B Copy URL	PNG 512 × 512 px · 11.2 KB Copy URL
	Mark, dark Mark for dark backgrounds: bone lines, amber eye.	SVG Vector · 832 B Copy URL	PNG 512 × 512 px · 11.1 KB Copy URL
	Mark, black Single colour black: stamps, fax, engraving, foil.	SVG Vector · 841 B Copy URL	PNG 512 × 512 px · 8.3 KB Copy URL
	Mark, white Single colour white: on dark and coloured areas with enough contrast.	SVG Vector · 831 B Copy URL	PNG 512 × 512 px · 9.1 KB Copy URL

Wordmark

Downloads: Wordmark

Preview	Asset and use	SVG	PNG
	Wordmark, light The lettering only, for light backgrounds, in graphite.	SVG Vector · 5.5 KB Copy URL	PNG 931 × 192 px · 23.2 KB Copy URL
	Wordmark, dark The lettering only, for dark backgrounds, in paper white.	SVG Vector · 5.5 KB Copy URL	PNG 931 × 192 px · 20.1 KB Copy URL
	Wordmark, black Lettering in single colour black: stamps, fax, engraving.	SVG Vector · 5.5 KB Copy URL	PNG 931 × 192 px · 15.6 KB Copy URL
	Wordmark, white Lettering in single colour white: on dark and coloured areas.	SVG Vector · 5.5 KB Copy URL	PNG 931 × 192 px · 17.6 KB Copy URL

Horizontal and vertical logo

Downloads: Horizontal and vertical logo

Preview	Asset and use	SVG	PNG
	Horizontal logo, light Standard for light backgrounds: headers, website, letterhead, presentations.	SVG Vector · 6.1 KB Copy URL	PNG 1349 × 256 px · 31.8 KB Copy URL
	Horizontal logo, dark Standard for dark backgrounds: footers, dark slides, videos.	SVG Vector · 6.1 KB Copy URL	PNG 1349 × 256 px · 28.5 KB Copy URL
	Horizontal logo, black Horizontal, single colour black: stamps, fax, engraving, foil.	SVG Vector · 6.1 KB Copy URL	PNG 1349 × 256 px · 21.5 KB Copy URL
	Horizontal logo, white Horizontal, single colour white: on dark and coloured areas.	SVG Vector · 6.1 KB Copy URL	PNG 1349 × 256 px · 24.3 KB Copy URL
	Vertical logo, light Vertical for light backgrounds: square or tall areas, cover pages, trade-fair walls.	SVG Vector · 6.1 KB Copy URL	PNG 960 × 640 px · 36.0 KB Copy URL
	Vertical logo, dark Vertical for dark backgrounds: title slides, roll-ups.	SVG Vector · 6.1 KB Copy URL	PNG 960 × 640 px · 32.6 KB Copy URL
	Vertical logo, black Vertical, single colour black: stamps, fax, engraving, foil.	SVG Vector · 6.1 KB Copy URL	PNG 960 × 640 px · 25.3 KB Copy URL
	Vertical logo, white Vertical, single colour white: on dark and coloured areas.	SVG Vector · 6.1 KB Copy URL	PNG 960 × 640 px · 28.0 KB Copy URL

Favicon and app icon

Downloads: Favicon and app icon

Preview	Asset and use	SVG	PNG
	Favicon Browser tab and bookmarks: the compact mark on the graphite tile (16 to 48 px). On the website the SVG favicon adapts to light and dark tabs.	SVG Vector · 888 B Copy URL	PNG 48 × 48 px · 1.4 KB Copy URL
	App icon App icon and profile picture: the compact mark on the graphite tile with an amber eye; the system rounds the corners itself.	SVG Vector · 1.4 KB Copy URL	PNG 1024 × 1024 px · 77.9 KB Copy URL

Preview image

Downloads: Preview image

Preview	Asset and use	SVG	PNG
	Preview image, dark Link preview (Open Graph, LinkedIn, X, messengers), standard for dark backgrounds, aspect ratio 1.91:1.	SVG Vector · 7.8 KB Copy URL	PNG 1200 × 630 px · 93.5 KB Copy URL
	Preview image, light Link preview for light surroundings, aspect ratio 1.91:1.	SVG Vector · 7.7 KB Copy URL	PNG 1200 × 630 px · 104.8 KB Copy URL

Mail header

Downloads: Mail header

Preview	Asset and use	SVG	PNG
	Mail header, light Small horizontal logo for mail headers and signatures on light backgrounds, from 20 px high (mail programs do not show SVG: use the PNG).	SVG Vector · 5.9 KB Copy URL	PNG 256 × 56 px · 5.9 KB Copy URL
	Mail header, dark Small horizontal logo for mail headers on dark backgrounds, from 20 px high; this is how it appears in platform mails.	SVG Vector · 5.9 KB Copy URL	PNG 256 × 56 px · 5.1 KB Copy URL

Meta snippet

To paste into the head of a page that should show the preview image. The URLs are absolute and carry the version parameter; the page itself sets title and description.

<meta property="og:image" content="https://eagledesk.at/brand/og/og-dunkel.png?v=1792121061">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Logo von EagleDesk: Adlerkopf-Zeichen und Schriftzug.">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://eagledesk.at/brand/og/og-dunkel.png?v=1792121061">
<meta name="twitter:image:alt" content="Logo von EagleDesk: Adlerkopf-Zeichen und Schriftzug.">

<meta property="og:image" content="https://eagledesk.at/brand/og/og-dunkel.png?v=1792121061">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="The EagleDesk logo: eagle-head mark and wordmark.">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://eagledesk.at/brand/og/og-dunkel.png?v=1792121061">
<meta name="twitter:image:alt" content="The EagleDesk logo: eagle-head mark and wordmark.">

Buttons

The buttons of the marketing site: 52 px tall (M 46 px, S 40 px), square, Archivo in capitals. Amber (.btn-volt) belongs to the one main action only. All other actions sit quietly next to it: position and label rank them, not colour.

<div class="ci-reihe">
    <button type="button" class="btn btn-volt">Create assignment</button>
    <button type="button" class="btn btn-primary">Log in</button>
    <button type="button" class="btn btn-ghost">Learn more</button>
</div>

<div class="ci-reihe">
    <button type="button" class="btn btn-danger">Delete permanently</button>
</div>

<div class="ci-reihe">
    <button type="button" class="btn btn-volt" disabled>Save</button>
    <button type="button" class="btn btn-ghost" aria-disabled="true" aria-describedby="btn-grund">Approve</button>
</div>
<p class="feld-hilfe" id="btn-grund">Approving is only possible once all hours are confirmed.</p>

<div class="ci-reihe">
    <button type="button" class="btn btn-volt"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4.5v15m7.5-7.5h-15"/></svg>Create assignment</button>
    <button type="button" class="btn btn-ghost">Learn more<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/></svg></button>
    <button type="button" class="btn btn-ghost btn-icon" aria-label="Delete"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/></svg></button>
</div>

<div class="ci-reihe">
    <button type="button" class="btn btn-volt btn-s">Small</button>
    <button type="button" class="btn btn-volt btn-m">Medium</button>
    <button type="button" class="btn btn-volt">Default</button>
</div>

Pills

Pills name a state in one line: trial, read-only mode, project status. Round (--radius-pill), AK Mono, with a mark before the text: ring = trial, square = read-only, hatched = in development, half filled = beta, diamond = new. The shape carries the meaning; colour only supports it.

<div class="ci-reihe">
    <span class="pille pille-test">Trial · 14 days</span>
    <span class="pille pille-lesen">Read-only mode</span>
    <span class="pille pille-dev">Open beta · Since 19 October 2026</span>
    <span class="pille pille-beta">Beta</span>
    <span class="pille pille-neu">New</span>
</div>

• A pill names exactly one state and sits next to what it describes.
• Always text, never just a coloured dot: the mark before the text is an addition.
• The project status names the stage honestly (“Open beta · Since 19 October 2026”) and promises no individual features.
• The amber fill (New) at most once per view.

Status badges

Badges are the compact form for lists and tables: dot plus text. Grey is neutral. The identifiers are the values in the product: the licence status of a tenant and the level of an announcement.

<div class="ci-reihe">
        <span class="badge b-volt">Trial</span>
        <span class="badge b-ok">Active</span>
        <span class="badge b-grau">Cancelled</span>
        <span class="badge b-ink">Read-only mode</span>
</div>

<div class="ci-reihe">
        <span class="badge b-grau">Info</span>
        <span class="badge b-volt">New</span>
        <span class="badge b-ink">Maintenance</span>
        <span class="badge b-copper">Urgent</span>
</div>

Banners

The same classes and values as in the panel (akw-lizenz-banner, akw-ankuendigung): trial = light amber, read-only mode and maintenance = graphite, cancellation and urgent = light red. Every banner states the situation in text and, where there is one, the next step.

<div class="ci-banner-stapel">
    <div class="akw-lizenz-banner akw-lizenz-banner--test" role="status" aria-live="polite">
        <span class="akw-lizenz-banner-text">Trial Premium All In: 14 days left (until DD.MM.)</span>
    </div>
    <div class="akw-lizenz-banner akw-lizenz-banner--nur_lesen" role="status" aria-live="polite">
        <span class="akw-lizenz-banner-text">Read-only mode since 9 Oct 2026 – your data is kept</span>
        <span class="akw-lizenz-banner-links">
            <a class="akw-lizenz-banner-link" href="#">Choose a plan</a>
            <a class="akw-lizenz-banner-link" href="#">Export data</a>
        </span>
    </div>
    <div class="akw-lizenz-banner akw-lizenz-banner--gekuendigt" role="status" aria-live="polite">
        <span class="akw-lizenz-banner-text">Contract cancelled as of 31 Dec 2026 – read-only mode afterwards, your data is kept</span>
    </div>
</div>

<div class="akw-ankuendigungen">
    <div class="akw-ankuendigung akw-ankuendigung--neu" role="status">
        <div class="akw-ankuendigung-inhalt">
            <strong class="akw-ankuendigung-titel">New: deadline dashboard</strong>
            <div class="akw-ankuendigung-text"><p>All deadlines of a tenant in one view, with a traffic light.</p></div>
        </div>
        <button type="button" class="akw-ankuendigung-schliessen" aria-label="Dismiss">&times;</button>
    </div>
    <div class="akw-ankuendigung akw-ankuendigung--wartung" role="status">
        <div class="akw-ankuendigung-inhalt">
            <strong class="akw-ankuendigung-titel">Maintenance on Sunday</strong>
            <div class="akw-ankuendigung-text"><p>From 02:00 to 03:00 the system is briefly unavailable.</p></div>
        </div>
        <button type="button" class="akw-ankuendigung-schliessen" aria-label="Dismiss">&times;</button>
    </div>
    <div class="akw-ankuendigung akw-ankuendigung--dringend" role="alert">
        <div class="akw-ankuendigung-inhalt">
            <strong class="akw-ankuendigung-titel">Incident</strong>
            <div class="akw-ankuendigung-text"><p>The time tracking import is disrupted. We are working on a fix.</p></div>
        </div>
    </div>
    <div class="akw-ankuendigung" role="status">
        <div class="akw-ankuendigung-inhalt">
            <strong class="akw-ankuendigung-titel">Notice</strong>
            <div class="akw-ankuendigung-text"><p>The manual now includes the chapter on month-end closing.</p></div>
        </div>
    </div>
</div>

Cards, tables, empty states, toasts

Cards group, tables compare, empty states lead to the next action, toasts report the result. The sample data are placeholders.

<div class="ccard">
    <div class="ic"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"/></svg></div>
    <h5>Deadline engine</h5>
    <p>Seven sources, one traffic light. Reminder, warning, expired: automatic, separated by tenant.</p>
</div>

<div class="leer">
    <div class="ic"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"/></svg></div>
    <h5>No assignments yet</h5>
    <p>Create the first assignment. It then appears in scheduling and in time tracking.</p>
    <button type="button" class="btn btn-volt btn-m"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4.5v15m7.5-7.5h-15"/></svg>Create assignment</button>
</div>

<div class="tabelle-wrap" role="region" tabindex="0" aria-label="Sample table, scrolls horizontally">
    <table class="tabelle">
        <caption>Assignments with hours and status</caption>
        <thead>
            <tr>
                <th scope="col">No.</th>
                <th scope="col">Customer</th>
                <th scope="col" class="num">Hours</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">E-0001</th>
                <td>Musterbau GmbH</td>
                <td class="num">38,5</td>
                <td><span class="badge b-ok">approved</span></td>
            </tr>
            <tr>
                <th scope="row">E-0002</th>
                <td>Sample Logistics Ltd</td>
                <td class="num">40,0</td>
                <td><span class="badge b-volt">expires soon</span></td>
            </tr>
            <tr>
                <th scope="row">E-0003</th>
                <td>Demo Metall e. U.</td>
                <td class="num">12,0</td>
                <td><span class="badge b-copper">expired</span></td>
            </tr>
        </tbody>
    </table>
</div>

<div class="ci-toast-stapel">
    <div class="toast toast-ok" role="status">
        <svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>                <span>Assignment saved</span>
    </div>
    <div class="toast" role="status">
        <svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"/></svg>                <span>The export is being prepared. You will receive a message.</span>
    </div>
    <div class="toast toast-fehler" role="alert">
        <svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/></svg>                <span>Cannot save: the end date is before the start date.</span>
    </div>
</div>

Marketing site patterns

From site-2026.css: status bar, status and plan badges and grid of the previous marketing site (design switch “alt”). The patterns of marketing site D follow in the next block.

<div class="statusbar">
    <div class="sb-in">
        <span class="sb-led" aria-hidden="true"></span>
        <p class="sb-text"><strong>Open beta</strong><span class="sb-sep"> · </span>Since 19 October 2026</p>
        <span class="sb-link"><span class="sb-long">See the roadmap</span><span class="sb-short">Roadmap</span><span aria-hidden="true">→</span></span>
    </div>
</div>

<div class="ci-reihe">
    <span class="st-badge b-live">Available now</span>
    <span class="st-badge b-dev">In development</span>
    <span class="tier tier-premium">Premium</span>
    <span class="tier tier-premium_plus">PremiumPlus</span>
    <span class="tier tier-all_in">Premium All In</span>
</div>

<div class="gridmini grid-bg" aria-hidden="true"></div>

Patterns of marketing site D

Building blocks of marketing site D “Lichtwerk” (views public/v2027/*): prefix .w-* for home and shared parts, .u-* for the sub-pages; drawn only via role tokens --d-*. Visible to everyone from design switch “new” (today: “new”).

Fields, help text and error message

Every field has a visible label (for and id), a help text via aria-describedby and, when needed, an error message in text. The outline of an input is --muted (1.5 px, well above 3:1 against the background), not the hairline --line-2.

<div class="feld">
    <label class="feld-label" for="bsp-feld-email">Email address<span class="pflicht" aria-hidden="true">*</span></label>
    <input class="inp" type="email" id="bsp-feld-email" name="email" autocomplete="email" required aria-describedby="bsp-feld-email-hilfe">
    <p class="feld-hilfe" id="bsp-feld-email-hilfe">We send the confirmation link to this address.</p>
</div>

<div class="feld">
    <label class="feld-label" for="bsp-fehler-email">Email address<span class="pflicht" aria-hidden="true">*</span></label>
    <input class="inp" type="email" id="bsp-fehler-email" name="email" value="name@" autocomplete="email" required aria-invalid="true" aria-describedby="bsp-fehler-email-hilfe bsp-fehler-email-meldung">
    <p class="feld-hilfe" id="bsp-fehler-email-hilfe">We send the confirmation link to this address.</p>
    <p class="feld-fehler" id="bsp-fehler-email-meldung"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/></svg>Please enter a valid email address.</p>
</div>

* Required field

• The label is visible and sits above the field, never only as a placeholder.
• Required: an asterisk in the label (hidden from screen readers) and the required attribute. The legend “Required field” appears once per form.
• Errors as text with an icon, never only as a red outline. Messages that appear dynamically get role=alert or live in an aria-live region.
• The message says what to do (“Please enter a valid email address.”), not only what went wrong.
• Text size in fields at least 16 px (no zooming in on mobile devices), field height at least 44 px.

Focus ring

Focus is always visible: a 2 px outline in --ci-fokus (graphite in light, bone in dark) with an offset, plus the amber glow as an addition. The glow alone is never enough, and the outline is never switched off.

.inp:focus-visible {
    outline: 2px solid var(--ci-fokus);
    outline-offset: 2px;
    border-color: var(--volt);
    box-shadow: 0 0 0 4px var(--glow);
}

Consent

Agreements are checkboxes of their own: never preselected, never bundled, with clear text. Required (trial terms) and optional (setup tips) stay separate.

<label class="chk" for="bsp-einw-bedingungen">
    <input type="checkbox" id="bsp-einw-bedingungen" name="bedingungen" value="1" required>
    <span>I accept the trial terms and have read the privacy notice. (<a href="#">privacy notice</a>)<span class="pflicht" aria-hidden="true">*</span></span>
</label>
<label class="chk" for="bsp-einw-tipps">
    <input type="checkbox" id="bsp-einw-tipps" name="tipps" value="1">
    <span>Yes, I would like to receive setup tips by email during the trial (voluntary, can be withdrawn at any time).</span>
</label>

• Never preselected: the checked attribute is taboo for consent; agreeing is an active step.
• Optional consents stay apart from required agreements and are labelled as optional and revocable.
• The whole row is clickable (the label wraps the field), minimum height 44 px; the box itself is 24 px.
• Links in the row are underlined and name their target (“privacy notice”).

Honeypot

A hidden field catches simple bots without a CAPTCHA. People do not see it, assistive technology skips it, and whoever fills it in is quietly turned away.

<div class="hp" aria-hidden="true">
    <label for="website">Website (please leave empty)</label>
    <input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
</div>

• Visually hidden with the class hp (off screen), not with display:none: simple bots skip fields that are hidden that way.
• aria-hidden="true" on the wrapper, tabindex="-1" and autocomplete="off" on the field: keyboard and screen reader do not reach it, and browser autofill usually does not either.
• The label stays understandable (“please leave empty”) in case the field is ever reached.
• A filled trap is discarded on the server, and the answer is the same neutral page as for a success.

Example: trial registration

The target pattern modelled on the registration form of the marketing site, static and with all building blocks: honeypot, required fields, separate consents and exactly one main action.

<form class="ci-formular" method="post" action="#" novalidate aria-labelledby="bsp-reg-titel">
    <h5 class="ci-formular-titel" id="bsp-reg-titel">Try it free for 14 days</h5>
    <!-- Insert CSRF token and form timestamp (_ts) -->
    <div class="hp" aria-hidden="true">
        <label for="bsp-reg-website">Website (please leave empty)</label>
        <input type="text" id="bsp-reg-website" name="website" tabindex="-1" autocomplete="off">
    </div>
    <div class="feld">
        <label class="feld-label" for="bsp-reg-firma">Company<span class="pflicht" aria-hidden="true">*</span></label>
        <input class="inp" type="text" id="bsp-reg-firma" name="firma" maxlength="150" autocomplete="organization" required>
    </div>
    <div class="ci-feld-reihe">
        <div class="feld">
            <label class="feld-label" for="bsp-reg-vorname">First name<span class="pflicht" aria-hidden="true">*</span></label>
            <input class="inp" type="text" id="bsp-reg-vorname" name="vorname" maxlength="80" autocomplete="given-name" required>
        </div>
        <div class="feld">
            <label class="feld-label" for="bsp-reg-nachname">Last name<span class="pflicht" aria-hidden="true">*</span></label>
            <input class="inp" type="text" id="bsp-reg-nachname" name="nachname" maxlength="80" autocomplete="family-name" required>
        </div>
    </div>
    <div class="feld">
        <label class="feld-label" for="bsp-reg-email">Business email<span class="pflicht" aria-hidden="true">*</span></label>
        <input class="inp" type="email" id="bsp-reg-email" name="email" maxlength="190" autocomplete="email" required>
    </div>
    <div class="feld">
        <label class="feld-label" for="bsp-reg-uid">VAT ID (optional)</label>
        <input class="inp" type="text" id="bsp-reg-uid" name="uid" maxlength="20" autocomplete="off" aria-describedby="bsp-reg-uid-hilfe">
        <p class="feld-hilfe" id="bsp-reg-uid-hilfe">ATU followed by eight digits, or another EU VAT ID</p>
    </div>
    <label class="chk" for="bsp-reg-bedingungen">
        <input type="checkbox" id="bsp-reg-bedingungen" name="bedingungen" value="1" required>
        <span>I accept the trial terms and have read the privacy notice. (<a href="#">privacy notice</a>)<span class="pflicht" aria-hidden="true">*</span></span>
    </label>
    <label class="chk" for="bsp-reg-tipps">
        <input type="checkbox" id="bsp-reg-tipps" name="tipps" value="1">
        <span>Yes, I would like to receive setup tips by email during the trial (voluntary, can be withdrawn at any time).</span>
    </label>
    <p class="feld-hilfe"><span aria-hidden="true">*</span> Required</p>
    <button type="submit" class="btn btn-volt">Request trial access</button>
    <p class="feld-hilfe">You will receive an email with a confirmation link. Only then do you set your password.</p>
</form>

Rules for forms

The icon set

Heroicons, outline variant: the same symbols as in the back office (Filament). An icon shows an action or a state and never replaces text. Every SVG can be copied.

• bolt Power, action
• exclamation-triangle Warning, error
• information-circle Information
• shield-check Security, compliance
• arrow-path Refresh, repeat
• calendar-days Appointment, assignment
• arrow-down-tray Download, export
• clock Time, deadline
• check-circle Success, done
• x-circle Cancelled, rejected
• trash Delete
• lock-closed Locked, protected
• pencil-square Edit
• user-group People, team
• plus Add
• document-text Document
• magnifying-glass Search
• building-office Company, customer
• arrow-right Next, link

Heroicons (Tailwind Labs) are released under the MIT licence. The paths are embedded in the page; nothing is loaded from elsewhere.

Sizes and stroke weight

The icons are drawn on a 24 grid with a stroke weight of 1.5. A class sets the size on screen, and the stroke scales with it.

<div class="ci-reihe ci-icon-groessen">
<svg class="ico ico-16" viewBox="0 0 24 24" aria-hidden="true"><path d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"/></svg>            <svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"/></svg>            <svg class="ico ico-24" viewBox="0 0 24 24" aria-hidden="true"><path d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"/></svg>        </div>

States

Muted grey at rest, text colour on hover, amber only in the active state and never as the only cue there: a bar, bold text and aria-current come with it. Amber icons on a light background use --volt-d (via --ci-akzent-text), on graphite --volt.

<nav class="ci-nav-demo" aria-label="Sample navigation">
    <a class="navpunkt" href="#"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"/></svg>Assignments</a>
    <a class="navpunkt" href="#" aria-current="page"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"/></svg>Staff</a>
    <a class="navpunkt" href="#"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/></svg>Documents</a>
</nav>

• Decorative icons carry aria-hidden="true". A button with only an icon needs an aria-label.
• One meaning, one icon: the same symbol stands for the same action everywhere.
• No emoji as icons and no custom stroke weights.

Imagery

Real working environments instead of stock clichés: construction site, warehouse, shop floor. Images show work, not poses, and only people who have agreed.

• Construction

  Show

  Scaffolding, formwork, tools in use; light as it is on site; protective equipment worn correctly.

  Avoid

  Staged handshakes in front of new buildings, spotless helmets on white backgrounds, photo montages.

• Logistics

  Show

  Warehouse, loading dock, order picking, forklifts in operation; hi-vis vest, order, walkways.

  Avoid

  People in front of shelves with a headset smile, empty pallets as scenery, exaggerated wide angles.

• Production

  Show

  Machine, workpiece, hand movement; crops that show skill; calm light without filters.

  Avoid

  Robot arms from an image library, sparks as an effect, amber filters over photos.

Image formats and safe margin

Three aspect ratios. The dashed box is the safe margin (10 %): subject and text stay inside.

Rules

• Real working environments from our customers’ everyday work, no stock clichés (handshake, laptop smile, helmet pose).
• Consent: every person shown has agreed in writing (right to one’s own image and GDPR). Consent can be withdrawn and is documented.
• No recognisable employees without approval: when in doubt, backs, hands, details or blur; no name tags, no legible plates.
• Safety shown correctly: protective equipment appears as it is required.
• Calm colour treatment: no amber filters, no black and white as an effect; images stay natural.
• Every image has alternative text that says what can be seen, not “photo of …”.

Check before publishing

1. Is consent on file for every recognisable person?
2. Is the environment real and plausible for the target group?
3. Does the crop work in all three formats?
4. Has the alternative text been written?
5. Are file name and metadata free of names and places?

Token mapping from light to dark

Components write their colours through roles (--ci-*). In the scope .ci-dunkel the roles point at dark values, identical to the dark mode of the marketing site. No new colour is created. Every value can be copied.

The roles live in /css/ci.css: light in :root, dark in .ci-dunkel, with data-theme dark and with a dark system setting. The values are matched with those of the marketing site. The back office panel deliberately stays light only.

Contrast pairs in dark mode

Every pair is calculated: semi-transparent text is mixed over the background first and then compared according to WCAG 2.x. Running text reaches at least 4.5:1 everywhere. Copper and success green sit only just above 3:1 on graphite, so they are marks or outlines, never text.

Rules for dark mode

• No pure black: the darkest background is graphite (#15171c), the surface above it #1c1f26. No pure white either: text is bone (#f6f4ef).
• Depth comes from lighter surfaces and lines in bone transparency, not from black shadows.
• The amber share stays small (guide value 8 %): amber is action, accent and small text, there as --volt instead of --volt-d.
• Text on amber stays graphite, in both modes.
• In dark mode copper and success green carry no text: the text stays bone, the colour shows an outline, dot or icon.
• The mode follows the system setting or the switch of the marketing site; the back office panel stays light.

Live demo

The preview is a container with the class ci-dunkel. All components inside use the same classes as in light mode.

<div class="ci-dunkel ci-dunkel-demo">
    <div class="ci-reihe">
        <button type="button" class="btn btn-volt">Create assignment</button>
        <button type="button" class="btn btn-ghost">Learn more</button>
        <button type="button" class="btn btn-danger">Delete permanently</button>
    </div>
    <div class="ci-reihe">
        <span class="pille pille-test">Trial · 14 days</span>
        <span class="pille pille-lesen">Read-only mode</span>
        <span class="pille pille-beta">Beta</span>
        <span class="pille pille-neu">New</span>
    </div>
    <div class="ci-reihe">
        <span class="badge b-volt">expires soon</span>
        <span class="badge b-ok">approved</span>
        <span class="badge b-copper">expired</span>
        <span class="badge b-ink">Sec. 12 AÜG</span>
        <span class="badge b-grau">Info</span>
    </div>
    <div class="ci-feld-reihe">
        <div class="ccard">
            <div class="ic"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"/></svg></div>
            <h5>Deadline engine</h5>
            <p>Seven sources, one traffic light. Reminder, warning, expired: automatic, separated by tenant.</p>
        </div>
        <div class="feld">
            <label class="feld-label" for="dm-email">Email address<span class="pflicht" aria-hidden="true">*</span></label>
            <input class="inp" type="email" id="dm-email" name="email" value="name@" autocomplete="email" required aria-invalid="true" aria-describedby="dm-email-meldung">
            <p class="feld-fehler" id="dm-email-meldung"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/></svg>Please enter a valid email address.</p>
        </div>
    </div>
    <div class="toast toast-ok" role="status">
        <svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>                <span>Assignment saved</span>
    </div>
</div>

Duration and curve

Three durations and one curve: 150 ms for hover and colour changes, 260 ms for overlays, 700 ms for fading in on load, all with --ease. The CSS contains tokens only, never numbers.

Further durations and curves (System D)

Addition for motion system D: press, colour mode, reveal on scroll, counting, lines and staggering. The values live in the :root of ci.css; they are in use on marketing site D (akw-bewegung.css/.js, the site-2027 stylesheets), back office and portals follow with their stages. Endless loops only run with a run lock (visible, not paused, no reduced motion), see motion D.

Permitted motions

• Fade in

  On load, content rises 16 px and fades in (700 ms), staggered in 150 ms steps. One orchestrated build-up per page, no scattered micro-animations.

• Hover lift

  Cards lift 2 px on hover and gain a shadow (150 ms). Buttons on the marketing site do not move; only shadow and colour change there.

• Colour and shadow change

  Buttons, fields and links change background, outline and colour in 150 ms. Nothing moves in the process.

• Overlays and toasts

  Menus, dialogs and toasts fade in within 260 ms (opacity, transform). Closing may happen at once.

Not permitted

• Endless loops and flashing: nothing moves for longer than 5 seconds without a stop, nothing flashes more than three times a second.
• Parallax, bounce and overshoot: curves come from --ease, motion ends softly.
• Motion as the only cue: every change is also visible as text or state.
• Moving text while reading (tickers, carousels without a stop).
• Custom numbers in CSS: duration and curve only through tokens.

Marketing site D is live: every loop has a run lock, a pause button and an idle pause (WCAG 2.2.2). The earlier deviation of the previous marketing site no longer applies.

Motion D (marketing site D)

How marketing site D “Lichtwerk” moves: tell once, then rest. Loops exist only there, only while visible and always with a pause; content never depends on motion. The building blocks live in akw-bewegung.css/.js, the page rules in site-2027.css and site-2027-start.css.

Performance levels (automatic)

• Full

  Desktop: glass with blur in header and menu, energy core with all areas, aura and grid in motion.

• Lean

  Up to 900 px, with “reduce transparency” or data saver: no blur, aura static, no floor grid, six instead of 9 cards in orbit.

• Calm

  With “reduce motion” or pause: everything in its final state, no loop.

Mandatory rules

• Run lock: a loop only runs while its element and the tab are visible, no pause applies and reduced motion is not set (attribute data-laeuft, set by the script). A test forbids “infinite” without this lock.
• The “Pause animations” button sits in header, menu and footer (WCAG 2.2.2); the browser remembers the choice (localStorage, with error handling).
• After two minutes without input everything stops by itself; any input wakes the page again.
• Only transform, opacity and filter move: no layout shift, no flashing, no parallax. Two deliberate exceptions on the home page: the sheen across the glow word shifts the gradient once (background-position, 2.8 s), and the sphere pulse changes its brightness via filter in its loop (only under the run lock).
• The final state is in the HTML: without script, with pause and with reduced motion everything is complete at once; with pause the cross-fade on page change is off too.

Reduced motion is mandatory

Anyone who selects “reduce motion” in the operating system gets no animation and no transition: everything is in its final state at once. The rule lives in /css/ci.css and applies to every page that loads it. New motion needs no exception of its own.

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    animation-delay:0s!important;
    transition-duration:.001ms!important;
    transition-delay:0s!important;
    scroll-behavior:auto!important;
  }
  .ccard:hover{transform:none}
}

Live demo with a switch

Three cards fade in one after another and lift on hover. The switch simulates “reduce motion” on the stage; the real system setting affects the whole page.

<div class="ccard einblenden">…</div>
<div class="ccard einblenden einblenden-2">…</div>
<div class="ccard einblenden einblenden-3">…</div>

Rules for motion

Checklist for WCAG 2.2 AA

The CI builds on WCAG 2.2, level AA. Each row names the success criterion and the rule that follows from it for design and build. Motion deliberately goes beyond AA.

Calculated examples

From the same contrast class as the colours: the ratio in light and in dark mode, not estimated.

Target sizes

At least 24 × 24 px, for touch 44 × 44 px. The squares are drawn at their real size.

• 24 × 24 px Minimum (WCAG 2.2, 2.5.8)
• 44 × 44 px Touch target (rule of the CI)

Keyboard operation

Every element of the page works without a mouse, including the copy buttons of this manual and the scrollable tables.

Marking up language

The html element carries the language of the page (de-AT or en-GB). Foreign words and sentences get their own lang attribute so that screen readers pronounce them correctly.

<p>The legal term <span lang="de">Arbeitskräfteüberlassung</span> stays in German.</p>

Rules for accessibility

One output, one source

Every output carries either the tenant’s branding or the operator’s, in principle never a mix. The tenant appears with its own name and, where connected, with logo and primary colour; the table below shows where. The operator appears where EagleDesk itself speaks: the website, this handbook, platform emails and the platform.

Building blocks of tenant branding

Logo (light and dark), app name and three colours from the tenant profile make up the branding. The column “Effective today in” lists the main outputs that read the value.

Which output carries which branding

Exactly one source per row. The statements are checked against the code and updated when it changes.

Rules for branding

• Target: everything tenant-related comes centrally from the tenant profile. New outputs do not read company fields directly; a few older places still do.
• The tenant colour is an accent: line in the letterhead, header bar and main button in the portal, name in the signature. Surfaces and body text stay neutral, so legibility does not depend on the tenant’s colour choice.
• On the tenant colour, text is white or graphite, whichever gives the higher contrast (section “Portals”).
• The EagleDesk logo does not appear in tenant outputs (exceptions: the fall-back logo in the back office without a tenant logo, the favicon and the app icon).
• Operator outputs never use the colour or logo of a tenant, even when a tenant is part of the context.
• Tenant emails never go through the platform’s access; platform emails never through a tenant’s access.
• In the back office amber stays the accent colour; app name and logo are the tenant’s.

Known limits

• Secondary and accent colour can be maintained in the tenant profile but have no effect in any output that is wired up yet.
• The tenant logo appears in the letterhead of the PDFs, in the back office and on the careers page, not in the portals and not in emails.
• A second logo variant for dark surfaces can be stored in the tenant profile but is not read by any output that is wired up yet.

Structure of the letterhead

The zones of a document from top to bottom. Fold and punch marks sit at the left edge.

Type in the PDF

Target picture: IBM Plex Sans in two weights (400 and 600). The samples are shown at real size (1 pt = 1.33 px) and include the smallest permitted size.

The smallest type in the PDF is 9 pt. Below that even a footer is hard to read on paper.

Table style in the PDF

Calm and print-friendly: no filled areas, and colour never carries the meaning on its own.

• Header row in AK Sans 600 with a graphite line below it, without a fill (saves toner and stays legible in black and white).
• Rows with a fine line in --line-2, no zebra striping.
• Text left-aligned, numbers and amounts right-aligned with the same number of decimals.
• Total row with a line above and bold type.

Four examples

A4 models of the fictitious Musterfirma Personal GmbH with demo branding. The header and the first sections are shown; the rest is abridged with “…”.

Rules for both portals

The models below show the layout at 375 px width. Surfaces and type are the target picture in CI tokens; the tenant colour comes from the tenant profile.

• Tappable targets are at least 44 px high. In the product a main button is at least 44 px high (14 px padding top and bottom plus 16 px type); the buttons in the header bar (help, sign out) are only 32 px high and therefore fall short of the rule.
• The tenant colour is only an accent: header bar, main button, edge lines, active tabs and progress. Cards, text and input fields stay neutral.
• On the tenant colour, text is white or graphite, whichever gives the higher contrast (see below).
• The standard fields (text, password, date, number, select, text area) use 16 px type so that smartphones do not zoom when tapped.
• The content fits into 375 px width without horizontal scrolling; tiles wrap to one column when space runs out.
• The header bar shows the tenant’s app name. A tenant logo in the header bar is a target picture (section “In use”); in the product only the name appears there today.

Employee Web App

Home, assignment schedule and entering hours. All details are placeholders.

Customer portal

Approving hours: one card per assignment with one main action “Approve”; rejecting is the second choice.

Text on the tenant colour

For text on the tenant colour the portal chooses white or graphite, whichever gives the higher contrast. With an amber that is too light, that is graphite. The values are calculated according to WCAG 2.x.

Rules for back office pages

• Filament components before custom Blade views: sections, tables, badges, buttons and forms come from Filament. A custom view is the exception.
• No Tailwind utilities in custom views: Filament does not ship them there, so they have no effect. Custom views use only the akw classes of the panel stylesheet (or the akw-tw wrapper, which reproduces a few utilities).
• Colours, fonts and spacing come from the CI tokens; the back office is light, the accent is amber, graphite and bone form the ground.
• All texts live in the language files (German and English), not in the Blade view; the back office consistently says “Mitarbeiter:in” in German.
• A new class belongs in the panel stylesheet, not in the view. It then appears automatically in the catalogue below.

Sidebar and table

Two models from HTML and CSS with the values of the panel stylesheet: group heading in AK Mono, active item with an amber tint, cards with a 14 px radius. On the desktop the logo sits in the top bar; it appears in the sidebar only on smartphones.

Live examples

Building blocks from the panel stylesheet, rendered here without Filament. Every akw class in these examples is in the catalogue and works without a Filament selector. Banners and announcements are in the section “Components”.

In the panel these places hold Filament components (section, button, badge); the snippet shows only the akw classes.

<div class="akw-ablauf-rahmen">
    <div class="akw-ablauf-next">
        <span class="akw-ablauf-next-body">
            <span class="akw-ablauf-next-label">Next step</span>
            <span class="akw-ablauf-next-titel">Check hours</span>
            <span class="akw-ablauf-next-text">Timesheets for several assignments are ready for approval.</span>
        </span>
    </div>
    <ol class="akw-ablauf-leiste" aria-label="Core workflow">
                                                <li class="akw-ablauf-li">
                <a class="akw-ablauf-schritt is-offen" href="#">
                    <span class="akw-ablauf-nr">Step 1</span>
                    <span class="akw-ablauf-titel">Request</span>
                    <span class="akw-ablauf-zahl">2</span>
                    <span class="akw-ablauf-text">open</span>
                </a>
            </li>
                                                <li class="akw-ablauf-li">
                <a class="akw-ablauf-schritt is-offen" href="#">
                    <span class="akw-ablauf-nr">Step 2</span>
                    <span class="akw-ablauf-titel">Assignment</span>
                    <span class="akw-ablauf-zahl">1</span>
                    <span class="akw-ablauf-text">open</span>
                </a>
            </li>
                                                <li class="akw-ablauf-li">
                <a class="akw-ablauf-schritt is-offen" href="#">
                    <span class="akw-ablauf-nr">Step 3</span>
                    <span class="akw-ablauf-titel">Hours</span>
                    <span class="akw-ablauf-zahl">5</span>
                    <span class="akw-ablauf-text">open</span>
                </a>
            </li>
                                                <li class="akw-ablauf-li">
                <a class="akw-ablauf-schritt is-offen" href="#">
                    <span class="akw-ablauf-nr">Step 4</span>
                    <span class="akw-ablauf-titel">Approval</span>
                    <span class="akw-ablauf-zahl">3</span>
                    <span class="akw-ablauf-text">open</span>
                </a>
            </li>
                                                <li class="akw-ablauf-li">
                <a class="akw-ablauf-schritt is-offen" href="#">
                    <span class="akw-ablauf-nr">Step 5</span>
                    <span class="akw-ablauf-titel">Invoice</span>
                    <span class="akw-ablauf-zahl">1</span>
                    <span class="akw-ablauf-text">open</span>
                </a>
            </li>
                                                <li class="akw-ablauf-li">
                <a class="akw-ablauf-schritt is-offen" href="#">
                    <span class="akw-ablauf-nr">Step 6</span>
                    <span class="akw-ablauf-titel">Payment</span>
                    <span class="akw-ablauf-zahl">4</span>
                    <span class="akw-ablauf-text">open</span>
                </a>
            </li>
                    </ol>
</div>

<div class="ci-reihe">
    <span class="akw-kalk-ampel akw-kalk-ampel--gruen">Within range</span>
    <span class="akw-kalk-ampel akw-kalk-ampel--gelb">Tight</span>
    <span class="akw-kalk-ampel akw-kalk-ampel--rot">Exceeded</span>
    <span class="akw-kalk-ampel akw-kalk-ampel--grau">No data</span>
</div>

<div class="akw-db">
    <div class="akw-db-kennzahlen">
                            <div class="akw-db-kz">
                <span class="akw-db-kz-label">Revenue</span>
                <span class="akw-db-kz-wert">[Amount]</span>
            </div>
                            <div class="akw-db-kz">
                <span class="akw-db-kz-label">Costs</span>
                <span class="akw-db-kz-wert">[Amount]</span>
            </div>
                            <div class="akw-db-kz">
                <span class="akw-db-kz-label">Contribution margin</span>
                <span class="akw-db-kz-wert akw-db-neg">[−Amount]</span>
            </div>
                    </div>
</div>

<div class="akw-einrichtung-kopf">
    <span class="akw-einrichtung-zaehler">1 of 3 steps completed</span>
    <span class="akw-einrichtung-balken"><span class="akw-einrichtung-balken-wert" style="width:33%"></span></span>
</div>
<ul class="akw-einrichtung-liste" role="list">
                                    <li class="akw-einrichtung-schritt is-erledigt">
            <span class="akw-einrichtung-ic" aria-hidden="true">✓</span>
            <span class="akw-einrichtung-body">
                <span class="akw-einrichtung-titel">Company details<span class="sr-only"> (done)</span></span>
                <span class="akw-einrichtung-text">Name, address and VAT number in the tenant profile.</span>
            </span>
                            </li>
                                    <li class="akw-einrichtung-schritt">
            <span class="akw-einrichtung-ic" aria-hidden="true">2</span>
            <span class="akw-einrichtung-body">
                <span class="akw-einrichtung-titel">Logo and colour</span>
                <span class="akw-einrichtung-text">Upload the logo and choose the primary colour.</span>
            </span>
                                    <span class="akw-einrichtung-aktion"><a class="btn btn-ghost" href="#">Open</a></span>
                            </li>
                                    <li class="akw-einrichtung-schritt">
            <span class="akw-einrichtung-ic" aria-hidden="true">3</span>
            <span class="akw-einrichtung-body">
                <span class="akw-einrichtung-titel">Mail access</span>
                <span class="akw-einrichtung-text">Set up your own SMTP access.</span>
            </span>
                                    <span class="akw-einrichtung-aktion"><a class="btn btn-ghost" href="#">Open</a></span>
                            </li>
            </ul>

<div class="akw-kanban" role="region" tabindex="0" aria-label="Board with two columns">
            <div class="akw-kanban-col">
    <div class="akw-kanban-colhead">
        <span class="akw-kanban-coltitle">New</span>
        <span class="akw-kanban-count">2</span>
    </div>
    <div class="akw-kanban-cards">
                                                                    <div class="akw-kanban-card">
                    <div class="akw-kanban-card-title">[Name]</div>
                    <div class="akw-kanban-card-sub">[Position]</div>
                                                    </div>
                                            <div class="akw-kanban-card">
                    <div class="akw-kanban-card-title">[Name]</div>
                    <div class="akw-kanban-card-sub">[Position]</div>
                                                            <div class="akw-kanban-card-ok">Documents complete</div>
                                                    </div>
                                                        </div>
</div>
            <div class="akw-kanban-col">
    <div class="akw-kanban-colhead">
        <span class="akw-kanban-coltitle">In review</span>
        <span class="akw-kanban-count">0</span>
    </div>
    <div class="akw-kanban-cards">
                                    <div class="akw-kanban-empty">No cards</div>
                            </div>
</div>
    </div>

Class catalogue

This catalogue is built from the panel’s stylesheet on every request: a new class appears here by itself, a removed one disappears. “Standalone” means there is a rule for the class that requires neither Filament (classes and variables) nor dark mode; only such classes can be shown as a live example without the panel.

769 classes in 51 families, 765 of them standalone.

Platform email and tenant email

This is how the two email types are built today. All tenant emails are plain. All texts in the models are placeholders.

[Kicker line]

[Salutation]

[Heading]

[Operator company] · [Address] [Register no.] · VAT [VAT no.] [Operator email]

[Tenant signature]

Musterfirma Personal GmbH

Colours in the layout

The colours are set in the email layout itself; the handbook calculates the contrast for them. Emails use inline colours because mail clients do not know tokens.

Rules for emails

• Platform emails come from the operator and carry the operator branding; the footer states the operator’s mandatory details.
• Tenant emails come from the tenant, through its own SMTP access. Without an access the email waits; it never goes out through the platform as a substitute.
• The kicker line of a platform email briefly names the occasion (for example “Contract”); contract and trial emails to customers carry a neutral kicker line.
• Emails use inline styles and table layout, no web fonts and no images that would be needed for reading.
• Promotional bulk emails contain the unsubscribe link.

Platform console

The operator’s platform console always carries the operator brand; its name appears in every page title.

[Page title] – [App name]

[Tenant logo]

Back office (tenant)

[Page title] – EagleDesk · Platform

Platform

Platform

Labelling

• The console’s name is “EagleDesk · Platform” and appears in every page title (browser tab).
• The header bar shows the operator logo, never the name, logo or colour of a tenant.
• Target picture: the brand line “Platform” is visible next to the logo.
• The same panel CI as in the back office: light, amber as accent, graphite and bone.
• Blocked for search engines (noindex).

Five principles for texts

The examples above show the tone; these five rules say how to recognise it. They apply to the marketing site, back office, portals, e-mails and documents.

1. Clear. One thought per sentence, active instead of passive, concrete nouns such as assignment, deadline, record and approval, numbers instead of adjectives.
2. Technically correct under Austrian AÜG. We use the terms of Austrian law (Überlassung, Beschäftiger, Überlassungsmitteilung) and no German constructs. A legal reference names the act and section only when it is right; when in doubt, the term stands alone.
3. No hype. No superlatives, no exclamation marks, no empty adjectives such as innovative, seamless or effortless. Today the marketing site gets by without exclamation marks.
4. Honest about the stage of development. What does not run yet is called “in development”, with a period once it is fixed. The status line and the trial sentence name the open beta and trial access after a personal conversation; no text pretends something is already there.
5. Form of address by output. The marketing site, product, portals, e-mails and legal texts all address people formally (“Sie” in German). An output does not switch form halfway through a text.

Word list

One spelling per term, derived from the back office glossary and the existing texts. “Applies to” names where the rule is enforced today.

Form of address by output

Every German-language output addresses people formally (“Sie”), regardless of the author’s taste. The table describes what exists today; each example appears word for word in the German texts. The English texts use “you” throughout.

What we do not say

These statements appear in no text: not on the marketing site, nor in e-mails, documents or sharing texts. When unsure, describe what the system does today.

• No promise of live payroll operation.
• No promise of reports to social insurance or to authorities.
• No figures about competitors (prices, customer numbers, market share) and no comparisons with named third-party products; comparisons are made factually against the classic desktop installation.

Standard sentences

The sentences come unchanged from the marketing site’s texts; when a sentence changes there, it changes here too. They are copied unchanged: a reworded sentence would be a new claim.

The number of trial days comes from the platform setting (currently 14 days).

Operator details

The source is the platform’s operator configuration. The legal notice remains authoritative; if a detail is missing, it is not shown here.

How the generator works

• All inputs are treated as text and escaped; special characters never run as markup.
• Links are created only for http(s), mailto and tel. Everything else, such as javascript:, is discarded; an invalid phone number or e-mail address stays text without a link.
• The logo is an absolute image address (PNG, light variant) on this server; the e-mail program loads it when the message is read.
• The table has a white background and fixed text colours so that the signature stays legible in an e-mail program’s dark mode.
• Nothing is stored and nothing is sent; the inputs stay in the browser.

Generator

Copy as rich text and paste it into the signature settings of the e-mail program. Programs without rich-text signatures take the plain text.

The company lines below the logo come from the company data above.