ONCE — Software Product Showcase

---
version: alpha
name: ONCE — Software Product Showcase
colors:
  primary: '#0064E6'
  primary-text: '#FFFFFF'
  supporting-text: '#C2F6FF'
typography:
  product-copy:
    fontFamily: Family, serif
    fontSize: 32px
    fontWeight: 700
    lineHeight: 41.6px
  legal:
    fontFamily: Inter, sans-serif
    fontSize: 12.8px
    fontWeight: 400
    lineHeight: 19.2px
---

## Overview
A deliberately compact software-product directory. A small centered scribble mark introduces two text-first product cards, followed by a video poster and a quiet legal footer. Captured on October 5, 2026; the screenshot records the initial static video state, not playback.

## Colors
Cover the entire canvas in saturated blue (#0064E6). Use white for the dominant product text and pale cyan (#C2F6FF) for the mark and supporting legal copy. The palette comes from the source CSS and computed text styles. Card outlines are faint against the blue; do not replace them with solid white surfaces.

## Typography
Use the expressive Family serif for the product cards, with bold underlined names noticeably larger than the explanatory copy. The measured desktop card copy is 32px, weight 700, with 41.6px leading. Names and small raised version badges use their own child styles; do not apply the parent size indiscriminately. The legal footer contrasts with Inter at 12.8px and 19.2px leading. Preserve natural wrapping rather than squeezing the text to fit one line.

## Layout
At the inspected 1440px desktop width, the content region measures approximately 976px and is centered. The logo has generous space above and below. Two equal cards sit side by side, each roughly 462px wide, with about 51px between them. Desktop card padding is 51.2px. The video poster spans the content width below the cards. At 390px, the cards stack vertically with roughly 32px outer margins and smaller type and padding. The mobile capture verifies the opening viewport, not every breakpoint; no exact breakpoint threshold was inferred. The full desktop screenshot measures 1440 by 1476px.

## Elevation & Depth
Keep cards almost flat: fine translucent borders, not heavy filled panels. Reserve noticeable depth for the darker video poster, whose soft shadow separates it from the continuous blue canvas. The white circular play affordance provides a clear central focal point.

## Shapes
Use softly rounded rectangular cards; the sampled desktop radius is 12.8px. Tiny outlined version pills sit beside the underlined titles. Contrast this restrained geometry with the hand-drawn circular scribble logo. The video retains its wide rectangular aspect ratio and rounded corners.

## Components
The opening brand mark is centered without a conventional navigation link row. Product cards contain an underlined name, raised compact version badge and a short benefit description, with the whole card acting as a link. Keep the two cards equal-height on desktop while allowing content-driven heights when stacked. The wide video poster sits beneath the products, with a large circular play button. A small centered two-line legal footer closes the composition. No homepage pricing table or sign-in/sign-up form was present among the inspected visible links; product destinations are separate pages and were not collected in this reference.

## Do’s and Don’ts
Preserve the spacious logo-to-card rhythm, saturated canvas and strong serif hierarchy. Use original brand artwork and copy when adapting. Keep text contrast and keyboard focus clear; the capture is not a full accessibility audit. Do not add a busy navigation bar, extra marketing sections or generic white cards that erase the reference’s compact character. Do not infer hover behavior, animation timing or video content from the static poster. Maintain readable mobile wrapping and avoid fixed desktop card widths on narrow screens.