Design standard

Every plugin looks like part of Viswoo. The panel draws the standard tabs (Settings, Screens, Preview); the pages you write use the SDK kits. validate and the server reject packages without the kits; the rest is checked during review with the list below.

Panel tab and public page: viswoo-ui.css

<link rel="stylesheet" href="viswoo-ui.css" />

The kit provides the panel’s colours, fonts (Onest for text, Bricolage Grotesque for headings) and components. Light and dark themes come from html[data-theme]; the bridge sets it and updates it when the panel theme changes. The example below is live and follows this page’s theme.

Class	Use
vz-stack, vz-row, vz-grid	Vertical stack, horizontal row, auto-wrapping grid
vz-card, vz-card-header	Section card and header (h2 + description p)
vz-button, vz-button-primary, vz-button-ghost, vz-button-sm	Buttons; one primary button per page
vz-field, vz-label, vz-input, vz-select, vz-textarea, vz-hint, vz-error	Form field
vz-table-wrap, vz-table	Table; scrolls horizontally on narrow screens
vz-badge (-ok, -warn, -danger, -live)	Status badge. -live (amber) is only for “on air”
vz-alert (-ok, -warn, -danger)	Alert box
vz-stat, vz-stat-label, vz-stat-value	Number box
vz-empty, vz-empty-title, vz-empty-text	Empty state
vz-muted, vz-small, vz-sr-only, vz-code, vz-code-input	Helpers

Rules:

• Colours, fonts and radii come from the kit. Raw colours are only for content (e.g. a wheel slice colour).
• Every data section has loading, empty, error and no-permission states. Errors are turned into readable text from error.code (Error codes).
• When context.setupComplete is false, your tab shows a warning that sends the user to Settings.
• Writes check the role (context.role; writing starts at editor). Work every role does, such as the till, is kept apart from editing.
• No horizontal overflow at 390 px; visible focus rings; aria-label on icon buttons.
• Texts in Turkish and English (context.language); dates, numbers and money formatted with Intl.
• Call Viswoo.panel.ui.resize(...) when the page height changes.

Screen view: viswoo-screen.css

<link rel="stylesheet" href="viswoo-screen.css" />

pack inlines the kit and fonts into the view. The kit targets LG webOS 3.x (Chromium 38): no CSS variables, prefixed flexbox, sizes in vmin. The default background is navy; use body.vz-light for a light one.

Class	Use
vz-screen	Full-screen container with a 5% safe area (some TVs crop edges)
vz-flex, vz-center, vz-column, vz-grow	Prefixed flex helpers
vz-title, vz-subtitle, vz-text, vz-accent	Title, subtitle, text (at least 2.6vmin), accent
vz-cta	Touch call-to-action button
vz-panel, vz-qr, vz-code, vz-overlay	Box, QR frame, large code, full-screen result layer
body.vz-light	Light background

Rules:

• Written in ES5; the view is a single file of at most 512 KB (Screen view).
• Readable from 3 metres: text at least 2.6vmin, high contrast, calm and limited motion.
• Touch is detected with context.touch; without touch, interaction moves to the phone (QR).
• The layout holds in landscape and portrait.
• Offline, the view still opens; call fails with plugin.offline and a calm message is shown.

Package images

• Store icon: 256 px square PNG.
• With a screen view, at least one TV image (16:9) taken from the real view.
• Menu icon from the list.

Review checklist

• viswoo-plugin validate passes
• Settings form from the schema; critical fields required, server-only fields x-viswoo-visibility: "server"
• Own tab only for special work; kit classes; loading, empty, error, no-permission and setup-incomplete states
• Light/dark theme, 390 px, keyboard and screen reader
• TR/EN texts; no personal data, or a justified need
• Screen view in ES5, safe area, readable text, with and without touch, landscape and portrait, offline
• TV image taken from the real view