3ddruckkalkulation/DESIGN.md

version, name, description, colors, typography, rounded, spacing, components

version	name	description	colors	typography	rounded	spacing	components
alpha	CANCOM Simple Signage	Digital-Signage-Plattform für CANCOM: Admin-UI zur Verwaltung von Screens, Playlists, Medien und Standorten sowie ein kioskartiger Player-Vollbildmodus.	primary primary-hover header header-dark surface surface-dark bg bg-dark text text-dark border border-dark muted muted-dark online offline badge-admin badge-superuser badge-user newsticker-bg newsticker-text card-header-light card-header-dark input-bg-dark #DA002D #B00024 #2B2F36 #0F1720 #FFFFFF #15181D #F4F6F8 #15181D #212121 #E5E7EB #D9DEE3 #2B3440 #6B7280 #9AA4B2 #2FB344 #D63939 #DA002D #8B5CF6 #3B82F6 #DA002D #FFFFFF #EEEEEE #1A1E24 #11161D	body heading heading-lg heading-md player-clock newsticker-track mute fontFamily fontSize fontWeight lineHeight Segoe UI, Arial, sans-serif 16px 400 1.5 fontFamily fontWeight Segoe UI, Arial, sans-serif 600 fontFamily fontSize fontWeight Segoe UI, Arial, sans-serif 1.75rem 600 fontFamily fontSize fontWeight Segoe UI, Arial, sans-serif 1.25rem 600 fontFamily fontSize monospace 1.1em fontFamily fontSize fontWeight Segoe UI, Arial, sans-serif 16px 400 fontFamily fontSize Segoe UI, Arial, sans-serif 0.82rem	card button small logo-box full 16px 20px 4px 12px 9999px	xs sm md lg xl xxl gutter page-top footer-padding-y footer-padding-x card-header-padding card-margin-bottom 4px 8px 16px 24px 32px 64px 24px 24px 0.65rem 1.5rem 16px 64px	card card-dark card-header card-header-dark btn-primary btn-primary-hover action-button online-badge offline-badge newsticker-bar overlay-button backgroundColor borderColor borderLeft rounded {colors.surface} {colors.border} 6px solid {colors.primary} {rounded.card} backgroundColor borderColor {colors.bg-dark} {colors.border-dark} backgroundColor {colors.card-header-light} backgroundColor {colors.card-header-dark} backgroundColor textColor rounded {colors.primary} #FFFFFF {rounded.button} backgroundColor {colors.primary-hover} backgroundColor textColor rounded fontWeight {colors.surface} {colors.text} {rounded.button} 600 backgroundColor textColor {colors.online} #FFFFFF backgroundColor textColor {colors.offline} #FFFFFF backgroundColor textColor height {colors.newsticker-bg} {colors.newsticker-text} 40px backgroundColor textColor rounded fontWeight boxShadow {colors.surface} {colors.text} {rounded.button} 600 0 2px 8px rgba(0,0,0,0.08)

Overview

CANCOM Simple Signage is a corporate digital-signage platform. The UI follows a keyadmin dashboard aesthetic: clean, card-based layouts with a dark header bar, a red navigation bar (CANCOM brand red #DA002D), and generous white space. The tone is professional, trustworthy, and functional — suitable for a B2B enterprise environment.

The admin UI manages screens, playlists, media uploads, and multi-site locations. The player UI is a fullscreen, kiosk-style view with no browser chrome, designed for unattended TV/monitor displays.

Two themes are supported: light (default, data-bs-theme="light") and dark (data-bs-theme="dark"), persisted via localStorage("signage-theme").

Colors

The palette is rooted in CANCOM's corporate red and high-contrast neutrals.

• Primary (#DA002D): CANCOM signature red. Used for navigation bar, button backgrounds, card left-border accent, form-check focus rings, newsticker bar, and all primary interactive elements. The single most important action per screen uses this color.
• Primary Hover (#B00024): Darkened red for button hover/focus states.
• Header (#2B2F36 / #0F1720 Dark): Dark surface for top header bar. White text and icons on this surface.
• Surface (#FFFFFF / #15181D Dark): Card backgrounds and content areas.
• Background (#F4F6F8 / #15181D Dark): Page-level background.
• Border (#D9DEE3 / #2B3440 Dark): Card borders, table borders, form borders, list-group dividers.
• Muted (#6B7280 / #9AA4B2 Dark): Secondary text, captions, metadata, placeholders.
• Online/Offline: Green (#2FB344) for online status badge, Red (#D63939) for offline.
• Role Badges: Red for Admin, Purple (#8B5CF6) for Superuser, Blue (#3B82F6) for User.
• Newsticker: Red bar (#DA002D) with white text.

States

Interactive elements use the following hover/active color shifts:

• Primary button hover: primary-hover (#B00024)
• Secondary/outline buttons: inherit background, use border with slight darkening
• Dark-mode form controls: input background #11161D

Typography

The typography strategy uses the system font stack Segoe UI for all text, ensuring consistent rendering across Windows-based signage players.

• Body: Segoe UI Regular at 16px base. Line-height 1.5 for readability. This is the default for all body text, form labels, table cells.
• Headings: Segoe UI Semi-Bold (600). Three levels: page-title (1.75rem), card-title (1.25rem), and section headings.
• Player Clock: Monospace font at 1.1em for the live clock in the newsticker bar.
• Newsticker Track: Same as body (16px, Segoe UI), scrolling horizontally in the red bar.
• Footer/Muted Text: 0.82rem for copyright and secondary information.
• Button Labels: 1rem (action buttons), 1.05rem (voice agent button), both weight 600.
• Code/Monospace: Used for IP addresses and file listings in info tabs.

Layout & Spacing

The layout follows a single-column fluid model with a fixed max-width container (1320px) on the admin pages.

Layout Structure

Admin pages follow a two-tier horizontal bar layout:

1. Upper bar (brand-surface): Logo, site dropdown, theme toggle, user menu
2. Lower bar (nav-surface): Red (#DA002D) navigation with action buttons

Player pages have no layout bars — the entire viewport is used for media display.

Spacing Scale

A strict spacing scale is used with 4px as the base unit:

• xs (4px) — tight gaps, micro-adjustments
• sm (8px) — tight gaps between related elements
• md (16px) — standard padding inside cards, gaps between buttons
• lg (24px) — generous card internal padding, gap between sections
• xl (32px) — major section spacing
• xxl (64px) — spacing between screen cards

Card Layout

Screen management cards have:

• Internal padding: 1rem (16px) on body
• Card-header padding: 1rem (16px) left, with font-weight 600
• Gap below each card: 64px (mb-6)
• Tab content offset: 1rem (16px) top padding

Grid Areas

The playlist row uses a fixed grid: 28px 1fr 90px 80px 90px 32px for checkbox, name, type badge, size, delete button, drag handle.

Elevation & Depth

Elevation is conveyed primarily through border distinction rather than shadows. Cards use a 1px solid border plus a distinctive 6px left-border accent in primary red (#DA002D). This provides clear visual separation without heavy drop shadows.

• Cards: 1px border + 6px left red accent + 1rem border-radius
• Logo preview boxes: 2px dashed border with 0.75rem border-radius
• Player overlay buttons: Light box-shadow (0 2px 8px rgba(0,0,0,0.08)), elevated to 0 4px 12px on hover
• Willkommensseite card: Elevated with 0 20px 60px rgba(0,0,0,0.08) shadow for premium feel

In dark mode, depth is achieved through tonal layering: card backgrounds match the page background, but card headers use a slightly lighter/different shade (#1A1E24) to create subtle hierarchy.

Shapes

The shape language is defined by consistent generous rounding.

• Cards: 1rem (16px) border-radius with 1rem inner border-radius
• Buttons (admin): Tabler default rounded (approximately 4px)
• Player action buttons (custom URL + voice agent): 20px border-radius for a pill-like appearance
• Logo preview boxes: 0.75rem (12px) border-radius
• Interactive overlays: 20px border-radius on the back button
• Small avatars/badges: Fully rounded (9999px)
• Form controls: Tabler default (approximately 4px)

Consistency Rule

All interactive player buttons (custom URL, voice agent, overlay back button) share identical shape: 20px border-radius, white background, black text, font-weight 600. This ensures visual consistency across all floating buttons on the player screen.

Components

Header (brand-surface)

Dark background (--ccm-header / #0F1720 in dark mode). Contains:

• Logo: CANCOM SVG (height: 1.85rem, width: auto)
• Wordmark: Two-line (brand name + subtitle), 0.92rem, white
• Site Dropdown: btn-outline-secondary style
• Theme Toggle: Square button (2.5rem), moon/sun icon
• User Dropdown: Email + role badge (Admin=red, Superuser=purple, User=blue)

Navigation Bar (nav-surface)

Red background (--ccm-primary). Contains white outline buttons (btn-white):

• Active state: white background, red text, inset shadow
• Icons: 1rem, vertically centered at -2px
• Gap: 8px between buttons, 8px vertical padding
• Used on admin, customer, dashboard, priority pages

Cards

• rounded: 1rem, border: 1px solid var(--ccm-border)
• border-left: 6px solid var(--ccm-primary)
• Header: background: #eee (light) / #1a1e24 (dark), font-weight 600
• Body contains Tabler tabs (6 tabs for screen cards)
• Tab background matches card surface; tab link text uses muted color; active tab uses surface background

Player Media Elements

• img, video, iframe: fullscreen (100vw × 100vh), fixed position, centered via top:50%; left:50%; transform:translate(-50%,-50%)
• Only one element visible at a time (display:none default)
• object-fit: contain for images and video
• Background: pure black (#000)

Action Button (Custom URL / Voice Agent)

The player supports floating action buttons with identical styling:

• background: #fff; color: #000; border: none; border-radius: 20px; font-size: 1rem; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.08)
• 9 fixed positions: top/middle/bottom × left/center/right
• Bottom positions offset 56px from bottom when newsticker is active, 16px otherwise
• Two target behaviors: overlay (iframe with back button) or redirect (direct navigation)

Voice Agent Button

Same base as action button plus:

• Integrated animated bars (5 bars, staggered delay 0–0.4s, 0.6s wave animation)
• Typewriter tagline: 11 multilingual phrases, character-by-character (50ms + 30ms random), 2.5s pause, 0.8s fade-out
• Optional DVA image (200px, aspect-ratio 648/596) above button
• Min-width: 280px, height: 56px, gap: 12px between icon and text

Overlay (iframe Modal)

• Fullscreen (position:fixed; inset:0; z-index:99999; background:#000)
• iframe fills entire viewport
• Back button positioned at the same location as the clicked trigger button (9 positions)
• Closing the overlay resumes player (playNext())

Newsticker

• Fixed bottom bar: height:40px; background:#DA002D; color:#fff; z-index:10000
• Scrolling text: animation: ticker-scroll 40s linear infinite
• Live clock: monospace, right-aligned, hh:mm:ss, updated every second

Online/Offline Status

• Online: green filled button (btn-success), not interactive
• Offline: red filled button (btn-danger), not interactive
• Tooltip on hover: browser, resolution, IP, last seen timestamp
• Determined by heartbeat file mtime (< 60s)

Charts (Admin Dashboard)

• Sparkline area charts using ApexCharts
• Height: 32px, width: 100%, stroke width: 1.5, curve: straight
• Color: primary red (#DA002D), fill opacity: 0.25
• No tooltip, no animation

Form Controls

• Switches use primary red for checked state
• Focus ring: 0 0 0 0.2rem rgba(218, 0, 45, 0.25)
• Dark mode: background #11161D, text #E5E7EB, border #2B3440

Dropdown Menus

• Hover/focus: background: #e9ecef (light) / #3a3f45 (dark)
• Active item: primary red background with white text

Alerts (Dark Mode)

• Danger: background #2d0d0d, text #f0a0a0, border #4a1a1a
• Success: background #0d2b1d, text #a3d9b1, border #1a4730

Do's and Don'ts

• Do use primary red (#DA002D) only for the most important interactive elements and the nav bar
• Do maintain the two-tier header pattern (dark brand bar + red nav bar) on all admin pages
• Do keep player pages completely chromeless — no headers, navs, or footers
• Don't add shadows to cards; use border + left accent instead
• Don't use more than one red accent per card (the 6px left border is sufficient)
• Don't mix corner radii: cards use 1rem, player buttons use 20px — keep each category consistent
• Do set data-bs-theme synchronously before rendering to prevent dark-mode flash
• Do persist theme preference in localStorage("signage-theme")
• Don't use emojis in the UI; use Tabler Icons (ti-*) consistently
• Do respect the 9-position system for all floating player buttons
• Do offset bottom-positioned buttons 56px above the newsticker bar
• Do hide all media elements by default; show only the active one
• Do ensure WCAG AA contrast ratios for all text-on-background combinations