Design system

Daily Toybox

The look of dailytoybox.com: one stylesheet, one data file, one logo. This page is built from the same styles.css and games.json as the hub, so what you see here is what ships.

Daily Toybox is made by Synergy and built on Synergy's principles: 47 findings about how people see, decide, remember and act, each with how well it holds up. Where one shapes a choice here, that section says so under "The research", and Principles lists them all with where they're built in. Like Synergy's, this system is where the evidence has us today.

Commitments

• The games are the color. The hub is slate and olive. Each game's own color shows only in its icon and glow, so eleven games read as one family, not eleven ads.
• One interactive color. Olive means "you can press this": Play buttons, the active tab, the selected filter, focus rings. Nothing decorative is olive except the logo's lifted tile.
• Calm, then a little play. Flat panels, thin strokes, one soft glow. Motion is short and only on hover or focus.
• Website, not app. The hub has no app, no accounts and no app icons. Each game has its own apps; the hub only links to them.
• Tokens, not numbers. Every color, size, radius, shadow and timing comes from a token in styles.css.

How this page stays true

• Token values and their descriptions are read from styles.css as the page loads.
• Contrast ratios are calculated in your browser from those values.
• Game icons and colors are read from games.json.
• Every component example is real markup using the real classes; its code sample is copied from the example itself.

Principles

The Synergy principles this system leans on, and where each one is built in. Each name opens its page on synergyprod.com, with the evidence and what Synergy does about it.

Considered, not used

Logo

A tray of tiles with one lifted out, in olive. The tiles are the games; the lifted tile is today's. It says "one a day" in one shape, and it works at any number of games: the tile count is fixed at eight, not tied to the network.

Lockups

Color versions

Sizes

Below 24px the full mark loses its gaps, so the favicon is a separate pixel-snapped drawing on a 16-pixel grid: 3px tiles, 1px gaps, the lifted tile square (a tilt can't show at that size). favicon.svg switches its tiles to slate on light browser tabs.

Construction

• A 3×3 grid of 14-unit tiles with 3-unit gaps and a 3-unit corner radius; the mark's box is 52×62.
• The top-right tile is lifted out: same size, raised to sit above the grid, rotated 14°, in olive. Its slot stays empty.
• Clear space: one tile (14 units) on every side. Minimum size: 24px tall for the full mark; use the favicon drawing below that.

Don't

Color

Slate surfaces, off-white text, one olive accent. Values below come straight from styles.css.

Surfaces and text

Brand

Game colors

Set per game in games.json (color) and applied as --game on each card. They tint the icon, the mini icon well and the art glow, never buttons or text.

Contrast

Calculated live from the tokens. Body text needs 4.5:1; large text and icons 3:1.

Typography

Geist for everything people read. Geist Mono for numbers that change or line up: the countdown, filter counts, the app line, step numbers, captions on this page. Both load from Google Fonts with display=block so there is no flash of the fallback font.

Scale

Weights and tracking

Rules

• Uppercase with --tracking-caps only for short labels: tabs, buttons, filter chips, section heads, the Practice link.
• Sentence case everywhere else, including card titles and Today's pick.
• Tabular numbers (.mono) for anything that ticks or sits in a column.
• Paragraphs use text-wrap: pretty, headings balance, so no single word is left on a line.

Space, radius, depth

Spacing

A 4px base. Use the token, not the number.

Radius

Elevation and glass

Depth is mostly strokes and a two-step panel gradient (--color-panel-raised to --color-panel). Shadows are for things that float: the top bar, Today's pick, a hovered card. The top bar is the only glass surface (--glass, --glass-blur).

Motion

• Cards lift 3px and their icon scales to 1.07 on hover or keyboard focus.
• Buttons nudge down 1px when pressed.
• Nothing moves on its own except the countdown digits.
• With prefers-reduced-motion, every transition and animation is off.

Layout

Every layout is checked at 390px wide (a phone) and on desktop. No horizontal scrolling at any width.

Game icons

Each game has a hub icon, owned by the network and used only here (the standard's section 7a). The game's own logo never appears on the hub.

• An SVG on a 48×48 grid: stroke="currentColor", round caps and joins, no text.
• Stroke 3 at 48px, 2.6 on card art (56px), 3.4 in the mini well (18px), 2.4 in Today's pick (92px), so the line looks the same weight at every size.
• Fills only for small dots or one accent cell.
• Colored by the game's color through --game.
• Stored as inner markup in games.json (icon).

Components

All defined in styles.css. Open "Code" under each one for the exact markup.

Logo link

.logo, .logo-mark (tiles and today's tile colored by --logo-tiles and --logo-today), .logo-word. Add .logo--mono for one color.

Top bar

.topbar (sticky wrapper) > .bar (glass). Tabs are links; the current one has aria-current="page" and an olive underline. One outline .bar-link on the right for an off-site destination.

Buttons and links

• .btn.btn-play: the primary action, olive with slate text. Uppercase. One per card.
• .btn-lg: sentence case, taller. Only in Today's pick.
• .bar-link: outline, for leaving the site.
• .link-caps: secondary text link (Practice). .link-caps.is-empty keeps its space when a game has no practice edition, so Play buttons line up.

Filter chips

.filters > button.chip with aria-pressed. Counts in .count (mono). The build script writes the counts from games.json.

Tag, pill, date

.tag labels a category on card art. .pill carries a status with a small icon. .date + .dot is the "today" line.

Today's pick

.spot with .spot-art (four .corner marks around the icon), .spot-info (.eyebrow, title, blurb, .pill) and .spot-side (countdown in .mono.timer, a .btn-lg). Stacks below 760px. The game changes every Pacific day; see Behavior.

Game card

.card with --game: .art (icon + .tag), .meta (.mini icon well, name, .domain), .blurb, .card-foot (.apps, Play, Practice). The second example has no practice edition, so its Practice link is an invisible placeholder.

Steps

.steps > .step with a mono .n.

Section head

"Part of Daily Toybox" badge (for game sites)

Each game puts this in its footer (STANDARD.md section 9). It carries its own colors so it works on light and dark games. Replace SLUG with the game's slug.

Game detail page

Every game has a page at /games/<slug>, generated from games.json: breadcrumb, game header, how to play, questions, a phone screenshot, a fact list, and more games. The whole card links to it; Play opens the game's /daily page and Practice its One Page Toys edition. It's the one place on the hub where a game's own logo appears, because it shows one game at a time.

Last Bend

A daily tower defense puzzle.

Play today's puzzlePractice

.crumbs (with aria-current on the last item), .game-hero (a .spot-art panel holding .game-logo, the game's own 180px icon, then .game-hero-body). Stacks below 760px.

.how-list: an ordered list numbered in mono by CSS counters, three or four steps from howTo in games.json. .facts: a definition list of label and value pairs.

.faq: native details/summary, so it works without JavaScript and with a keyboard. The same questions are in the page's FAQ structured data. .shot: a phone screenshot in a rounded frame, 390×844 aspect, lazy-loaded.

Footer

footer.site-footer: the logo, one line about Synergy, and every game's name as a link (from games.json).

Behavior

• Midnight Pacific. Every game rolls over at midnight in America/Los_Angeles, so the hub's date, Today's pick and countdown all use that clock, whatever the visitor's time zone. The countdown is correct on daylight-saving changeover days.
• Today's pick is the card at index (Pacific day number mod the number of games), so it changes once a day, the same for everyone. It copies the card's color, icon, name, blurb, tag and Play link.
• Filters hide cards whose data-category doesn't match. The chip's state is aria-pressed.
• Analytics. Any link with data-track fires the network's frozen outbound_click event with destination (hostname) and link_id: hub_play_<slug>, hub_practice_<slug>, hub_pick_<slug>, and on detail pages hub_detail_play_<slug> and hub_detail_practice_<slug>. The footer's Synergy link is footer_synergy. Links to One Page Toys' daily practice page are topbar_practice, how_practice and footer_practice. GA4 loads only on dailytoybox.com, skips automated browsers, and stays off until window.GA_ID is set.
• Nothing fake. No player counts, streaks or "friends online" on the hub: it has no data to back them, so showing them would be a lie.
• No app. The hub has no manifest, no install prompt and no app icons. Each card's app line switches from "soon" to store links when a game's app is live (apps in games.json).

Voice and copy

• Plain and short. "Small games. One a day." Say what a thing does; no hype, no filler.
• No em dashes anywhere: copy, titles, meta, alt text. Use a full stop, colon or comma.
• Synergy is the maker. Never a person's name in public copy, and no mention of AI tools.
• Game blurbs come from each game's own site and live in games.json. One or two sentences, the same for everyone.
• Practice means the unlimited edition on One Page Toys; the top bar's Practice button opens onepagetoys.com/daily-practice, every practice edition on one page. Play means today's daily.
• Synergy links point at synergyprod.com/principles for the why behind a design choice, never a copy of it here.
• Dates read "Thursday, November 12". Times are a 24-hour countdown HH:MM:SS.

Accessibility

• Contrast is checked live in Color; body text pairs pass 4.5:1.
• Every interactive element shows --focus-ring (2px olive) on keyboard focus. Cards lift on :focus-within as well as hover.
• Filter chips are buttons with aria-pressed; the tabs use aria-current.
• Decorative SVGs carry aria-hidden="true"; the logo link has an aria-label.
• Reduced motion turns off every transition and animation.
• Touch targets are at least 34px tall; primary buttons 38 to 48px.

Files and workflow

Add a game

1. Add it to games.json: slug, name, category, a bright color, domain, play URL, practice URL or null, its one-line blurb, three or four howTo steps, and a hub icon drawn to the rules in Game icons.
2. Add games/assets/<slug>-icon.png (its 180px icon) and <slug>-screen.jpg (a 390×844 phone screenshot of the live game with first-visit help closed and nothing started, saved 600px wide as JPEG).
3. Run python3 scripts/build-hub.py. It updates the cards, filter counts, footer, JSON-LD, the game's detail page and the sitemap.
4. If the share image should show it, add its tile to scripts/assets/og.html, run scripts/build-assets.sh, and bump og.png?v= in the build script.
5. Check this page's icon gallery and color list (they update by themselves), then follow the launch checklist in STANDARD.md.

Change a token or component

1. Edit styles.css. Keep the comment beside a token up to date: this page shows it as the description.
2. Run python3 scripts/build-hub.py so the stylesheet's cache-busting version changes.
3. Check the hub and this page at 390px and on desktop, then push.

Changes

• 2026-11-12. Game detail pages: breadcrumb, game header with the game's logo, how-to list, phone screenshot, fact list, FAQ.
• 2026-11-12. Linked to the Synergy principles: a Principles section and "The research" under each part.
• 2026-11-12. First version. Slate and olive look; the "one tile lifted out" logo; eleven games; this page.