ethiele/3ddruckkalkulation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
3ddruckkalkulation/DESIGN.md

13 KiB
Raw Permalink Blame History

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
Reference in New Issue View Git Blame Copy Permalink