",
"css": ".ds-spec-card { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 8px; background: #222425; color: #FCFCFD; } .ds-spec-label { font-family: 'Fragment Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: #787E81; } .ds-spec-value { font-family: 'Neue Haas Grotesk Display Pro', sans-serif; font-weight: 500; font-size: 32px; line-height: 1.1; letter-spacing: -0.01em; }"
},
{
"name": "Top Navigation",
"kind": "nav",
"refersTo": "global-nav",
"description": "Fixed bar, transparent over the hero, translucent dark on scroll; violet CTA right.",
"html": "",
"css": ".ds-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; padding: 0 24px; background: rgba(0,0,0,0.7); backdrop-filter: blur(12px); color: #FCFCFD; } .ds-nav-logo { font-family: 'Neue Haas Grotesk Display Pro', sans-serif; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; } .ds-nav-links { display: flex; gap: 24px; } .ds-nav-links a { font-family: 'Neue Haas Grotesk Display Pro', sans-serif; font-size: 14px; color: #c4c4c8; text-decoration: none; transition: color 180ms cubic-bezier(0.22,1,0.36,1); } .ds-nav-links a:hover { color: #FCFCFD; } .ds-btn-primary { display: inline-flex; align-items: center; height: 38px; padding: 0 20px; border: none; border-radius: 40px; background: #4D1EF7; color: #FCFCFD; font-family: 'Neue Haas Grotesk Display Pro', sans-serif; font-weight: 500; font-size: 14px; cursor: pointer; }"
}
],
"narrative": {
"northStar": "The Machined Object",
"overview": "Bigscreen Beyond is presented the way a watchmaker presents a movement or an optics company presents a lens assembly: a precision object, machined to tolerance, lit on a black bench so the engineering is the argument. The surface is almost entirely black; the hardware and its motion (full-bleed product video, the scroll-scrubbed lens-reveal sequence) carry the visual weight. Type is quiet and exact. A single violet is the only chromatic voice, used like a signal light, never as decoration. The system earns a four-figure price by showing tolerances, not adjectives.",
"keyCharacteristics": [
"Black stage, product as hero, near-zero decorative chrome.",
"One violet signal (#4D1EF7); everything else is an achromatic ramp.",
"Two type voices: Neue Haas Grotesk Display Pro (headlines and reading) and Fragment Mono (measurements and labels).",
"Motion is the reveal (video + scroll-scrubbed sequences), never ornamental transitions.",
"Specificity over adjectives: every claim is a number."
],
"rules": [
{
"name": "The Single Signal Rule",
"body": "Violet appears on a small fraction of any screen, almost always as the one CTA or a single emphasis. The moment it decorates, it stops signaling.",
"section": "colors"
},
{
"name": "The Black Stage Rule",
"body": "Surfaces are black or a near-black tonal step (#222425). Depth comes from tonal layering and the product's own lighting, never from drop shadows.",
"section": "colors"
},
{
"name": "The Caliper Rule",
"body": "Numbers and measurements (107g, 116°, 5120×2560) are set in Fragment Mono. Mono is for data, never for body prose.",
"section": "typography"
},
{
"name": "The Two-Voice Rule",
"body": "Neue Haas Grotesk Display Pro carries both display and body (weight provides the hierarchy); Fragment Mono is reserved for data and labels. Do not introduce a third UI typeface.",
"section": "typography"
},
{
"name": "The Flat Stage Rule",
"body": "Surfaces are flat at rest. If something needs to feel raised, step its tone toward graphite; do not add a shadow.",
"section": "elevation"
}
],
"dos": [
"Do keep the stage black (#000000) and let the product carry the visual weight.",
"Do reserve Signal Violet (#4D1EF7) for one CTA or emphasis per view.",
"Do set every measurement in Fragment Mono; lead claims with the number.",
"Do convey depth by tonal step (#222425 on #000000), not shadow.",
"Do keep the slash-mono kicker as the one deliberate eyebrow system."
],
"donts": [
"Don't make it a generic Shopify storefront: no product-grid clutter, sale badges, banners, or upsell rails.",
"Don't drift editorial-magazine: no display-serif + italic + ruled broadsheet columns.",
"Don't ship AI/crypto gradient slop: no purple-gradient hero, no decorative glassmorphism, no big-number hero-metric template.",
"Don't go gamer-RGB: no neon gradients, aggressive angles, or RGB lighting.",
"Don't use gradient text, side-stripe borders, or drop shadows on cards.",
"Don't let violet decorate. If it isn't signaling the next action or a single emphasis, it shouldn't be violet."
]
}
}