External/open-design

mirror of https://github.com/nexu-io/open-design.git synced 2026-10-27 09:51:12 +01:00

Files

T

0168664403 design-systems: backfill 2.0 package batch 08 (#3790 )

* design-systems: backfill 2.0 package batch 08

* design-systems: fix resend manifest token reference

---------

Co-authored-by: chaoxiaoche <chaoxiaoche@chaoxiaochedeMacBook-Pro.local>

2026-06-06 12:16:04 +00:00

1.5 KiB

Raw Blame History

Shopify Usage

Design System 2.0 package guide for Open Design agents and reviewers.

Read Order

Read this file first to understand the package contract.
Read DESIGN.md for visual intent, constraints, and anti-patterns.
Paste tokens.css into the first artifact <style> block before writing component CSS.
Use components.manifest.json for the compact component inventory; open components.html when exact selectors or states matter.
Inspect preview/ pages when a visual sanity check is useful.

Design Highlights

Dark-first design with deep forest-teal undertones (not pure black)
Ultra-light display typography (weight 330) at monumental scale (96px) creating an ethereal presence
Neon Green (#36F4A4) as the singular high-energy accent against darkness
Full-pill buttons (9999px radius) as the primary interactive shape

Do

Preserve the schema token names exactly so cross-brand switching stays reliable.
Use --accent for primary actions, links, focus states, and one clear focal element.
Reuse component groups from components.manifest.json before inventing new controls.
Treat source/ files as audit evidence for the bundled fixture backfill.

Avoid

Avoid raw hex values outside the copied :root token block.
Avoid redefining Tailwind or design-token values independently of tokens.css.
Avoid claiming original upstream source evidence; this package is based on the curated bundled fixture.
Avoid adding new component recipes that are not represented in components.html or DESIGN.md.