Now playing
3
2 direct · 1 transcode
Living styleguide
Sidecarr system
Everything here is rendered by the same macros the app pages call, so this page cannot drift from real usage. Token values are extracted from the approved mockups; use the controls to retheme live.
Playground
Theme & accent
Roundness
Density
Motion
Text size
Color roles
--sc-color-bg
--sc-color-bg-deep
--sc-color-surface-1
--sc-color-surface-2
--sc-color-surface-3
--sc-color-glass
--sc-color-accent
--sc-color-accent-subtle
--sc-color-success-solid
--sc-color-warning-solid
--sc-color-danger-solid
--sc-color-info-solid
Primary text — muted text — subtle text — accent text
Subtle is the dimmest tone allowed for body copy. The mockups used slate-500 here (3.75:1 on the page color); this is the one systematic color change, lifted to clear 4.5:1.
Hue channel
The mockups color-code every feature. A hue class supplies three steps; one rule set derives the chip fill, border, icon color and glow — in both themes.
accent
emerald
green
teal
cyan
blue
indigo
violet
purple
pink
rose
red
orange
amber
yellow
slate
Glass, pills, avatars, progress
.sc-glass
The house material: 40% slate, 20px blur, a hairline border, 32px radius.
.sc-glass--strong
85% — for overlays such as the Toybox folder.
Continue Watching
3 Streaming
Featured
99.9% Up
65%
Type
Display · 800 · fluid
Front row, every night
Heading · 700
Recently added to your library
Body · 400
Shōgun, Andor and The Bear were added this week. Twenty-four members, five watching now.
Mono · numbers that change
01:42:07 · 18.4 Mbps · 4,812 titles
Micro · 11px floor
Eyebrow label
Button
State machine — idle, loading, success and error share one grid cell, so the width never changes:
Field & form
A real form: native validation, reserved space for messages, 16px inputs so iOS never zooms, and a submit button that morphs through loading to success without changing size.
Title picker
Find something on this server, and say which episode. The search is THE search field as a real combobox over server-rendered rows; the strip under it is what the choice unlocks, with the artwork cloned out of the row that was chosen. Report an Issue and Scene Finder are its two callers. Three titles here, and no watch-history shelf — the real thing carries the whole catalog and the shelf, which has its own specimen above.
-
Civil War
Film · 2024
-
Shōgun
Show · Season 1
-
Fallout
Show · Season 1
No title matches thatTry fewer words.
Chosen
Nothing chosen yet
Filters
One button for a screen's filters, with every row the component has: a single-choice group, a multiple-choice group with counts and Select all / Clear, a group you can search, an on/off, and an action. Rows open beside the panel here and drill in inside the bottom sheet on a phone; the count is how many are off their default.
Loading → ready
Members
24
5 online right now
Library
4,812
38 added this week
Uptime
99.9%
Last restart 41 days ago
Skeleton kit
Card
Glass
Default card
The standard content surface, in the mockups' glass material.
Hover me
Interactive card
Brightens with an accent border on fine pointers. The whole card is one link target, and keyboard focus rings the card.
Variant
Accent edge
A cheap, legible way to mark a category.
A section's own heading row
See everythingThe heading sits above the content with an optional trailing action. Ten page layers had written this row's four declarations under their own names before .sc-section-head was offered on its own; the gap is a component token, because those ten wanted 8, 12 and 16px and each was right.
Page title
The heading at the top of this page is the macro. Every page's <h1> comes from it, with the name's last word in the accent and everything before it in the page's own text colour — Watch Parties, AI Trivia, Now Playing; a one-word name has no "before", so all of Polls takes the accent.
It is a macro and not a convention because a convention drifts: before it there were two accent treatments for display text and half the pages used a tagline instead of their name. It drifted again in size and in shadow, so there is now one treatment and no option to leave it (owner, 2026-09-23) — the hero size and the glow are both gone, the glow back to the dashboard wordmark it came from. What a hero header still does is centre its column, and that belongs to .sc-page-header--hero, not to the title. The one option left is bar, for the small title in a theater layout. There is no second specimen here on purpose: a page has one <h1>, and rendering two would break the contract this page is meant to demonstrate.
Tabs
A real tablist over one panel: aria-selected is the state, the roving tabindex is in the server-rendered HTML so the keyboard contract holds without JavaScript, and Left and Right walk the row. The chosen state also reads aria-pressed, so a row of filter toggles that owns no panel is the same control.
A film row — in All and in Film.
A television row — in All and in TV.
Nothing here.
Seven days.
Thirty days.
rail stands the same tablist on its end down a panel's side (a club's hub): each tab is a RAIL ITEM — the Settings rail's row — with an icon, it says aria-orientation="vertical", and Up and Down walk it too. On a phone it is a row again.
What the club is about.
Its conversation.
Who is in it.
Status badge, tag, rating, service marks
AI powered
Live now
Beta
The badge is the dashboard's System Ready pill and the arena bar's live player count. It does not go above a page title any more: every page header is the title and its lede.
Added
Docs
The
quality variant is on the posters below: it is a translucent scrim plus amber, legible over a picture and nowhere else.
4.5
Lettermarks in each brand's colour, not the real logos: nothing may be fetched cross-origin at runtime and the marks are trademarked (decision 22).
PlexNetflixMaxDisney+Prime VideoApple TV+
Max
Prime Video
Apple TV+
Stats
- day streak
- 5
- accuracy
- 82%
- rank
- Expert
- Score
- 1,240
- Accuracy
- 82%
- Best streak
- 9
- IMDb
- 7.3
- Critics
- 81%
Table
A real <table> at every width — a phone scrolls it inside its own box rather than turning rows into cards, so the header association survives (plan §2.5). A cell's tone only ever agrees with words that already say the same thing.
| Device | Sessions | Direct play |
|---|---|---|
| Apple TV38% of sessions | 412 | Always |
| iPhone31% | 336 | Usually |
| Browser12% | 129 | Rarely |
The grid variant is for stored values (the Database page): a column's type under its name, the key marked, NULL said in words and drawn unlike any value, a secret never printed, one line to a cell.
| id PKTEXT | nameTEXT | joined_onTEXT | usesINTEGER | tokenTEXT |
|---|---|---|---|---|
| m-avery | Avery Quinn | 2024-03-02 | 12 | Hidden |
| m-kai | Kai Fletcher | NULL | 0 | Hidden |
Charts
Drawn from the data at build time — no chart library, and every chart carries the same figures as a real table for anyone who cannot see it.
- This period
- Previous
| Day | This period | Previous |
|---|---|---|
| W1 | 12 | 9 |
| W2 | 18 | 14 |
| W3 | 15 | 16 |
| W4 | 24 | 17 |
| W5 | 21 | 15 |
| W6 | 29 | 19 |
| Day | Sessions |
|---|---|
| Mon | 8 |
| Tue | 6 |
| Wed | 9 |
| Thu | 12 |
| Fri | 19 |
| Sat | 27 |
| Sun | 22 |
Choice, vote, answers
The radio is the target, stretched over the chip by .sc-cover-input — never display: none, which takes it out of the accessibility tree and the tab order together.
Leaderboard
- 1st Avery Quinn9 in a row 1,840
- 2nd Jordan EllisSci-fi specialist 1,610
- 3rd Sam Okafor4 in a row 1,425
- 4th Reese(AI player) 980
YouYour rank #12 · 460
- 1st Avery QuinnMost watched 412
- 2nd Jordan Ellis 388
- 3rd Sam Okafor 301
Roster
Who is in something — a watch party's room, a club's members: an avatar, a name, and what they are to it. The host wears the crown; you are marked in words.
- Jordan EllisHost
- Mira Patel
- Avery QuinnYou
Poster
ONE poster for every grid in the product (decision 19), with the approved hover measured in a browser: the frame lifts over 500ms while the artwork drifts over 700ms, so the picture moves inside its own edges.
-
4KMax Prime Video
Civil War
A journey across a dystopian future America, following a team of military-embedded journalists as they race against time to reach DC before rebel factions descend upon the White House.
-
1080Hulu Disney+
Shōgun
In Japan in the year 1600, at the dawn of a century-defining civil war, Lord Yoshii Toranaga is fighting for his life as his enemies on the Council of Regents unite against him.
-
4KPrime Video
Fallout
The story of haves and have-nots in a world in which there's almost nothing left to have. Two hundred years after the apocalypse, the gentle denizens of luxury fallout shelters are forced to return to the irradiated hellscape their ancestors left behind.
-
4KMax Netflix Prime VideoGodzilla x Kong: The New Empire
Following their explosive showdown, Godzilla and Kong must reunite against a colossal undiscovered threat hidden within our world, challenging their very existence — and our own.
Disclosure
What counts as a session?Insights
Anything played for longer than a minute. Trailers and previews never count.
Why is my library smaller than the server's?
Library access is a per-member setting, not a role permission.
The plain variant, for a run of questions
No panel of its own — adjacent plain disclosures share one hairline, which is what makes an FAQ read as one list.
Prose blocks
The guide pages render TYPED BLOCKS, never markup, so copy can never carry a class or a colour with it (plan §2.6).
Getting a session going
the same
Worth knowing
- Apple TV
- iPhone
- Browser
- Direct play — nothing is being converted
- Transcoding — the server is working
Chat thread
Jordan is typing…
YouSending…
Editable text, upload, thinking
Watches everything twice
Avery Quinn
The file input keeps its box and its focus; what is hidden is its paint.
Reading your history…
Looking at what you finished
Toasts
Notices that slide in under the island, top-trailing, the way macOS banners do. Three on screen and the rest wait their turn; an error, a job or an undo goes to the front; point at one and its clock stops; on a phone, flick it up or off the edge. The stack itself is in the layout of every page, so these only ask it for one — and a notification obeys Settings › Notifications, where a toast for "New message" can become a pulse on the bell, or nothing but the count.
What an action or an undo did is written here.
Share and copy
The share sheet is the one shared menu, led by what is about to be shared and holding only the rows this browser can honour — the platform's own sheet where there is one, then the clipboard. The payload rides on the button, so a page needs no script of its own. A copy lands where you pressed: the button morphs to "Copied" and the live region says which value; only when the control is gone (the sheet has closed) does the outcome arrive as a toast.
Read at click time: https://your-server.sidecarr.app/join/ABCD1234
Spot illustrations
One motif family, unique per meaningful scenario (plan §2.9), inline SVG that themes with the page rather than an image that cannot.
Nothing newly added
library
No matches
search
Nothing in the palette
results
Nothing saved
watchlist
Nothing playing
playing
No years yet
history
Nothing watched
watched
No moment matches
scenes
No subtitle track
captions
No parties yet
parties
No clubs yet
clubs
Nobody matches
members
Nobody arrived
guests
Waiting for players
players
Nothing said
chat
All caught up
notifications
No open polls
polls
No questions
questions
No scores yet
leaderboard
No bounties
bounties
No hot takes
takes
Nothing picked
picks
Nothing revealed
spoiler
No year yet
wrapped
No medals
awards
No invites out
invites
No roles
roles
Nobody on a tier
tiers
No invoices
billing
Nothing in the log
audit
Nothing posted
updates
Nothing connected
services
No keys issued
keys
No server yet
servers
Nothing in the table
database
Nothing configured
settings
Nothing requested
requests
No numbers yet
insights
No lists
lists
Nothing dropped
uploads
Page not found
lost
No permission
denied
You are offline
offline
It did not load
failed
Something went wrong
error
Calling cards
A 112 × 32 emblem that goes wherever a member's name goes — the signed-in member's is in the header of this page, left of the island. A card is a key on the member's row, never a blob of markup: the plate below is the same macro the header calls, and a key nobody knows falls through to the plain plate.
No Card
none
A plain plate that follows the theme.
Captain America
cap
The shield is thrown onto the plate, and slides on when you point at it.
Iron Man
iron
A triangular arc reactor spins up and fires a repulsor charge through faceted armor.
Loki
loki
Gold horns rise over the edge; the Tesseract turns beside the name.
Doctor Strange
strange
A mandala turning backwards, and the Time Stone keeping time.
Thanos
thanos
Six stones drift across the plate on staggered delays.
Void
void
A violet spark circles a black well around the name.