diff --git a/.github/workflows/bake-plugin-previews-pr.yml b/.github/workflows/bake-plugin-previews-pr.yml index f3ad8bb4a..840666298 100644 --- a/.github/workflows/bake-plugin-previews-pr.yml +++ b/.github/workflows/bake-plugin-previews-pr.yml @@ -1,14 +1,12 @@ name: bake-plugin-previews-pr -# Pre-merge bake for SAME-REPO pull requests (spec slice 2 — the coupling fix). -# When an internal PR changes a plugin's preview source (or the bake recipe), -# re-render the affected previews, publish the immutable clips to R2, and commit -# the manifest update INTO THE AUTHOR'S BRANCH, so the manifest change rides with -# the code change in the same PR and reverts atomically — instead of arriving -# later as a detached bot PR. +# Low-privilege pre-merge bake validation for plugin preview changes. # -# Forks are intentionally excluded: a `pull_request` from a fork has no secrets, -# so fork manifests are refreshed post-merge by bake-plugin-previews.yml. +# This workflow intentionally does not receive R2 credentials, a write-capable +# token, or a manifest push step. It may execute PR-head preview code because it +# runs with read-only repository permissions and no secrets; the secret-bearing +# upload/review PR path stays in bake-plugin-previews.yml after merge, and the +# release writeback stays in bake-plugin-previews-release.yml. on: pull_request: @@ -18,7 +16,7 @@ on: - 'scripts/bake-plugin-previews.mjs' permissions: - contents: write # push the manifest commit back to the PR head branch + contents: read concurrency: group: bake-plugin-previews-pr-${{ github.event.pull_request.number }} @@ -27,78 +25,30 @@ concurrency: jobs: bake: name: Bake plugin previews (pre-merge) - # Same-repo only — a fork PR cannot safely receive the R2/push secrets. - if: ${{ github.event.pull_request.head.repo.full_name == github.repository }} runs-on: ubuntu-24.04 timeout-minutes: 90 steps: - name: Checkout PR head uses: actions/checkout@v6.0.2 with: - ref: ${{ github.event.pull_request.head.ref }} + ref: ${{ github.event.pull_request.head.sha }} fetch-depth: 0 - # Token that can push back to the PR branch. PREVIEW_BAKE_TOKEN (PAT/ - # app) also lets the pushed commit re-trigger CI; GITHUB_TOKEN can push - # but its commits do not start new runs. - token: ${{ secrets.PREVIEW_BAKE_TOKEN || github.token }} - - - name: Loop guard — skip the bake bot's own manifest commit - id: guard - # A `pull_request` path filter evaluates the PR's CUMULATIVE diff, so the - # original plugin change keeps this workflow path-eligible even after our - # commit only touches data/plugin-previews/**. Without a guard the manifest - # commit re-triggers another bake (and loops). Note: head.user.login is the - # head-repo OWNER, not the commit author, so check the actual head commit - # author email instead. The head SHA goes through env (never interpolated - # into the script body) to avoid script injection. - env: - HEAD_SHA: ${{ github.event.pull_request.head.sha }} - run: | - AUTHOR="$(git log -1 --format='%ae' "$HEAD_SHA")" - echo "head commit author: $AUTHOR" - if [ "$AUTHOR" = "bot@open-design.ai" ]; then - echo "skip=true" >> "$GITHUB_OUTPUT" - echo "head commit is the bake bot's manifest commit — skipping to break the loop" - else - echo "skip=false" >> "$GITHUB_OUTPUT" - fi - name: Setup workspace - if: ${{ steps.guard.outputs.skip != 'true' }} uses: ./.github/actions/setup-workspace - - name: Render previews + publish clips to R2 - if: ${{ steps.guard.outputs.skip != 'true' }} + - name: Render previews without publishing uses: ./.github/actions/bake-previews with: - upload: 'true' - r2-access-key-id: ${{ secrets.CLOUDFLARE_R2_REPOSITORY_ASSETS_AK }} - r2-secret-access-key: ${{ secrets.CLOUDFLARE_R2_REPOSITORY_ASSETS_SK }} - r2-bucket: ${{ secrets.CLOUDFLARE_R2_REPOSITORY_ASSETS_BUCKET }} - r2-endpoint: ${{ secrets.CLOUDFLARE_R2_REPOSITORY_ASSETS_URL }} + upload: 'false' - - name: Commit refreshed manifest into the PR branch - if: ${{ steps.guard.outputs.skip != 'true' }} - # No-op `previews`-diff guard: an identical re-bake commits nothing, so a - # synchronize that only re-renders the same content does not loop. The PR - # head ref goes through env (not interpolated into the script) to avoid - # script injection. - env: - HEAD_REF: ${{ github.event.pull_request.head.ref }} + - name: Compare generated manifest run: | OLD=data/plugin-previews/manifest.json NEW=.tmp/plugin-previews/manifest.json - # Capture on its own line so `set -e` surfaces a helper error (exit 2) - # rather than command substitution swallowing it into the test. diff_result="$(node scripts/plugin-previews-diff.mjs "$OLD" "$NEW")" case "$diff_result" in - changed) ;; - unchanged) echo "previews unchanged — nothing to commit"; exit 0 ;; + changed) echo "previews changed — post-merge bake will publish clips and open the rolling manifest PR" ;; + unchanged) echo "previews unchanged" ;; *) echo "unexpected diff result: '$diff_result'" >&2; exit 1 ;; esac - cp "$NEW" "$OLD" - git config user.name "open-design-bot" - git config user.email "bot@open-design.ai" - git add "$OLD" - git commit -m "chore(plugin-previews): refresh baked preview manifest" - git push origin "HEAD:$HEAD_REF" diff --git a/.github/workflows/bake-plugin-previews.yml b/.github/workflows/bake-plugin-previews.yml index da2f864cf..1956c7ded 100644 --- a/.github/workflows/bake-plugin-previews.yml +++ b/.github/workflows/bake-plugin-previews.yml @@ -3,13 +3,13 @@ name: bake-plugin-previews # Post-merge + nightly bake of the home gallery's plugin previews. # # Role after the pipeline rework (specs/change/20260618-plugin-preview-bake- -# pipeline/spec.md): this workflow is the UPLOADER + FORK PATH + nightly -# BACKSTOP, no longer the primary way a manifest lands. -# - Internal (same-repo) plugin changes refresh their own preview inside the -# author's PR via bake-plugin-previews-pr.yml, so by merge time the manifest -# is usually already current and this run only ensures the clips are on R2. -# - Fork contributions cannot bake in-PR (no secrets), so their manifest is -# refreshed here, post-merge. +# pipeline/spec.md): this workflow is the trusted UPLOADER + manifest review PR +# writer + nightly BACKSTOP. +# - Pull requests validate the bake without secrets in +# bake-plugin-previews-pr.yml. +# - Manifest refreshes that need R2 credentials or a write-capable token happen +# here after merge, from trusted main code. +# - Fork contributions follow the same post-merge path. # - Nightly re-runs catch transient bake failures and BAKE_VERSION bumps. # When it does need to land a manifest, it opens ONE rolling review PR (it cannot # push to protected main directly). Until a plugin is baked the gallery falls diff --git a/apps/daemon/package.json b/apps/daemon/package.json index eca9b94c2..c5b42af0c 100644 --- a/apps/daemon/package.json +++ b/apps/daemon/package.json @@ -50,6 +50,7 @@ "chokidar": "5.0.0", "express": "5.2.1", "jszip": "3.10.1", + "kiwi-schema": "0.5.0", "multer": "2.1.1", "node-pty": "1.1.0", "posthog-node": "5.34.6", diff --git a/apps/daemon/src/artifacts/manifest.ts b/apps/daemon/src/artifacts/manifest.ts index 49b8c6f1c..b7550ff29 100644 --- a/apps/daemon/src/artifacts/manifest.ts +++ b/apps/daemon/src/artifacts/manifest.ts @@ -43,7 +43,7 @@ const ALLOWED_RENDERERS = new Set([ 'design-system', ]); -const ALLOWED_EXPORTS = new Set(['html', 'pdf', 'zip', 'pptx', 'jsx', 'md', 'svg', 'txt']); +const ALLOWED_EXPORTS = new Set(['html', 'pdf', 'zip', 'jsx', 'md', 'svg', 'txt']); const ALLOWED_STATUS = new Set(['streaming', 'complete', 'error']); function isPlainObject(value: unknown): value is JsonRecord { @@ -275,7 +275,7 @@ export function inferLegacyManifest(entry: string): JsonRecord | null { entry, renderer: isDeck ? 'deck-html' : 'html', status: 'complete', - exports: isDeck ? ['html', 'pdf', 'pptx', 'zip'] : ['html', 'pdf', 'zip'], + exports: ['html', 'pdf', 'zip'], metadata: { inferred: true }, }; } diff --git a/apps/daemon/src/brand-routes.ts b/apps/daemon/src/brand-routes.ts index b5095a9be..0bad081e1 100644 --- a/apps/daemon/src/brand-routes.ts +++ b/apps/daemon/src/brand-routes.ts @@ -22,6 +22,7 @@ import { } from './db.js'; import { resolveProjectDir } from './projects.js'; import { + extractBrandFromHtml, finalizeBrand, listBrandSummaries, readBrandDetail, @@ -64,12 +65,16 @@ export interface BrandRoutesDeps { }; /** Optional id factory; defaults inside the brand engine when omitted. */ randomId?: () => string; + /** Selected agent identity for programmatic transcript rows. */ + resolveTranscriptAgent?: () => Promise<{ agentId?: string | null; agentName?: string | null } | null>; } const LOGO_EXT_PRIORITY = ['.svg', '.png', '.webp', '.jpg', '.jpeg', '.gif', '.ico']; +const PROGRAMMATIC_CANCEL_ERROR = 'Programmatic extraction stopped by the user.'; export function registerBrandRoutes(app: Application, deps: BrandRoutesDeps): void { const { brandsRoot, userDesignSystemsRoot, projectsRoot, skillsRoot, dataDir, db, randomId } = deps; + const activeProgrammaticBrandExtractions = new Map(); // GET /api/brands — list every stored brand as a summary. app.get('/api/brands', (_req: Request, res: Response) => { @@ -85,31 +90,58 @@ export function registerBrandRoutes(app: Application, deps: BrandRoutesDeps): vo } }); - // POST /api/brands { url } — reserve the brand and stand up its extraction + // POST /api/brands { url?, description?, designMd? } — reserve the brand and stand up its extraction // project (target site open in a browser tab + a seeded prompt that drives an // agent through the extraction chain). Returns the ids to navigate into. app.post('/api/brands', async (req: Request, res: Response) => { const url = typeof req.body?.url === 'string' ? req.body.url : ''; - if (!url.trim()) { - res.status(400).json({ error: 'url is required' }); + const description = typeof req.body?.description === 'string' ? req.body.description : ''; + const designMd = typeof req.body?.designMd === 'string' ? req.body.designMd : ''; + const locale = typeof req.body?.locale === 'string' ? req.body.locale : ''; + if (!url.trim() && !designMd.trim()) { + res.status(400).json({ error: 'url or designMd is required' }); return; } try { + const programmaticAbortController = new AbortController(); + const backgroundExtractionRef: { current: Promise | null } = { current: null }; const startOptions: Parameters[0] = { - url, brandsRoot, projectsRoot, skillsRoot, db, // Passing the registry root + data dir switches on the programmatic-first - // extraction: the daemon harvests + synthesizes + finalizes a usable - // design system synchronously, so the caller lands on a ready, applyable - // design system immediately and the agent run only enriches it. + // extraction: the daemon seeds the real transcript and skeleton before + // returning, then harvests + synthesizes + finalizes the design system + // in the background. userDesignSystemsRoot, dataDir, + programmaticAbortSignal: programmaticAbortController.signal, + onBackgroundExtraction: (settled) => { + backgroundExtractionRef.current = settled; + }, }; + if (url.trim()) startOptions.url = url; + if (description.trim()) startOptions.description = description; + if (designMd.trim()) startOptions.designMd = designMd; + if (locale.trim()) startOptions.locale = locale; if (randomId) startOptions.randomId = randomId; + const transcriptAgent = await deps.resolveTranscriptAgent?.().catch(() => null); + if (transcriptAgent) startOptions.transcriptAgent = transcriptAgent; const result = await startBrandExtraction(startOptions); + const backgroundExtraction = backgroundExtractionRef.current; + if (backgroundExtraction) { + activeProgrammaticBrandExtractions.set(result.id, programmaticAbortController); + void backgroundExtraction.finally(() => { + const latestStatus = readBrandDetail(brandsRoot, result.id)?.meta.status; + if ( + latestStatus !== 'extracting' + && activeProgrammaticBrandExtractions.get(result.id) === programmaticAbortController + ) { + activeProgrammaticBrandExtractions.delete(result.id); + } + }); + } res.json(result); } catch (err) { const message = err instanceof Error ? err.message : String(err); @@ -119,6 +151,40 @@ export function registerBrandRoutes(app: Application, deps: BrandRoutesDeps): vo } }); + // POST /api/brands/:id/cancel-extraction — stop the daemon-owned + // programmatic-first pass. This mirrors chat Stop for the synthetic transcript + // row: the web marks the message canceled locally, while the daemon aborts + // pending harvest/finalize work and moves the brand out of extracting. + app.post('/api/brands/:id/cancel-extraction', (req: Request, res: Response) => { + const id = String(req.params.id); + try { + const detail = readBrandDetail(brandsRoot, id); + if (!detail) { + res.status(404).json({ error: 'brand not found' }); + return; + } + const active = activeProgrammaticBrandExtractions.get(id); + if (active) { + active.abort(); + activeProgrammaticBrandExtractions.delete(id); + } + if (detail.meta.status !== 'ready') { + patchMeta(brandsRoot, id, { + status: 'failed', + error: PROGRAMMATIC_CANCEL_ERROR, + blocked: false, + blockedReason: undefined, + extractionTerminalRunId: undefined, + extractionTerminalError: PROGRAMMATIC_CANCEL_ERROR, + }); + } + const next = readBrandDetail(brandsRoot, id)?.meta ?? detail.meta; + res.json({ ok: true, status: next.status }); + } catch (err) { + res.status(500).json({ error: String(err) }); + } + }); + // POST /api/brands/:id/preview — re-render brand.html from the project's // current brand.json. The extraction agent calls this (`od brand preview`) // after each measurement pass so the kit page fills in live. @@ -128,6 +194,10 @@ export function registerBrandRoutes(app: Application, deps: BrandRoutesDeps): vo typeof req.body?.projectId === 'string' && req.body.projectId.trim() ? String(req.body.projectId) : undefined; + const locale = + typeof req.body?.locale === 'string' && req.body.locale.trim() + ? String(req.body.locale) + : undefined; try { const renderOptions: Parameters[0] = { id, @@ -136,6 +206,7 @@ export function registerBrandRoutes(app: Application, deps: BrandRoutesDeps): vo projectsRoot, }; if (projectId) renderOptions.projectId = projectId; + if (locale) renderOptions.locale = locale; const result = await renderBrandPreviewIntoProject(renderOptions); res.json(result); } catch (err) { @@ -154,6 +225,10 @@ export function registerBrandRoutes(app: Application, deps: BrandRoutesDeps): vo typeof req.body?.projectId === 'string' && req.body.projectId.trim() ? String(req.body.projectId) : undefined; + const locale = + typeof req.body?.locale === 'string' && req.body.locale.trim() + ? String(req.body.locale) + : undefined; try { const finalizeOptions: Parameters[0] = { id, @@ -165,6 +240,7 @@ export function registerBrandRoutes(app: Application, deps: BrandRoutesDeps): vo db, }; if (projectId) finalizeOptions.projectId = projectId; + if (locale) finalizeOptions.locale = locale; if (randomId) finalizeOptions.randomId = randomId; const result = await finalizeBrand(finalizeOptions); res.json(result); @@ -175,6 +251,52 @@ export function registerBrandRoutes(app: Application, deps: BrandRoutesDeps): vo } }); + // POST /api/brands/:id/extract-from-html { html, css?, baseUrl? } — re-run the + // programmatic harvest against HTML the web read out of the in-app browser tab + // after the user cleared an anti-bot wall, instead of a fresh (blocked) fetch. + // Registers the `user:` design system and marks the brand `ready`. + app.post('/api/brands/:id/extract-from-html', async (req: Request, res: Response) => { + const id = String(req.params.id); + const html = typeof req.body?.html === 'string' ? req.body.html : ''; + const css = typeof req.body?.css === 'string' ? req.body.css : ''; + const baseUrl = typeof req.body?.baseUrl === 'string' ? req.body.baseUrl : ''; + if (!html.trim()) { + res.status(400).json({ error: 'html is required' }); + return; + } + try { + const meta = readBrandDetail(brandsRoot, id)?.meta; + if (!meta) { + res.status(404).json({ error: 'brand not found' }); + return; + } + const result = await extractBrandFromHtml({ + id, + meta, + brandsRoot, + userDesignSystemsRoot, + projectsRoot, + skillsRoot, + dataDir, + db, + hasWebsiteSource: true, + html, + ...(css.trim() ? { css } : {}), + ...(baseUrl.trim() ? { baseUrl } : {}), + }); + if (!result) { + res + .status(422) + .json({ error: 'Could not extract a design system from the provided page.' }); + return; + } + res.json(result); + } catch (err) { + const message = err instanceof Error ? err.message : String(err); + res.status(/not found/i.test(message) ? 404 : 500).json({ error: message }); + } + }); + // GET /api/brands/:id — full detail (meta + brand + guide). 404 if missing. app.get('/api/brands/:id', (req: Request, res: Response) => { try { diff --git a/apps/daemon/src/brands-cli-help.ts b/apps/daemon/src/brands-cli-help.ts index f8a1a6d9a..d4c415ff3 100644 --- a/apps/daemon/src/brands-cli-help.ts +++ b/apps/daemon/src/brands-cli-help.ts @@ -8,12 +8,21 @@ export const BRAND_USAGE = `Usage: od brand create [--json] brand and a backing project with the site open in a browser tab; open it to run the extraction agent. --prompt-file reads the URL from a file or stdin. + --locale localizes generated brand.html copy. od brand preview [--json] Re-render brand.html from the project's current brand.json so the kit page fills in live during extraction. --project overrides the project. + --locale overrides the stored brand locale. od brand finalize [--json] Register the agent's extracted kit (brand.json in the backing project) as a design system; marks it ready. --project overrides the backing project. + --locale overrides the stored brand locale. + od brand extract-from-html --html-file + [--css-file ] [--base-url ] [--json] + Re-run extraction against pre-captured rendered HTML + (e.g. a page already loaded past an anti-bot wall), + instead of fetching. --html-file reads from a file or + stdin; --css-file folds in collected stylesheet text. od brand get [--json] Print one brand's full detail (meta + brand + guide). od brand delete [--json] Remove a brand and its registered design system. diff --git a/apps/daemon/src/brands/chrome.ts b/apps/daemon/src/brands/chrome.ts index 4d65cfe9b..0c7a2b237 100644 --- a/apps/daemon/src/brands/chrome.ts +++ b/apps/daemon/src/brands/chrome.ts @@ -3,14 +3,16 @@ import { existsSync } from "node:fs"; import { resolveOnPath } from "../runtimes/executables.js"; /** - * Headless-Chrome fallback for the prefetch pipeline — CLI flags only, no - * CDP, no new dependencies. Used when the plain fetch path comes back blocked - * or thin: `--dump-dom` returns the JS-rendered DOM (which also carries the - * `; + if (/<\/head>/i.test(doc)) return doc.replace(/<\/head>/i, `${tag}`); + if (/]*>/i.test(doc)) return doc.replace(/]*>/i, (m) => `${m}${tag}`); + return `${tag}${doc}`; +} + +function escapeAttr(value: string): string { + return value.replace(/&/g, "&").replace(/"/g, """).replace(//g, ">"); +} + +function escapeText(value: string): string { + return value.replace(/&/g, "&").replace(//g, ">"); +} + +async function writeTemp(extension: string, data: Buffer): Promise { + const dir = await mkdtemp(path.join(tmpdir(), "od-export-")); + const filePath = path.join(dir, `artifact.${extension}`); + await writeFile(filePath, data); + return filePath; +} diff --git a/apps/desktop/src/main/index.ts b/apps/desktop/src/main/index.ts index a3e0d24c9..81fc127fd 100644 --- a/apps/desktop/src/main/index.ts +++ b/apps/desktop/src/main/index.ts @@ -13,6 +13,7 @@ import { normalizeDesktopSidecarMessage, type DesktopClickInput, type DesktopEvalInput, + type DesktopExportArtifactInput, type DesktopExportPdfInput, type DesktopScreenshotInput, type DesktopStatusSnapshot, @@ -768,6 +769,8 @@ export async function runDesktopMain( return await activeDesktop.click(request.input as DesktopClickInput); case SIDECAR_MESSAGES.EXPORT_PDF: return await activeDesktop.exportPdf(request.input as DesktopExportPdfInput); + case SIDECAR_MESSAGES.EXPORT_ARTIFACT: + return await activeDesktop.exportArtifact(request.input as DesktopExportArtifactInput); case SIDECAR_MESSAGES.UPDATE: return await updater.handle((request.input as DesktopUpdateInput).action); } diff --git a/apps/desktop/src/main/pdf-export.ts b/apps/desktop/src/main/pdf-export.ts index 96afdcee9..c1d97db23 100644 --- a/apps/desktop/src/main/pdf-export.ts +++ b/apps/desktop/src/main/pdf-export.ts @@ -3,9 +3,9 @@ import { writeFile } from "node:fs/promises"; import { BrowserWindow, dialog } from "electron"; import type { DesktopExportPdfInput, DesktopExportPdfResult } from "@open-design/sidecar-proto"; -type PageSize = { height: number; width: number }; +export type PageSize = { height: number; width: number }; -const DECK_PAGE_SIZE: PageSize = { width: 13.333333, height: 7.5 }; +export const DECK_PAGE_SIZE: PageSize = { width: 13.333333, height: 7.5 }; const MAX_PAGE_INCHES = 200; export type PrintReadyPdfOptions = { @@ -19,7 +19,7 @@ type PrintToPdfOptions = { printBackground: boolean; }; -const DECK_PRINT_CSS = ` +export const DECK_PRINT_CSS = ` @media print { @page { size: 1920px 1080px; margin: 0; } html, body { diff --git a/apps/desktop/src/main/runtime.ts b/apps/desktop/src/main/runtime.ts index ca0f79ffc..95e57de2c 100644 --- a/apps/desktop/src/main/runtime.ts +++ b/apps/desktop/src/main/runtime.ts @@ -11,6 +11,8 @@ import { DESKTOP_UPDATE_CHANNELS, DESKTOP_UPDATE_MODES, DESKTOP_UPDATE_STATES, + type DesktopExportArtifactInput, + type DesktopExportArtifactResult, type DesktopExportPdfInput, type DesktopExportPdfResult, type DesktopUpdateStatusSnapshot, @@ -18,6 +20,7 @@ import { import type { OpenDesignHostActionResult, OpenDesignHostCaptureResult, OpenDesignHostUpdaterActionOptions } from "@open-design/host"; import { openValidatedDirectory } from "./open-path.js"; +import { exportArtifact as exportArtifactFromHtml } from "./artifact-export.js"; import { createElectronPdfTarget, exportPdfFromHtml, savePrintReadyDocumentAsPdf } from "./pdf-export.js"; import { SPLASH_VIDEO_DATA_URL } from "./splash-video.js"; import type { PrintReadyPdfOptions } from "./pdf-export.js"; @@ -316,6 +319,7 @@ export type DesktopRuntime = { click(input: DesktopClickInput): Promise; console(): DesktopConsoleResult; eval(input: DesktopEvalInput): Promise; + exportArtifact(input: DesktopExportArtifactInput): Promise; exportPdf(input: DesktopExportPdfInput): Promise; screenshot(input: DesktopScreenshotInput): Promise; show(): void; @@ -1390,32 +1394,25 @@ export function hideWindowExitingFullscreen(window: WindowFullscreenSurface): vo window.hide(); } -// Some exports reach the renderer through a normal `` link -// (server-written PPTX, browser-generated image blobs). Without this hook -// Electron writes the bytes straight to the OS Downloads folder, so the user -// never gets to pick a destination. setSaveDialogOptions makes Electron show -// the native Save As panel before the download starts. +// Some image exports reach the renderer through a normal `` link. +// Without this hook Electron writes the bytes straight to the OS Downloads +// folder, so the user never gets to pick a destination. setSaveDialogOptions +// makes Electron show the native Save As panel before the download starts. const IMAGE_SAVE_AS_EXTENSIONS = new Set([".png", ".jpg", ".jpeg", ".webp"]); -const SAVE_AS_EXTENSIONS = new Set([".pptx", ...IMAGE_SAVE_AS_EXTENSIONS]); function attachDownloadSaveAsDialog(window: BrowserWindow): void { window.webContents.session.on("will-download", (_event, item) => { const filename = item.getFilename(); const dot = filename.lastIndexOf("."); const ext = dot >= 0 ? filename.slice(dot).toLowerCase() : ""; - if (!SAVE_AS_EXTENSIONS.has(ext)) return; + if (!IMAGE_SAVE_AS_EXTENSIONS.has(ext)) return; item.setSaveDialogOptions({ title: "Save As", defaultPath: filename, - filters: IMAGE_SAVE_AS_EXTENSIONS.has(ext) - ? [ - { name: "Images", extensions: ["png", "jpg", "jpeg", "webp"] }, - { name: "All Files", extensions: ["*"] }, - ] - : [ - { name: "PowerPoint Presentation", extensions: ["pptx"] }, - { name: "All Files", extensions: ["*"] }, - ], + filters: [ + { name: "Images", extensions: ["png", "jpg", "jpeg", "webp"] }, + { name: "All Files", extensions: ["*"] }, + ], }); }); } @@ -2308,6 +2305,9 @@ export async function createDesktopRuntime(options: DesktopRuntimeOptions): Prom return { error: error instanceof Error ? error.message : String(error), ok: false }; } }, + exportArtifact(input) { + return exportArtifactFromHtml(input); + }, exportPdf(input) { return exportPdfFromHtml(input); }, diff --git a/apps/desktop/tests/main/artifact-export-image-height.test.ts b/apps/desktop/tests/main/artifact-export-image-height.test.ts new file mode 100644 index 000000000..6ca557cdb --- /dev/null +++ b/apps/desktop/tests/main/artifact-export-image-height.test.ts @@ -0,0 +1,34 @@ +import { readFileSync } from "node:fs"; +import { dirname, join } from "node:path"; +import { fileURLToPath } from "node:url"; + +import { describe, expect, it } from "vitest"; + +const here = dirname(fileURLToPath(import.meta.url)); +const desktopRoot = join(here, "../.."); + +function artifactExportSource(): string { + return readFileSync(join(desktopRoot, "src/main/artifact-export.ts"), "utf8"); +} + +function renderImageBody(): string { + const source = artifactExportSource(); + const start = source.indexOf("async function renderImage"); + expect(start, "renderImage not found in artifact-export.ts").toBeGreaterThanOrEqual(0); + const end = source.indexOf("\nfunction buildDocument", start); + expect(end, "end of renderImage not found").toBeGreaterThan(start); + return source.slice(start, end); +} + +describe("artifact image export height guard", () => { + it("fails fast instead of silently cropping tall non-deck pages", () => { + const source = artifactExportSource(); + const body = renderImageBody(); + + expect(source).toContain("MAX_IMAGE_EXPORT_HEIGHT_PX = 20_000"); + expect(body).not.toContain("Math.min(20000"); + expect(body).not.toContain("Math.min(20_000"); + expect(body).toContain("height exceeds supported image export limit"); + expect(body.indexOf("throw new Error")).toBeLessThan(body.indexOf("window.setContentSize")); + }); +}); diff --git a/apps/web/package.json b/apps/web/package.json index e251bf64c..1a84ef386 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -25,7 +25,7 @@ "build": "next build", "build:sidecar": "tsc -p tsconfig.sidecar.json", "typecheck": "tsc -b --noEmit", - "test": "vitest run -c vitest.config.ts" + "test": "vitest run -c vitest.config.ts --maxWorkers=2" }, "dependencies": { "@anthropic-ai/sdk": "0.32.1", @@ -40,6 +40,7 @@ "@open-design/sidecar-proto": "workspace:*", "@xterm/addon-fit": "0.10.0", "@xterm/xterm": "5.5.0", + "jspdf": "4.2.1", "lexical": "0.36.2", "lucide-react": "1.16.0", "motion": "12.40.0", diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx index 3daace375..c0d03b924 100644 --- a/apps/web/src/App.tsx +++ b/apps/web/src/App.tsx @@ -1155,11 +1155,12 @@ function AppInner() { const handleModeChange = useCallback( (mode: AppConfig['mode']) => { - const next = { ...config, mode }; + const next = { ...latestPersistedConfigRef.current, mode }; + latestPersistedConfigRef.current = next; saveConfig(next); setConfig(next); }, - [config], + [], ); // Quick theme switch from the settings dropdown in the entry view. @@ -1188,28 +1189,31 @@ function AppInner() { const handleAgentChange = useCallback( (agentId: string) => { - const next = { ...config, agentId }; + const next = { ...latestPersistedConfigRef.current, agentId }; + latestPersistedConfigRef.current = next; saveConfig(next); void syncConfigToDaemon(next); setConfig(next); }, - [config], + [], ); const handleAgentModelChange = useCallback( (agentId: string, choice: { model?: string; reasoning?: string }) => { - const prev = config.agentModels?.[agentId] ?? {}; + const current = latestPersistedConfigRef.current; + const prev = current.agentModels?.[agentId] ?? {}; const merged = { ...prev, ...choice }; const nextAgentModels = { - ...(config.agentModels ?? {}), + ...(current.agentModels ?? {}), [agentId]: merged, }; - const next = { ...config, agentModels: nextAgentModels }; + const next = { ...current, agentModels: nextAgentModels }; + latestPersistedConfigRef.current = next; saveConfig(next); void syncConfigToDaemon(next); setConfig(next); }, - [config], + [], ); // BYOK protocol switch — also flips `mode` to 'api' so the user does @@ -1548,6 +1552,21 @@ function AppInner() { [analytics.track, rememberLocalProject], ); + const handleCreateProjectFromDesignSystem = useCallback( + async (designSystemId: string) => { + await handleCreateProject({ + name: t('common.untitled'), + skillId: null, + designSystemId, + metadata: { + kind: 'prototype', + nameSource: 'generated', + }, + }); + }, + [handleCreateProject, t], + ); + const handleCreatePluginShareProject = useCallback( async ( pluginId: string, @@ -2031,10 +2050,15 @@ function AppInner() { // a fresh template list. The template store is global — if they just // saved a template inside a project, returning home should reflect it // immediately in the From-template tab without forcing a page reload. + // Same rationale for design systems: a brand extraction (or any in-project + // design-system creation) registers a `user:` system out of band, so the + // Design systems tab must re-fetch to show it — and the brand-ready prompt + // relies on the new system being present so it can preselect it. useEffect(() => { if (route.kind !== 'home') return; void refreshTemplates(); - }, [route.kind, refreshTemplates]); + void refreshDesignSystems(); + }, [route.kind, refreshTemplates, refreshDesignSystems]); // Existing card grids (DesignsTab, ProjectView), pickers (NewProjectPanel, // ChatComposer mention) all look skills up by id without caring whether @@ -2105,14 +2129,15 @@ function AppInner() { appMain = ( navigate({ kind: 'home', view: 'design-systems' })} - onCreated={(projectId, project) => { + designSystems={enabledDS} + onCreated={(projectId, project, conversationId) => { if (project) { setProjects((curr) => [ project, ...curr.filter((p) => p.id !== project.id), ]); } - navigate({ kind: 'project', projectId, conversationId: null, fileName: null }); + navigate({ kind: 'project', projectId, conversationId: conversationId ?? null, fileName: null }); }} onProjectPrepared={(project) => { setProjects((curr) => [ @@ -2175,8 +2200,10 @@ function AppInner() { onTouchProject={handleTouchProject} onProjectChange={handleProjectChange} onProjectsRefresh={refreshProjects} + onDeleteProject={handleDeleteProject} onChangeDefaultDesignSystem={handleChangeDefaultDesignSystem} onDesignSystemsRefresh={refreshDesignSystems} + onCreateProjectFromDesignSystem={handleCreateProjectFromDesignSystem} /> ); } else { diff --git a/apps/web/src/artifacts/manifest.ts b/apps/web/src/artifacts/manifest.ts index 6efdaa881..63679aa26 100644 --- a/apps/web/src/artifacts/manifest.ts +++ b/apps/web/src/artifacts/manifest.ts @@ -33,7 +33,6 @@ const ALLOWED_EXPORTS: ReadonlySet = new Set([ 'html', 'pdf', 'zip', - 'pptx', 'jsx', 'md', 'svg', @@ -57,7 +56,7 @@ function inferKindFromEntry(entry: string): ArtifactKind | null { } function exportsForKind(kind: ArtifactKind): ArtifactExportKind[] { - if (kind === 'deck') return ['html', 'pdf', 'pptx', 'zip']; + if (kind === 'deck') return ['html', 'pdf', 'zip']; if (kind === 'react-component') return ['jsx', 'html', 'zip']; if (kind === 'markdown-document') return ['md', 'html', 'pdf', 'zip']; if (kind === 'svg' || kind === 'diagram') return ['svg', 'zip']; diff --git a/apps/web/src/artifacts/types.ts b/apps/web/src/artifacts/types.ts index 22b8bd9d9..828c48213 100644 --- a/apps/web/src/artifacts/types.ts +++ b/apps/web/src/artifacts/types.ts @@ -24,7 +24,6 @@ export type ArtifactExportKind = | 'html' | 'pdf' | 'zip' - | 'pptx' | 'jsx' | 'md' | 'svg' diff --git a/apps/web/src/components/AssistantMessage.tsx b/apps/web/src/components/AssistantMessage.tsx index e29978054..a8569ef68 100644 --- a/apps/web/src/components/AssistantMessage.tsx +++ b/apps/web/src/components/AssistantMessage.tsx @@ -37,7 +37,7 @@ import { stripTrailingOpenOdCard, type OdCard, } from "@open-design/contracts"; -import { OdCardView } from "./OdCard"; +import { OdCardView, type BrandBrowserAssistConfirm } from "./OdCard"; import { parseSubmittedAnswers } from "./QuestionForm"; import { splitStreamingArtifact, stripArtifact, stripRecoveredHtmlFallbackForDisplay } from "../artifacts/strip"; import { @@ -46,7 +46,7 @@ import { } from "./design-files/pluginFolders"; import type { PluginFolderAgentAction } from "./design-files/pluginFolderActions"; import { Icon } from "./Icon"; -import { NextStepActions } from "./NextStepActions"; +import { NextStepActions, type NextStepActionsVariant } from "./NextStepActions"; import type { DesignToolboxActionId } from "../runtime/design-toolbox"; import { copyToClipboard } from "../lib/copy-to-clipboard"; import { useT } from "../i18n"; @@ -277,6 +277,10 @@ interface Props { projectFiles?: ProjectFile[]; projectFileNames?: Set; onRequestOpenFile?: (name: string) => void; + // Client-side confirm for a button: read + // the unblocked browser DOM and re-extract the brand. Excluded from the memo + // comparison (routed through ChatPane's stable callbacks ref). + onBrandBrowserAssistConfirm?: BrandBrowserAssistConfirm; onRequestPluginFolderAgentAction?: ( relativePath: string, action: PluginFolderAgentAction, @@ -316,10 +320,16 @@ interface Props { // composer with an action / opening the toolbox both route through the // composer; see ChatPane's composer ref wiring. onToolboxAction?: (id: DesignToolboxActionId) => void; + onNextStepPromptAction?: (prompt: string) => void; + onNextStepAiOptimize?: () => void; + nextStepAiOptimizeBusy?: boolean; + onNextStepCreateDesign?: () => void; + nextStepCreateDesignBusy?: boolean; onPickSkill?: (skillId: string) => void; onArtifactDownload?: (fileName: string) => void; nextStepSkills?: SkillSummary[]; toolboxSkillNames?: Partial>; + nextStepVariant?: NextStepActionsVariant; } // Props compared by reference to decide whether a memoized AssistantMessage can @@ -358,6 +368,7 @@ const ASSISTANT_MESSAGE_COMPARED_PROPS: Array = [ // More → Design toolbox global resources. 'toolboxSkillNames', 'nextStepSkills', + 'nextStepVariant', // Live streaming tool input changes identity on every `tool_input_delta`. // ChatPane passes it only to the streaming row (undefined elsewhere), so // comparing it re-renders just that row as the card grows — without it the @@ -400,6 +411,7 @@ function AssistantMessageImpl({ projectFiles = [], projectFileNames, onRequestOpenFile, + onBrandBrowserAssistConfirm, onRequestPluginFolderAgentAction, activePluginActionPaths = new Set(), hiddenPluginActionPaths = new Set(), @@ -417,10 +429,16 @@ function AssistantMessageImpl({ hasDesignSystemContext = false, onArtifactShare, onToolboxAction, + onNextStepPromptAction, + onNextStepAiOptimize, + nextStepAiOptimizeBusy, + onNextStepCreateDesign, + nextStepCreateDesignBusy, onPickSkill, onArtifactDownload, nextStepSkills, toolboxSkillNames, + nextStepVariant = 'default', }: Props) { const t = useT(); const events = message.events ?? []; @@ -621,14 +639,6 @@ function AssistantMessageImpl({ {roleName}
- {fileOps.length > 0 ? ( - - ) : null} {blocks.map((b, i) => { if (b.kind === "text") return ( @@ -648,6 +658,7 @@ function AssistantMessageImpl({ runId={message.runId ?? null} projectFileNames={projectFileNames} onRequestOpenFile={onRequestOpenFile} + onBrandBrowserAssistConfirm={onBrandBrowserAssistConfirm} /> ); if (b.kind === "thinking") @@ -700,6 +711,14 @@ function AssistantMessageImpl({ } return null; })} + {fileOps.length > 0 ? ( + + ) : null} {!streaming && displayedProduced.length > 0 && projectId ? ( ) : null}
@@ -1906,6 +1931,7 @@ function ProseBlock({ runId, projectFileNames, onRequestOpenFile, + onBrandBrowserAssistConfirm, }: { text: string; hideRecoveredHtmlFallback?: boolean; @@ -1921,6 +1947,7 @@ function ProseBlock({ projectFileNames?: Set; onOpenQuestions?: (request?: QuestionFormOpenRequest) => void; onRequestOpenFile?: (name: string) => void; + onBrandBrowserAssistConfirm?: BrandBrowserAssistConfirm; }) { const t = useT(); const cleaned = useMemo(() => { @@ -2012,6 +2039,7 @@ function ProseBlock({ void; + /** Locks the controls while the turn is being sent. */ + busy?: boolean; +} + +export function BrandEnrichmentBanner({ onContinue, busy = false }: Props) { + const { t } = useI18n(); + + return ( +
+
+ + + + + {t('brandEnrichment.title')} + + {t('brandEnrichment.body')} + + +
+ + +
+ ); +} diff --git a/apps/web/src/components/BrandPickerModal.module.css b/apps/web/src/components/BrandPickerModal.module.css new file mode 100644 index 000000000..fc4587d77 --- /dev/null +++ b/apps/web/src/components/BrandPickerModal.module.css @@ -0,0 +1,120 @@ +.backdrop { + position: fixed; + inset: 0; + z-index: 1000; + display: flex; + align-items: center; + justify-content: center; + padding: 24px; + background: rgba(26, 25, 22, 0.32); + animation: bpmBackdropIn var(--dur-enter, 200ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)); +} + +@keyframes bpmBackdropIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.modal { + width: 100%; + max-width: 860px; + /* Stable, spacious dialog with a bounded height; the brand gallery scrolls + internally (fillHeight) while the header stays pinned. */ + height: min(680px, 84vh); + display: flex; + flex-direction: column; + padding: 22px 24px 24px; + border: 1px solid var(--border); + border-radius: var(--radius-lg); + background: var(--bg-panel); + box-shadow: var(--shadow-lg); + animation: bpmModalIn var(--dur-enter, 200ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)); +} + +@keyframes bpmModalIn { + from { + opacity: 0; + transform: translateY(8px) scale(0.97); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +@media (prefers-reduced-motion: reduce) { + .backdrop, + .modal { + animation: none; + } +} + +.head { + flex: 0 0 auto; + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 16px; + margin-bottom: 14px; +} + +.headText { + min-width: 0; +} + +.title { + margin: 0; + font-size: 18px; + font-weight: 700; + color: var(--text-strong); +} + +.subtitle { + margin: 6px 0 0; + font-size: 13px; + line-height: 1.5; + color: var(--text-muted); +} + +.close { + flex: 0 0 auto; + display: inline-flex; + align-items: center; + justify-content: center; + width: 30px; + height: 30px; + border: 0; + border-radius: var(--radius); + background: transparent; + color: var(--text-muted); + cursor: pointer; + transition: + background-color 140ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), + color 140ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)); +} + +.close:hover, +.close:focus-visible { + outline: none; + background: var(--bg-subtle); + color: var(--text-strong); +} + +/* The whole picker (popular brands, search, filters, and gallery) flows and + scrolls together here, so the modal reads as one scrolling surface rather + than a pinned head over a separately-scrolling list. Only the dialog header + (title/close) stays pinned above. Horizontal padding gives the cards' hover + lift + shadow breathing room against the scrollbar. */ +.pickerWrap { + flex: 1 1 auto; + min-height: 0; + overflow-y: auto; + overflow-x: hidden; + scrollbar-width: thin; + padding: 16px 4px 4px 2px; + border-top: 1px solid var(--border); +} diff --git a/apps/web/src/components/BrandPickerModal.tsx b/apps/web/src/components/BrandPickerModal.tsx new file mode 100644 index 000000000..8b4efd8d6 --- /dev/null +++ b/apps/web/src/components/BrandPickerModal.tsx @@ -0,0 +1,103 @@ +// A lightweight modal wrapper around BrandReferencePicker. +// +// Unlike NewBrandModal (which owns its own URL field + extraction kickoff), +// this modal is a pure picker: it surfaces the full searchable brand gallery +// (hundreds of references) and calls `onPick` with the chosen brand, then +// closes. Hosts decide what picking means — e.g. the Design System create flow +// drops the brand's domain into its source-URL list rather than extracting +// immediately. + +import { useCallback, useEffect, useRef } from 'react'; +import { createPortal } from 'react-dom'; +import type { BrandReference } from '../runtime/brand-references'; +import { BrandReferencePicker } from './BrandReferencePicker'; +import { Icon } from './Icon'; +import styles from './BrandPickerModal.module.css'; + +interface Props { + open: boolean; + onClose: () => void; + /** Fired with the chosen brand; the modal closes itself afterwards. */ + onPick: (brand: BrandReference) => void; + title?: string; + subtitle?: string; + /** Forwarded to the picker's hover affordance + quick-pick row so the label + * matches what picking does here (e.g. "Add" when the host only adds the + * brand's site as a style reference rather than extracting immediately). */ + actionLabel?: string; + quickPicksLabel?: string; +} + +export function BrandPickerModal({ + open, + onClose, + onPick, + title, + subtitle, + actionLabel, + quickPicksLabel, +}: Props) { + const scrollRef = useRef(null); + useEffect(() => { + if (!open) return undefined; + const onKey = (e: KeyboardEvent) => { + if (e.key === 'Escape') onClose(); + }; + window.addEventListener('keydown', onKey); + return () => window.removeEventListener('keydown', onKey); + }, [open, onClose]); + + const handlePick = useCallback( + (brand: BrandReference) => { + onPick(brand); + onClose(); + }, + [onPick, onClose], + ); + + if (!open) return null; + + return createPortal( +
{ + if (e.target === e.currentTarget) onClose(); + }} + > +
+
+
+ {title ?

{title}

: null} + {subtitle ?

{subtitle}

: null} +
+ +
+
+ +
+
+
, + document.body, + ); +} diff --git a/apps/web/src/components/BrandPreviewCard.module.css b/apps/web/src/components/BrandPreviewCard.module.css index 3554b0455..16e2a3de9 100644 --- a/apps/web/src/components/BrandPreviewCard.module.css +++ b/apps/web/src/components/BrandPreviewCard.module.css @@ -14,6 +14,18 @@ animation: previewIn 200ms cubic-bezier(0.23, 1, 0.32, 1); } +.previewInnerSticky { + max-width: none; + padding-right: 0; + padding-left: 0; +} + +.previewInnerSticky > :not(.previewHeadSticky) { + width: min(1040px, calc(100% - 64px)); + margin-right: auto; + margin-left: auto; +} + @keyframes previewIn { from { opacity: 0; @@ -57,15 +69,137 @@ font-weight: 680; } +.coverImageButton { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + border: 0; + background: transparent; + cursor: zoom-in; +} + +.coverImageButton:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 3px; + border-radius: var(--radius); +} + .previewHead { display: flex; align-items: flex-start; justify-content: space-between; - gap: 16px; + gap: 12px 20px; + flex-wrap: wrap; +} + +.previewHeadSticky { + position: sticky; + top: 0; + z-index: 20; + align-items: center; + flex-wrap: nowrap; + width: 100%; + min-height: 48px; + margin: -2px 0 0; + padding: 8px max(32px, calc((100% - 1040px) / 2)); + border: 0; + border-bottom: 1px solid transparent; + border-radius: 0; + background: transparent; + box-shadow: none; + transition: + background-color 200ms cubic-bezier(0.23, 1, 0.32, 1), + border-color 200ms cubic-bezier(0.23, 1, 0.32, 1), + box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1); +} + +.previewHeadStuck { + border-bottom-color: color-mix(in srgb, var(--border) 80%, transparent); + background: color-mix(in srgb, var(--bg) 90%, transparent); + box-shadow: 0 6px 16px color-mix(in srgb, var(--text-strong) 6%, transparent); + backdrop-filter: saturate(140%) blur(14px); +} + +.previewHeadIdentity { + /* Floor the identity column so a crowded action row can never squeeze the + title/tagline down to one-word-per-line. When the actions no longer fit + beside it, the parent wraps them onto their own row instead. */ + min-width: 0; + flex: 1 1 280px; + display: flex; + align-items: center; + gap: 12px; +} + +.previewHeadLogo { + flex: 0 0 42px; + width: 42px; + height: 42px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + border: 1px solid var(--border); + border-radius: var(--radius-sm); + background: var(--bg-panel); +} + +.previewHeadLogoImage { + max-width: 100%; + max-height: 100%; + object-fit: contain; +} + +.previewHeadLogoFallback { + display: inline-flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + color: var(--text-soft); + font-size: 18px; + font-weight: 680; +} + +.previewHeadSticky .previewHeadIdentity { + flex: 1 1 auto; + gap: 9px; +} + +.previewHeadSticky .previewHeadLogo { + flex-basis: 30px; + width: 30px; + height: 30px; +} + +.previewHeadSticky .previewHeadLogoFallback { + font-size: 14px; +} + +.previewHeadSticky .previewHeadText { + gap: 0; +} + +.previewHeadSticky .previewTitleRow { + flex-wrap: nowrap; +} + +.previewHeadSticky .previewName { + max-width: min(32vw, 360px); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 16px; + line-height: 1.2; } .previewHeadText { min-width: 0; + flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; @@ -82,8 +216,10 @@ margin: 0; font-size: 22px; font-weight: 700; - letter-spacing: -0.01em; + line-height: 1.18; + letter-spacing: 0; color: var(--text-strong); + overflow-wrap: anywhere; } .previewTagline { @@ -129,12 +265,6 @@ border-color: var(--red-border); } -.badgeNeedsInput { - color: var(--accent); - background: color-mix(in srgb, var(--accent) 12%, transparent); - border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); -} - .previewActions { display: flex; flex-shrink: 0; @@ -142,6 +272,157 @@ align-items: center; justify-content: flex-end; gap: 8px; + /* Keep actions right-aligned whether they sit beside the identity column or + wrap onto their own row beneath it. */ + margin-left: auto; +} + +.previewHeadSticky .previewActions { + flex: 0 1 auto; + flex-wrap: nowrap; + gap: 6px; + max-width: min(70%, 760px); + /* Must stay `visible`: the header's "?" shortcuts hint and "More" menu open + absolutely-positioned popovers that hang BELOW this row. Any scroll/clip + value here (e.g. overflow-x: auto) forces overflow-y to compute to `auto` + too, which silently clips those popovers — making both buttons look dead on + click. The action row only ever holds a few compact controls, so it never + needs to scroll. */ + overflow: visible; +} + +.previewHeadSticky .previewActions > * { + flex: 0 0 auto; +} + +/* ── Header "More" overflow dropdown ────────────────────────────────── + Promotes a couple of primary actions and folds the rest into a compact + menu so each entry keeps its icon + full label instead of crowding the + header as anonymous icon squares. */ +.headerMenu { + position: relative; + display: inline-flex; + align-items: center; +} + +.headerMenuTrigger { + display: inline-flex; + align-items: center; + justify-content: center; + width: 34px; + height: 28px; + padding: 0; + border: 1px solid var(--border); + border-radius: var(--radius-sm); + background: var(--bg-panel); + color: var(--text-muted); + cursor: pointer; + transition: border-color var(--dur-quick) var(--ease-out), + color var(--dur-quick) var(--ease-out), + background-color var(--dur-quick) var(--ease-out); +} + +.headerMenuTrigger:hover, +.headerMenuTrigger[aria-expanded='true'] { + border-color: var(--accent); + color: var(--accent); +} + +.headerMenuTrigger:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + +.headerMenuPopover { + position: absolute; + top: calc(100% + 6px); + right: 0; + z-index: 40; + min-width: 224px; + padding: 6px; + border: 1px solid var(--border); + border-radius: var(--radius); + background: var(--bg-panel); + box-shadow: 0 16px 40px color-mix(in srgb, var(--text-strong) 14%, transparent); + transform-origin: top right; + animation: headerMenuIn 160ms cubic-bezier(0.23, 1, 0.32, 1); +} + +@keyframes headerMenuIn { + from { + opacity: 0; + transform: translateY(-4px) scale(0.98); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +.headerMenuItem { + display: flex; + align-items: center; + gap: 10px; + width: 100%; + padding: 8px 10px; + border: 0; + border-radius: var(--radius-sm); + background: transparent; + color: var(--text); + font: inherit; + font-size: 13px; + line-height: 1.2; + text-align: left; + cursor: pointer; + transition: background-color var(--dur-quick) var(--ease-out), + color var(--dur-quick) var(--ease-out); +} + +.headerMenuItem:hover:not(:disabled), +.headerMenuItem:focus-visible { + outline: none; + background: var(--bg-subtle); + color: var(--text-strong); +} + +.headerMenuItem:disabled { + opacity: 0.5; + cursor: default; +} + +.headerMenuItemIcon { + display: inline-flex; + flex: 0 0 auto; + align-items: center; + justify-content: center; + color: var(--text-muted); +} + +.headerMenuItem[aria-busy='true'] .headerMenuItemIcon svg, +.moduleAction[aria-busy='true'] svg, +.shotDelete[aria-busy='true'] svg { + animation: designKitActionSpin 0.8s linear infinite; +} + +.headerMenuItem:hover:not(:disabled) .headerMenuItemIcon { + color: var(--accent); +} + +.headerMenuItemLabel { + flex: 1 1 auto; + white-space: nowrap; +} + +.headerMenuItemCheck { + display: inline-flex; + flex: 0 0 auto; + color: var(--accent); +} + +.headerMenuDivider { + height: 1px; + margin: 5px 4px; + background: var(--border); } .missingProjectNotice { @@ -165,6 +446,24 @@ background: var(--bg-subtle); } +.sectionEditFocus { + border-color: color-mix(in srgb, var(--accent) 62%, var(--border)); + background: + linear-gradient( + 0deg, + color-mix(in srgb, var(--accent) 7%, transparent), + color-mix(in srgb, var(--accent) 7%, transparent) + ), + var(--bg-subtle); + box-shadow: + 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent), + 0 12px 30px color-mix(in srgb, var(--accent) 10%, transparent); +} + +.sectionEditFocus:focus { + outline: none; +} + .sectionTitle { margin: 0; font-size: 12px; @@ -174,6 +473,83 @@ color: var(--text-muted); } +.moduleActions { + display: flex; + align-items: center; + justify-content: flex-end; + flex-wrap: wrap; + gap: 6px; +} + +/* Tuck the per-module action buttons away until the section is hovered or + focused, so the resting kit reads clean instead of a wall of always-on + buttons (Copy / Edit / Upload / Delete repeated on every module). Scoped to + hover-capable pointers — touch devices keep the buttons visible — and + :focus-within keeps them reachable by keyboard Tab. */ +@media (hover: hover) { + .section .moduleActions { + opacity: 0; + pointer-events: none; + transition: opacity var(--dur-quick, 140ms) var(--ease-out, ease); + } + .section:hover .moduleActions, + .section:focus-within .moduleActions, + .sectionEditFocus .moduleActions { + opacity: 1; + pointer-events: auto; + } +} + +.editFocusHint { + flex: 1 1 auto; + min-width: 160px; + color: var(--accent); + font-size: 12px; + font-weight: 600; + line-height: 1.35; + text-align: right; +} + +.moduleAction { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 5px; + min-height: 28px; + padding: 4px 8px; + border: 1px solid var(--border); + border-radius: var(--radius-sm); + background: var(--bg-panel); + color: var(--text-muted); + font: inherit; + font-size: 12px; + line-height: 1; + cursor: pointer; + transition: border-color var(--dur-quick) var(--ease-out), + color var(--dur-quick) var(--ease-out), + background-color var(--dur-quick) var(--ease-out); +} + +.moduleAction:hover { + border-color: var(--accent); + color: var(--accent); +} + +.moduleAction:disabled { + opacity: 0.55; + cursor: default; +} + +.moduleActionLoading { + color: var(--accent); + border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); +} + +.moduleAction:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + .description { margin: 0; font-size: 14px; @@ -218,6 +594,22 @@ background: var(--bg); } +.logoStageButton { + width: 100%; + color: inherit; + font: inherit; + cursor: zoom-in; +} + +.logoStageButton:hover { + border-color: var(--accent); +} + +.logoStageButton:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + .logoStageImg { max-width: 100%; max-height: 96px; @@ -373,12 +765,41 @@ } .swatchChip { + position: relative; display: flex; align-items: flex-end; height: 84px; padding: 8px; } +.swatchPicker { + position: absolute; + top: 8px; + right: 8px; + width: 26px; + height: 26px; + padding: 0; + border: 1px solid color-mix(in srgb, currentColor 22%, transparent); + border-radius: var(--radius-xs); + display: inline-flex; + align-items: center; + justify-content: center; + background: color-mix(in srgb, var(--bg-panel) 72%, transparent); + color: currentColor; + cursor: pointer; + backdrop-filter: blur(8px); + transition: + background-color var(--dur-quick) var(--ease-out), + border-color var(--dur-quick) var(--ease-out), + transform var(--dur-quick) var(--ease-out); +} + +.swatchPicker:hover { + background: color-mix(in srgb, var(--bg-panel) 88%, transparent); + border-color: color-mix(in srgb, currentColor 38%, transparent); + transform: translateY(-1px); +} + .swatchHex { font-size: 11px; font-variant-numeric: tabular-nums; @@ -536,6 +957,7 @@ } .shot { + position: relative; margin: 0; overflow: hidden; border: 1px solid var(--border); @@ -573,6 +995,46 @@ transform: scale(1.04); } +.shotDelete { + position: absolute; + top: 8px; + right: 8px; + display: inline-flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); + border-radius: var(--radius-pill); + background: color-mix(in srgb, var(--bg-panel) 88%, transparent); + color: var(--text-muted); + cursor: pointer; + opacity: 0; + transition: opacity var(--dur-quick) var(--ease-out), + color var(--dur-quick) var(--ease-out), + border-color var(--dur-quick) var(--ease-out); +} + +.shot:hover .shotDelete, +.shotDelete:focus-visible { + opacity: 1; +} + +.shotDelete:hover { + color: var(--red); + border-color: var(--red-border); +} + +.shotDelete:disabled { + cursor: default; +} + +.shotDeleteLoading { + opacity: 1; + color: var(--accent); + border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); +} + .shotMeta { padding: 8px 11px 10px; } @@ -600,20 +1062,6 @@ gap: 12px; } -.dsOpen { - display: inline-flex; - align-items: center; - gap: 5px; - font-size: 12.5px; - color: var(--text-muted); - text-decoration: none; - transition: color var(--dur-quick) var(--ease-out); -} - -.dsOpen:hover { - color: var(--accent); -} - .dsFrameWrap { overflow: hidden; border: 1px solid var(--border); @@ -738,14 +1186,19 @@ } .asset { + appearance: none; display: flex; flex-direction: column; overflow: hidden; + padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); color: inherit; + font: inherit; + text-align: left; text-decoration: none; + cursor: pointer; transition: border-color var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out); } @@ -755,6 +1208,11 @@ transform: translateY(-1px); } +.asset:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + .assetFrame { position: relative; aspect-ratio: 16 / 10; @@ -789,7 +1247,14 @@ .lightbox { position: fixed; inset: 0; - z-index: 50; + /* Must clear the chat composer, which rises to z-index 1500 with its + mode-toggle popover (1700 for the home-hero composer); preview modals + (.ds-modal-backdrop) sit at 1700, so 1800 keeps this overlay above every + composer/popover state. This z-index only resolves correctly because + DesignKitView portals these overlays to — rendered inline, the host + pane traps them in a lower stacking context and the composer paints over + them regardless of z-index. Keep the portal. */ + z-index: 1800; display: flex; align-items: center; justify-content: center; @@ -849,6 +1314,191 @@ background: rgba(255, 255, 255, 0.26); } +/* HTML asset preview overlay. */ +.assetModal { + position: fixed; + inset: 0; + /* See .lightbox: stay above the chat composer's elevated z-index (up to 1700) + so the artifact preview (e.g. "Pitch deck") is never covered by the input. */ + z-index: 1800; + display: flex; + align-items: center; + justify-content: center; + padding: 40px; + background: rgba(10, 10, 12, 0.66); + backdrop-filter: blur(3px); + animation: lightboxIn 200ms cubic-bezier(0.23, 1, 0.32, 1); +} + +.assetModalPanel { + display: flex; + flex-direction: column; + width: min(1180px, 94vw); + height: min(820px, 88vh); + overflow: hidden; + border: 1px solid rgba(255, 255, 255, 0.18); + border-radius: var(--radius-lg); + background: var(--bg-panel); + box-shadow: 0 24px 70px rgba(0, 0, 0, 0.46); + animation: lightboxImgIn 200ms cubic-bezier(0.23, 1, 0.32, 1); +} + +.assetModalHeader { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + min-height: 52px; + padding: 0 12px 0 18px; + border-bottom: 1px solid var(--border); + background: var(--bg-panel); +} + +.assetModalHeader h3 { + min-width: 0; + margin: 0; + color: var(--text-strong); + font-size: 14px; + font-weight: 700; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.assetModalHeaderActions { + display: inline-flex; + align-items: center; + gap: 8px; + flex: 0 0 auto; +} + +.assetModalClose { + display: inline-flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border: 0; + border-radius: var(--radius-pill); + background: transparent; + color: var(--text-muted); + cursor: pointer; + transition: background-color var(--dur-quick) var(--ease-out), + color var(--dur-quick) var(--ease-out); +} + +.assetModalClose:hover { + background: var(--bg-subtle); + color: var(--text-strong); +} + +.assetModalFrame { + flex: 1 1 auto; + width: 100%; + min-height: 0; + border: 0; + background: #fff; +} + +.designMdModalPanel { + max-width: min(980px, 94vw); +} + +.designMdTextarea { + flex: 1 1 auto; + width: 100%; + min-height: 0; + border: 0; + border-radius: 0; + padding: 18px; + background: var(--bg); + color: var(--text); + font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace); + font-size: 12.5px; + line-height: 1.6; + resize: none; +} + +.designMdModalBar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 12px 14px; + border-top: 1px solid var(--border); + background: var(--bg-panel); + color: var(--text-muted); + font-size: 12px; +} + +.colorModalPanel { + width: min(460px, 92vw); + height: auto; + min-height: 0; +} + +.colorModalBody { + display: grid; + gap: 14px; + padding: 16px; +} + +.colorModalPreview { + display: flex; + align-items: flex-end; + min-height: 130px; + padding: 14px; + border: 1px solid var(--border); + border-radius: var(--radius); + box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 6%, transparent); +} + +.colorModalPreview span { + font-size: 12px; + font-weight: 650; + font-variant-numeric: tabular-nums; + text-transform: uppercase; +} + +.colorModalField { + display: grid; + grid-template-columns: 70px minmax(0, 1fr); + align-items: center; + gap: 12px; + color: var(--text-muted); + font-size: 12px; + font-weight: 650; +} + +.colorModalField input { + min-width: 0; + height: 36px; + border: 1px solid var(--border); + border-radius: var(--radius-sm); + background: var(--bg); + color: var(--text); +} + +.colorModalField input[type="color"] { + padding: 3px; + cursor: pointer; +} + +.colorModalField input[type="text"] { + padding: 0 10px; + font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace); + font-size: 13px; + font-variant-numeric: tabular-nums; + text-transform: uppercase; +} + +.colorModalError { + margin: 0; + color: var(--danger, #c0392b); + font-size: 12px; + line-height: 1.45; +} + /* ══ Compact variant ══════════════════════════════════════════════════ Trims the panel layout to read cleanly inside a narrow picker popover preview pane (~220-260px). Keeps cover / identity / typography / palette @@ -938,3 +1588,204 @@ .compact .swatchName { font-size: 11.5px; } + +/* ══ Showcase cover (design systems) ═══════════════════════════════════ + When the cover holds a live showcase iframe instead of a logo, fill the + frame edge-to-edge and give it a touch more height to read as a hero. */ +.cover:has(.coverFrameViewport) { + position: relative; + padding: 0; + height: 280px; + overflow: hidden; +} + +.coverFrameViewport { + display: block; + width: 100%; + height: 100%; + overflow: hidden; + background: #fff; +} + +.coverFrame { + width: 142.857%; + height: 142.857%; + border: 0; + display: block; + background: #fff; + pointer-events: none; + transform: scale(0.7); + transform-origin: top left; +} + +.compact .cover:has(.coverFrameViewport) { + height: 120px; +} + +/* Hover affordance over the (non-interactive, scaled) showcase cover. The + inline preview can't scroll, so reveal a button on hover/focus that opens a + full, scrollable preview. */ +.coverPreviewBtn { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0; + padding: 0; + border: 0; + cursor: pointer; + background: color-mix(in srgb, var(--text-strong) 20%, transparent); + opacity: 0; + transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1); +} + +.cover:has(.coverFrameViewport):hover .coverPreviewBtn, +.coverPreviewBtn:focus-visible { + opacity: 1; +} + +.coverPreviewPill { + display: inline-flex; + align-items: center; + gap: 7px; + padding: 9px 16px; + border-radius: var(--radius-pill); + border: 1px solid var(--border); + background: var(--bg); + color: var(--text-strong); + font-size: 13px; + font-weight: 600; + box-shadow: 0 6px 22px color-mix(in srgb, var(--text-strong) 22%, transparent); + transform: translateY(5px); + transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1); +} + +.cover:has(.coverFrameViewport):hover .coverPreviewPill, +.coverPreviewBtn:focus-visible .coverPreviewPill { + transform: translateY(0); +} + +/* ══ DESIGN.md mode toggle (Visualize / Edit / Source) ═════════════════ */ +.modeToggle { + display: inline-flex; + gap: 4px; + padding: 4px; + width: fit-content; + border: 1px solid var(--border); + border-radius: var(--radius-sm); + background: var(--bg-subtle); +} + +.modeToggleBtn { + border: 0; + padding: 5px 14px; + border-radius: var(--radius-xs); + background: transparent; + color: var(--text-muted); + font-size: 13px; + font-family: inherit; + cursor: pointer; + transition: background-color var(--dur-quick) var(--ease-out), + color var(--dur-quick) var(--ease-out); +} + +.modeToggleBtn:hover { + color: var(--text-strong); +} + +.modeToggleBtnActive, +.modeToggleBtnActive:hover { + background: var(--bg-panel); + color: var(--text-strong); + font-weight: 600; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); +} + +/* ══ DESIGN.md editor + source ═════════════════════════════════════════ */ +.editor { + display: flex; + flex-direction: column; + gap: 10px; +} + +.editorTextarea { + width: 100%; + min-height: 440px; + font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace); + font-size: 12.5px; + line-height: 1.6; + resize: vertical; +} + +.editorBar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +.editorHint { + font-size: 12px; + color: var(--text-faint); + font-variant-numeric: tabular-nums; +} + +.sourceWrap { + overflow: hidden; + border: 1px solid var(--border); + border-radius: var(--radius-lg); + background: var(--bg-subtle); +} + +/* ══ Empty module + upload affordance ══════════════════════════════════ */ +.emptyModule { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 12px; + min-height: 120px; + padding: 24px; + border: 1px dashed var(--border); + border-radius: var(--radius); + text-align: center; +} + +.emptyModuleText { + font-size: 13px; + color: var(--text-faint); +} + +.uploadBtn { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 7px 14px; + border: 1px solid var(--border); + border-radius: var(--radius-sm); + background: var(--bg-panel); + color: var(--text); + font-size: 12.5px; + font-weight: 500; + font-family: inherit; + cursor: pointer; + transition: border-color var(--dur-quick) var(--ease-out), + color var(--dur-quick) var(--ease-out); +} + +.uploadBtn:hover { + border-color: var(--accent); + color: var(--accent); +} + +.uploadBtn:disabled { + opacity: 0.6; + cursor: default; +} + +@keyframes designKitActionSpin { + to { + transform: rotate(360deg); + } +} diff --git a/apps/web/src/components/BrandPreviewCard.tsx b/apps/web/src/components/BrandPreviewCard.tsx index 743bb289f..3af265230 100644 --- a/apps/web/src/components/BrandPreviewCard.tsx +++ b/apps/web/src/components/BrandPreviewCard.tsx @@ -1,201 +1,27 @@ // Shared rich brand preview. // -// The Brand Kit tab renders a full master-detail preview of a brand (cover, -// identity, logo, typography specimens, palette, voice, imagery, the embedded -// design-system kit, and brand asset tiles). The same visual is reused in -// every design-system picker so selecting a brand shows the real brand kit -// instead of a thin one-line summary. +// Thin adapter: builds a normalized DesignKit from a BrandSummary and renders +// the shared `DesignKitView` (the brand.html-style module stack). The Brand Kit +// tab uses `variant='panel'` (with Use / Open / Delete actions); design-system +// pickers use `variant='compact'` (a trimmed pane for a narrow popover). // -// - `variant='panel'` — the full Brand Kit tab preview, including the -// Use / Open project / Delete actions. -// - `variant='compact'`— a trimmed pane sized for a narrow picker popover: -// cover, name/tagline/domain, identity, typography, -// and palette only (no actions or iframe-heavy -// sections that would be too heavy in a small popup). +// The kit-rendering helpers and the module view itself now live in +// `runtime/design-kit.ts` + `DesignKitView.tsx`; they are re-exported here so +// existing imports (`BrandLogo`, `hostnameOf`) keep working. -import { useCallback, useEffect, useMemo, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { Button } from '@open-design/components'; -import type { BrandFontSpec, BrandImagerySample, BrandSummary } from '@open-design/contracts'; +import type { BrandSummary } from '@open-design/contracts'; import { useT } from '../i18n'; import { navigate } from '../router'; -import { projectRawUrl } from '../providers/registry'; import { requestHomeChip } from '../runtime/home-intent'; +import { brandSummaryToKit } from '../runtime/design-kit'; +import { DesignKitView } from './DesignKitView'; import styles from './BrandPreviewCard.module.css'; -// Best-effort hostname for the brand's domain line. Brand names come from the -// extracted kit, but the source URL is always present in meta, so even an -// in-flight / failed brand shows a recognizable label. -export function hostnameOf(rawUrl: string): string { - try { - return new URL(rawUrl).hostname.replace(/^www\./, ''); - } catch { - return rawUrl.replace(/^https?:\/\//, '').replace(/^www\./, '').split('/')[0] || rawUrl; - } -} - -// ─── Logo with fallback chain ──────────────────────────────────────── -// -// The brand's own stored logo first, then Google's favicon service for the -// source domain, and finally a monogram tile. Each step advances only when the -// previous image fails to load. `faviconSize` lets callers request an -// appropriately-scaled favicon for the list (64) vs the preview cover (128). -type LogoStage = 'brand' | 'favicon' | 'letter'; - -interface BrandLogoProps { - id: string; - host: string; - name: string; - faviconSize: number; - className?: string; - fallbackClassName?: string; -} - -export function BrandLogo({ id, host, name, faviconSize, className, fallbackClassName }: BrandLogoProps) { - const [stage, setStage] = useState('brand'); - - useEffect(() => { - setStage('brand'); - }, [id]); - - const src = - stage === 'brand' - ? `/api/brands/${encodeURIComponent(id)}/logo` - : stage === 'favicon' && host - ? `https://www.google.com/s2/favicons?domain=${encodeURIComponent(host)}&sz=${faviconSize}` - : null; - - const advance = useCallback(() => { - setStage((s) => (s === 'brand' ? 'favicon' : 'letter')); - }, []); - - if (!src) { - return ( - - {name.slice(0, 1).toUpperCase()} - - ); - } - - return ( - - ); -} - -/** How many imagery samples render inline before the rest are gated behind a - * subtle "show all" toggle, so a long sample set never floods the panel. */ -const IMAGE_CAP = 8; - -/** Build a CSS font-family stack from a brand font spec, quoting multi-word - * family names so they parse as a single family. */ -export function fontStack(spec: BrandFontSpec): string { - const families = [spec.family, ...(spec.fallbacks ?? [])].filter(Boolean); - if (families.length === 0) return 'ui-sans-serif, system-ui, sans-serif'; - return families.map((f) => (/\s/.test(f) ? `'${f}'` : f)).join(', '); -} - -/** Relative-luminance check so swatch hex captions stay legible on the chip. */ -export function isLightHex(hex: string): boolean { - if (!/^#[0-9a-fA-F]{6}$/.test(hex)) return true; - const r = parseInt(hex.slice(1, 3), 16); - const g = parseInt(hex.slice(3, 5), 16); - const b = parseInt(hex.slice(5, 7), 16); - return r * 0.299 + g * 0.587 + b * 0.114 > 150; -} - -/** Token subset the design-system chips surface, mirroring the kit renderer. */ -interface BrandTokenSubset { - colorPrimary?: string; - colorPrimaryBg?: string; - colorPrimaryHover?: string; - colorPrimaryActive?: string; - fontSize?: number; - borderRadius?: number; -} - -interface BrandFontManifestFile { - family: string; - weight: string; - style: string; - file: string; - format: string; -} - -// Load the brand's real typefaces into the document so specimens render for -// real: append any Google Fonts stylesheets the kit declares, and inject -// self-hosted @font-face rules from the project's fonts/manifest.json. Both -// sources are best-effort and tolerant of absence (e.g. a brand with no -// harvested manifest still renders via googleFontsUrl or fallbacks). All -// injected nodes are torn down when the brand changes. -export function useBrandFonts(projectId: string | undefined, fonts: BrandFontSpec[]): void { - const googleUrls = useMemo(() => { - const urls = fonts - .map((f) => f.googleFontsUrl) - .filter((u): u is string => Boolean(u && /^https:\/\/fonts\.googleapis\.com\//i.test(u))); - return Array.from(new Set(urls)); - }, [fonts]); - - useEffect(() => { - const links = googleUrls.map((href) => { - const link = document.createElement('link'); - link.rel = 'stylesheet'; - link.href = href; - document.head.appendChild(link); - return link; - }); - return () => { - for (const link of links) link.remove(); - }; - }, [googleUrls]); - - useEffect(() => { - if (!projectId) return; - let cancelled = false; - let styleEl: HTMLStyleElement | null = null; - void (async () => { - try { - const resp = await fetch(projectRawUrl(projectId, 'fonts/manifest.json'), { - cache: 'no-store', - }); - if (!resp.ok) return; - const data = (await resp.json()) as { files?: BrandFontManifestFile[] }; - const files = Array.isArray(data?.files) ? data.files : []; - if (cancelled || files.length === 0) return; - const css = files - .map((f) => { - const url = projectRawUrl(projectId, `fonts/${f.file}`); - return [ - '@font-face {', - ` font-family: '${f.family.replace(/'/g, '')}';`, - ` src: url('${url}') format('${f.format}');`, - ` font-weight: ${f.weight};`, - ` font-style: ${f.style};`, - ' font-display: swap;', - '}', - ].join('\n'); - }) - .join('\n'); - styleEl = document.createElement('style'); - styleEl.dataset.brandFonts = projectId; - styleEl.textContent = css; - document.head.appendChild(styleEl); - } catch { - // A missing or malformed manifest is expected for some brands; the - // specimens simply fall back to the system stack. - } - })(); - return () => { - cancelled = true; - if (styleEl) styleEl.remove(); - }; - }, [projectId]); -} +// Re-exports preserving the previous public surface of this module. +export { hostnameOf, fontStack, isLightHex } from '../runtime/design-kit'; +export { BrandLogo, useBrandFonts } from './DesignKitView'; export interface BrandPreviewCardProps { summary: BrandSummary; @@ -203,141 +29,40 @@ export interface BrandPreviewCardProps { variant?: 'panel' | 'compact'; /** Panel-only: called after a mutation (delete) so a parent can refresh. */ onChanged?: () => void | Promise; - /** Panel-only: lets a parent clear iframe-heavy detail UI before mutation. */ - onBeforeMutation?: () => void; /** Panel-only: apply this brand's design system as the global default. */ onApplyDesignSystem?: (designSystemId: string) => void; /** Panel-only: open the backing extraction project through the app shell. */ onOpenProject?: (projectId: string) => Promise | boolean | void; - /** Panel-only: disables actions when parent route/selection/summary are stale. */ - actionsDisabled?: boolean; } export function BrandPreviewCard({ summary, variant = 'panel', onChanged, - onBeforeMutation, onApplyDesignSystem, onOpenProject, - actionsDisabled = false, }: BrandPreviewCardProps) { const t = useT(); const compact = variant === 'compact'; const { meta, brand } = summary; - const host = hostnameOf(meta.sourceUrl); - const name = brand?.name?.trim() || host; + const name = brand?.name?.trim() || (meta.sourceUrl ? new URL(meta.sourceUrl).hostname.replace(/^www\./, '') : 'Brand'); const extracting = meta.status === 'extracting'; - const needsInput = meta.status === 'needs_input'; const failed = meta.status === 'failed'; - const ready = meta.status === 'ready'; const projectId = meta.projectId; + const [busy, setBusy] = useState(false); const [backingProjectMissing, setBackingProjectMissing] = useState(false); - const [busy, setBusy] = useState(false); - const [tokens, setTokens] = useState(null); - const [dsTheme, setDsTheme] = useState<'light' | 'dark'>('light'); - const [imagesExpanded, setImagesExpanded] = useState(false); - const [lightbox, setLightbox] = useState<{ src: string; caption: string } | null>(null); + const kit = brandSummaryToKit(summary); - const colors = brand?.colors ?? []; - const fonts = useMemo<{ font: BrandFontSpec; label: string }[]>(() => { - if (!brand) return []; - const out: { font: BrandFontSpec; label: string }[] = []; - if (brand.typography.display) out.push({ font: brand.typography.display, label: 'Display' }); - if (brand.typography.body) out.push({ font: brand.typography.body, label: 'Body' }); - if (brand.typography.mono) out.push({ font: brand.typography.mono, label: 'Mono' }); - return out; - }, [brand]); - - useBrandFonts( - projectId, - useMemo(() => fonts.map((f) => f.font), [fonts]), - ); - - // Logo candidates (primary first, then alternates), de-duped. These resolve - // under the backing project's raw file route — the same convention the - // rendered brand.html uses. Only meaningful once the brand has a project. - const logoCandidates = useMemo(() => { - const primary = brand?.logo?.primary ?? null; - const all = [primary, ...(brand?.logo?.alternates ?? [])].filter( - (c): c is string => Boolean(c), - ); - return Array.from(new Set(all)); - }, [brand]); - const [activeLogo, setActiveLogo] = useState(0); - const activeLogoSrc = logoCandidates[activeLogo] ?? logoCandidates[0] ?? null; useEffect(() => { - setActiveLogo(0); - setImagesExpanded(false); - setLightbox(null); - }, [meta.id]); - - const samples = useMemo(() => { - const list = brand?.imagery?.samples; - return Array.isArray(list) ? list.filter((s) => s && s.file) : []; - }, [brand]); - - const adjectives = brand?.voice?.adjectives ?? []; - const tone = brand?.voice?.tone?.trim() || ''; - const pillars = brand?.voice?.messagingPillars ?? []; - const vocabUse = brand?.voice?.vocabulary?.use ?? []; - const vocabAvoid = brand?.voice?.vocabulary?.avoid ?? []; - const imagery = brand?.imagery; - const layout = brand?.layout; - - // The compact picker preview deliberately drops the iframe-heavy sections - // (embedded kit, asset tiles, image gallery) — they are too heavy for a - // small popover and need a live project the popover may not warrant. - const showSystem = Boolean(!compact && ready && projectId); - - // Fetch the six engine tokens the design-system chips show. Best-effort and - // gated on a finalized brand (the system/ dir only exists post-finalize). - useEffect(() => { - if (!showSystem || !projectId) { - setTokens(null); - return; - } - let cancelled = false; - void (async () => { - try { - const resp = await fetch(projectRawUrl(projectId, 'system/tokens.default.json'), { - cache: 'no-store', - }); - if (!resp.ok) return; - const raw = (await resp.json()) as Record; - if (cancelled) return; - const next: BrandTokenSubset = {}; - if (typeof raw.colorPrimary === 'string') next.colorPrimary = raw.colorPrimary; - if (typeof raw.colorPrimaryBg === 'string') next.colorPrimaryBg = raw.colorPrimaryBg; - if (typeof raw.colorPrimaryHover === 'string') next.colorPrimaryHover = raw.colorPrimaryHover; - if (typeof raw.colorPrimaryActive === 'string') { - next.colorPrimaryActive = raw.colorPrimaryActive; - } - if (typeof raw.fontSize === 'number') next.fontSize = raw.fontSize; - if (typeof raw.borderRadius === 'number') next.borderRadius = raw.borderRadius; - setTokens(next.colorPrimary ? next : null); - } catch { - // Token chips are decorative; a missing file just hides them. - } - })(); - return () => { - cancelled = true; - }; - }, [showSystem, projectId]); + setBackingProjectMissing(false); + }, [projectId]); const useInChat = useCallback(async () => { - if (actionsDisabled) return; const designSystemId = meta.designSystemId; if (!designSystemId || busy) return; setBusy(true); try { - // The brand registered a `user:` design system. Apply it as the - // global default through the web config channel so the Home composer - // immediately preselects it; a bare daemon PATCH left React config stale - // (composer kept showing "No design system") and a later config sync - // could clobber it back. Fall back to a direct PATCH if the parent did - // not thread the setter (e.g. a standalone mount). if (onApplyDesignSystem) { onApplyDesignSystem(designSystemId); } else { @@ -347,25 +72,14 @@ export function BrandPreviewCard({ body: JSON.stringify({ designSystemId }), }); } - // Default the new chat to the Prototype scenario: it surfaces the design - // system field and is the most common brand-applied build, so the user - // lands ready to generate with the brand instead of in the generic path. - // Carry a confirmation notice so Home shows a visible "Using " - // banner — otherwise the navigate+apply is silent and the CTA reads as a - // no-op (the reported bug). - requestHomeChip('prototype', { notice: t('brand.appliedToChat', { name }) }); + requestHomeChip('prototype'); navigate({ kind: 'home', view: 'home' }); } finally { setBusy(false); } - }, [actionsDisabled, meta.designSystemId, busy, onApplyDesignSystem, t, name]); - - useEffect(() => { - setBackingProjectMissing(false); - }, [projectId]); + }, [meta.designSystemId, busy, onApplyDesignSystem]); const openProject = useCallback(async () => { - if (actionsDisabled) return; if (!projectId) return; if (onOpenProject) { const opened = await onOpenProject(projectId); @@ -373,535 +87,86 @@ export function BrandPreviewCard({ return; } navigate({ kind: 'project', projectId, fileName: null, conversationId: null }); - }, [actionsDisabled, onOpenProject, projectId]); + }, [onOpenProject, projectId]); const deleteBrand = useCallback(async () => { - if (actionsDisabled) return; if (busy) return; const ok = window.confirm(t('brandDetail.deleteConfirm').replace('{name}', name)); if (!ok) return; setBusy(true); try { - const resp = await fetch(`/api/brands/${encodeURIComponent(meta.id)}`, { method: 'DELETE' }); - if (!resp.ok) throw new Error('Brand delete failed'); - // Drop the now-stale `/brands/:id` selection before refreshing the list. - onBeforeMutation?.(); + await fetch(`/api/brands/${encodeURIComponent(meta.id)}`, { method: 'DELETE' }); navigate({ kind: 'home', view: 'brands' }, { replace: true }); await onChanged?.(); } catch { setBusy(false); } - }, [actionsDisabled, busy, meta.id, name, onBeforeMutation, onChanged, t]); + }, [busy, meta.id, name, onChanged, t]); - const dsKitFile = dsTheme === 'dark' ? 'system/kit.dark.html' : 'system/kit.html'; + const badgeSlot = extracting ? ( + + {t('brand.extracting')} + + ) : failed ? ( + + {t('brand.failed')} + + ) : null; - const assetTiles = useMemo( - () => [ - { kind: 'landing', label: 'Landing page', file: 'system/artifacts/landing.html' }, - { kind: 'deck', label: 'Pitch deck', file: 'system/artifacts/deck.html' }, - { kind: 'poster', label: 'Poster', file: 'system/artifacts/poster.html' }, - { kind: 'email', label: 'Email', file: 'system/artifacts/email.html' }, - { kind: 'newsletter', label: 'Newsletter', file: 'system/artifacts/newsletter.html' }, - { kind: 'form', label: 'Form page', file: 'system/artifacts/form.html' }, - ], - [], + const actionsSlot = compact ? null : ( + <> + + {projectId ? ( + + ) : null} + + ); - return ( -
-
- -
- -
- - {compact ? null : ( -
- - {projectId ? ( - - ) : null} - -
- )} -
- + const noticeSlot = ( + <> {backingProjectMissing ? (
{t('project.missing')}
) : null} - - {needsInput ? ( -
- {t('brand.needsInputHint')} -
- ) : null} - {failed && meta.error ? (
{meta.error}
) : null} - - {brand?.description ? ( -
-

{t('brandDetail.identity')}

-

{brand.description}

-
- ) : null} - - {!compact && projectId && activeLogoSrc ? ( -
-

{t('brandDetail.logo')}

-
- {name} -
- {logoCandidates.length > 1 ? ( -
- {logoCandidates.map((cand, i) => ( - - ))} -
- ) : null} - {brand?.logo?.notes ?

{brand.logo.notes}

: null} -
- ) : null} - - {fonts.length > 0 ? ( -
-

{t('brandDetail.typography')}

-
- {fonts.map(({ font, label }) => ( -
-
- Ag -
-
- {font.family} - {label} -
-
- ))} -
- {compact ? null : ( -
- {fonts.map(({ font, label }) => ( -
-
- {label} - - {font.family} - {font.weights.length > 0 ? ( - · {font.weights.join('/')} - ) : null} - -
- - {label === 'Mono' ? 'const brand = await extract(url);' : name} - -
- ))} -
- )} -
- ) : null} - - {colors.length > 0 ? ( -
-

{t('brandDetail.palette')}

-
- {colors.map((c, i) => ( -
- - - {c.hex} - - -
- {c.name || c.role} - {c.role} - {!compact && c.usage ? {c.usage} : null} -
-
- ))} -
-
- ) : null} - - {!compact && - (adjectives.length > 0 || - tone || - pillars.length > 0 || - vocabUse.length > 0 || - vocabAvoid.length > 0) ? ( -
-

{t('brandDetail.voiceTone')}

- {adjectives.length > 0 ? ( -
- {adjectives.map((adj, i) => ( - - {adj} - - ))} -
- ) : null} - {tone ?

{tone}

: null} - {pillars.length > 0 ? ( -
    - {pillars.map((p, i) => ( -
  • {p}
    • - ))} -
- ) : null} - {vocabUse.length > 0 || vocabAvoid.length > 0 ? ( -
- {vocabUse.length > 0 ? ( -
- {t('brandDetail.useLabel')} - {vocabUse.join(' · ')} -
- ) : null} - {vocabAvoid.length > 0 ? ( -
- {t('brandDetail.avoidLabel')} - {vocabAvoid.join(' · ')} -
- ) : null} -
- ) : null} -
- ) : null} - - {!compact && - (imagery?.style || - (imagery?.subjects?.length ?? 0) > 0 || - imagery?.treatment || - (imagery?.avoid?.length ?? 0) > 0 || - (layout?.postureRules?.length ?? 0) > 0) ? ( -
-

{t('brandDetail.imageryLayout')}

- {imagery?.style ?

{imagery.style}

: null} - {(imagery?.subjects?.length ?? 0) > 0 ? ( -

- {t('brandDetail.subjects')}:{' '} - {imagery?.subjects.join(', ')} -

- ) : null} - {imagery?.treatment ? ( -

- {t('brandDetail.treatment')}:{' '} - {imagery.treatment} -

- ) : null} - {(imagery?.avoid?.length ?? 0) > 0 ? ( -

- {t('brandDetail.avoidLabel')}:{' '} - {imagery?.avoid.join(', ')} -

- ) : null} - {(layout?.postureRules?.length ?? 0) > 0 ? ( -
-

{t('brandDetail.layoutPosture')}

-
    - {layout?.postureRules.map((r, i) => ( -
  • {r}
    • - ))} -
-
- ) : null} -
- ) : null} - - {!compact && projectId && samples.length > 0 ? ( -
-
-

{t('brandDetail.images')}

- {samples.length > IMAGE_CAP ? ( - - ) : null} -
-
- {(imagesExpanded ? samples : samples.slice(0, IMAGE_CAP)).map((s, i) => { - const src = projectRawUrl(projectId, s.file); - const cap = s.caption || s.kind || name; - return ( -
- - {s.caption || s.kind ? ( -
- {s.caption || s.kind} - {s.caption && s.kind ? ( - {s.kind} - ) : null} -
- ) : null} -
- ); - })} -
-
- ) : null} - - {showSystem && projectId ? ( -
-
-

{t('brandDetail.designSystem')}

- - {t('brandDetail.openFullSystem')} - - -
-
-
-
- - -
- system/kit.html -
- ${escapeHtml(t.label)}${escapeHtml(tr('brandPreview'))}${escapeHtml(t.desc)}`, + ) + .join('')}
`; + + // --- Header identity mark --- + const headerMark = logo + ? `` + : `${initial}`; + + // --- Hero band (first representative image) --- + const heroHtml = images.length + ? `
${escapeHtml(content.title)}
` + : ''; + + // --- Logo --- + const logoThumbs = + logos.length > 1 + ? `
${logos + .map( + (item, i) => + ``, + ) + .join('')}
` + : ''; + const logoBlock = logo + ? `
${escapeHtml(logo.label || content.title)}
${logoThumbs}` + : `
${initial}${escapeHtml(tr('brandNoLogoFound'))}
`; + + // --- Typography --- + const fontTiles = [ + ['Display', 0], + ['Body', 1], + ['Mono', 3], + ] + .map(([label, i]) => ({ label, spec: specs[i] })) + .filter((t) => t.spec && t.spec.family) + .map( + (t) => + `
Ag
${escapeHtml(t.spec.family)}
${escapeHtml(t.label)}
`, + ) + .join(''); + const fontTilesHtml = fontTiles ? `
${fontTiles}
` : ''; + const typeRows = [ + { label: 'Display', i: 0, sample: content.title || 'Aa Bb Cc', size: '32px', weight: 600 }, + { label: 'Body', i: 1, sample: content.description || 'The quick brown fox jumps over the lazy dog.', size: '16px', weight: 400 }, + { label: 'Mono', i: 3, sample: 'const system = capture(url)', size: '13px', weight: 400 }, + ] + .filter((r) => specs[r.i] && specs[r.i].family) + .map((r) => { + const spec = specs[r.i]; + const w = spec.weight ? ` · ${escapeHtml(String(spec.weight))}` : ''; + return `
${escapeHtml(r.label)}${escapeHtml(spec.family)}${w}

${escapeHtml(r.sample)}

`; + }) + .join(''); + + // --- Palette --- + const paletteHtml = colors + .map( + (c) => + `
${escapeHtml(c.hex)}
${escapeHtml(c.name || c.role)}
${escapeHtml(c.role || '')}
${c.usage ? `
${escapeHtml(c.usage)}
` : ''}
`, + ) + .join(''); + + // --- Voice & tone (all observed copy: keyword chips, the site's own + // description, real page headings as key messages) --- + const chips = (content.keywords || []) + .slice(0, 8) + .map((k) => `${escapeHtml(k)}`) + .join(''); + const pillars = (content.headings || []) + .slice(0, 5) + .map((h) => `
  • —${escapeHtml(h)}
    • `) + .join(''); + const voiceHtml = `
    ${chips ? `
    ${chips}
    ` : ''}${content.description ? `

    ${escapeHtml(content.description)}

    ` : ''}${pillars ? `
      ${pillars}
    ` : ''}
    `; + + // --- Imagery & layout --- + const imageryLine = images.length ? tr('brandImageryStyle', { count: images.length }) : tr('brandImageryStyleNone'); + const subjects = (content.keywords || []).slice(0, 6).join(', '); + const posture = (layout.postureRules || []).map((r) => `
  • ${escapeHtml(r)}
    • `).join(''); + const imageryHtml = `

    ${escapeHtml(imageryLine)}

    ${subjects ? `

    ${escapeHtml(tr('brandSubjectsLabel'))}: ${escapeHtml(subjects)}

    ` : ''}

    ${escapeHtml(tr('brandRadiusLabel'))}: ${escapeHtml(layout.radius)}

    ${posture ? `
    ${escapeHtml(tr('brandLayoutPosture'))}
      ${posture}
    ` : ''}
    `; + + // --- Images gallery (compact, click to preview) --- + const gallery = images.length + ? `

    ${escapeHtml(tr('brandImages'))}

    ${images.length > 8 ? `` : ''}
    ${images + .map((s, i) => { + const cap = s.label || ''; + return ``; + }) + .join('')}
    ` + : ''; + + // --- Component kit (a complete, on-brand UI kit) --- + const avatarMark = logo + ? `` + : `${initial}`; + const kit = `
    +
    +
    ${escapeHtml(tr('kitButtons'))}
    +
    + + + + + + + + + +
    +
    +
    +
    ${escapeHtml(tr('kitInputs'))}
    +
    + + + + +
    + + +
    +
    +
    ${escapeHtml(tr('kitSelection'))}
    +
    + + + + ${escapeHtml(tr('kitSwitch'))} + +
    +
    +
    +
    ${escapeHtml(tr('kitBadges'))}
    +
    + ${escapeHtml(tr('kitBadgeNew'))} + ${escapeHtml(tr('kitBadgeBeta'))} + ${escapeHtml(tr('kitBadgePro'))} + ${escapeHtml(tr('kitTableStatus'))} + ${escapeHtml(tr('kitTabOverview'))}× + ${escapeHtml(tr('kitTabActivity'))}× + ${escapeHtml(tr('kitTooltip'))}${escapeHtml(tr('kitTooltipText'))} +
    +
    +
    +
    ${escapeHtml(tr('kitAvatars'))}
    +
    + ${avatarMark}ATGH+5 + ALAda Lovelace${escapeHtml(tr('kitTabOverview'))} +
    +
    +
    +
    ${escapeHtml(tr('kitNav'))}
    +
    + +
    +
    1${escapeHtml(tr('kitStep1'))}2${escapeHtml(tr('kitStep2'))}3${escapeHtml(tr('kitStep3'))}
    +
    +
    +
    +
    +
    ${escapeHtml(tr('kitData'))}
    +
    +
    ${escapeHtml(tr('kitStatVisitors'))}128.4k+12.5%
    +
    ${escapeHtml(tr('kitStatRevenue'))}$48,920+4.2%
    +
    ${escapeHtml(tr('kitStatChurn'))}1.8%-0.4%
    +
    + + + +
    ${escapeHtml(tr('kitTableHead1'))}${escapeHtml(tr('kitTableHead2'))}${escapeHtml(tr('kitTableHead3'))}
    ALAda Lovelace${escapeHtml(tr('kitTabOverview'))}${escapeHtml(tr('kitTableStatus'))}
    ATAlan Turing${escapeHtml(tr('kitTabActivity'))}${escapeHtml(tr('kitTablePending'))}
    +
      +
    • ${escapeHtml(content.headings[0] || content.title)}${escapeHtml(tr('kitListMeta'))}${escapeHtml(tr('kitBadgeNew'))}
      • +
    • ${escapeHtml(content.headings[1] || content.title)}${escapeHtml(tr('kitListMeta'))}›
      • +
    +
    +
    +
    ${escapeHtml(tr('kitFeedback'))}
    +
    ★${escapeHtml(tr('kitAlert'))}
    +
    ${escapeHtml(tr('kitToastTitle'))}${escapeHtml(tr('kitToastBody'))}×
    +
    +
    +
    +
    +
    ${escapeHtml(tr('kitCardTitle'))}
    +

    ${escapeHtml(tr('kitCardBody'))}

    +
    +
    +
    +
    ${escapeHtml(tr('kitTabOverview'))}⌘O
    +
    ${escapeHtml(tr('kitTabActivity'))}⌘A
    +
    +
    ${escapeHtml(tr('kitTabSettings'))}
    +
    +
    +
    +
    ${escapeHtml(tr('kitOverlays'))}
    +
    +
    ${escapeHtml(tr('kitDialogTitle'))}×
    +

    ${escapeHtml(tr('kitDialogBody'))}

    +
    +
    +
    +
    `; + + const json = escapeScriptJson(JSON.stringify(data, null, 2)); + const lbl = escapeScriptJson( + JSON.stringify({ + close: tr('brandClose'), + prev: tr('brandPrevImage'), + next: tr('brandNextImage'), + all: tr('brandAllImages', { count: images.length }), + }), + ); + const api = globalThis.OD_CLIPPER_I18N || I18N; + const htmlLocale = api && api.htmlLang ? api.htmlLang(activeLocale) : activeLocale; + const dir = api && api.isRtl && api.isRtl(activeLocale) ? 'rtl' : 'ltr'; + + return ` + + + + +${escapeHtml(content.title)} — ${escapeHtml(tr('brandPageTitleSuffix'))} + + + + + +
    +
    +
    ${headerMark}

    ${escapeHtml(content.title)}

    ${content.description ? `

    ${escapeHtml(content.description)}

    ` : ''}${content.url ? `${escapeHtml(content.domain || content.url)} ↗` : ''}
    + ${escapeHtml(tr('brandReady'))} +
    + ${heroHtml} +
    +

    ${escapeHtml(tr('brandLogo'))}

    ${logoBlock}
    +

    ${escapeHtml(tr('brandTypography'))}

    ${fontTilesHtml}${typeRows}
    +
    +

    ${escapeHtml(tr('brandPalette'))}

    ${paletteHtml}
    +
    +

    ${escapeHtml(tr('brandVoiceTone'))}

    ${voiceHtml}
    +

    ${escapeHtml(tr('brandImageryLayout'))}

    ${imageryHtml}
    +
    + ${gallery} +

    ${escapeHtml(tr('brandComponentKit'))}

    ${escapeHtml(tr('dsKitSub'))}

    ${kit}
    + ${assetsSection} +

    ${tr('brandDataNote')}

    +
    + + + +`; + } + + window.__odBrandCapture = function (opts) { + setActiveLocale(opts && opts.locale); + const resources = new Set(); + const elements = visibleElements(); + const content = collectContent(); + const palette = collectPalette(elements); + const colors = deriveBrandColors(palette); + const typography = collectTypography(); + const fontFaces = collectFontFaces(resources); + const assets = collectImageAssets(elements, resources); + const components = collectComponents(); + const layout = deriveLayout(components); + const accent = (colors.find((c) => c.role === 'accent') || {}).hex || '#C96442'; + const data = { + version: 2, + kind: 'design-system', + capturedAt: Date.now(), + content, + brand: { name: content.title, tagline: content.description, sourceUrl: content.url, accent, colors }, + palette, + typography, + assets, + layout, + components, + }; + return { + html: renderHtml(data, fontFaces), + resources: Array.from(resources).filter(isHttp).slice(0, MAX_RESOURCES), + title: tr('brandFileTitle', { title: content.title }), + url: location.href, + summary: { + colors: colors.length, + logos: assets.logos.length, + images: assets.images.length, + fonts: typography.families.length, + }, + }; + }; +})(); diff --git a/clipper/capture.js b/clipper/capture.js new file mode 100644 index 000000000..b8cda21c4 --- /dev/null +++ b/clipper/capture.js @@ -0,0 +1,565 @@ +// Open Design web clipper page-capture runtime. +// +// Injected on demand by the service worker via +// `chrome.scripting.executeScript({ files: ['capture.js'] })`. It runs in the +// page (the extension's isolated content-script world — full DOM + layout +// access) and exposes two entry points: +// +// • `window.__odCapture(opts)` — full-page snapshot (the two artifacts below). +// • `window.__odCaptureElement(opts)` — a single picked element captured as a +// self-contained `html` snapshot: the page's CSS is kept so the element's +// cascade resolves, but the DOM is pruned to just the element (and its +// ancestor chain), so opening the saved file shows that one element styled +// as it was on the page. One HTML file, easy to share/distribute. +// +// The full-page pass produces, in ONE go, two artifacts: +// +// 1. `html` — a self-contained, high-fidelity snapshot of the page: +// readable stylesheets inlined, scripts stripped, every URL +// absolutized, and a `` injected. Cross-origin image / +// background URLs are left absolute in the string; the worker +// rewrites them to data URIs afterwards (only the worker can +// fetch cross-origin without CORS). +// +// 2. `figmaIr` — the OD Figma capture IR (a JSON node-tree of FRAME / TEXT / +// RECTANGLE nodes with absolute geometry, fills, strokes, +// corner radii, shadows and fonts). See `figma-plugin/IR.md`. +// Image fills carry a `url` placeholder the worker swaps for a +// data URI. +// +// `resources` is the deduped list of absolute http(s) URLs both outputs depend +// on, so the worker fetches each one only once. +// +// Self-contained, dependency-free, never throws into the caller (the worker +// wraps it best-effort). + +(function () { + if (window.__odCapture) return; // idempotent across repeated injections + + const IR_VERSION = 1; + const MAX_NODES = 6000; // safety cap on IR size; logged when hit + const MAX_RESOURCES = 300; + + // --- small utilities ----------------------------------------------------- + + function absUrl(url, base) { + if (!url) return url; + try { + return new URL(url, base || document.baseURI).href; + } catch { + return url; + } + } + + function isHttp(url) { + return typeof url === 'string' && /^https?:\/\//i.test(url); + } + + // Rewrite every `url(...)` inside a CSS string to an absolute URL resolved + // against `base` (the stylesheet's own href, so relative asset paths work). + function absolutizeCss(cssText, base) { + return cssText.replace(/url\(\s*(['"]?)([^'")]+)\1\s*\)/gi, (m, q, ref) => { + if (/^(data:|blob:|#)/i.test(ref)) return m; + return `url(${q}${absUrl(ref, base)}${q})`; + }); + } + + // Collect absolute http(s) url()s out of a CSS string into `sink`. + function collectCssUrls(cssText, sink) { + const re = /url\(\s*['"]?([^'")]+)['"]?\s*\)/gi; + let m; + while ((m = re.exec(cssText))) { + if (isHttp(m[1])) sink.add(m[1]); + } + } + + function absolutizeSrcset(srcset) { + return srcset + .split(',') + .map((part) => { + const seg = part.trim(); + if (!seg) return ''; + const sp = seg.indexOf(' '); + const url = sp === -1 ? seg : seg.slice(0, sp); + const desc = sp === -1 ? '' : seg.slice(sp); + return `${absUrl(url)}${desc}`; + }) + .filter(Boolean) + .join(', '); + } + + // --- self-contained HTML ------------------------------------------------- + + // Clone , strip the bits a saved snapshot must never carry (live + // scripts, our own on-page UI, the page's ). Shared by the full-page + // and single-element capture paths. + function cloneDocument() { + const clone = document.documentElement.cloneNode(true); + // Strip scripts (the Library renders snapshots sandboxed; live JS only + // mutates the DOM after load and would never run there anyway). + clone.querySelectorAll('script, noscript').forEach((n) => n.remove()); + // Never serialize our own injected on-page UI (toolbar / toast / pickers). + clone.querySelectorAll('[id^="od-clipper-"]').forEach((n) => n.remove()); + // Drop any existing ; we inject our own from the live baseURI. + clone.querySelectorAll('base').forEach((n) => n.remove()); + return clone; + } + + // Inline readable stylesheets in place of their , and absolutize the + // page's inline +
    `); + document.documentElement.appendChild(toastHost); + const toastEl = toastShadow.getElementById('t'); + let toastTimer = null; + // A loading toast (opts.loading) shows a spinner and STAYS until the next + // toast() call replaces it with the success/failure result — so every + // operation keeps a visible "working…" state through to its outcome. + function toast(text, opts) { + const loading = Boolean(opts && opts.loading); + toastHost.style.display = ''; + toastEl.textContent = text; + toastEl.classList.add('show'); + toastEl.classList.toggle('loading', loading); + if (toastTimer) clearTimeout(toastTimer); + if (!loading) { + toastTimer = setTimeout(() => { + toastEl.classList.remove('show'); + toastHost.style.display = 'none'; + }, 2800); + } + } + + // --- launcher toolbar ---------------------------------------------------- + const host = document.createElement('div'); + host.id = 'od-clipper-root'; + // Ships anchored TOP-CENTER with a gap from the edge (Figma-style) so the bar + // reads as a deliberate, prominent surface rather than a corner afterthought. + // `left:50%` + `translateX(-50%)` keeps it centered through window resizes; the + // first drag swaps to explicit left/top px and clears the transform (see + // applyPosition). + host.style.cssText = 'position:fixed;z-index:2147483646;top:24px;left:50%;transform:translateX(-50%);display:none;background:transparent;margin:0;padding:0;border:0;'; + const shadow = host.attachShadow({ mode: 'open' }); + const ICON = { + page: '', + system: '', + figma: '', + shot: '', + region: '', + imgs: '', + element: '', + close: '', + }; + // `data-tip` drives the custom on-hover tooltip below; `aria-label` keeps the + // control named for assistive tech. We deliberately drop the native `title` + // so there's no slow, duplicate OS tooltip stacked on ours. + const btn = (act, title) => + ``; + setHTML(shadow, ` + +
    +
    + +
    + + + + + + + +
    + ${btn('page', t('toolbarCapturePage'))} + ${btn('system', t('toolbarExtractDesignSystem'))} + ${btn('figma', t('toolbarDownloadFigma'))} + ${btn('shot', t('toolbarCaptureScreenshot'))} + ${btn('region', t('toolbarCaptureRegion'))} + ${btn('imgs', t('toolbarPickImages'))} + ${btn('element', t('toolbarPickElement'))} +
    +
    + + + + + +
    + + +
    `); + document.documentElement.appendChild(host); + + let toolbarVisible = false; + let imageHoverEnabled = true; // default-on per-image hover capture badge + let hiddenForCapture = false; + let savedPos = null; // {left, top} in px, set once the user drags the bar + + function applyVisibility() { + const show = toolbarVisible && !hiddenForCapture; + host.style.display = show ? '' : 'none'; + // A position saved while the window was a different size (or while hidden, + // when the bar had no measurable box) can land off-screen — re-clamp the + // moment it becomes visible so it's always reachable. + if (show && savedPos) applyPosition(clampToViewport(savedPos.left, savedPos.top)); + } + function setVisible(visible, persist) { + toolbarVisible = Boolean(visible); + applyVisibility(); + if (persist) { + try { + chrome.storage.local.set({ toolbarVisible }); + } catch { + // storage may be unavailable in some embeds; visibility still applies + } + } + } + + try { + chrome.storage.local.get(['toolbarVisible', 'imageHoverCapture', 'toolbarPos']).then( + (s) => { + if (s && typeof s.imageHoverCapture === 'boolean') imageHoverEnabled = s.imageHoverCapture; + const p = s && s.toolbarPos; + if (p && typeof p.left === 'number' && typeof p.top === 'number') { + savedPos = p; + applyPosition(p); // applyVisibility re-clamps to the live viewport on show + } + setVisible(Boolean(s && s.toolbarVisible), false); + }, + () => {}, + ); + } catch { + // ignore — stays hidden, hover capture stays on + } + + // Delegated per-image hover affordance: one pair of document listeners, gated + // by `imageHoverEnabled` inside the handler so toggling needs no re-binding. + document.addEventListener('mouseover', onDocOver, true); + document.addEventListener('scroll', onDocScroll, true); + + // Toolbar actions sent straight to the worker (no on-page UI of their own). + const WORKER_ACTIONS = { + shot: 'captureScreenshot', + page: 'capturePageToLibrary', + system: 'captureDesignSystemToLibrary', + figma: 'downloadFigma', + }; + + shadow.querySelectorAll('button[data-act]').forEach((btn) => { + btn.addEventListener('click', async () => { + const act = btn.dataset.act; + if (act === 'close') return setVisible(false, true); + if (act === 'imgs') return void pickImages(); + if (act === 'element') return void startElementPick(); + if (act === 'region') return void startRegionPick(); + + const type = WORKER_ACTIONS[act]; + if (!type) return; + // The progress strip stays on the bar for the whole operation. page / + // system / figma are DOM/IR snapshots that exclude our UI by id, so the + // bar never leaves the screen; only `shot` (a pixel screenshot) is briefly + // pulled out for the capture frame, then comes right back with the strip. + // The result toast is the outcome. + startBusy(act); + let res; + try { + res = await chrome.runtime.sendMessage({ type }); + } catch { + stopBusy(); + toast(t('extensionErrorReload')); + return; + } + stopBusy(); + if (!res || !res.ok) { + toast(res && res.error === 'not running' + ? t('openDesignStartApp') + : t('failed', { error: (res && res.error) || t('unknown') })); + return; + } + if (type === 'capturePageToLibrary') { + if (res.deduped) toast(t('pageAlreadyInLibrary')); + else { + // Reduced-fidelity fallback for very large pages: note when some + // images were left as live links so the save isn't misread as full. + const base = res.hasFigma ? t('savedPageFigmaShort') : t('savedPageShort'); + toast(res.partialImages ? `${base} (${t('someImagesLeftLinks')})` : base); + } + } else if (type === 'captureDesignSystemToLibrary') { + toast(res.deduped ? t('designSystemAlreadyInLibrary', { suffix: '' }) : t('savedDesignSystemShort')); + } else if (type === 'downloadFigma') toast(t('figmaDownloaded')); + else toast(res.deduped ? t('alreadyInLibrary') : t('savedScreenshot')); + }); + }); + + // --- drag-to-move -------------------------------------------------------- + // The bar ships anchored bottom-right (right/bottom). The grip handle lets the + // user reposition it: on the first drag we flip to left/top anchoring, follow + // the pointer (clamped inside the viewport), and persist the resting spot so + // it survives reloads and navigations. A dedicated handle — rather than a + // drag-anywhere bar — keeps every action button a plain click with no + // move-vs-click threshold to get wrong. + const grip = shadow.querySelector('.grip'); + const bar = shadow.querySelector('.bar'); + const busyTitleEl = shadow.querySelector('.busy-title'); + const busySubEl = shadow.querySelector('.busy-sub'); + let dragging = false; + // Geometry is captured ONCE per drag (pointerdown) so pointermove never forces + // a synchronous layout read; motion is a compositor-only transform flushed in + // one rAF per frame, and the resting spot is committed to left/top on release. + let pointerStartX = 0, pointerStartY = 0; + let dragOriginLeft = 0, dragOriginTop = 0, dragMaxLeft = 0, dragMaxTop = 0; + let dragDX = 0, dragDY = 0, dragRaf = 0; + + // --- busy / progress state ---------------------------------------------- + // A capture is a single round-trip to the worker, so we can't read true + // progress — but a silent spinner breeds wait-anxiety. Instead each operation + // ships a short, localized SCRIPT of steps with rough timings: the label + // advances on a timer ("Reading styles…" → "Building asset…" → "Saving…"), + // the sub-line shows the step counter and a rough ETA, and once the wait + // crosses the expected budget the sub-line switches to a reassuring "still + // working, hang tight" message (busy-slow). The grip + close stay live the + // whole time so the bar can be moved or dismissed mid-capture. + let busyTimers = []; + const BUSY_PLANS = { + page: { eta: 8, slowAt: 14000, steps: [ + { key: 'busyPageSnapshot', at: 0 }, + { key: 'busyPageInline', at: 1800 }, + { key: 'busyPageSaving', at: 6000 }, + ] }, + system: { eta: 12, slowAt: 20000, steps: [ + { key: 'busySystemReading', at: 0 }, + { key: 'busySystemExtract', at: 2500 }, + { key: 'busySystemBuilding', at: 9000 }, + { key: 'busySystemSaving', at: 15000 }, + ] }, + figma: { eta: 10, slowAt: 16000, steps: [ + { key: 'busyFigmaReading', at: 0 }, + { key: 'busyFigmaBuilding', at: 2200 }, + { key: 'busyFigmaPreparing', at: 8000 }, + ] }, + shot: { eta: 4, slowAt: 8000, steps: [ + { key: 'busyShotCapturing', at: 0 }, + { key: 'busyShotSaving', at: 1600 }, + ] }, + region: { eta: 4, slowAt: 8000, steps: [ + { key: 'busyRegionCapturing', at: 0 }, + { key: 'busyRegionSaving', at: 1600 }, + ] }, + element: { eta: 5, slowAt: 9000, steps: [ + { key: 'busyElementCapturing', at: 0 }, + { key: 'busyElementSaving', at: 1600 }, + ] }, + imgs: { eta: 6, slowAt: 11000, steps: [ + { key: 'busyImagesDownloading', at: 0 }, + { key: 'busyImagesSaving', at: 3000 }, + ] }, + }; + + function clearBusyTimers() { + busyTimers.forEach((id) => clearTimeout(id)); + busyTimers = []; + } + + // The busy strip widens the bar; if the user had dragged it near the right + // edge, re-clamp so it can't grow off-screen (and tuck back on stop). The + // widening is transient, so we preserve the user's chosen resting spot — + // applyPosition mutates savedPos, so snapshot and restore it around the call. + function reclampIfMoved() { + if (!savedPos || host.style.display === 'none') return; + const keep = savedPos; + applyPosition(clampToViewport(savedPos.left, savedPos.top)); + savedPos = keep; + } + + function paintBusyStep(plan, idx, vars) { + busyTitleEl.textContent = t(plan.steps[idx].key, vars); + busySubEl.textContent = + t('busyStepOf', { step: idx + 1, total: plan.steps.length }) + + ' · ' + t('busyAbout', { sec: plan.eta }); + } + + function startBusy(opKey, vars) { + const plan = BUSY_PLANS[opKey] || BUSY_PLANS.shot; + clearBusyTimers(); + bar.classList.remove('busy-slow'); + paintBusyStep(plan, 0, vars); + bar.classList.add('busy'); + reclampIfMoved(); + // Popup-launched captures can run while the on-page bar is hidden, where the + // in-bar strip is invisible — mirror the first step as a loading toast so + // progress is never lost. The result toast replaces it on completion. + if (!toolbarVisible) toast(t(plan.steps[0].key, vars), { loading: true }); + for (let i = 1; i < plan.steps.length; i++) { + busyTimers.push(setTimeout(() => paintBusyStep(plan, i, vars), plan.steps[i].at)); + } + busyTimers.push(setTimeout(() => { + bar.classList.add('busy-slow'); + busySubEl.textContent = t('busyTakingLonger'); + }, plan.slowAt)); + } + + function stopBusy() { + clearBusyTimers(); + bar.classList.remove('busy-slow', 'busy'); + reclampIfMoved(); + } + + // Does the bar's on-screen box intersect a capture rect (viewport coords)? + // Cropped captures (element/region) only need the bar pulled out of frame when + // it would actually land in the crop; otherwise it stays put with its spinner + // and never blinks. Both rects are viewport-relative (getBoundingClientRect). + function barOverlapsRect(r) { + if (!toolbarVisible || hiddenForCapture) return false; + const b = host.getBoundingClientRect(); + if (!b.width || !b.height) return false; + return b.left < r.x + r.width && b.right > r.x && b.top < r.y + r.height && b.bottom > r.y; + } + + function clampToViewport(left, top) { + const rect = host.getBoundingClientRect(); + const maxLeft = Math.max(4, window.innerWidth - rect.width - 4); + const maxTop = Math.max(4, window.innerHeight - rect.height - 4); + return { + left: Math.min(Math.max(4, left), maxLeft), + top: Math.min(Math.max(4, top), maxTop), + }; + } + + function applyPosition(pos) { + host.style.right = 'auto'; + host.style.bottom = 'auto'; + // Drop the top-center centering transform so left/top are honored literally. + host.style.transform = 'none'; + host.style.left = `${pos.left}px`; + host.style.top = `${pos.top}px`; + savedPos = pos; + } + + // One transform write per frame: pointermove only records the (already + // clamped) delta and asks for a frame; the rAF callback is the sole place that + // touches the DOM, so a burst of move events collapses into a single paint. + function flushDrag() { + dragRaf = 0; + host.style.transform = `translate3d(${dragDX}px, ${dragDY}px, 0)`; + } + grip.addEventListener('pointerdown', (e) => { + e.preventDefault(); + // The one and only layout read of the drag: cache the bar's box and the + // viewport clamp bounds so every subsequent move is pure arithmetic. + const rect = host.getBoundingClientRect(); + dragOriginLeft = rect.left; + dragOriginTop = rect.top; + dragMaxLeft = Math.max(4, window.innerWidth - rect.width - 4); + dragMaxTop = Math.max(4, window.innerHeight - rect.height - 4); + pointerStartX = e.clientX; + pointerStartY = e.clientY; + dragDX = 0; + dragDY = 0; + // Anchor to explicit left/top and promote the bar to its own layer; from + // here the drag is a pure translate, so no layout runs per move. + host.style.right = 'auto'; + host.style.bottom = 'auto'; + host.style.left = `${dragOriginLeft}px`; + host.style.top = `${dragOriginTop}px`; + host.style.transform = 'translate3d(0,0,0)'; + dragging = true; + bar.classList.add('dragging'); + try { grip.setPointerCapture(e.pointerId); } catch { /* capture is best-effort */ } + }); + grip.addEventListener('pointermove', (e) => { + if (!dragging) return; + const left = Math.min(Math.max(4, dragOriginLeft + (e.clientX - pointerStartX)), dragMaxLeft); + const top = Math.min(Math.max(4, dragOriginTop + (e.clientY - pointerStartY)), dragMaxTop); + dragDX = left - dragOriginLeft; + dragDY = top - dragOriginTop; + if (!dragRaf) dragRaf = requestAnimationFrame(flushDrag); + }); + function endDrag(e) { + if (!dragging) return; + dragging = false; + bar.classList.remove('dragging'); + if (dragRaf) { cancelAnimationFrame(dragRaf); dragRaf = 0; } + try { grip.releasePointerCapture(e.pointerId); } catch { /* may already be released */ } + // Bake the compositor transform back into a real left/top resting spot. + applyPosition(clampToViewport(dragOriginLeft + dragDX, dragOriginTop + dragDY)); + if (savedPos) { + try { + chrome.storage.local.set({ toolbarPos: savedPos }); + } catch { + // storage may be unavailable in some embeds; the move still applies + } + } + } + grip.addEventListener('pointerup', endDrag); + grip.addEventListener('pointercancel', endDrag); + + // Keep a moved bar on-screen after the window shrinks. + window.addEventListener('resize', () => { + if (!savedPos || host.style.display === 'none') return; + applyPosition(clampToViewport(savedPos.left, savedPos.top)); + }); + + // --- element picker (Figma-style: hover highlight + Capture button) ------ + // A full-viewport BLOCKING surface (pointer-events:auto) sits above the page + // and swallows every mouse event, so the page underneath never navigates or + // reacts while picking — the previous pointer-events:none design let clicks + // fall through, so links/cards activated instead of being captured. We + // hit-test the element under the cursor with elementsFromPoint (skipping our + // own UI) and draw a highlight box that glides to it, with a label and a + // floating "Capture" pill. Clicking the element OR the pill captures it; + // Esc / the ✕ cancels. Wheel is forwarded to the page so off-screen elements + // stay reachable. + let pickActive = false; + let pickHost = null; + let pickShadow = null; + let pickSurface = null; + let boxEl = null; + let labelEl = null; + let currentTarget = null; + let lastPointerX = 0; + let lastPointerY = 0; + + function buildPicker() { + if (pickHost) return; + pickHost = document.createElement('div'); + pickHost.id = 'od-clipper-picker'; + // `background:transparent` defends the full-viewport host against page CSS + // (e.g. `div { background: … }`) bleeding a tint across the whole screen. + // The host itself stays hit-testable (no pointer-events:none) so the inner + // `.surface` can swallow the page's clicks. + pickHost.style.cssText = 'position:fixed;inset:0;z-index:2147483646;background:transparent;margin:0;padding:0;border:0;'; + pickShadow = pickHost.attachShadow({ mode: 'open' }); + setHTML(pickShadow, ` + +
    +
    + + ${esc(t('elementPickerTitle'))}  ·  ${esc(t('elementPickerHint'))} + Esc + +
    +
    +
    + +
    `); + boxEl = pickShadow.getElementById('box'); + labelEl = pickShadow.getElementById('label'); + document.documentElement.appendChild(pickHost); + // The surface owns the picking interaction. Listeners live on it (not the + // page) so the page never sees these events; removing the host on teardown + // takes the listeners with it. + pickSurface = pickShadow.getElementById('surface'); + pickSurface.addEventListener('mousemove', onMove); + pickSurface.addEventListener('mousedown', (e) => e.preventDefault()); // no caret/selection flash + pickSurface.addEventListener('click', onClick); + pickSurface.addEventListener('wheel', onWheel, { passive: false }); + pickShadow.getElementById('chip').addEventListener('click', (e) => { + e.preventDefault(); + e.stopPropagation(); + void commitCapture(currentTarget); + }); + const cancel = pickShadow.querySelector('[data-act="cancel"]'); + if (cancel) cancel.addEventListener('click', () => endElementPick()); + } + + // Our blocking surface is the topmost element at the cursor, so a plain + // elementFromPoint would always return our own UI. Walk the full hit stack and + // return the first element that isn't ours (our shadow hosts surface as the + // light-DOM host id `od-clipper-*`). + function isOwnClipperNode(el) { + if (el === pickHost) return true; + if (typeof el.id === 'string' && el.id.startsWith('od-clipper-')) return true; + return Boolean(el.closest && el.closest('[id^="od-clipper-"]')); + } + + function targetAt(x, y) { + const stack = typeof document.elementsFromPoint === 'function' + ? document.elementsFromPoint(x, y) + : [document.elementFromPoint(x, y)]; + for (const el of stack) { + if (!el || isOwnClipperNode(el)) continue; // skip our own surface / overlays + return el; + } + return null; + } + + function positionBox(el) { + const r = el.getBoundingClientRect(); + boxEl.classList.add('show'); + boxEl.style.left = `${r.left}px`; + boxEl.style.top = `${r.top}px`; + boxEl.style.width = `${Math.max(0, r.width)}px`; + boxEl.style.height = `${Math.max(0, r.height)}px`; + labelEl.textContent = `${el.tagName.toLowerCase()}${el.id ? `#${el.id}` : ''} · ${Math.round(r.width)}×${Math.round(r.height)}`; + } + + // Re-aim the highlight at the last known cursor position. Used on hover and + // after a scroll shifts what's under the (stationary) cursor. + function refreshTarget() { + const el = targetAt(lastPointerX, lastPointerY); + if (!el) return; // over our own UI (chip / hintbar) or nothing → keep the lock + currentTarget = el; + if (boxEl) positionBox(el); + } + + function onMove(e) { + lastPointerX = e.clientX; + lastPointerY = e.clientY; + refreshTarget(); + } + + function onClick(e) { + // The surface already blocks the page; just resolve the target and capture. + e.preventDefault(); + e.stopPropagation(); + const el = targetAt(e.clientX, e.clientY) || currentTarget; + if (el) void commitCapture(el); + } + + function onWheel(e) { + // The surface eats native scroll, so forward it to the page; off-screen + // elements stay reachable. onPickScroll re-aims the highlight afterwards. + e.preventDefault(); + window.scrollBy(e.deltaX, e.deltaY); + } + + function onPickScroll() { + refreshTarget(); + } + + function onKey(e) { + if (e.key === 'Escape') { + e.preventDefault(); + endElementPick(); + toast(t('elementPickCancelled')); + } + } + + function cssPath(el) { + if (el.id) return `${el.tagName.toLowerCase()}#${el.id}`; + let sel = el.tagName.toLowerCase(); + const cls = Array.from(el.classList) + .filter((c) => !c.startsWith('od-clipper')) + .slice(0, 2); + if (cls.length) sel += `.${cls.join('.')}`; + const parent = el.parentElement; + if (parent) { + const sibs = Array.from(parent.children).filter((c) => c.tagName === el.tagName); + if (sibs.length > 1) sel += `:nth-of-type(${sibs.indexOf(el) + 1})`; + } + return sel; + } + + function describeElement(el, rect) { + const meta = { + tag: el.tagName.toLowerCase(), + classes: Array.from(el.classList).filter((c) => !c.startsWith('od-clipper')).slice(0, 10), + selector: cssPath(el), + width: Math.round(rect.width), + height: Math.round(rect.height), + hasHtml: true, + }; + if (el.id) meta.id = el.id; + const text = (el.textContent || '').replace(/\s+/g, ' ').trim().slice(0, 200); + if (text) meta.text = text; + return meta; + } + + // Capture the picked element as ONE self-contained HTML asset (styles + its + // own images inlined) — no screenshot, no separate markup, so the saved card + // is a single HTML file that opens and shares as the element. We mark the live + // element so capture.js (run by the worker) can find and prune the page to it, + // and ALWAYS clear the marker afterwards so we never leave a stray attribute + // on the page. The bar keeps its progress strip through the save (capture.js + // strips our own UI, so nothing needs to leave the frame). + const ELEMENT_MARKER = 'data-od-clip-target'; + async function commitCapture(el) { + if (!el) return; + const rect = el.getBoundingClientRect(); + if (rect.width < 1 || rect.height < 1) { + toast(t('elementNoVisibleSize')); + return; + } + const meta = describeElement(el, rect); + el.setAttribute(ELEMENT_MARKER, ''); + endElementPick(); + startBusy('element'); + let res; + try { + res = await chrome.runtime.sendMessage({ + type: 'captureElementHtml', + meta, + sourceUrl: location.href, + sourceTitle: document.title, + }); + } catch (err) { + console.warn('[Open Design] element capture failed', err); + stopBusy(); + toast(t('extensionErrorReload')); + return; + } finally { + el.removeAttribute(ELEMENT_MARKER); + } + stopBusy(); + if (!res || !res.ok) { + toast(res && res.error === 'not running' + ? t('openDesignStartApp') + : t('failed', { error: (res && res.error) || t('unknown') })); + return; + } + toast(res.deduped ? t('elementAlreadyInLibrary') : t('elementSaved')); + } + + function startElementPick() { + if (pickActive) return; + endRegionPick(); // on-page picking surfaces are mutually exclusive + pickActive = true; + currentTarget = null; + buildPicker(); // wires mouse/wheel listeners on the surface + // Esc to cancel; capture-phase scroll so the highlight tracks the page as it + // moves under a stationary cursor. + document.addEventListener('keydown', onKey, true); + document.addEventListener('scroll', onPickScroll, true); + } + + function endElementPick() { + pickActive = false; + currentTarget = null; + document.removeEventListener('keydown', onKey, true); + document.removeEventListener('scroll', onPickScroll, true); + if (pickHost) { + pickHost.remove(); // also drops the surface's mouse/wheel listeners + pickHost = null; + pickShadow = null; + pickSurface = null; + boxEl = null; + labelEl = null; + } + } + + // --- image multi-select overlay ------------------------------------------ + // Collect every picture-worthy image on the page, keeping a reference to the + // DOM element each one came from so the picker can scroll-to / highlight the + // source ("where is this from?"). Two sources, since a picker that only walks + // `document.images` silently misses everything painted as a CSS background + // (hero banners, section art, avatars): (which already resolves + // /srcset via currentSrc) and computed background-image url()s. + const MAX_PICKER_IMAGES = 300; + function collectImagesInPage() { + const out = []; + const seen = new Set(); + const add = (rawSrc, alt, w, h, el) => { + if (out.length >= MAX_PICKER_IMAGES) return; + let src = rawSrc; + try { + src = new URL(rawSrc, location.href).href; + } catch { + return; + } + if (!src || seen.has(src) || !/^https?:/i.test(src)) return; + seen.add(src); + out.push({ src, alt: alt || '', w: w || 0, h: h || 0, el }); + }; + + for (const el of document.images) { + const src = el.currentSrc || el.src; + if (!src) continue; + // Prefer decoded natural size; fall back to the laid-out box so lazy + // images that haven't decoded yet still pass the size gate and show. + let w = el.naturalWidth || 0; + let h = el.naturalHeight || 0; + if (!w || !h) { + const r = el.getBoundingClientRect(); + w = Math.round(r.width); + h = Math.round(r.height); + } + if (Math.max(w, h) < 32) continue; + add(src, el.alt, w, h, el); + } + + // Background images. getComputedStyle is the costly call, so gate on the + // (cheaper) box size first and stop once we've hit the cap. + const all = document.body ? document.body.getElementsByTagName('*') : []; + for (let i = 0; i < all.length && out.length < MAX_PICKER_IMAGES; i += 1) { + const el = all[i]; + if (el.id && el.id.startsWith('od-clipper-')) continue; + const r = el.getBoundingClientRect(); + if (Math.max(r.width, r.height) < 64) continue; // skip sprite/icon chrome + const bg = getComputedStyle(el).backgroundImage; + if (!bg || bg === 'none' || bg.indexOf('url(') === -1) continue; + const m = /url\(\s*['"]?([^'")]+)['"]?\s*\)/i.exec(bg); + if (m) add(m[1], el.getAttribute('aria-label') || '', Math.round(r.width), Math.round(r.height), el); + } + + return out; + } + + let imagePickerHost = null; + let locateCleanup = null; // tears down an in-progress "find on page" highlight + + function clearLocate() { + if (locateCleanup) { + locateCleanup(); + locateCleanup = null; + } + } + + function closeImagePicker() { + clearLocate(); + if (imagePickerHost) { + imagePickerHost.remove(); + imagePickerHost = null; + } + } + + // Draw a page's already-decoded into a small canvas for use as the grid + // thumbnail. The browser holds the source bitmap once (it's on the page); + // this keeps only a ~116px copy instead of a second full-res decode per cell — + // the difference between ~24K and ~2M pixels for a 1920px hero image. Drawing + // a cross-origin image taints the canvas, but we only ever *display* it (never + // read pixels back), so that's fine. + function drawThumbCanvas(srcEl, w, h) { + try { + const maxSide = 116 * Math.min(2, window.devicePixelRatio || 1); + const scale = Math.min(1, maxSide / Math.max(w, h)); + const canvas = document.createElement('canvas'); + canvas.width = Math.max(1, Math.round(w * scale)); + canvas.height = Math.max(1, Math.round(h * scale)); + canvas.getContext('2d').drawImage(srcEl, 0, 0, canvas.width, canvas.height); + return canvas; + } catch { + return null; // tainted-source draw failure → caller falls back to + } + } + + // Build a cell's thumbnail node. Two cheap paths, no extra full-res decode: + // • The image is already a decoded on the page → draw it once into a + // tiny canvas (instant, no network, ~116px of memory). + // • Otherwise (CSS background, not-yet-decoded ) → a real with + // native loading="lazy", so off-screen cells defer their fetch and the + // browser cache usually serves it (the page already loaded it). + // Returning the node directly (rather than mutating a cell via an observer) + // keeps rendering synchronous and reliable — nothing can get stuck pending. + function makeThumb(item) { + const el = item.el; + if (el && el.tagName === 'IMG' && el.complete && el.naturalWidth > 0) { + const canvas = drawThumbCanvas(el, el.naturalWidth, el.naturalHeight); + if (canvas) { + canvas.className = 'thumb'; + return canvas; + } + } + const img = document.createElement('img'); + img.className = 'thumb shim'; // shimmer until the bytes arrive + img.decoding = 'async'; + img.loading = 'lazy'; + img.referrerPolicy = 'no-referrer'; + img.addEventListener('load', () => img.classList.remove('shim'), { once: true }); + img.addEventListener('error', () => img.classList.remove('shim'), { once: true }); + img.src = item.src; + return img; + } + + // "Find on page": dim the picker, smooth-scroll the source element into view, + // and track it with a pulsing spotlight ring through the scroll (rAF re-reads + // the rect each frame so it stays glued to the element). Restores the picker + // after a beat. Lets the user see exactly where a thumbnail came from. + function locateImage(el) { + if (!el || !el.isConnected) { + toast('That image’s source is no longer on the page'); + return; + } + clearLocate(); + if (imagePickerHost) { + imagePickerHost.style.transition = 'opacity 140ms cubic-bezier(0.23,1,0.32,1)'; + imagePickerHost.style.opacity = '0'; + imagePickerHost.style.pointerEvents = 'none'; + } + const host = document.createElement('div'); + host.id = 'od-clipper-locate'; + host.style.cssText = + 'position:fixed;inset:0;z-index:2147483645;pointer-events:none;margin:0;padding:0;border:0;background:transparent;'; + const sh = host.attachShadow({ mode: 'open' }); + setHTML( + sh, + `
    `, + ); + document.documentElement.appendChild(host); + const ring = sh.getElementById('ring'); + el.scrollIntoView({ block: 'center', inline: 'center', behavior: 'smooth' }); + let raf = 0; + const sync = () => { + const r = el.getBoundingClientRect(); + ring.style.left = `${r.left}px`; + ring.style.top = `${r.top}px`; + ring.style.width = `${r.width}px`; + ring.style.height = `${r.height}px`; + raf = requestAnimationFrame(sync); + }; + sync(); + const timer = setTimeout(() => clearLocate(), 1800); + locateCleanup = () => { + cancelAnimationFrame(raf); + clearTimeout(timer); + host.remove(); + if (imagePickerHost) { + imagePickerHost.style.opacity = '1'; + imagePickerHost.style.pointerEvents = ''; + } + }; + } + + function pickImages() { + closeImagePicker(); + const images = collectImagesInPage(); + if (!images.length) { + toast(t('noImagesFound')); + return; + } + imagePickerHost = document.createElement('div'); + imagePickerHost.id = 'od-clipper-imagepicker'; + imagePickerHost.style.cssText = 'position:fixed;inset:0;z-index:2147483646;background:transparent;margin:0;padding:0;border:0;'; + const sh = imagePickerHost.attachShadow({ mode: 'open' }); + setHTML(sh, ` + +
    + +
    `); + + const grid = sh.getElementById('grid'); + // Crosshair "find on page" glyph, reused per cell. + const LOC_SVG = + ''; + // Build all cells in the detached shadow tree (no reflow until attach). + // Thumbnails render synchronously: a canvas drawn from the page's decoded + // (cheap, bounded memory) or a native lazy for URL-load cases. + const checkboxes = []; + images.forEach((img, i) => { + const cell = document.createElement('div'); + cell.className = 'cell'; + cell.__odItem = img; + const checkbox = document.createElement('input'); + checkbox.type = 'checkbox'; + checkbox.dataset.i = String(i); + checkbox.setAttribute('aria-label', img.alt || t('imageLabel', { index: i + 1 })); + const thumb = makeThumb(img); + const loc = document.createElement('button'); + loc.type = 'button'; + loc.className = 'loc'; + loc.title = t('findOnPage'); + setHTML(loc, LOC_SVG); + const dim = document.createElement('span'); + dim.className = 'dim'; + dim.textContent = img.w && img.h ? `${img.w}×${img.h}` : ''; + cell.append(checkbox, thumb, loc, dim); + grid.appendChild(cell); + checkboxes.push(checkbox); + }); + + const countEl = sh.getElementById('count'); + const saveBtn = sh.getElementById('save'); + // Track the count incrementally so toggling a checkbox is O(1), not an + // O(n) re-scan of the whole grid on every click. + let selected = 0; + function paintCount() { + countEl.textContent = t('selectedCount', { selected, total: images.length }); + saveBtn.textContent = t('saveNToLibrary', { count: selected }); + saveBtn.disabled = selected === 0; + } + grid.addEventListener('change', (e) => { + if (!(e.target instanceof HTMLInputElement)) return; + selected += e.target.checked ? 1 : -1; + paintCount(); + }); + // Cell click toggles selection; the locate button is carved out so "find on + // page" never also (de)selects the image. + grid.addEventListener('click', (e) => { + const target = e.target instanceof Element ? e.target : null; + if (!target) return; + const locBtn = target.closest('.loc'); + if (locBtn) { + e.preventDefault(); + e.stopPropagation(); + const cell = locBtn.closest('.cell'); + if (cell && cell.__odItem) locateImage(cell.__odItem.el); + return; + } + if (target instanceof HTMLInputElement) return; // native toggle fires change + const cell = target.closest('.cell'); + const cb = cell && cell.querySelector('input'); + if (cb) { + cb.checked = !cb.checked; + cb.dispatchEvent(new Event('change', { bubbles: true })); + } + }); + + sh.getElementById('ov').addEventListener('click', (e) => { + const a = e.target instanceof Element ? e.target.getAttribute('data-a') : null; + if (!a) { + if (e.target === sh.getElementById('ov')) closeImagePicker(); + return; + } + if (a === 'close') closeImagePicker(); + else if (a === 'all') { checkboxes.forEach((c) => (c.checked = true)); selected = images.length; paintCount(); } + else if (a === 'none') { checkboxes.forEach((c) => (c.checked = false)); selected = 0; paintCount(); } + }); + + saveBtn.addEventListener('click', async () => { + const chosen = checkboxes.filter((c) => c.checked).map((c) => images[Number(c.dataset.i)]); + if (!chosen.length) return; + saveBtn.disabled = true; + saveBtn.textContent = t('saving'); + closeImagePicker(); + // Progress on the bar through the save, matching every other capture + // action — the count rides into the busy label, so no separate toast. + // ingestImages takes no screenshot, so the bar stays put — no blink. + startBusy('imgs', { count: chosen.length }); + let res; + try { + res = await chrome.runtime.sendMessage({ + type: 'ingestImages', + images: chosen.map((c) => ({ src: c.src, alt: c.alt })), + sourceUrl: location.href, + sourceTitle: document.title, + }); + } catch { + stopBusy(); + toast(t('extensionErrorReload')); + return; + } + stopBusy(); + if (!res || !res.ok) { + toast(res && res.error === 'not running' + ? t('openDesignStartApp') + : t('failed', { error: (res && res.error) || t('unknown') })); + return; + } + toast(t('savedImagesCount', { count: res.count, total: res.total })); + }); + + document.documentElement.appendChild(imagePickerHost); + } + + // --- region picker (drag a box → crop the visible tab) ------------------- + // A full-viewport surface with a crosshair. Drag to rubber-band a rectangle; + // on release the worker screenshots the visible tab and crops to the box. The + // surface tears down before the capture so none of our UI lands in the frame. + let regionActive = false; + let regionHost = null; + let regionShadow = null; + let regionRectEl = null; + let regionStart = null; + + function startRegionPick() { + if (regionActive) return; + endElementPick(); // on-page picking surfaces are mutually exclusive + regionActive = true; + regionStart = null; + regionHost = document.createElement('div'); + regionHost.id = 'od-clipper-region'; + regionHost.style.cssText = 'position:fixed;inset:0;z-index:2147483646;background:transparent;margin:0;padding:0;border:0;'; + regionShadow = regionHost.attachShadow({ mode: 'open' }); + setHTML(regionShadow, ` + +
    +
    +
    ${esc(t('dragToSelectRegion'))}  ${esc(t('dragToSelectRegionTail'))}  Esc
    `); + document.documentElement.appendChild(regionHost); + regionRectEl = regionShadow.getElementById('sel'); + const sizeEl = regionShadow.getElementById('size'); + const surface = regionShadow.getElementById('surface'); + + const place = (a, b) => { + const x = Math.min(a.x, b.x); + const y = Math.min(a.y, b.y); + const w = Math.abs(a.x - b.x); + const h = Math.abs(a.y - b.y); + regionRectEl.style.display = 'block'; + regionRectEl.style.left = `${x}px`; + regionRectEl.style.top = `${y}px`; + regionRectEl.style.width = `${w}px`; + regionRectEl.style.height = `${h}px`; + sizeEl.textContent = `${Math.round(w)} × ${Math.round(h)}`; + return { x, y, w, h }; + }; + surface.addEventListener('mousedown', (e) => { + if (e.button !== 0) return; + e.preventDefault(); + regionStart = { x: e.clientX, y: e.clientY }; + place(regionStart, regionStart); + }); + surface.addEventListener('mousemove', (e) => { + if (regionStart) place(regionStart, { x: e.clientX, y: e.clientY }); + }); + surface.addEventListener('mouseup', (e) => { + if (!regionStart) return; + const r = place(regionStart, { x: e.clientX, y: e.clientY }); + regionStart = null; + if (r.w < 6 || r.h < 6) { + toast(t('regionTooSmall')); + return; + } + void commitRegionCapture(r); + }); + document.addEventListener('keydown', onRegionKey, true); + } + + function onRegionKey(e) { + if (e.key === 'Escape') { + e.preventDefault(); + endRegionPick(); + toast(t('regionCancelled')); + } + } + + function endRegionPick() { + regionActive = false; + regionStart = null; + document.removeEventListener('keydown', onRegionKey, true); + if (regionHost) { + regionHost.remove(); + regionHost = null; + regionShadow = null; + regionRectEl = null; + } + } + + async function commitRegionCapture(r) { + const payloadRect = { x: r.x, y: r.y, width: r.w, height: r.h }; + endRegionPick(); + startBusy('region'); + const hideBar = barOverlapsRect(payloadRect); + // Two frames so our torn-down picker surface is off the compositor before + // the worker screenshots. + await new Promise((done) => requestAnimationFrame(() => requestAnimationFrame(done))); + let res; + try { + res = await chrome.runtime.sendMessage({ + type: 'captureRegion', + rect: payloadRect, + viewportWidth: window.innerWidth, + viewportHeight: window.innerHeight, + dpr: window.devicePixelRatio || 1, + sourceUrl: location.href, + sourceTitle: document.title, + hideBar, + }); + } catch { + stopBusy(); + toast(t('extensionErrorReload')); + return; + } + stopBusy(); + if (!res || !res.ok) { + toast(res && res.error === 'not running' + ? t('openDesignStartApp') + : t('failed', { error: (res && res.error) || t('unknown') })); + return; + } + toast(res.deduped ? t('regionAlreadyInLibrary') : t('regionSaved')); + } + + // --- per-image hover capture badge --------------------------------------- + // A single delegated badge that follows the cursor over images, so any image + // can be clipped in one click. One document-level listener (not per-image) + // keeps it cheap on image-heavy pages. On by default; toggled from the popup. + const IMG_HOVER_MIN = 48; // px — ignore icons/sprites smaller than this + let imgBadgeHost = null; + let imgBadgeBtn = null; + let hoveredImg = null; + let badgeHideTimer = null; + + function buildImageBadge() { + if (imgBadgeHost) return; + imgBadgeHost = document.createElement('div'); + imgBadgeHost.id = 'od-clipper-imghover'; + imgBadgeHost.style.cssText = 'position:fixed;left:0;top:0;z-index:2147483645;display:none;background:transparent;margin:0;padding:0;border:0;pointer-events:none;'; + const sh = imgBadgeHost.attachShadow({ mode: 'open' }); + setHTML(sh, ` + +
    + + ${esc(t('saveImageToOpenDesign'))} +
    `); + document.documentElement.appendChild(imgBadgeHost); + imgBadgeBtn = sh.getElementById('b'); + // The pointer crosses a 1-frame gap between leaving the image and reaching + // the badge; keep it alive while the cursor is on the button. + imgBadgeBtn.addEventListener('mouseenter', () => { + if (badgeHideTimer) clearTimeout(badgeHideTimer); + }); + imgBadgeBtn.addEventListener('click', async (e) => { + e.preventDefault(); + e.stopPropagation(); + const img = hoveredImg; + const src = img && (img.currentSrc || img.src); + if (!src) return; + hideImageBadge(); + // The badge vanishes on click, so the toast is the only feedback — keep it + // a spinner that holds until the result replaces it. + toast(t('savingImage'), { loading: true }); + let res; + try { + res = await chrome.runtime.sendMessage({ + type: 'ingestImages', + images: [{ src, alt: img.alt || '' }], + sourceUrl: location.href, + sourceTitle: document.title, + }); + } catch { + toast(t('extensionErrorReload')); + return; + } + if (!res || !res.ok) { + toast(res && res.error === 'not running' + ? t('openDesignStartApp') + : t('failed', { error: (res && res.error) || t('unknown') })); + return; + } + toast(res.count ? t('imageSaved') : t('imageSaveFailed')); + }); + } + + function positionImageBadge(img) { + const r = img.getBoundingClientRect(); + if (r.width < IMG_HOVER_MIN || r.height < IMG_HOVER_MIN) { + hideImageBadge(); + return; + } + buildImageBadge(); + hoveredImg = img; + if (badgeHideTimer) clearTimeout(badgeHideTimer); + imgBadgeHost.style.display = ''; + // Inset into the image's top-right corner; clamp into the viewport. + const top = Math.max(4, Math.round(r.top + 6)); + const left = Math.min(window.innerWidth - 30, Math.round(r.right - 32)); + imgBadgeHost.style.transform = `translate(${left}px, ${top}px)`; + } + + function hideImageBadge() { + hoveredImg = null; + if (imgBadgeHost) imgBadgeHost.style.display = 'none'; + } + + function scheduleHideBadge() { + if (badgeHideTimer) clearTimeout(badgeHideTimer); + badgeHideTimer = setTimeout(hideImageBadge, 140); + } + + function setImageHover(enabled, persist) { + imageHoverEnabled = Boolean(enabled); + if (!imageHoverEnabled) hideImageBadge(); + if (persist) { + try { + chrome.storage.local.set({ imageHoverCapture: imageHoverEnabled }); + } catch { + // storage unavailable — runtime state still applies + } + } + } + + function onDocOver(e) { + if (!imageHoverEnabled || hiddenForCapture) return; + const t = e.target; + // Retargeting collapses shadow children to their host, so hovering our own + // badge surfaces here as the `od-clipper-imghover` host → keep it alive. + if (!t || (typeof t.id === 'string' && t.id.startsWith('od-clipper-'))) return; + if (t.tagName === 'IMG') { + positionImageBadge(t); + } else { + scheduleHideBadge(); + } + } + + function onDocScroll() { + // Badge positions are viewport-fixed; a scroll invalidates them. Hide and + // let the next hover re-place the badge. + if (hoveredImg) hideImageBadge(); + } + + // --- messages from the popup / service worker ---------------------------- + chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => { + switch (msg && msg.type) { + case 'odClipper:setToolbar': + setVisible(msg.mode === 'toggle' ? !toolbarVisible : msg.visible, true); + sendResponse({ ok: true, visible: toolbarVisible }); + return false; + case 'odClipper:getToolbar': + sendResponse({ ok: true, visible: toolbarVisible }); + return false; + case 'odClipper:pickElement': + startElementPick(); + sendResponse({ ok: true }); + return false; + case 'odClipper:pickImages': + pickImages(); + sendResponse({ ok: true }); + return false; + case 'odClipper:pickRegion': + startRegionPick(); + sendResponse({ ok: true }); + return false; + case 'odClipper:setImageHover': + setImageHover(Boolean(msg.enabled), true); + sendResponse({ ok: true, enabled: imageHoverEnabled }); + return false; + case 'odClipper:getImageHover': + sendResponse({ ok: true, enabled: imageHoverEnabled }); + return false; + case 'odClipper:ping': + // Liveness probe — lets the popup distinguish "no content script" from a + // genuinely broken page and decide whether a reload is warranted. + sendResponse({ ok: true, alive: true }); + return false; + case 'odClipper:hideForCapture': { + // Pull every piece of our on-page UI out of frame for the screenshot: + // the bar, the cursor-following image badge, and any visible toast. + hiddenForCapture = true; + applyVisibility(); + hideImageBadge(); + toastHost.style.display = 'none'; + requestAnimationFrame(() => requestAnimationFrame(() => sendResponse({ ok: true }))); + return true; // async response + } + case 'odClipper:restoreAfterCapture': + hiddenForCapture = false; + applyVisibility(); + sendResponse({ ok: true }); + return false; + default: + return false; + } + }); + + // Flag the page as attached only now that the listener above is live. If any + // earlier step had thrown (e.g. a Trusted Types violation on a hostile host + // page), the guard stays unset so a reload or the popup's "Refresh page" + // re-injection can retry — instead of short-circuiting on a half-initialized + // page forever. The whole body above is synchronous, so a concurrent + // re-injection still sees the guard set before it can run past the top check. + window.__odClipperInjected = true; +})(); diff --git a/clipper/i18n.js b/clipper/i18n.js new file mode 100644 index 000000000..b456235ee --- /dev/null +++ b/clipper/i18n.js @@ -0,0 +1,651 @@ +// Open Design Web Clipper i18n runtime. +// +// Standalone on purpose: the clipper is not part of the pnpm workspace, so the +// popup, content script, service worker, and injected design-system renderer all use +// this small browser/worker-safe dictionary instead of importing app code. + +(function () { + const LOCALES = ['en', 'id', 'de', 'zh-CN', 'zh-TW', 'pt-BR', 'es-ES', 'ru', 'fa', 'ar', 'ja', 'ko', 'pl', 'hu', 'fr', 'uk', 'tr', 'th', 'it', 'vi', 'nl']; + const RTL = new Set(['ar', 'fa']); + + const en = { + extensionName: 'Open Design Web Clipper', + extensionDescription: 'Clip pages, design systems, screenshots, images, and Figma import JSON into your Open Design Library.', + webClipper: 'Web Clipper', + openDesign: 'Open Design', + statusConnected: 'Connected', + statusOffline: 'Offline', + infoLabel: 'What gets captured', + infoTooltip: '"Capture page" saves a self-contained page copy. "Extract design system" saves a structured design-system HTML asset. Figma JSON must be imported with the OD Figma Import plugin, not dragged into Figma Drafts.', + capturePageTitle: 'Capture page', + capturePageSub: 'Full-fidelity snapshot -> Library', + screenshot: 'Screenshot', + region: 'Region', + pickImages: 'Pick images', + pickElement: 'Pick element', + figmaJson: 'Figma JSON', + extractDesignSystem: 'Extract design system', + hintHtml: 'Open Design is not running. Start the app, then reopen this popup - the clipper connects automatically.', + advanced: 'Advanced', + onPageBar: 'On-page bar', + onPageBarSub: 'floating launcher on the page', + imageHoverButton: 'Image hover button', + imageHoverButtonSub: 'tiny save button on each image', + inlineImages: 'Inline images', + inlineImagesSub: 'higher fidelity, larger files', + daemonUrl: 'Daemon URL', + save: 'Save', + refreshPage: 'Refresh page', + refreshPageTitle: 'Reload this page so Open Design can attach', + toggleOnPageBar: 'Toggle the on-page bar', + toggleImageHover: 'Toggle the per-image hover capture button', + close: 'Close', + cancel: 'Cancel', + clear: 'Clear', + selectAll: 'Select all', + unknown: 'unknown', + noResponse: 'no response', + failed: 'Failed: {error}', + extensionErrorReload: 'Extension error - reload the page', + openDesignNotRunning: 'Open Design is not running - start the app first.', + savedConnected: 'Saved - connected.', + savedNotDetected: 'Saved, but Open Design was not detected at that URL.', + capturingPage: 'Capturing page...', + pageAlreadyInLibrary: 'Page already in library.', + largePagePartialLayout: 'large page - partial layout', + figmaLayoutSkippedPageTooLarge: 'Figma layout skipped - page too large', + resourcesLeftLinks: '{count} resource(s) left as links', + imagesLeftLinks: '{count} image(s) left as links', + savedPageWithFigma: 'Saved page + Figma capture{suffix} to library.', + savedPage: 'Saved page{suffix} to library.', + buildingFigma: 'Building Figma import JSON...', + figmaDownloaded: 'Figma JSON downloaded. Open it with the OD Figma Import plugin (Figma -> Plugins -> Development) - do not drag the file into Figma. First time: install the plugin once from figma-plugin/ (see its README).', + extractingDesignSystem: 'Extracting design system...', + designSystemAlreadyInLibrary: 'Design system already in library{suffix}.', + designSystemSaved: 'Design system saved to library{suffix}.', + capturingScreenshot: 'Capturing screenshot...', + alreadyInLibrary: 'Already in library.', + screenshotSaved: 'Screenshot saved to library.', + openNormalPage: 'Open a normal web page to use this.', + openNormalPageForBar: 'Open a normal web page to use the on-page bar.', + odNotAttached: 'Open Design has not attached to this page yet.', + elementPickerUnavailable: 'The element picker is not available on this page - try a normal website.', + imagePickerUnavailable: 'The image picker is not available on this page - try a normal website.', + regionUnavailable: 'Region capture is not available on this page - try a normal website.', + clickElement: 'Click an element on the page...', + pickImagesOnPage: 'Pick images on the page...', + dragRegionOnPage: 'Drag a region on the page...', + onPageBarUnavailable: 'The on-page bar is not available on this page - try a normal website.', + onPageBarShown: 'On-page bar shown.', + onPageBarHidden: 'On-page bar hidden.', + imageHoverOn: 'Image hover button on.', + imageHoverOff: 'Image hover button off.', + readyTryAgain: 'Ready - try again.', + reloadingPage: 'Reloading the page...', + reloadedReopen: 'Reloaded - reopen this popup to continue.', + toolbarDrag: 'Drag to move', + toolbarDragLabel: 'Drag the Open Design bar', + toolbarHomeTip: 'Open Design - open-design.ai', + toolbarHomeLabel: 'Open Design home', + toolbarCapturePage: 'Capture page -> Library', + toolbarExtractDesignSystem: 'Extract design system', + toolbarDownloadFigma: 'Download Figma import JSON', + toolbarCaptureScreenshot: 'Capture screenshot', + toolbarCaptureRegion: 'Capture a region', + toolbarPickImages: 'Pick images to save', + toolbarPickElement: 'Pick an element to capture', + toolbarHide: 'Hide Open Design bar', + openDesignStartApp: 'Open Design is not running - start the app', + savedPageFigmaShort: 'Saved page + Figma', + savedPageShort: 'Saved page', + someImagesLeftLinks: 'some images left as links', + savedDesignSystemShort: 'Saved design system', + savedScreenshot: 'Saved screenshot', + elementPickerTitle: 'Select an element', + elementPickerHint: 'hover, then click to capture', + capture: 'Capture', + elementPickCancelled: 'Element pick cancelled', + elementNoVisibleSize: 'That element has no visible size', + elementAlreadyInLibrary: 'Element already in library', + elementSaved: 'Saved element to library', + noImagesFound: 'No images found on this page', + selectImagesToSave: 'Select images to save', + selectedCount: '{selected} / {total} selected', + saveNToLibrary: 'Save {count} to Library', + imageLabel: 'Image {index}', + findOnPage: 'Find on page', + saving: 'Saving...', + savingImages: 'Saving {count} image(s)...', + savedImagesCount: 'Saved {count}/{total} image(s) to library', + // On-bar progress while a capture runs: a step counter, a rough ETA, and a + // patience line once the wait runs past the expected budget. + busyStepOf: 'Step {step} of {total}', + busyAbout: 'about {sec}s', + busyTakingLonger: 'Still working — thanks for your patience', + busyPageSnapshot: 'Snapshotting the page…', + busyPageInline: 'Inlining styles & images…', + busyPageSaving: 'Saving to your Library…', + busySystemReading: 'Reading page styles…', + busySystemExtract: 'Extracting colors, type & components…', + busySystemBuilding: 'Building the design-system asset…', + busySystemSaving: 'Saving to your Library…', + busyFigmaReading: 'Reading the page layout…', + busyFigmaBuilding: 'Building Figma import JSON…', + busyFigmaPreparing: 'Preparing the download…', + busyShotCapturing: 'Capturing screenshot…', + busyShotSaving: 'Saving to your Library…', + busyRegionCapturing: 'Capturing the region…', + busyRegionSaving: 'Saving to your Library…', + busyElementCapturing: 'Capturing the element…', + busyElementSaving: 'Saving to your Library…', + busyImagesDownloading: 'Downloading {count} image(s)…', + busyImagesSaving: 'Saving to your Library…', + regionTooSmall: 'Region too small - drag a larger box', + regionCancelled: 'Region capture cancelled', + dragToSelectRegion: 'Drag', + dragToSelectRegionTail: 'to select a region', + regionAlreadyInLibrary: 'Region already in library', + regionSaved: 'Saved region to library', + saveImageToLibrary: 'Save image to Open Design Library', + saveImageToOpenDesign: 'Save image to Open Design', + savingImage: 'Saving image...', + imageSaved: 'Saved image to library', + imageSaveFailed: 'Could not save that image', + errorCaptureTooLarge: 'Capture too large - try unchecking "Inline images" in Advanced', + errorDesignSystemCaptureFailed: 'design system capture failed', + brandFallbackTitle: 'Captured brand', + brandFallbackDescription: 'Programmatically extracted from the live web page.', + brandPageTitleSuffix: 'Design System Capture', + brandFileTitle: '{title} Design System', + brandExtracted: 'Extracted design system', + brandAssetMap: 'Brand asset map', + brandAssetMapSub: '6 extracted groups', + brandLogo: 'Logo', + brandImages: 'Images', + brandTypography: 'Typography', + brandPalette: 'Palette', + brandVoice: 'Voice', + brandComponents: 'Components', + brandLogoCount: '{count} marks and app icons', + brandImageCount: '{count} representative images', + brandFontCount: '{count} font families', + brandColorCount: '{count} observed colors', + brandHeadingCount: '{count} heading samples', + brandComponentSummary: 'Buttons, fields, cards and navigation', + brandIdentity: 'Identity', + brandLogoSub: 'Brand marks', + brandTypographySub: 'Live computed styles', + brandPaletteSub: 'Light and dark tokens', + brandComponentKit: 'Component kit', + brandComponentKitSub: 'Template filled from page tokens', + brandImagesSub: 'Representative assets', + brandVoiceContent: 'Voice & Content', + brandVoiceContentSub: 'Detected headings', + brandNoImages: 'No large page images were detected.', + brandObservedColor: 'observed color', + brandNoHeading: 'No heading sample was available.', + brandKeywordFallback: 'captured brand', + brandAssetAlt: 'Brand asset', + brandLogoAsset: 'Logo asset', + brandImageAlt: 'Brand image {index}', + brandImageLabel: 'Image {index}', + brandTheme: 'Theme', + brandLight: 'Light', + brandDark: 'Dark', + brandPrimaryAction: 'Primary action', + brandSecondaryAction: 'Secondary', + brandFormField: 'Form field', + brandFormFieldSample: 'Form field sample', + brandSurfaceCard: 'Surface card', + brandSurfaceCardText: 'Radius, border, color and type inherit from the extracted design system.', + brandNavigationItem: 'Navigation item', + brandDataNote: 'This file contains a structured JSON payload at #od-design-system-data for future automation.', + swatchBackground: 'Background', + swatchSurface: 'Surface', + swatchForeground: 'Foreground', + swatchMuted: 'Muted', + swatchBorder: 'Border', + swatchAccent: 'Accent', + swatchSupport: 'Support', + swatchHighlight: 'Highlight', + swatchColor: 'Color {index}', + }; + + const overrides = { + id: { + extensionDescription: 'Klip halaman, sistem desain, tangkapan layar, gambar, dan JSON impor Figma ke Library Open Design.', + webClipper: 'Web Clipper', statusConnected: 'Terhubung', statusOffline: 'Offline', + capturePageTitle: 'Klip halaman', capturePageSub: 'Snapshot lengkap -> Library', + screenshot: 'Tangkapan layar', region: 'Area', pickImages: 'Pilih gambar', pickElement: 'Pilih elemen', + extractDesignSystem: 'Ekstrak sistem desain', advanced: 'Lanjutan', inlineImages: 'Sematkan gambar', + onPageBar: 'Bilah di halaman', imageHoverButton: 'Tombol gambar', save: 'Simpan', refreshPage: 'Muat ulang halaman', + extractingDesignSystem: 'Mengekstrak sistem desain...', designSystemSaved: 'Sistem desain disimpan ke library{suffix}.', + toolbarExtractDesignSystem: 'Ekstrak sistem desain', savedDesignSystemShort: 'Sistem desain disimpan', + brandExtracted: 'Sistem desain diekstrak', brandPageTitleSuffix: 'Tangkapan Sistem Desain', brandAssetMap: 'Peta aset sistem desain', + brandIdentity: 'Identitas', brandLogo: 'Logo', brandImages: 'Gambar', brandTypography: 'Tipografi', + brandPalette: 'Palet', brandVoice: 'Suara', brandComponents: 'Komponen', brandComponentKit: 'Kit komponen', + }, + de: { + extensionDescription: 'Sammle Seiten, Designsysteme, Screenshots, Bilder und Figma-Import-JSON in deiner Open Design Library.', + webClipper: 'Web Clipper', statusConnected: 'Verbunden', statusOffline: 'Offline', + capturePageTitle: 'Seite erfassen', capturePageSub: 'Vollständiger Snapshot -> Library', + screenshot: 'Screenshot', region: 'Bereich', pickImages: 'Bilder wählen', pickElement: 'Element wählen', + extractDesignSystem: 'Designsystem extrahieren', advanced: 'Erweitert', inlineImages: 'Bilder einbetten', + onPageBar: 'Seitenleiste', imageHoverButton: 'Bild-Hover-Button', save: 'Speichern', refreshPage: 'Seite neu laden', + extractingDesignSystem: 'Designsystem wird extrahiert...', designSystemSaved: 'Designsystem in Library gespeichert{suffix}.', + toolbarExtractDesignSystem: 'Designsystem extrahieren', savedDesignSystemShort: 'Designsystem gespeichert', + brandExtracted: 'Extrahiertes Designsystem', brandPageTitleSuffix: 'Designsystem-Erfassung', brandAssetMap: 'Designsystem-Asset-Karte', + brandIdentity: 'Identität', brandLogo: 'Logo', brandImages: 'Bilder', brandTypography: 'Typografie', + brandPalette: 'Palette', brandVoice: 'Stimme', brandComponents: 'Komponenten', brandComponentKit: 'Komponenten-Kit', + }, + 'zh-CN': { + extensionName: 'Open Design 网页剪藏', + extensionDescription: '将网页、设计系统、截图、图片和 Figma 导入 JSON 剪藏到 Open Design 素材库。', + webClipper: '网页剪藏', statusConnected: '已连接', statusOffline: '离线', + infoLabel: '捕获内容说明', + infoTooltip: '“捕获页面”会保存自包含页面副本。“提取设计系统”会保存结构化设计系统 HTML 资产。Figma JSON 需要在 OD Figma Import 插件内导入，不能拖进 Figma Drafts。', + capturePageTitle: '捕获页面', capturePageSub: '高保真快照 -> 素材库', + screenshot: '截图', region: '区域', pickImages: '选择图片', pickElement: '选择元素', + figmaJson: 'Figma JSON', extractDesignSystem: '提取设计系统', + hintHtml: 'Open Design 未运行。启动应用后重新打开此弹窗，插件会自动连接。', + advanced: '高级', onPageBar: '页面浮条', onPageBarSub: '网页上的悬浮启动器', + imageHoverButton: '图片悬浮按钮', imageHoverButtonSub: '每张图片上的小保存按钮', + inlineImages: '内联图片', inlineImagesSub: '保真度更高，文件更大', + daemonUrl: 'Daemon 地址', save: '保存', refreshPage: '刷新页面', refreshPageTitle: '刷新此页面以便 Open Design 挂载', + toggleOnPageBar: '切换页面浮条', toggleImageHover: '切换图片悬浮捕获按钮', + openDesignNotRunning: 'Open Design 未运行，请先启动应用。', savedConnected: '已保存，已连接。', + savedNotDetected: '已保存，但该地址未检测到 Open Design。', capturingPage: '正在捕获页面...', + pageAlreadyInLibrary: '页面已在素材库中。', largePagePartialLayout: '页面较大，布局部分捕获', + figmaLayoutSkippedPageTooLarge: '页面过大，已跳过 Figma 布局', resourcesLeftLinks: '{count} 个资源保留为链接', + imagesLeftLinks: '{count} 张图片保留为链接', savedPageWithFigma: '已保存页面 + Figma 捕获{suffix}到素材库。', + savedPage: '已保存页面{suffix}到素材库。', buildingFigma: '正在生成 Figma 导入 JSON...', + figmaDownloaded: 'Figma JSON 已下载。请用 OD Figma Import 插件打开（Figma -> Plugins -> Development），不要直接把文件拖进 Figma。首次使用需先从 figma-plugin/ 安装插件（见其 README）。', + extractingDesignSystem: '正在提取设计系统...', designSystemAlreadyInLibrary: '设计系统已在素材库中{suffix}。', + designSystemSaved: '设计系统已保存到素材库{suffix}。', capturingScreenshot: '正在截图...', + alreadyInLibrary: '已在素材库中。', screenshotSaved: '截图已保存到素材库。', + openNormalPage: '请打开普通网页后使用。', openNormalPageForBar: '请打开普通网页后使用页面浮条。', + odNotAttached: 'Open Design 尚未挂载到此页面。', elementPickerUnavailable: '此页面不可使用元素选择器，请尝试普通网站。', + imagePickerUnavailable: '此页面不可使用图片选择器，请尝试普通网站。', regionUnavailable: '此页面不可使用区域截图，请尝试普通网站。', + clickElement: '在页面上点击一个元素...', pickImagesOnPage: '在页面上选择图片...', dragRegionOnPage: '在页面上拖选区域...', + onPageBarUnavailable: '此页面不可使用页面浮条，请尝试普通网站。', onPageBarShown: '页面浮条已显示。', + onPageBarHidden: '页面浮条已隐藏。', imageHoverOn: '图片悬浮按钮已开启。', imageHoverOff: '图片悬浮按钮已关闭。', + readyTryAgain: '已就绪，请重试。', reloadingPage: '正在刷新页面...', reloadedReopen: '已刷新，请重新打开此弹窗继续。', + toolbarDrag: '拖动移动', toolbarDragLabel: '拖动 Open Design 浮条', toolbarCapturePage: '捕获页面 -> 素材库', + toolbarExtractDesignSystem: '提取设计系统', toolbarDownloadFigma: '下载 Figma 导入 JSON', toolbarCaptureScreenshot: '截图', + toolbarCaptureRegion: '捕获区域', toolbarPickImages: '选择要保存的图片', toolbarPickElement: '选择要捕获的元素', + toolbarHide: '隐藏 Open Design 浮条', openDesignStartApp: 'Open Design 未运行，请启动应用', + savedPageFigmaShort: '已保存页面 + Figma', savedPageShort: '已保存页面', someImagesLeftLinks: '部分图片保留为链接', + savedDesignSystemShort: '已保存设计系统', savedScreenshot: '已保存截图', + elementPickerTitle: '选择元素', elementPickerHint: '悬停后点击捕获', capture: '捕获', cancel: '取消', clear: '清除', + selectAll: '全选', close: '关闭', elementPickCancelled: '已取消元素选择', elementNoVisibleSize: '该元素没有可见尺寸', + elementAlreadyInLibrary: '元素已在素材库中', elementSaved: '元素已保存到素材库', + noImagesFound: '此页面未找到图片', selectImagesToSave: '选择要保存的图片', + selectedCount: '已选择 {selected} / {total}', saveNToLibrary: '保存 {count} 个到素材库', + imageLabel: '图片 {index}', findOnPage: '在页面中定位', saving: '正在保存...', savingImages: '正在保存 {count} 张图片...', + busyStepOf: '第 {step}/{total} 步', busyAbout: '约 {sec} 秒', busyTakingLonger: '仍在处理，请耐心等待…', + busyPageSnapshot: '正在快照页面…', busyPageInline: '正在内联样式与图片…', busyPageSaving: '正在保存到素材库…', + busySystemReading: '正在读取页面样式…', busySystemExtract: '正在提取颜色、字体与组件…', + busySystemBuilding: '正在生成设计系统资源…', busySystemSaving: '正在保存到素材库…', + busyFigmaReading: '正在读取页面布局…', busyFigmaBuilding: '正在生成 Figma 导入 JSON…', busyFigmaPreparing: '正在准备下载…', + busyShotCapturing: '正在截图…', busyShotSaving: '正在保存到素材库…', + busyRegionCapturing: '正在捕获区域…', busyRegionSaving: '正在保存到素材库…', + busyElementCapturing: '正在捕获元素…', busyElementSaving: '正在保存到素材库…', + busyImagesDownloading: '正在下载 {count} 张图片…', busyImagesSaving: '正在保存到素材库…', + savedImagesCount: '已保存 {count}/{total} 张图片到素材库', regionTooSmall: '区域太小，请拖选更大的框', + regionCancelled: '已取消区域截图', dragToSelectRegion: '拖动', dragToSelectRegionTail: '选择区域', + regionAlreadyInLibrary: '区域已在素材库中', regionSaved: '区域已保存到素材库', + saveImageToLibrary: '保存图片到 Open Design 素材库', saveImageToOpenDesign: '保存图片到 Open Design', + savingImage: '正在保存图片...', imageSaved: '图片已保存到素材库', imageSaveFailed: '无法保存该图片', + errorCaptureTooLarge: '捕获内容过大，请在高级设置中取消“内联图片”后重试', errorDesignSystemCaptureFailed: '设计系统捕获失败', + brandFallbackTitle: '捕获的品牌', brandFallbackDescription: '从实时网页中程序化提取。', + brandPageTitleSuffix: '设计系统捕获', brandFileTitle: '{title} 设计系统', brandExtracted: '提取的设计系统', + brandAssetMap: '品牌资产地图', brandAssetMapSub: '6 组提取结果', brandLogo: '标志', brandImages: '图片', + brandTypography: '字体', brandPalette: '色板', brandVoice: '语气', brandComponents: '组件', + brandLogoCount: '{count} 个标志和应用图标', brandImageCount: '{count} 张代表图片', + brandFontCount: '{count} 个字体族', brandColorCount: '{count} 个观察到的颜色', + brandHeadingCount: '{count} 个标题样本', brandComponentSummary: '按钮、表单、卡片和导航', + brandIdentity: '身份', brandLogoSub: '品牌标志', brandTypographySub: '实时计算样式', + brandPaletteSub: '浅色和深色令牌', brandComponentKit: '组件套件', brandComponentKitSub: '用页面令牌填充的模板', + brandImagesSub: '代表性资产', brandVoiceContent: '语气与内容', brandVoiceContentSub: '检测到的标题', + brandNoImages: '未检测到大尺寸页面图片。', brandObservedColor: '观察到的颜色', brandNoHeading: '没有可用标题样本。', + brandKeywordFallback: '捕获的品牌', brandAssetAlt: '品牌资产', brandLogoAsset: '标志资产', + brandImageAlt: '品牌图片 {index}', brandImageLabel: '图片 {index}', brandTheme: '主题', + brandLight: '浅色', brandDark: '深色', brandPrimaryAction: '主要操作', brandSecondaryAction: '次要操作', + brandFormField: '表单字段', brandFormFieldSample: '表单字段示例', brandSurfaceCard: '表面卡片', + brandSurfaceCardText: '圆角、边框、颜色和字体继承自提取的设计系统。', brandNavigationItem: '导航项', + brandDataNote: '此文件在 #od-design-system-data 中包含结构化 JSON，供后续自动化使用。', + swatchBackground: '背景', swatchSurface: '表面', swatchForeground: '前景', swatchMuted: '弱化', + swatchBorder: '边框', swatchAccent: '强调', swatchSupport: '辅助', swatchHighlight: '高亮', swatchColor: '颜色 {index}', + }, + 'zh-TW': { + extensionName: 'Open Design 網頁剪藏', + extensionDescription: '將網頁、設計系統、截圖、圖片和 Figma 匯入 JSON 剪藏到 Open Design 素材庫。', + webClipper: '網頁剪藏', statusConnected: '已連線', statusOffline: '離線', + capturePageTitle: '擷取頁面', capturePageSub: '高保真快照 -> 素材庫', + screenshot: '截圖', region: '區域', pickImages: '選擇圖片', pickElement: '選擇元素', + extractDesignSystem: '提取設計系統', advanced: '進階', inlineImages: '內嵌圖片', + onPageBar: '頁面浮條', imageHoverButton: '圖片懸浮按鈕', save: '儲存', refreshPage: '重新整理頁面', + extractingDesignSystem: '正在提取設計系統...', designSystemSaved: '設計系統已儲存到素材庫{suffix}。', + toolbarExtractDesignSystem: '提取設計系統', savedDesignSystemShort: '已儲存設計系統', + brandExtracted: '提取的設計系統', brandPageTitleSuffix: '設計系統擷取', brandAssetMap: '設計系統資產地圖', + brandIdentity: '識別', brandLogo: '標誌', brandImages: '圖片', brandTypography: '字體', + brandPalette: '色板', brandVoice: '語氣', brandComponents: '元件', brandComponentKit: '元件套件', + brandLight: '淺色', brandDark: '深色', + busyStepOf: '第 {step}/{total} 步', busyAbout: '約 {sec} 秒', busyTakingLonger: '仍在處理，請耐心等候…', + busyPageSnapshot: '正在快照頁面…', busyPageInline: '正在內聯樣式與圖片…', busyPageSaving: '正在儲存到素材庫…', + busySystemReading: '正在讀取頁面樣式…', busySystemExtract: '正在提取顏色、字體與元件…', + busySystemBuilding: '正在產生設計系統資源…', busySystemSaving: '正在儲存到素材庫…', + busyFigmaReading: '正在讀取頁面佈局…', busyFigmaBuilding: '正在產生 Figma 匯入 JSON…', busyFigmaPreparing: '正在準備下載…', + busyShotCapturing: '正在截圖…', busyShotSaving: '正在儲存到素材庫…', + busyRegionCapturing: '正在擷取區域…', busyRegionSaving: '正在儲存到素材庫…', + busyElementCapturing: '正在擷取元素…', busyElementSaving: '正在儲存到素材庫…', + busyImagesDownloading: '正在下載 {count} 張圖片…', busyImagesSaving: '正在儲存到素材庫…', + }, + 'pt-BR': { + extensionDescription: 'Capture páginas, kits de marca, screenshots, imagens e JSON de importação do Figma na sua Library Open Design.', + statusConnected: 'Conectado', statusOffline: 'Offline', capturePageTitle: 'Capturar página', + screenshot: 'Screenshot', region: 'Região', pickImages: 'Escolher imagens', pickElement: 'Escolher elemento', + extractDesignSystem: 'Extrair sistema de design', advanced: 'Avançado', inlineImages: 'Incorporar imagens', + onPageBar: 'Barra na página', save: 'Salvar', refreshPage: 'Recarregar página', + toolbarExtractDesignSystem: 'Extrair sistema de design', savedDesignSystemShort: 'Sistema de design salvo', + brandExtracted: 'Sistema de design extraído', brandPageTitleSuffix: 'Captura de Sistema de Design', + brandAssetMap: 'Mapa de ativos do sistema de design', brandIdentity: 'Identidade', brandLogo: 'Logo', + brandImages: 'Imagens', brandTypography: 'Tipografia', brandPalette: 'Paleta', brandVoice: 'Voz', + brandComponents: 'Componentes', brandComponentKit: 'Kit de componentes', + }, + 'es-ES': { + extensionDescription: 'Guarda páginas, kits de marca, capturas, imágenes y JSON de importación de Figma en tu Library de Open Design.', + statusConnected: 'Conectado', statusOffline: 'Sin conexión', capturePageTitle: 'Capturar página', + screenshot: 'Captura', region: 'Región', pickImages: 'Elegir imágenes', pickElement: 'Elegir elemento', + extractDesignSystem: 'Extraer sistema de diseño', advanced: 'Avanzado', inlineImages: 'Incrustar imágenes', + onPageBar: 'Barra en página', save: 'Guardar', refreshPage: 'Recargar página', + toolbarExtractDesignSystem: 'Extraer sistema de diseño', savedDesignSystemShort: 'Sistema de diseño guardado', + brandExtracted: 'Sistema de diseño extraído', brandPageTitleSuffix: 'Captura de Sistema de Diseño', + brandAssetMap: 'Mapa de activos del sistema de diseño', brandIdentity: 'Identidad', brandLogo: 'Logo', + brandImages: 'Imágenes', brandTypography: 'Tipografía', brandPalette: 'Paleta', brandVoice: 'Voz', + brandComponents: 'Componentes', brandComponentKit: 'Kit de componentes', + }, + ru: { + extensionDescription: 'Сохраняйте страницы, дизайн-системы, скриншоты, изображения и Figma import JSON в библиотеку Open Design.', + statusConnected: 'Подключено', statusOffline: 'Офлайн', capturePageTitle: 'Захватить страницу', + screenshot: 'Скриншот', region: 'Область', pickImages: 'Выбрать изображения', pickElement: 'Выбрать элемент', + extractDesignSystem: 'Извлечь дизайн-систему', advanced: 'Дополнительно', inlineImages: 'Встроить изображения', + onPageBar: 'Панель на странице', save: 'Сохранить', refreshPage: 'Обновить страницу', + toolbarExtractDesignSystem: 'Извлечь дизайн-систему', savedDesignSystemShort: 'Дизайн-система сохранена', + brandExtracted: 'Извлеченная дизайн-система', brandPageTitleSuffix: 'Захват дизайн-системы', + brandAssetMap: 'Карта активов дизайн-системы', brandIdentity: 'Идентичность', brandLogo: 'Логотип', + brandImages: 'Изображения', brandTypography: 'Типографика', brandPalette: 'Палитра', brandVoice: 'Тон', + brandComponents: 'Компоненты', brandComponentKit: 'Набор компонентов', + }, + fa: { + extensionDescription: 'صفحه‌ها، سیستم‌های طراحی، اسکرین‌شات‌ها، تصاویر و JSON واردسازی Figma را در کتابخانه Open Design ذخیره کنید.', + statusConnected: 'متصل', statusOffline: 'آفلاین', capturePageTitle: 'گرفتن صفحه', + screenshot: 'اسکرین‌شات', region: 'ناحیه', pickImages: 'انتخاب تصاویر', pickElement: 'انتخاب المان', + extractDesignSystem: 'استخراج سیستم طراحی', advanced: 'پیشرفته', inlineImages: 'درون‌گذاری تصاویر', + onPageBar: 'نوار روی صفحه', save: 'ذخیره', refreshPage: 'بازخوانی صفحه', + toolbarExtractDesignSystem: 'استخراج سیستم طراحی', savedDesignSystemShort: 'سیستم طراحی ذخیره شد', + brandExtracted: 'سیستم طراحی استخراج‌شده', brandPageTitleSuffix: 'برداشت سیستم طراحی', + brandAssetMap: 'نقشه دارایی سیستم طراحی', brandIdentity: 'هویت', brandLogo: 'لوگو', + brandImages: 'تصاویر', brandTypography: 'تایپوگرافی', brandPalette: 'پالت', brandVoice: 'لحن', + brandComponents: 'کامپوننت‌ها', brandComponentKit: 'کیت کامپوننت', + }, + ar: { + extensionDescription: 'احفظ الصفحات وأنظمة التصميم ولقطات الشاشة والصور وملف Figma JSON في مكتبة Open Design.', + statusConnected: 'متصل', statusOffline: 'غير متصل', capturePageTitle: 'التقاط الصفحة', + screenshot: 'لقطة شاشة', region: 'منطقة', pickImages: 'اختر الصور', pickElement: 'اختر عنصرا', + extractDesignSystem: 'استخراج نظام التصميم', advanced: 'متقدم', inlineImages: 'تضمين الصور', + onPageBar: 'شريط الصفحة', save: 'حفظ', refreshPage: 'تحديث الصفحة', + toolbarExtractDesignSystem: 'استخراج نظام التصميم', savedDesignSystemShort: 'تم حفظ نظام التصميم', + brandExtracted: 'نظام تصميم مستخرج', brandPageTitleSuffix: 'التقاط نظام التصميم', + brandAssetMap: 'خريطة أصول نظام التصميم', brandIdentity: 'الهوية', brandLogo: 'الشعار', + brandImages: 'الصور', brandTypography: 'الخطوط', brandPalette: 'الألوان', brandVoice: 'النبرة', + brandComponents: 'المكونات', brandComponentKit: 'عدة المكونات', + }, + ja: { + extensionDescription: 'ページ、デザインシステム、スクリーンショット、画像、Figma インポート JSON を Open Design Library に保存します。', + webClipper: 'Web クリッパー', statusConnected: '接続済み', statusOffline: 'オフライン', + capturePageTitle: 'ページを取得', capturePageSub: '高忠実度スナップショット -> Library', + screenshot: 'スクリーンショット', region: '範囲', pickImages: '画像を選択', pickElement: '要素を選択', + extractDesignSystem: 'デザインシステムを抽出', advanced: '詳細', inlineImages: '画像を埋め込む', + onPageBar: 'ページ上バー', imageHoverButton: '画像ホバーボタン', save: '保存', refreshPage: 'ページを再読み込み', + extractingDesignSystem: 'デザインシステムを抽出中...', designSystemSaved: 'デザインシステムを Library に保存しました{suffix}。', + toolbarExtractDesignSystem: 'デザインシステムを抽出', savedDesignSystemShort: 'デザインシステムを保存', + brandExtracted: '抽出したデザインシステム', brandPageTitleSuffix: 'デザインシステム取得', + brandAssetMap: 'ブランドアセットマップ', brandIdentity: 'アイデンティティ', brandLogo: 'ロゴ', + brandImages: '画像', brandTypography: 'タイポグラフィ', brandPalette: 'パレット', brandVoice: 'トーン', + brandComponents: 'コンポーネント', brandComponentKit: 'コンポーネントキット', + }, + ko: { + extensionDescription: '페이지, 디자인 시스템, 스크린샷, 이미지, Figma 가져오기 JSON을 Open Design Library에 저장합니다.', + statusConnected: '연결됨', statusOffline: '오프라인', capturePageTitle: '페이지 캡처', + screenshot: '스크린샷', region: '영역', pickImages: '이미지 선택', pickElement: '요소 선택', + extractDesignSystem: '디자인 시스템 추출', advanced: '고급', inlineImages: '이미지 포함', + onPageBar: '페이지 바', save: '저장', refreshPage: '페이지 새로고침', + toolbarExtractDesignSystem: '디자인 시스템 추출', savedDesignSystemShort: '디자인 시스템 저장됨', + brandExtracted: '추출된 디자인 시스템', brandPageTitleSuffix: '디자인 시스템 캡처', + brandAssetMap: '디자인 시스템 에셋 맵', brandIdentity: '아이덴티티', brandLogo: '로고', + brandImages: '이미지', brandTypography: '타이포그래피', brandPalette: '팔레트', brandVoice: '보이스', + brandComponents: '컴포넌트', brandComponentKit: '컴포넌트 키트', + }, + pl: { + extensionDescription: 'Zapisuj strony, systemy projektowe, zrzuty ekranu, obrazy i JSON importu Figma w bibliotece Open Design.', + statusConnected: 'Połączono', statusOffline: 'Offline', capturePageTitle: 'Przechwyć stronę', + screenshot: 'Zrzut ekranu', region: 'Region', pickImages: 'Wybierz obrazy', pickElement: 'Wybierz element', + extractDesignSystem: 'Wyodrębnij system projektowy', advanced: 'Zaawansowane', inlineImages: 'Osadź obrazy', + onPageBar: 'Pasek na stronie', save: 'Zapisz', refreshPage: 'Odśwież stronę', + toolbarExtractDesignSystem: 'Wyodrębnij system projektowy', savedDesignSystemShort: 'System projektowy zapisany', + brandExtracted: 'Wyodrębniony system projektowy', brandPageTitleSuffix: 'Przechwycenie systemu projektowego', + brandAssetMap: 'Mapa zasobów systemu projektowego', brandIdentity: 'Tożsamość', brandLogo: 'Logo', + brandImages: 'Obrazy', brandTypography: 'Typografia', brandPalette: 'Paleta', brandVoice: 'Głos', + brandComponents: 'Komponenty', brandComponentKit: 'Zestaw komponentów', + }, + hu: { + extensionDescription: 'Oldalak, designrendszerek, képernyőképek, képek és Figma import JSON mentése az Open Design Librarybe.', + statusConnected: 'Csatlakozva', statusOffline: 'Offline', capturePageTitle: 'Oldal mentése', + screenshot: 'Képernyőkép', region: 'Terület', pickImages: 'Képek kiválasztása', pickElement: 'Elem kiválasztása', + extractDesignSystem: 'Designrendszer kinyerése', advanced: 'Speciális', inlineImages: 'Képek beágyazása', + onPageBar: 'Oldalsáv', save: 'Mentés', refreshPage: 'Oldal frissítése', + toolbarExtractDesignSystem: 'Designrendszer kinyerése', savedDesignSystemShort: 'Designrendszer mentve', + brandExtracted: 'Kinyert designrendszer', brandPageTitleSuffix: 'Designrendszer-rögzítés', + brandAssetMap: 'Designrendszer-eszköztérkép', brandIdentity: 'Identitás', brandLogo: 'Logó', + brandImages: 'Képek', brandTypography: 'Tipográfia', brandPalette: 'Paletta', brandVoice: 'Hang', + brandComponents: 'Komponensek', brandComponentKit: 'Komponenskészlet', + }, + fr: { + extensionDescription: 'Capturez pages, systèmes de design, captures, images et JSON import Figma dans votre Library Open Design.', + statusConnected: 'Connecté', statusOffline: 'Hors ligne', capturePageTitle: 'Capturer la page', + screenshot: 'Capture', region: 'Zone', pickImages: 'Choisir images', pickElement: 'Choisir élément', + extractDesignSystem: 'Extraire le système de design', advanced: 'Avancé', inlineImages: 'Intégrer les images', + onPageBar: 'Barre de page', save: 'Enregistrer', refreshPage: 'Recharger la page', + toolbarExtractDesignSystem: 'Extraire le système de design', savedDesignSystemShort: 'Système de design enregistré', + brandExtracted: 'Système de design extrait', brandPageTitleSuffix: 'Capture du système de design', + brandAssetMap: 'Carte des actifs du système de design', brandIdentity: 'Identité', brandLogo: 'Logo', + brandImages: 'Images', brandTypography: 'Typographie', brandPalette: 'Palette', brandVoice: 'Voix', + brandComponents: 'Composants', brandComponentKit: 'Kit de composants', + }, + uk: { + extensionDescription: 'Зберігайте сторінки, дизайн-системи, скриншоти, зображення та Figma import JSON у бібліотеку Open Design.', + statusConnected: 'Підключено', statusOffline: 'Офлайн', capturePageTitle: 'Захопити сторінку', + screenshot: 'Скриншот', region: 'Область', pickImages: 'Вибрати зображення', pickElement: 'Вибрати елемент', + extractDesignSystem: 'Витягти дизайн-систему', advanced: 'Додатково', inlineImages: 'Вбудувати зображення', + onPageBar: 'Панель сторінки', save: 'Зберегти', refreshPage: 'Оновити сторінку', + toolbarExtractDesignSystem: 'Витягти дизайн-систему', savedDesignSystemShort: 'Дизайн-систему збережено', + brandExtracted: 'Витягнута дизайн-система', brandPageTitleSuffix: 'Захоплення дизайн-системи', + brandAssetMap: 'Мапа активів дизайн-системи', brandIdentity: 'Ідентичність', brandLogo: 'Логотип', + brandImages: 'Зображення', brandTypography: 'Типографіка', brandPalette: 'Палітра', brandVoice: 'Голос', + brandComponents: 'Компоненти', brandComponentKit: 'Набір компонентів', + }, + tr: { + extensionDescription: 'Sayfaları, tasarım sistemlerini, ekran görüntülerini, görselleri ve Figma içe aktarma JSONunu Open Design Libraryye kaydedin.', + statusConnected: 'Bağlandı', statusOffline: 'Çevrimdışı', capturePageTitle: 'Sayfayı yakala', + screenshot: 'Ekran görüntüsü', region: 'Bölge', pickImages: 'Görsel seç', pickElement: 'Öğe seç', + extractDesignSystem: 'Tasarım sistemini çıkar', advanced: 'Gelişmiş', inlineImages: 'Görselleri göm', + onPageBar: 'Sayfa çubuğu', save: 'Kaydet', refreshPage: 'Sayfayı yenile', + toolbarExtractDesignSystem: 'Tasarım sistemini çıkar', savedDesignSystemShort: 'Tasarım sistemi kaydedildi', + brandExtracted: 'Çıkarılan tasarım sistemi', brandPageTitleSuffix: 'Tasarım Sistemi Yakalama', + brandAssetMap: 'Tasarım sistemi varlık haritası', brandIdentity: 'Kimlik', brandLogo: 'Logo', + brandImages: 'Görseller', brandTypography: 'Tipografi', brandPalette: 'Palet', brandVoice: 'Ses', + brandComponents: 'Bileşenler', brandComponentKit: 'Bileşen kiti', + }, + th: { + extensionDescription: 'บันทึกหน้าเว็บ ระบบดีไซน์ ภาพหน้าจอ รูปภาพ และ Figma import JSON ไปยัง Open Design Library', + statusConnected: 'เชื่อมต่อแล้ว', statusOffline: 'ออฟไลน์', capturePageTitle: 'จับภาพหน้า', + screenshot: 'ภาพหน้าจอ', region: 'พื้นที่', pickImages: 'เลือกรูปภาพ', pickElement: 'เลือกองค์ประกอบ', + extractDesignSystem: 'ดึงระบบดีไซน์', advanced: 'ขั้นสูง', inlineImages: 'ฝังรูปภาพ', + onPageBar: 'แถบบนหน้า', save: 'บันทึก', refreshPage: 'โหลดหน้าใหม่', + toolbarExtractDesignSystem: 'ดึงระบบดีไซน์', savedDesignSystemShort: 'บันทึกระบบดีไซน์แล้ว', + brandExtracted: 'ระบบดีไซน์ที่ดึงมา', brandPageTitleSuffix: 'การจับระบบดีไซน์', + brandAssetMap: 'แผนที่ทรัพยากรระบบดีไซน์', brandIdentity: 'อัตลักษณ์', brandLogo: 'โลโก้', + brandImages: 'รูปภาพ', brandTypography: 'ตัวอักษร', brandPalette: 'พาเลต', brandVoice: 'น้ำเสียง', + brandComponents: 'คอมโพเนนต์', brandComponentKit: 'ชุดคอมโพเนนต์', + }, + it: { + extensionDescription: 'Salva pagine, design system, screenshot, immagini e JSON di importazione Figma nella Library Open Design.', + statusConnected: 'Connesso', statusOffline: 'Offline', capturePageTitle: 'Acquisisci pagina', + screenshot: 'Screenshot', region: 'Area', pickImages: 'Scegli immagini', pickElement: 'Scegli elemento', + extractDesignSystem: 'Estrai design system', advanced: 'Avanzate', inlineImages: 'Incorpora immagini', + onPageBar: 'Barra pagina', save: 'Salva', refreshPage: 'Ricarica pagina', + toolbarExtractDesignSystem: 'Estrai design system', savedDesignSystemShort: 'Design system salvato', + brandExtracted: 'Design system estratto', brandPageTitleSuffix: 'Acquisizione Design System', + brandAssetMap: 'Mappa asset del design system', brandIdentity: 'Identità', brandLogo: 'Logo', + brandImages: 'Immagini', brandTypography: 'Tipografia', brandPalette: 'Palette', brandVoice: 'Voce', + brandComponents: 'Componenti', brandComponentKit: 'Kit componenti', + }, + vi: { + extensionDescription: 'Lưu trang, hệ thống thiết kế, ảnh chụp màn hình, hình ảnh và JSON nhập Figma vào Open Design Library.', + statusConnected: 'Đã kết nối', statusOffline: 'Ngoại tuyến', capturePageTitle: 'Chụp trang', + screenshot: 'Ảnh chụp màn hình', region: 'Vùng', pickImages: 'Chọn hình ảnh', pickElement: 'Chọn phần tử', + extractDesignSystem: 'Trích xuất hệ thống thiết kế', advanced: 'Nâng cao', inlineImages: 'Nhúng hình ảnh', + onPageBar: 'Thanh trên trang', save: 'Lưu', refreshPage: 'Tải lại trang', + toolbarExtractDesignSystem: 'Trích xuất hệ thống thiết kế', savedDesignSystemShort: 'Đã lưu hệ thống thiết kế', + brandExtracted: 'Hệ thống thiết kế đã trích xuất', brandPageTitleSuffix: 'Chụp Hệ Thống Thiết Kế', + brandAssetMap: 'Bản đồ tài sản hệ thống thiết kế', brandIdentity: 'Nhận diện', brandLogo: 'Logo', + brandImages: 'Hình ảnh', brandTypography: 'Kiểu chữ', brandPalette: 'Bảng màu', brandVoice: 'Giọng điệu', + brandComponents: 'Thành phần', brandComponentKit: 'Bộ thành phần', + }, + nl: { + extensionDescription: 'Sla pagina’s, designsystemen, screenshots, afbeeldingen en Figma-import-JSON op in je Open Design Library.', + statusConnected: 'Verbonden', statusOffline: 'Offline', capturePageTitle: 'Pagina vastleggen', + screenshot: 'Screenshot', region: 'Gebied', pickImages: 'Afbeeldingen kiezen', pickElement: 'Element kiezen', + extractDesignSystem: 'Designsysteem extraheren', advanced: 'Geavanceerd', inlineImages: 'Afbeeldingen insluiten', + onPageBar: 'Paginabalk', save: 'Opslaan', refreshPage: 'Pagina herladen', + toolbarExtractDesignSystem: 'Designsysteem extraheren', savedDesignSystemShort: 'Designsysteem opgeslagen', + brandExtracted: 'Geëxtraheerd designsysteem', brandPageTitleSuffix: 'Designsysteem-vastlegging', + brandAssetMap: 'Kaart met designsysteem-assets', brandIdentity: 'Identiteit', brandLogo: 'Logo', + brandImages: 'Afbeeldingen', brandTypography: 'Typografie', brandPalette: 'Palet', brandVoice: 'Stem', + brandComponents: 'Componenten', brandComponentKit: 'Componentkit', + }, + }; + + const dicts = {}; + for (const locale of LOCALES) dicts[locale] = { ...en, ...(overrides[locale] || {}) }; + + function normalizeLocale(raw) { + const value = String(raw || '').trim().replace(/_/g, '-'); + if (!value) return ''; + const lower = value.toLowerCase(); + const exact = LOCALES.find((locale) => locale.toLowerCase() === lower); + if (exact) return exact; + const [language, regionOrScript] = lower.split('-'); + if (language === 'zh') { + if (['hant', 'tw', 'hk', 'mo'].includes(regionOrScript)) return 'zh-TW'; + return 'zh-CN'; + } + if (language === 'pt') return 'pt-BR'; + if (language === 'es') return 'es-ES'; + return LOCALES.find((locale) => locale.toLowerCase().split('-')[0] === language) || ''; + } + + function resolveLocale(languages) { + for (const raw of languages || []) { + const locale = normalizeLocale(raw); + if (locale) return locale; + } + return 'en'; + } + + function browserLanguages() { + const values = []; + try { + if (typeof chrome !== 'undefined' && chrome.i18n && typeof chrome.i18n.getUILanguage === 'function') { + values.push(chrome.i18n.getUILanguage()); + } + } catch { + // ignore + } + try { + if (typeof navigator !== 'undefined') { + if (navigator.languages) values.push(...navigator.languages); + if (navigator.language) values.push(navigator.language); + } + } catch { + // ignore + } + return values; + } + + function currentLocale() { + return resolveLocale(browserLanguages()); + } + + function interpolate(raw, vars) { + if (!vars) return raw; + return raw.replace(/\{(\w+)\}/g, (_, name) => (vars[name] == null ? `{${name}}` : String(vars[name]))); + } + + function t(key, vars, locale) { + const resolved = normalizeLocale(locale) || currentLocale(); + const dict = dicts[resolved] || en; + return interpolate(dict[key] || en[key] || key, vars); + } + + function isRtl(locale) { + return RTL.has(normalizeLocale(locale) || currentLocale()); + } + + function htmlLang(locale) { + return normalizeLocale(locale) || currentLocale(); + } + + function translateDocument(root, locale) { + const doc = root || (typeof document !== 'undefined' ? document : null); + if (!doc) return; + const resolved = htmlLang(locale); + const documentElement = doc.documentElement || doc.querySelector?.('html'); + if (documentElement) { + documentElement.setAttribute('lang', resolved); + documentElement.setAttribute('dir', isRtl(resolved) ? 'rtl' : 'ltr'); + } + doc.querySelectorAll('[data-i18n]').forEach((el) => { + el.textContent = t(el.getAttribute('data-i18n'), undefined, resolved); + }); + doc.querySelectorAll('[data-i18n-html]').forEach((el) => { + el.innerHTML = t(el.getAttribute('data-i18n-html'), undefined, resolved); + }); + doc.querySelectorAll('[data-i18n-title]').forEach((el) => { + el.setAttribute('title', t(el.getAttribute('data-i18n-title'), undefined, resolved)); + }); + doc.querySelectorAll('[data-i18n-placeholder]').forEach((el) => { + el.setAttribute('placeholder', t(el.getAttribute('data-i18n-placeholder'), undefined, resolved)); + }); + doc.querySelectorAll('[data-i18n-aria-label]').forEach((el) => { + el.setAttribute('aria-label', t(el.getAttribute('data-i18n-aria-label'), undefined, resolved)); + }); + const title = doc.querySelector('title[data-i18n]'); + if (title) title.textContent = t(title.getAttribute('data-i18n'), undefined, resolved); + } + + const api = { + LOCALES, + dictionaries: dicts, + normalizeLocale, + resolveLocale, + currentLocale, + htmlLang, + isRtl, + t, + translateDocument, + }; + + globalThis.OD_CLIPPER_I18N = api; +})(); diff --git a/clipper/icons/icon-128.png b/clipper/icons/icon-128.png new file mode 100644 index 000000000..bf9a8afd6 Binary files /dev/null and b/clipper/icons/icon-128.png differ diff --git a/clipper/icons/icon-16.png b/clipper/icons/icon-16.png new file mode 100644 index 000000000..5518a22f4 Binary files /dev/null and b/clipper/icons/icon-16.png differ diff --git a/clipper/icons/icon-32.png b/clipper/icons/icon-32.png new file mode 100644 index 000000000..ee7bfe6d2 Binary files /dev/null and b/clipper/icons/icon-32.png differ diff --git a/clipper/icons/icon-48.png b/clipper/icons/icon-48.png new file mode 100644 index 000000000..f1445e426 Binary files /dev/null and b/clipper/icons/icon-48.png differ diff --git a/clipper/manifest.json b/clipper/manifest.json new file mode 100644 index 000000000..7fd6bccba --- /dev/null +++ b/clipper/manifest.json @@ -0,0 +1,42 @@ +{ + "manifest_version": 3, + "name": "__MSG_extensionName__", + "version": "0.2.0", + "default_locale": "en", + "description": "__MSG_extensionDescription__", + "permissions": ["scripting", "storage", "contextMenus", "tabs", "downloads"], + "host_permissions": [""], + "background": { + "service_worker": "background.js", + "scripts": ["background.js"] + }, + "action": { + "default_popup": "popup.html", + "default_title": "__MSG_extensionName__", + "default_icon": { + "16": "icons/icon-16.png", + "32": "icons/icon-32.png", + "48": "icons/icon-48.png", + "128": "icons/icon-128.png" + } + }, + "icons": { + "16": "icons/icon-16.png", + "32": "icons/icon-32.png", + "48": "icons/icon-48.png", + "128": "icons/icon-128.png" + }, + "content_scripts": [ + { + "matches": ["http://*/*", "https://*/*"], + "js": ["i18n.js", "content.js"], + "run_at": "document_idle" + } + ], + "browser_specific_settings": { + "gecko": { + "id": "web-clipper@open-design.ai", + "strict_min_version": "121.0" + } + } +} diff --git a/clipper/popup.css b/clipper/popup.css new file mode 100644 index 000000000..6997ecc6e --- /dev/null +++ b/clipper/popup.css @@ -0,0 +1,658 @@ +/* ============================================================ + Open Design — Web Clipper popup + Brand-aligned with the Open Design product design system + (warm neutral surfaces, ember accent, near-black brand ink). + ============================================================ */ +:root { + color-scheme: light dark; + + --bg: #faf9f7; + --panel: #fdfcfa; + --subtle: #f4f5f7; + --muted: #eef1f5; + --fill: rgba(0, 0, 0, 0.04); + --fill-hover: rgba(0, 0, 0, 0.06); + --border: #e1e5eb; + --border-soft: #edf0f4; + + --text: #1a1916; + --text-strong: #0d0c0a; + --text-muted: #74716b; + --text-soft: #989590; + + /* Brand ink — the Open Design mark. */ + --brand-ink: #202020; + --on-brand: #ffffff; + + /* Ember accent — Open Design primary action color. */ + --accent: #c96442; + --accent-strong: #b45a3b; + --on-accent: #ffffff; + + --green: #1f7a3a; + --green-bg: #e8f7ee; + --green-border: #c6ead2; + --red: #9c2a25; + + --radius-sm: 6px; + --radius: 8px; + --radius-md: 10px; + --radius-lg: 12px; + --radius-pill: 999px; + + --ease-out: cubic-bezier(0.23, 1, 0.32, 1); + --dur-quick: 120ms; + --dur-enter: 200ms; + + --shadow-sm: 0 1px 2px rgba(28, 27, 26, 0.05), 0 1px 3px rgba(28, 27, 26, 0.04); + --shadow-md: 0 6px 24px rgba(28, 27, 26, 0.08), 0 2px 6px rgba(28, 27, 26, 0.04); + + --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei UI', 'Noto Sans', Roboto, 'Helvetica Neue', Arial, sans-serif; +} + +@media (prefers-color-scheme: dark) { + :root { + --bg: #1a1917; + --panel: #222120; + --subtle: #252321; + --muted: #2e2c29; + --fill: rgba(255, 255, 255, 0.06); + --fill-hover: rgba(255, 255, 255, 0.1); + --border: #333128; + --border-soft: #2a2825; + + --text: #e8e4dc; + --text-strong: #f2ede4; + --text-muted: #9a9690; + --text-soft: #6e6b65; + + --brand-ink: #f2ede4; + --on-brand: #1a1917; + + --accent: #d97a56; + --accent-strong: #e8896a; + + --green: #4caf72; + --green-bg: #0f2a18; + --green-border: #1a4028; + --red: #e06b65; + + --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2); + --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25); + } +} + +* { + box-sizing: border-box; +} + +body { + width: 340px; + margin: 0; + padding: 0; + font-family: var(--sans); + color: var(--text); + background: var(--bg); + overflow: hidden; + -webkit-font-smoothing: antialiased; +} + +/* Flush content — no outer frame; Chrome rounds the popup window itself. */ +.app { + background: transparent; +} + +/* ---- Brand header ---- */ +.brand { + display: flex; + align-items: center; + gap: 11px; + padding: 15px 16px 14px; + border-bottom: 1px solid var(--border-soft); + background: + radial-gradient(120% 140% at 0% 0%, var(--fill), transparent 60%), + var(--panel); +} +.brand-mark { + flex: none; + width: 34px; + height: 34px; + display: block; + filter: drop-shadow(0 2px 5px rgba(28, 27, 26, 0.18)); +} +.brand-mark svg { + width: 100%; + height: 100%; + display: block; +} +.brand-name { + display: flex; + flex-direction: column; + gap: 1px; + line-height: 1.05; + margin-right: auto; +} +.brand-eyebrow { + font-size: 10px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--text-soft); +} +.brand-title { + font-size: 17px; + font-weight: 700; + letter-spacing: -0.01em; + color: var(--text-strong); +} +.status { + flex: none; + display: inline-flex; + align-items: center; + gap: 6px; + height: 24px; + padding: 0 10px 0 9px; + border-radius: var(--radius-pill); + border: 1px solid var(--border); + background: var(--subtle); + font-size: 11px; + font-weight: 600; + color: var(--text-muted); + white-space: nowrap; +} +.status::before { + content: ''; + width: 7px; + height: 7px; + border-radius: 50%; + background: var(--text-soft); + box-shadow: 0 0 0 0 transparent; +} +.status[data-paired='true'] { + color: var(--green); + border-color: var(--green-border); + background: var(--green-bg); +} +.status[data-paired='true']::before { + background: var(--green); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); +} + +/* Info icon + hover/focus tooltip — keeps the chrome minimal while the long + "what gets captured" explanation stays one hover away. */ +.info { + flex: none; + position: relative; + display: grid; + place-items: center; + width: 26px; + height: 26px; + border-radius: var(--radius-pill); + color: var(--text-soft); + cursor: help; + transition: color var(--dur-quick) var(--ease-out), background var(--dur-quick) var(--ease-out); +} +.info svg { + width: 17px; + height: 17px; + display: block; +} +.info:hover, +.info:focus-visible { + color: var(--accent); + background: var(--fill); + outline: none; +} +.tooltip { + position: absolute; + top: calc(100% + 9px); + right: -2px; + width: 244px; + padding: 10px 12px; + border-radius: var(--radius-md); + background: var(--panel); + border: 1px solid var(--border); + box-shadow: var(--shadow-md); + color: var(--text-muted); + font-size: 11.5px; + font-weight: 500; + line-height: 1.55; + text-align: left; + letter-spacing: normal; + text-transform: none; + opacity: 0; + visibility: hidden; + transform: translateY(-4px); + transition: + opacity var(--dur-enter) var(--ease-out), + transform var(--dur-enter) var(--ease-out), + visibility var(--dur-enter); + z-index: 5; + pointer-events: none; +} +.info:hover .tooltip, +.info:focus-visible .tooltip { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +/* ---- Body ---- */ +.body { + padding: 14px 16px 12px; +} +.actions { + display: flex; + flex-direction: column; + gap: 8px; +} + +/* Shared action surface */ +.action { + display: flex; + align-items: center; + gap: 11px; + width: 100%; + border: 1px solid var(--border); + background: var(--panel); + color: var(--text); + border-radius: var(--radius-md); + cursor: pointer; + text-align: left; + font-family: inherit; + transition: + background var(--dur-quick) var(--ease-out), + border-color var(--dur-quick) var(--ease-out), + transform var(--dur-quick) var(--ease-out), + box-shadow var(--dur-quick) var(--ease-out); +} +.action:hover { + background: var(--subtle); + border-color: var(--border); +} +.action:active { + transform: translateY(1px); +} +.action:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} +.action-icon { + flex: none; + display: grid; + place-items: center; + color: var(--text-muted); +} +.action-icon svg { + width: 20px; + height: 20px; + display: block; +} +.action-title { + font-size: 13px; + font-weight: 600; + color: var(--text-strong); +} + +/* Primary capture CTA */ +.action-primary { + padding: 13px 14px; + background: var(--accent); + border-color: transparent; + color: var(--on-accent); + box-shadow: var(--shadow-sm); +} +.action-primary:hover { + background: var(--accent-strong); +} +.action-primary .action-icon, +.action-primary .action-title { + color: var(--on-accent); +} +.action-text { + display: flex; + flex-direction: column; + gap: 2px; + margin-right: auto; +} +.action-sub { + font-size: 11px; + font-weight: 500; + color: color-mix(in srgb, var(--on-accent) 78%, transparent); +} +.action-go { + flex: none; + display: grid; + place-items: center; + color: color-mix(in srgb, var(--on-accent) 70%, transparent); + transition: transform var(--dur-enter) var(--ease-out); +} +.action-go svg { + width: 18px; + height: 18px; +} +.action-primary:hover .action-go { + transform: translateX(2px); + color: var(--on-accent); +} + +/* Secondary 2×2 grid */ +.action-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; +} +.action-grid .action { + flex-direction: column; + align-items: flex-start; + gap: 9px; + padding: 12px 12px 11px; + min-height: 70px; +} +.action-grid .action:hover .action-icon { + color: var(--accent); +} +/* A lone trailing action (odd count — e.g. Figma as the 5th) spans the full + width so the grid never leaves a ragged half-empty last row. */ +.action-grid .action:last-child:nth-child(odd) { + grid-column: 1 / -1; +} + +/* ---- States ---- */ +.hint { + font-size: 12px; + line-height: 1.5; + color: var(--text-muted); + background: var(--subtle); + border: 1px solid var(--border-soft); + border-radius: var(--radius); + padding: 10px 12px; + margin: 12px 0 0; +} +.hint strong { + color: var(--text-strong); +} + +/* ---- Advanced ---- */ +.advanced { + margin-top: 12px; + border-top: 1px solid var(--border-soft); + padding-top: 12px; +} +.advanced > summary { + font-size: 12px; + font-weight: 600; + color: var(--text-soft); + cursor: pointer; + list-style: none; + user-select: none; + transition: color var(--dur-quick) var(--ease-out); +} +.advanced > summary::-webkit-details-marker { + display: none; +} +.advanced > summary::before { + content: '›'; + display: inline-block; + margin-right: 6px; + transition: transform var(--dur-enter) var(--ease-out); +} +.advanced[open] > summary::before { + transform: rotate(90deg); +} +.advanced > summary:hover { + color: var(--text-muted); +} +.advanced[open] > summary { + margin-bottom: 12px; +} + +/* On-page bar — compact switch row. The bar stays an opt-in power feature, + so it lives in Advanced as a small toggle rather than a full action row. */ +.adv-switch { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 14px; +} +.adv-switch-text { + display: flex; + flex-direction: column; + gap: 2px; + margin-right: auto; + font-size: 12px; + font-weight: 600; + color: var(--text); + line-height: 1.3; +} +.adv-switch-text em { + font-style: normal; + font-weight: 500; + font-size: 11px; + color: var(--text-soft); +} + +/* Track + thumb switch — accent fill when on. */ +.switch { + flex: none; + position: relative; + width: 38px; + height: 22px; + padding: 0; + border: 1px solid var(--border); + border-radius: var(--radius-pill); + background: var(--muted); + cursor: pointer; + transition: + background var(--dur-quick) var(--ease-out), + border-color var(--dur-quick) var(--ease-out); +} +.switch:hover { + border-color: var(--text-soft); +} +.switch:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} +.switch-thumb { + position: absolute; + top: 50%; + left: 2px; + width: 16px; + height: 16px; + border-radius: 50%; + background: var(--panel); + box-shadow: var(--shadow-sm); + transform: translateY(-50%); + transition: transform var(--dur-enter) var(--ease-out); +} +.switch[aria-checked='true'] { + background: var(--accent); + border-color: var(--accent); +} +.switch[aria-checked='true'] .switch-thumb { + transform: translate(16px, -50%); + background: var(--on-accent); +} + +.check { + display: flex; + align-items: flex-start; + gap: 9px; + font-size: 12px; + color: var(--text); + margin-bottom: 12px; + cursor: pointer; + line-height: 1.4; +} +.check input { + margin: 1px 0 0; + accent-color: var(--accent); +} +.check em { + font-style: normal; + color: var(--text-soft); +} +.label-field { + display: block; + font-size: 11px; + font-weight: 600; + color: var(--text-muted); + margin-bottom: 6px; +} +.row { + display: flex; + gap: 8px; +} +.row input { + flex: 1; + height: 34px; + padding: 0 10px; + border: 1px solid var(--border); + border-radius: var(--radius); + background: var(--panel); + color: var(--text); + font-size: 13px; + font-family: inherit; + transition: border-color var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out); +} +.row input:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); +} +.btn-save { + flex: none; + height: 34px; + padding: 0 14px; + border-radius: var(--radius); + border: 1px solid var(--border); + background: var(--panel); + color: var(--text-strong); + font-size: 13px; + font-weight: 600; + font-family: inherit; + cursor: pointer; + transition: background var(--dur-quick) var(--ease-out); +} +.btn-save:hover { + background: var(--subtle); +} + +/* ---- Status message ---- */ +.msg { + font-size: 12px; + font-weight: 500; + margin: 0; + color: var(--text-muted); +} +.msg:not(:empty) { + margin-top: 12px; +} +.msg[data-kind='ok'] { + color: var(--green); +} +.msg[data-kind='err'] { + color: var(--red); +} +/* In-flight capture state: an inline spinner ahead of the status text. */ +.msg[data-kind='loading'] { + display: inline-flex; + align-items: center; + gap: 8px; + color: var(--text-muted); +} +.msg[data-kind='loading']::before { + content: ''; + flex: none; + width: 13px; + height: 13px; + border-radius: 50%; + border: 2px solid color-mix(in srgb, var(--accent) 28%, transparent); + border-top-color: var(--accent); + animation: msg-spin 0.7s linear infinite; +} +@keyframes msg-spin { + to { + transform: rotate(360deg); + } +} +/* While a capture is in flight, dim + lock the capture buttons so the spinner + message reads as the active state and double-fires are impossible. */ +.actions { + transition: opacity var(--dur-enter) var(--ease-out); +} +body.busy .actions { + opacity: 0.5; + pointer-events: none; +} + +/* ---- Inline "refresh page" recovery affordance ---- + Shown only when an on-page surface (image/element picker, on-page bar) can't + be reached because the content script never loaded into this already-open tab + — the usual case right after the extension is installed or updated. */ +.refresh-page { + display: inline-flex; + align-items: center; + gap: 6px; + margin-top: 9px; + padding: 6px 12px 6px 9px; + border: 1px solid var(--border); + border-radius: var(--radius-pill); + background: var(--panel); + color: var(--text-strong); + font-family: inherit; + font-size: 12px; + font-weight: 600; + cursor: pointer; + box-shadow: var(--shadow-sm); + transition: + background var(--dur-quick) var(--ease-out), + border-color var(--dur-quick) var(--ease-out), + color var(--dur-quick) var(--ease-out), + transform var(--dur-quick) var(--ease-out); +} +.refresh-page[hidden] { + display: none; +} +.refresh-page:hover { + background: var(--subtle); + border-color: var(--accent); + color: var(--accent); +} +.refresh-page:active { + transform: translateY(1px); +} +.refresh-page:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} +.refresh-icon { + display: grid; + place-items: center; + color: var(--text-muted); + transition: color var(--dur-quick) var(--ease-out); +} +.refresh-page:hover .refresh-icon { + color: var(--accent); +} +.refresh-icon svg { + width: 14px; + height: 14px; + display: block; +} +.refresh-page.spinning { + pointer-events: none; + opacity: 0.9; +} +.refresh-page.spinning .refresh-icon { + color: var(--accent); +} +.refresh-page.spinning .refresh-icon svg { + animation: refresh-spin 0.7s linear infinite; +} +@keyframes refresh-spin { + to { + transform: rotate(360deg); + } +} diff --git a/clipper/popup.html b/clipper/popup.html new file mode 100644 index 000000000..79ea956af --- /dev/null +++ b/clipper/popup.html @@ -0,0 +1,171 @@ + + + + + + + Open Design Web Clipper + + +
    +
    + + + Web Clipper + Open Design + + … + + + “Capture page” saves a self-contained page copy. “Extract design system” saves a structured design-system HTML asset. Figma JSON must be imported with the OD Figma Import plugin, not dragged into Figma Drafts. + +
    + +
    +
    + + +
    + + + + + + +
    +
    + + + +
    + Advanced +
    + + On-page bar + floating launcher on the page + + +
    +
    + + Image hover button + tiny save button on each image + + +
    + + +
    + + +
    +
    + +

    + +
    +
    + + + + + diff --git a/clipper/popup.js b/clipper/popup.js new file mode 100644 index 000000000..c9b1d7d7f --- /dev/null +++ b/clipper/popup.js @@ -0,0 +1,369 @@ +// Open Design web clipper popup. Thin UI over the service worker message API. +// +// Zero-config: no pairing. The popup just probes whether Open Design is running +// and lets you capture. The daemon URL lives under "Advanced" for the rare case +// you ran the daemon on a non-default port. + +const $ = (id) => document.getElementById(id); +const I18N = globalThis.OD_CLIPPER_I18N; +const locale = I18N?.currentLocale ? I18N.currentLocale() : 'en'; +const t = (key, vars) => (I18N?.t ? I18N.t(key, vars, locale) : key); + +if (I18N?.translateDocument) I18N.translateDocument(document, locale); + +function send(message) { + return new Promise((resolve) => { + chrome.runtime.sendMessage(message, (res) => resolve(res || { ok: false, error: t('noResponse') })); + }); +} + +function activeTabId() { + return new Promise((resolve) => { + chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => resolve(tabs && tabs[0] && tabs[0].id)); + }); +} + +function activeTab() { + return new Promise((resolve) => { + chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => resolve((tabs && tabs[0]) || null)); + }); +} + +// Only http(s) pages can ever host the content script. chrome://, the Web Store, +// view-source:, and the like are off-limits — a refresh wouldn't help there. +function isInjectable(url) { + return typeof url === 'string' && /^https?:\/\//i.test(url); +} + +// Inject the content script into a tab that doesn't have it yet. This is the +// common state right after the extension is installed or updated: already-open +// tabs never received the auto-injected script. Re-injection is safe — content.js +// guards itself with window.__odClipperInjected. Returns true on success. +async function injectContentScript(tabId) { + try { + await chrome.scripting.executeScript({ target: { tabId }, files: ['content.js'] }); + return true; + } catch { + return false; + } +} + +// Message the active tab's content script directly (the on-page bar lives +// there). Resolves undefined when there is no receiver (e.g. a chrome:// page). +function sendToTab(tabId, message) { + return new Promise((resolve) => { + try { + chrome.tabs.sendMessage(tabId, message, (res) => { + void chrome.runtime.lastError; + resolve(res); + }); + } catch { + resolve(undefined); + } + }); +} + +// Liveness probe against the content script. A truthy answer means a live +// listener is attached — distinguishing a dead/missing script (recoverable by +// re-inject or reload) from a genuinely restricted page (nothing can attach). +function pingTab(tabId) { + return sendToTab(tabId, { type: 'odClipper:ping' }).then((r) => Boolean(r && r.ok)); +} + +// Poll until the (reloaded) tab's content script answers, or time out. +async function waitForAttach(tabId, timeoutMs) { + const deadline = Date.now() + timeoutMs; + while (Date.now() < deadline) { + if (await pingTab(tabId)) return true; + await new Promise((r) => setTimeout(r, 200)); + } + return false; +} + +// Message the content script, attaching it first if the tab never received it. +// A tab that was already open when the extension was installed or reloaded has +// no content script, so the first sendMessage finds no receiver. Rather than +// dead-ending on "hasn't attached yet" and forcing a manual page refresh, inject +// content.js in place (no reload, no lost page state) and retry once — so the +// on-page actions just work. Re-injection is a no-op when the script is already +// there (content.js guards with window.__odClipperInjected). +async function sendToTabEnsuringScript(tabId, url, message) { + const res = await sendToTab(tabId, message); + if (res && res.ok) return res; + if (!isInjectable(url)) return res; + if (!(await injectContentScript(tabId))) return res; + return sendToTab(tabId, message); +} + +function setMsg(text, kind) { + const el = $('msg'); + el.textContent = text || ''; + el.dataset.kind = kind || ''; + // Any fresh status replaces the previous one, so retire a stale refresh prompt. + hideRefresh(); +} + +// Lock + dim the capture buttons while a capture is in flight, so the spinner +// status reads as the active state and the user can't double-fire a capture. +function setBusy(on) { + document.body.classList.toggle('busy', Boolean(on)); +} + +// The "Refresh page" affordance and the action to retry once the page is ready. +let pendingRetry = null; + +function showRefresh(retryFn) { + pendingRetry = retryFn; + const btn = $('refresh-page'); + if (btn) { + btn.hidden = false; + btn.classList.remove('spinning'); + } +} + +function hideRefresh() { + pendingRetry = null; + const btn = $('refresh-page'); + if (btn) { + btn.hidden = true; + btn.classList.remove('spinning'); + } +} + +function render(connected) { + const status = $('status'); + status.textContent = connected ? t('statusConnected') : t('statusOffline'); + status.dataset.paired = connected ? 'true' : 'false'; + $('hint').hidden = connected; + // Capture stays available even when disconnected; the buttons surface a clear + // "Open Design not running" message instead of being hidden, so it never feels broken. +} + +function renderToolbar(visible) { + const btn = $('toolbar-toggle'); + if (!btn) return; + btn.setAttribute('aria-checked', visible ? 'true' : 'false'); +} + +async function refresh() { + const res = await send({ type: 'getStatus' }); + if (res.ok) { + $('daemon').value = res.daemonUrl || ''; + render(Boolean(res.connected)); + } + try { + const { toolbarVisible, imageHoverCapture } = await chrome.storage.local.get([ + 'toolbarVisible', + 'imageHoverCapture', + ]); + renderToolbar(Boolean(toolbarVisible)); + const hv = $('image-hover'); + // Default-on: only an explicit `false` turns the switch off. + if (hv) hv.setAttribute('aria-checked', imageHoverCapture === false ? 'false' : 'true'); + } catch { + renderToolbar(false); + } +} + +function reportCapture(res, okText) { + setBusy(false); + if (res.ok) { + setMsg(okText(res), 'ok'); + return; + } + if (res.error === 'not running') { + setMsg(t('openDesignNotRunning'), 'err'); + void refresh(); + } else { + setMsg(t('failed', { error: res.error || t('unknown') }), 'err'); + } +} + +$('save-daemon').addEventListener('click', async () => { + const url = $('daemon').value.trim(); + const res = await send({ type: 'setDaemonUrl', url }); + render(Boolean(res.connected)); + setMsg(res.connected ? t('savedConnected') : t('savedNotDetected'), res.connected ? 'ok' : 'err'); +}); + +// Capture options shared by the page / figma actions. +function captureOpts() { + const el = $('include-images'); + return { includeImages: el ? el.checked : true }; +} + +$('page').addEventListener('click', async () => { + setBusy(true); + setMsg(t('capturingPage'), 'loading'); + const res = await send({ type: 'capturePageToLibrary', opts: captureOpts() }); + reportCapture(res, (r) => { + if (r.deduped) return t('pageAlreadyInLibrary'); + // A very large page is captured at reduced fidelity rather than failing: + // the layout (Figma IR) may be partial and/or some images stay as live + // links. Tell the user when either happened so the result isn't surprising. + const notes = []; + if (r.truncated) notes.push(t('largePagePartialLayout')); + if (r.figmaDropped) notes.push(t('figmaLayoutSkippedPageTooLarge')); + if (r.partialImages) { + notes.push(t('imagesLeftLinks', { count: r.partialImages })); + } + const suffix = notes.length ? ` (${notes.join('; ')})` : ''; + return r.hasFigma + ? t('savedPageWithFigma', { suffix }) + : t('savedPage', { suffix }); + }); +}); + +$('figma').addEventListener('click', async () => { + setBusy(true); + setMsg(t('buildingFigma'), 'loading'); + const res = await send({ type: 'downloadFigma', opts: captureOpts() }); + reportCapture(res, () => t('figmaDownloaded')); +}); + +$('system')?.addEventListener('click', async () => { + setBusy(true); + setMsg(t('extractingDesignSystem'), 'loading'); + const res = await send({ type: 'captureDesignSystemToLibrary', opts: captureOpts() }); + reportCapture(res, (r) => { + const suffix = r.partialImages + ? ` (${t('resourcesLeftLinks', { count: r.partialImages })})` + : ''; + return r.deduped ? t('designSystemAlreadyInLibrary', { suffix }) : t('designSystemSaved', { suffix }); + }); +}); + +$('shot').addEventListener('click', async () => { + setBusy(true); + setMsg(t('capturingScreenshot'), 'loading'); + const res = await send({ type: 'captureScreenshot' }); + reportCapture(res, (r) => (r.deduped ? t('alreadyInLibrary') : t('screenshotSaved'))); +}); + +// Open an on-page surface (element picker / image picker) in the active tab, +// then close the popup so the page has focus for the interaction. +async function openOnPage(message, startedMsg, unavailableMsg) { + const tab = await activeTab(); + const tabId = tab && tab.id; + if (!tabId) { + setMsg(t('openNormalPage'), 'err'); + return; + } + const res = await sendToTabEnsuringScript(tabId, tab.url, message); + if (!res || !res.ok) { + // We already tried to attach the content script in place and it still didn't + // answer — fall back to a real reload, which is the last thing that can help + // on an injectable page. On a restricted page (chrome://, the Web Store, …) + // nothing can attach, so say so plainly. + if (isInjectable(tab.url)) { + setMsg(t('odNotAttached'), 'err'); + showRefresh(() => openOnPage(message, startedMsg, unavailableMsg)); + } else { + setMsg(unavailableMsg, 'err'); + } + return; + } + setMsg(startedMsg, 'ok'); + setTimeout(() => window.close(), 200); +} + +$('element')?.addEventListener('click', () => + openOnPage( + { type: 'odClipper:pickElement' }, + t('clickElement'), + t('elementPickerUnavailable'), + ), +); + +$('imgs')?.addEventListener('click', () => + openOnPage( + { type: 'odClipper:pickImages' }, + t('pickImagesOnPage'), + t('imagePickerUnavailable'), + ), +); + +$('region')?.addEventListener('click', () => + openOnPage( + { type: 'odClipper:pickRegion' }, + t('dragRegionOnPage'), + t('regionUnavailable'), + ), +); + +$('toolbar-toggle').addEventListener('click', async function toggleToolbar() { + const tab = await activeTab(); + const tabId = tab && tab.id; + if (!tabId) { + setMsg(t('openNormalPageForBar'), 'err'); + return; + } + const res = await sendToTabEnsuringScript(tabId, tab.url, { type: 'odClipper:setToolbar', mode: 'toggle' }); + if (!res || !res.ok) { + if (isInjectable(tab.url)) { + setMsg(t('odNotAttached'), 'err'); + showRefresh(toggleToolbar); + } else { + setMsg(t('onPageBarUnavailable'), 'err'); + } + return; + } + renderToolbar(Boolean(res.visible)); + setMsg(res.visible ? t('onPageBarShown') : t('onPageBarHidden'), 'ok'); +}); + +// Per-image hover capture toggle. Persisted to storage so it applies to every +// tab (including ones without a content script yet) and pushed to the active +// tab's content script for an immediate effect. No on-page surface is needed, +// so this works even where the content script can't attach. +$('image-hover')?.addEventListener('click', async () => { + const btn = $('image-hover'); + const next = btn.getAttribute('aria-checked') !== 'true'; + btn.setAttribute('aria-checked', next ? 'true' : 'false'); + try { + await chrome.storage.local.set({ imageHoverCapture: next }); + } catch { + // storage unavailable — the per-tab message below still applies it live + } + const tab = await activeTab(); + if (tab && tab.id) void sendToTab(tab.id, { type: 'odClipper:setImageHover', enabled: next }); + setMsg(next ? t('imageHoverOn') : t('imageHoverOff'), 'ok'); +}); + +// Recover from a tab that never received the content script. Inject it in place +// (no reload, no lost page state) and re-run the action; fall back to a real +// reload only when the page is too restricted to inject into. +$('refresh-page')?.addEventListener('click', async () => { + const btn = $('refresh-page'); + if (!btn || btn.classList.contains('spinning')) return; + const retry = pendingRetry; + btn.classList.add('spinning'); + const tabId = await activeTabId(); + if (!tabId) { + hideRefresh(); + return; + } + // First try a no-reload re-injection (keeps page state). Verify with a ping + // that a LIVE listener actually answered — a stale context can swallow the + // executeScript without re-arming a listener, so its resolve alone isn't + // proof the page is reachable. + await injectContentScript(tabId); + if (await pingTab(tabId)) { + if (typeof retry === 'function') await retry(); + else setMsg(t('readyTryAgain'), 'ok'); + return; + } + // Couldn't re-arm in place → genuinely reload and wait for the fresh content + // script to attach, then resume the original action. + setMsg(t('reloadingPage')); + chrome.tabs.reload(tabId); + if (await waitForAttach(tabId, 6000)) { + if (typeof retry === 'function') await retry(); + else setMsg(t('readyTryAgain'), 'ok'); + } else { + hideRefresh(); + setMsg(t('reloadedReopen'), 'ok'); + } +}); + +void refresh(); diff --git a/clipper/store/LISTING.md b/clipper/store/LISTING.md new file mode 100644 index 000000000..1a2a93d01 --- /dev/null +++ b/clipper/store/LISTING.md @@ -0,0 +1,273 @@ +# Open Design Web Clipper — Store Listing & ASO Pack + +Single source of truth for the extension's store submissions. Copy fields +verbatim into the Chrome Web Store / Edge Partner Center / Firefox AMO dashboards. +All copy is keyword-tuned for discoverability (ASO) without keyword stuffing. + +- **Public name:** Open Design Web Clipper +- **Version:** 0.2.0 (MV3) +- **Package:** the `clipper/` directory (no build step — zip it as-is) +- **Homepage:** https://open-design.ai +- **Source:** https://github.com/nexu-io/open-design (folder `clipper/`) +- **Support / issues:** https://github.com/nexu-io/open-design/issues +- **Assets:** see `assets/` in this folder and the "Asset manifest" section below + +--- + +## 1. Naming & identity + +| Field | Value | +| --- | --- | +| Store title | `Open Design Web Clipper` | +| Toolbar / action title | `Open Design Web Clipper` | +| Short brand | Open Design | +| Tagline | Clip the web into your design Library. | +| Accent color | Ember `#c96442` | +| Brand ink | `#202020` | + +Why this name: leads with the **Open Design** brand and pairs it with the exact +category phrase users search — **"web clipper"** — so the listing ranks for both +brand and category queries without truncating in narrow store rows. + +--- + +## 2. Chrome Web Store + +### Title (max 75) +``` +Open Design Web Clipper +``` + +### Summary / short description (max 132) +``` +Clip pages, design systems, screenshots, images, and Figma import JSON into your Open Design Library — local-first, one click, no login. +``` + +### Detailed description (max 16,000) +``` +Open Design Web Clipper saves anything you find on the web straight into your Open Design Library — the local asset registry of the open-source Open Design app. One click, no account, no pairing, no tokens. + +Built for designers, researchers, and builders who collect references all day: drop a full page, a design-system capture, a screenshot, a set of images, or an editable Figma import JSON into your Library and keep working. + +━━ WHAT YOU CAN CLIP ━━ + +• Capture page → Library + A self-contained, high-fidelity HTML snapshot. Stylesheets are inlined, images are embedded as data URIs, and scripts are stripped — so the page stays exactly as you saw it, forever, even if the original changes or goes offline. + +• Extract design system + Programmatically extracts logo candidates, images, typography, fonts, palette, product description, headings, and a reusable component kit into a templated HTML design-system asset with light/dark modes. + +• Screenshot + Save the visible tab as an image in one click. + +• Pick images + An on-page grid of every image on the page with checkboxes — Select all / Clear, then save exactly the ones you want. + +• Pick element + A DevTools-style picker: hover to highlight any element, click to save it as a screenshot cropped to that element plus its outerHTML and metadata. + +• Page → Figma JSON + Every page capture also computes an importable Figma node-tree (frames, text, images, fills, strokes, corner radii, shadows) you can rebuild as editable layers with the companion Open Design Figma plugin. This JSON is imported from inside the plugin, not by dragging it into Figma Drafts. + +• Right-click any image → "Save image to Open Design Library". + +• Optional on-page toolbar + A floating launcher at the bottom-right of any page. Hidden by default; turn it on when you want it. It's automatically pulled out of frame during a capture, so it never ends up in your snapshot. + +━━ WHY IT'S DIFFERENT ━━ + +• Local-first & private. Everything you clip goes only to the Open Design app running on your own machine (loopback 127.0.0.1). Nothing is sent to us. No analytics, no tracking, no ads. + +• Zero setup. No sign-in, no API keys, no pairing codes. The popup shows "● Connected" the moment it detects Open Design running, and you can clip right away. + +• High fidelity by default. Captures embed their assets so they're complete and portable. Prefer smaller, faster clips? Turn off "Inline images" under Advanced. + +• Live Library. Everything you capture appears in the Library tab instantly (via SSE) with a "Clipper" source badge and a back-link to the original page. + +━━ HOW TO USE ━━ + +1. Install the open-source Open Design app — https://open-design.ai +2. Start it so the local daemon is running. +3. Click the Open Design Web Clipper toolbar icon and capture. That's it. + +Open Design is the local-first, open-source alternative to Claude Design and a Figma alternative for the agent era. The Web Clipper is how the web gets into it. + +Open source: https://github.com/nexu-io/open-design +``` + +### Category +- Primary: **Workflow & Planning** (closest fit for a research/collection tool) +- Alternate if rejected: **Developer Tools** + +### Language +- Primary: **English (United States)** +- Add localized listing: **简体中文 (Chinese, Simplified)** — see §6 + +### Single purpose (required field) +``` +Capture web content — full pages, design systems, screenshots, images, page elements, and Figma import JSON — and save it into the user's locally running Open Design app Library. +``` + +### Permission justifications (one per requested permission) +| Permission | Justification to paste | +| --- | --- | +| `host_permissions: ` | The user can clip from any website they choose. We need to read and screenshot the active page, and fetch + inline its cross-origin resources (CSS, images) to produce a complete, self-contained snapshot. The same host access reaches the user's local Open Design daemon at 127.0.0.1. Standard for web clippers. | +| `scripting` | Inject the capture runtime and the on-page picker/toolbar into the active tab on demand, only when the user triggers a capture. | +| `tabs` | Identify and capture the active tab the user is clipping (URL + tab id for the screenshot/capture). | +| `contextMenus` | Provide the right-click "Save image to Open Design Library" menu entry. | +| `downloads` | Save the "Download Figma (.json)" import file to the user's disk when requested. | +| `storage` | Remember local preferences only: the daemon URL (if changed from the default) and the on-page bar on/off toggle. | +| Remote code | **None.** All scripts are bundled in the package; no remote/eval code is executed. | + +### Data usage disclosures (Privacy practices tab) +- **Does this item collect or use user data?** It transmits captured page content **only to the user's own local Open Design app** (loopback) on explicit user action. It does **not** send any data to the developer or any third party. +- Personally identifiable information: **No** +- Health / financial / authentication / personal communications / location / web history: **No** +- User activity / website content: handled **locally only**, never transmitted off-device to us. +- **Not sold to third parties. Not used for ads. Not used for creditworthiness/lending.** Used only for the item's single purpose. +- Privacy policy URL: `https://open-design.ai/clipper/privacy` (publish `PRIVACY.md` from this folder there; or link the raw GitHub file). + +### Screenshots (1280×800 PNG/JPEG, up to 5) — order + captions +1. **Popup over a real page** — `Clip the whole page into your Library — one click.` +2. **The Open Design Library filling up** — `Everything lands in your Library, live, with a Clipper badge.` +3. **Pick images / Pick element overlay** — `Pick exactly what you want — images or any element.` +4. **Page → Figma import** — `Turn any web page into an editable Figma capture.` +5. **Connected / Advanced panel** — `Local-first. No account, no pairing, no tokens.` + +> Capture these from the running app at 1280×800. Two production captures already +> exist (popup over paulgraham.com; the extensions page) and can seed shots 1 & 5. +> Use the framed-screenshot template in §7 to drop raw captures onto the brand +> background. + +### Promotional images +- **Small promo tile:** 440×280 — `assets/promo-small.png` +- **Marquee promo tile:** 1400×560 — `assets/promo-marquee.png` +- Store icon: 128×128 — `../icons/icon-128.png` + +### Chrome ASO notes +Chrome derives search relevance from the **title + description** (no separate +keyword field). The title carries "web clipper"; the description front-loads the +high-value phrases below in natural sentences. Do not stuff. + +Target phrases: `web clipper`, `save to library`, `full page capture`, +`screenshot`, `save images`, `page to figma`, `html snapshot`, `web page saver`, +`design reference`, `open design`. + +--- + +## 3. Edge Add-ons (Microsoft Partner Center) + +The **same MV3 package** publishes to Edge unchanged. + +- **Name:** `Open Design Web Clipper` +- **Short description / Summary:** same as Chrome summary (≤132 recommended) +- **Description:** reuse the Chrome detailed description verbatim +- **Category:** `Productivity` +- **Store logo:** 300×300 — `assets/store-logo-300.png` +- **Screenshots:** 1280×800 (same set as Chrome) +- **Search terms (up to 7):** `web clipper`, `screenshot`, `save page`, `figma`, `save images`, `design`, `open design` +- **Privacy policy URL:** same as Chrome +- **Notes:** Edge runs the Chromium MV3 service worker; no manifest changes needed. The `browser_specific_settings.gecko` block is ignored by Edge. + +--- + +## 4. Firefox Add-ons (AMO) + +Firefox needs the gecko settings already added to `manifest.json`: +```json +"browser_specific_settings": { "gecko": { "id": "web-clipper@open-design.ai", "strict_min_version": "121.0" } } +``` +And the dual background key (already in `manifest.json`) — Firefox uses +`background.scripts`, Chrome/Edge use `background.service_worker`: +```json +"background": { "service_worker": "background.js", "scripts": ["background.js"] } +``` + +- **Name:** `Open Design Web Clipper` +- **Summary (≤250):** `Clip web pages, design systems, screenshots, images, and Figma import JSON straight into your Open Design Library. Local-first, one click — no account, no pairing, no tokens.` +- **Description:** reuse the Chrome detailed description +- **Categories:** `Other` + `Web Development` (or `Photos, Music & Videos`) +- **Tags (up to 5):** `web-clipper`, `screenshot`, `figma`, `capture`, `design` +- **Screenshots:** any size (reuse the 1280×800 set) +- **Privacy policy:** same URL +- **Source code:** code is unminified plain JS — submit the `clipper/` folder as source if AMO asks. +- **Pre-flight:** + ```bash + npx web-ext lint --source-dir clipper + npx web-ext run --source-dir clipper -t firefox-desktop + ``` + Expect a benign warning about the `service_worker` background key — Firefox falls back to `scripts`. + +--- + +## 5. Privacy policy + +Publish `PRIVACY.md` (in this folder) at the privacy policy URL. It states the +core promise: captured content goes only to the user's local Open Design app; +nothing is collected by, or transmitted to, the developer. + +--- + +## 6. 简体中文 listing (zh-CN) + +- **名称:** `Open Design Web Clipper`（品牌名保持英文；本地化副标题：网页剪藏） +- **简短描述 (≤132):** +``` +一键将任意网页、设计系统、截图、图片或 Figma 导入 JSON 剪藏到本地的 Open Design 素材库 —— 本地优先，无需登录。 +``` +- **详细描述:** +``` +Open Design Web Clipper 把你在网上看到的任何内容一键剪藏进 Open Design 素材库（开源 Open Design 应用的本地资源库）。无需账号、无需配对、无需令牌。 + +为整天收集素材的设计师、研究者和创作者而生：整页快照、设计系统、截图、批量图片，或可编辑的 Figma 导入 JSON，统统进入素材库，工作不中断。 + +【你能剪藏什么】 +• 整页 → 素材库：高保真、自包含的 HTML 快照（内联样式与图片、剥离脚本），页面永久保真。 +• 提取设计系统：程序化提取 logo、图片、字体、色板、产品描述、标题和组件套件，并生成支持明暗模式的 HTML 设计系统。 +• 截图：一键保存可见区域。 +• 选择图片：页面所有图片网格 + 复选框，精确保存你要的那几张。 +• 选择元素：DevTools 式拾取器，悬停高亮、点击保存为裁剪截图 + outerHTML + 元数据。 +• 页面 → Figma：每次整页捕获都会生成可导入的 Figma 节点树，用 Open Design Figma 插件还原为可编辑图层。 +• 右键图片 →「保存到 Open Design 素材库」。 +• 可选页面工具条：默认隐藏，截图时自动移出画面。 + +【为何不同】 +• 本地优先、隐私安全：所有内容只发送到你本机运行的 Open Design 应用（127.0.0.1），我们不收集任何数据，无统计、无追踪、无广告。 +• 零配置：无登录、无密钥、无配对码。检测到 Open Design 运行即显示「● 已连接」。 +• 默认高保真，可在「高级」中关闭内联图片以加快速度、减小体积。 +• 实时素材库：剪藏即刻出现，带「Clipper」来源标记与原页面回链。 + +开源：https://github.com/nexu-io/open-design +``` +- **搜索词:** `网页剪藏`, `剪藏`, `截图`, `保存网页`, `figma`, `素材库`, `open design` + +--- + +## 7. Asset manifest + +| File | Size | Use | +| --- | --- | --- | +| `../icons/icon-{16,32,48,128}.png` | 16/32/48/128 | Extension + store icon | +| `assets/icon.svg` | vector | Icon source (brand mark + ember capture badge) | +| `assets/icon-512.png` | 512×512 | High-res icon master | +| `assets/store-logo-300.png` | 300×300 | Edge store logo | +| `assets/hero-bg.jpg` | 1536×1024 | AI background art (fal · gpt-image-2) for banners (JPEG to stay under the repo blob-size guard) | +| `assets/promo-marquee.png` | 1400×560 | Chrome marquee promo tile | +| `assets/promo-small.png` | 440×280 | Chrome small promo tile | +| `assets/screenshot-frame.html` | — | Template to frame raw 1280×800 captures on-brand | + +--- + +## 8. Pre-submission checklist + +- [ ] Bump `version` in `manifest.json` if re-submitting over 0.1.0. +- [ ] `manifest.json` validates as JSON; loads unpacked in Chrome with no errors. +- [ ] Icons render crisply at 16/32/48/128 (badge visible at 48+). +- [ ] 5 screenshots captured at 1280×800 from the running app. +- [ ] `promo-marquee.png` (1400×560) and `promo-small.png` (440×280) exported. +- [ ] Privacy policy published at the URL referenced above. +- [ ] Permission justifications pasted for every permission + host access. +- [ ] Data-usage form completed (no data collected by developer). +- [ ] Chrome: zip `clipper/` and upload. +- [ ] Edge: upload same zip; fill search terms. +- [ ] Firefox: `web-ext lint` clean; submit; attach source if asked. diff --git a/clipper/store/PRIVACY.md b/clipper/store/PRIVACY.md new file mode 100644 index 000000000..c5e0a275a --- /dev/null +++ b/clipper/store/PRIVACY.md @@ -0,0 +1,51 @@ +# Open Design Web Clipper — Privacy Policy + +_Last updated: 2026-06-16_ + +**Short version: the Open Design Web Clipper does not collect, store, or transmit +your data to us or to any third party. Everything you clip goes only to the +Open Design app running on your own computer.** + +## What the extension does + +When you trigger a capture (a page snapshot, screenshot, picked images, a picked +element, or a Figma capture), the extension reads the content of the page you are +viewing and sends it to the Open Design application running locally on your own +machine over the loopback address `http://127.0.0.1` (the local daemon). That is +the only network destination the extension sends captured content to. + +## What we collect + +Nothing. The developer (Open Design / nexu-io) operates **no servers** that +receive your captures, browsing activity, or any personal information from this +extension. There is **no analytics, no telemetry, no tracking, and no +advertising** in the extension. + +## Permissions and why they exist + +- **Access to websites you clip (``)** — to read and screenshot the + active page and inline its resources into a self-contained snapshot, and to + reach your local Open Design app. The extension acts only on the page you + explicitly choose to capture. +- **Scripting / tabs** — to run the capture and on-page picker in the active tab + when you start a capture. +- **Context menus** — the right-click "Save image to Open Design Library" entry. +- **Downloads** — to save a "Download Figma (.json)" import file to your disk when you ask. +- **Storage** — to remember local preferences only (the daemon URL if you changed + it, and whether the on-page bar is shown). Stored locally in your browser; never + transmitted to us. + +## Where your data lives + +All captured content is stored by the Open Design app in its local Library on your +device. Managing, exporting, or deleting that content is done inside the Open +Design app. Uninstalling the extension removes its local preferences. + +## Changes + +If this policy changes, the updated version will be published at this URL with a +new "Last updated" date. + +## Contact + +Questions: https://github.com/nexu-io/open-design/issues diff --git a/clipper/store/assets/hero-bg.jpg b/clipper/store/assets/hero-bg.jpg new file mode 100644 index 000000000..486d825dc Binary files /dev/null and b/clipper/store/assets/hero-bg.jpg differ diff --git a/clipper/store/assets/icon-512.png b/clipper/store/assets/icon-512.png new file mode 100644 index 000000000..ddfa48664 Binary files /dev/null and b/clipper/store/assets/icon-512.png differ diff --git a/clipper/store/assets/icon.svg b/clipper/store/assets/icon.svg new file mode 100644 index 000000000..0fbecb2b5 --- /dev/null +++ b/clipper/store/assets/icon.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + diff --git a/clipper/store/assets/promo-marquee.png b/clipper/store/assets/promo-marquee.png new file mode 100644 index 000000000..4455266e1 Binary files /dev/null and b/clipper/store/assets/promo-marquee.png differ diff --git a/clipper/store/assets/promo-small.png b/clipper/store/assets/promo-small.png new file mode 100644 index 000000000..8c31b1292 Binary files /dev/null and b/clipper/store/assets/promo-small.png differ diff --git a/clipper/store/assets/screenshot-frame.html b/clipper/store/assets/screenshot-frame.html new file mode 100644 index 000000000..72104a08a --- /dev/null +++ b/clipper/store/assets/screenshot-frame.html @@ -0,0 +1,11 @@ + +
    +
    REPLACE: caption headline
    +
    + Drop a 1040×600 product capture here (replace this box with an <img>). +
    +
    \ No newline at end of file diff --git a/clipper/store/assets/store-logo-300.png b/clipper/store/assets/store-logo-300.png new file mode 100644 index 000000000..010950881 Binary files /dev/null and b/clipper/store/assets/store-logo-300.png differ diff --git a/design-systems/agentic/system/artifacts/deck.html b/design-systems/agentic/system/artifacts/deck.html new file mode 100644 index 000000000..1a53bc1dd --- /dev/null +++ b/design-systems/agentic/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Agentic - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Agentic Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Agentic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/agentic/system/artifacts/email.html b/design-systems/agentic/system/artifacts/email.html new file mode 100644 index 000000000..0a8775342 --- /dev/null +++ b/design-systems/agentic/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Agentic - Email + + + +
    +
    +
    +

    Email module

    +

    Agentic Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Agentic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/agentic/system/artifacts/form.html b/design-systems/agentic/system/artifacts/form.html new file mode 100644 index 000000000..5115cb3df --- /dev/null +++ b/design-systems/agentic/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Agentic - Form page + + + +
    +
    +
    +

    Form module

    +

    Agentic Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Agentic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/agentic/system/artifacts/landing.html b/design-systems/agentic/system/artifacts/landing.html new file mode 100644 index 000000000..fc4778ed2 --- /dev/null +++ b/design-systems/agentic/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Agentic - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Agentic Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Agentic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/agentic/system/artifacts/newsletter.html b/design-systems/agentic/system/artifacts/newsletter.html new file mode 100644 index 000000000..48ed9bc04 --- /dev/null +++ b/design-systems/agentic/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Agentic - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Agentic Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Agentic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/agentic/system/artifacts/poster.html b/design-systems/agentic/system/artifacts/poster.html new file mode 100644 index 000000000..c578c5956 --- /dev/null +++ b/design-systems/agentic/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Agentic - Poster + + + +
    +
    +
    +

    Poster module

    +

    Agentic Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Agentic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/agentic/system/index.html b/design-systems/agentic/system/index.html new file mode 100644 index 000000000..ef7bf795c --- /dev/null +++ b/design-systems/agentic/system/index.html @@ -0,0 +1,128 @@ + + + + + + Agentic - system assets + + + +
    +

    Themed & Unique

    +

    Agentic system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/agentic/system/kit.dark.html b/design-systems/agentic/system/kit.dark.html new file mode 100644 index 000000000..122c233f2 --- /dev/null +++ b/design-systems/agentic/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Agentic - dark component kit + + + +
    +
    +
    +

    Themed & Unique system

    +

    Agentic component kit

    +

    Bundled Open Design package for Agentic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/agentic/system/kit.html b/design-systems/agentic/system/kit.html new file mode 100644 index 000000000..de3daa3c1 --- /dev/null +++ b/design-systems/agentic/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Agentic - component kit + + + +
    +
    +
    +

    Themed & Unique system

    +

    Agentic component kit

    +

    Bundled Open Design package for Agentic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/agentic/system/tokens.default.json b/design-systems/agentic/system/tokens.default.json new file mode 100644 index 000000000..2a3a16ee9 --- /dev/null +++ b/design-systems/agentic/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#60a5fa", + "colorPrimaryBg": "#182343", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 15, + "borderRadius": 12 +} diff --git a/design-systems/airbnb/system/artifacts/deck.html b/design-systems/airbnb/system/artifacts/deck.html new file mode 100644 index 000000000..8d4d9e981 --- /dev/null +++ b/design-systems/airbnb/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Airbnb - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Airbnb Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Airbnb, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/airbnb/system/artifacts/email.html b/design-systems/airbnb/system/artifacts/email.html new file mode 100644 index 000000000..aa72e0a8f --- /dev/null +++ b/design-systems/airbnb/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Airbnb - Email + + + +
    +
    +
    +

    Email module

    +

    Airbnb Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Airbnb, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/airbnb/system/artifacts/form.html b/design-systems/airbnb/system/artifacts/form.html new file mode 100644 index 000000000..77ddf3bc8 --- /dev/null +++ b/design-systems/airbnb/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Airbnb - Form page + + + +
    +
    +
    +

    Form module

    +

    Airbnb Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Airbnb, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/airbnb/system/artifacts/landing.html b/design-systems/airbnb/system/artifacts/landing.html new file mode 100644 index 000000000..b0c9cf9d0 --- /dev/null +++ b/design-systems/airbnb/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Airbnb - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Airbnb Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Airbnb, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/airbnb/system/artifacts/newsletter.html b/design-systems/airbnb/system/artifacts/newsletter.html new file mode 100644 index 000000000..172d0439c --- /dev/null +++ b/design-systems/airbnb/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Airbnb - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Airbnb Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Airbnb, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/airbnb/system/artifacts/poster.html b/design-systems/airbnb/system/artifacts/poster.html new file mode 100644 index 000000000..399aeb627 --- /dev/null +++ b/design-systems/airbnb/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Airbnb - Poster + + + +
    +
    +
    +

    Poster module

    +

    Airbnb Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Airbnb, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/airbnb/system/index.html b/design-systems/airbnb/system/index.html new file mode 100644 index 000000000..ea5fdd1ce --- /dev/null +++ b/design-systems/airbnb/system/index.html @@ -0,0 +1,128 @@ + + + + + + Airbnb - system assets + + + +
    +

    E-Commerce & Retail

    +

    Airbnb system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/airbnb/system/kit.dark.html b/design-systems/airbnb/system/kit.dark.html new file mode 100644 index 000000000..360f9db02 --- /dev/null +++ b/design-systems/airbnb/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Airbnb - dark component kit + + + +
    +
    +
    +

    E-Commerce & Retail system

    +

    Airbnb component kit

    +

    Bundled Open Design package for Airbnb, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/airbnb/system/kit.html b/design-systems/airbnb/system/kit.html new file mode 100644 index 000000000..9cde5b19f --- /dev/null +++ b/design-systems/airbnb/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Airbnb - component kit + + + +
    +
    +
    +

    E-Commerce & Retail system

    +

    Airbnb component kit

    +

    Bundled Open Design package for Airbnb, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/airbnb/system/tokens.default.json b/design-systems/airbnb/system/tokens.default.json new file mode 100644 index 000000000..fd85e4454 --- /dev/null +++ b/design-systems/airbnb/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#ff385c", + "colorPrimaryBg": "#f7f7f7", + "colorPrimaryHover": "#e31c5f", + "colorPrimaryActive": "#e00b41", + "fontSize": 16, + "borderRadius": 14 +} diff --git a/design-systems/airtable/system/artifacts/deck.html b/design-systems/airtable/system/artifacts/deck.html new file mode 100644 index 000000000..5cf421766 --- /dev/null +++ b/design-systems/airtable/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Airtable - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Airtable Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Airtable, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/airtable/system/artifacts/email.html b/design-systems/airtable/system/artifacts/email.html new file mode 100644 index 000000000..2f12e1deb --- /dev/null +++ b/design-systems/airtable/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Airtable - Email + + + +
    +
    +
    +

    Email module

    +

    Airtable Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Airtable, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/airtable/system/artifacts/form.html b/design-systems/airtable/system/artifacts/form.html new file mode 100644 index 000000000..b2cb8fa49 --- /dev/null +++ b/design-systems/airtable/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Airtable - Form page + + + +
    +
    +
    +

    Form module

    +

    Airtable Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Airtable, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/airtable/system/artifacts/landing.html b/design-systems/airtable/system/artifacts/landing.html new file mode 100644 index 000000000..3f3b3034a --- /dev/null +++ b/design-systems/airtable/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Airtable - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Airtable Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Airtable, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/airtable/system/artifacts/newsletter.html b/design-systems/airtable/system/artifacts/newsletter.html new file mode 100644 index 000000000..b31ffcccb --- /dev/null +++ b/design-systems/airtable/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Airtable - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Airtable Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Airtable, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/airtable/system/artifacts/poster.html b/design-systems/airtable/system/artifacts/poster.html new file mode 100644 index 000000000..0770f1109 --- /dev/null +++ b/design-systems/airtable/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Airtable - Poster + + + +
    +
    +
    +

    Poster module

    +

    Airtable Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Airtable, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/airtable/system/index.html b/design-systems/airtable/system/index.html new file mode 100644 index 000000000..6232a804b --- /dev/null +++ b/design-systems/airtable/system/index.html @@ -0,0 +1,128 @@ + + + + + + Airtable - system assets + + + +
    +

    Design & Creative

    +

    Airtable system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/airtable/system/kit.dark.html b/design-systems/airtable/system/kit.dark.html new file mode 100644 index 000000000..922716c1a --- /dev/null +++ b/design-systems/airtable/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Airtable - dark component kit + + + +
    +
    +
    +

    Design & Creative system

    +

    Airtable component kit

    +

    Bundled Open Design package for Airtable, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/airtable/system/kit.html b/design-systems/airtable/system/kit.html new file mode 100644 index 000000000..b88ecc4cb --- /dev/null +++ b/design-systems/airtable/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Airtable - component kit + + + +
    +
    +
    +

    Design & Creative system

    +

    Airtable component kit

    +

    Bundled Open Design package for Airtable, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/airtable/system/tokens.default.json b/design-systems/airtable/system/tokens.default.json new file mode 100644 index 000000000..27ac02b0a --- /dev/null +++ b/design-systems/airtable/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#1b61c9", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "#254fad", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/ant/system/artifacts/deck.html b/design-systems/ant/system/artifacts/deck.html new file mode 100644 index 000000000..85e7ca733 --- /dev/null +++ b/design-systems/ant/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Ant - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Ant Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Ant, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/ant/system/artifacts/email.html b/design-systems/ant/system/artifacts/email.html new file mode 100644 index 000000000..18df42d81 --- /dev/null +++ b/design-systems/ant/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Ant - Email + + + +
    +
    +
    +

    Email module

    +

    Ant Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Ant, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/ant/system/artifacts/form.html b/design-systems/ant/system/artifacts/form.html new file mode 100644 index 000000000..a823521db --- /dev/null +++ b/design-systems/ant/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Ant - Form page + + + +
    +
    +
    +

    Form module

    +

    Ant Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Ant, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/ant/system/artifacts/landing.html b/design-systems/ant/system/artifacts/landing.html new file mode 100644 index 000000000..4660f3cdd --- /dev/null +++ b/design-systems/ant/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Ant - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Ant Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Ant, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/ant/system/artifacts/newsletter.html b/design-systems/ant/system/artifacts/newsletter.html new file mode 100644 index 000000000..b429388b5 --- /dev/null +++ b/design-systems/ant/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Ant - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Ant Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Ant, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/ant/system/artifacts/poster.html b/design-systems/ant/system/artifacts/poster.html new file mode 100644 index 000000000..9690082bb --- /dev/null +++ b/design-systems/ant/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Ant - Poster + + + +
    +
    +
    +

    Poster module

    +

    Ant Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Ant, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/ant/system/index.html b/design-systems/ant/system/index.html new file mode 100644 index 000000000..1a81d7769 --- /dev/null +++ b/design-systems/ant/system/index.html @@ -0,0 +1,128 @@ + + + + + + Ant - system assets + + + +
    +

    Professional & Corporate

    +

    Ant system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/ant/system/kit.dark.html b/design-systems/ant/system/kit.dark.html new file mode 100644 index 000000000..024806053 --- /dev/null +++ b/design-systems/ant/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Ant - dark component kit + + + +
    +
    +
    +

    Professional & Corporate system

    +

    Ant component kit

    +

    Bundled Open Design package for Ant, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/ant/system/kit.html b/design-systems/ant/system/kit.html new file mode 100644 index 000000000..a1e2f4af5 --- /dev/null +++ b/design-systems/ant/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Ant - component kit + + + +
    +
    +
    +

    Professional & Corporate system

    +

    Ant component kit

    +

    Bundled Open Design package for Ant, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/ant/system/tokens.default.json b/design-systems/ant/system/tokens.default.json new file mode 100644 index 000000000..ca7239825 --- /dev/null +++ b/design-systems/ant/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#d32029", + "colorPrimaryBg": "#fff1f0", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 10 +} diff --git a/design-systems/apple/system/artifacts/deck.html b/design-systems/apple/system/artifacts/deck.html new file mode 100644 index 000000000..f03137927 --- /dev/null +++ b/design-systems/apple/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Apple - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Apple Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Apple, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/apple/system/artifacts/email.html b/design-systems/apple/system/artifacts/email.html new file mode 100644 index 000000000..6b780bcdf --- /dev/null +++ b/design-systems/apple/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Apple - Email + + + +
    +
    +
    +

    Email module

    +

    Apple Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Apple, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/apple/system/artifacts/form.html b/design-systems/apple/system/artifacts/form.html new file mode 100644 index 000000000..346ab5228 --- /dev/null +++ b/design-systems/apple/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Apple - Form page + + + +
    +
    +
    +

    Form module

    +

    Apple Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Apple, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/apple/system/artifacts/landing.html b/design-systems/apple/system/artifacts/landing.html new file mode 100644 index 000000000..33f508957 --- /dev/null +++ b/design-systems/apple/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Apple - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Apple Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Apple, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/apple/system/artifacts/newsletter.html b/design-systems/apple/system/artifacts/newsletter.html new file mode 100644 index 000000000..f3206890a --- /dev/null +++ b/design-systems/apple/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Apple - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Apple Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Apple, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/apple/system/artifacts/poster.html b/design-systems/apple/system/artifacts/poster.html new file mode 100644 index 000000000..cf1c216e2 --- /dev/null +++ b/design-systems/apple/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Apple - Poster + + + +
    +
    +
    +

    Poster module

    +

    Apple Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Apple, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/apple/system/index.html b/design-systems/apple/system/index.html new file mode 100644 index 000000000..27b6abe4d --- /dev/null +++ b/design-systems/apple/system/index.html @@ -0,0 +1,128 @@ + + + + + + Apple - system assets + + + +
    +

    Media & Consumer

    +

    Apple system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/apple/system/kit.dark.html b/design-systems/apple/system/kit.dark.html new file mode 100644 index 000000000..9f32f5918 --- /dev/null +++ b/design-systems/apple/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Apple - dark component kit + + + +
    +
    +
    +

    Media & Consumer system

    +

    Apple component kit

    +

    Bundled Open Design package for Apple, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/apple/system/kit.html b/design-systems/apple/system/kit.html new file mode 100644 index 000000000..f8ceb2ce1 --- /dev/null +++ b/design-systems/apple/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Apple - component kit + + + +
    +
    +
    +

    Media & Consumer system

    +

    Apple component kit

    +

    Bundled Open Design package for Apple, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/apple/system/tokens.default.json b/design-systems/apple/system/tokens.default.json new file mode 100644 index 000000000..0c27e1d85 --- /dev/null +++ b/design-systems/apple/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#0071e3", + "colorPrimaryBg": "#fbfbfd", + "colorPrimaryHover": "#0077ed", + "colorPrimaryActive": "#0066cc", + "fontSize": 17, + "borderRadius": 12 +} diff --git a/design-systems/application/system/artifacts/deck.html b/design-systems/application/system/artifacts/deck.html new file mode 100644 index 000000000..cea07497e --- /dev/null +++ b/design-systems/application/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Application - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Application Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Application, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/application/system/artifacts/email.html b/design-systems/application/system/artifacts/email.html new file mode 100644 index 000000000..5f9f8c1fe --- /dev/null +++ b/design-systems/application/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Application - Email + + + +
    +
    +
    +

    Email module

    +

    Application Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Application, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/application/system/artifacts/form.html b/design-systems/application/system/artifacts/form.html new file mode 100644 index 000000000..fb7d14214 --- /dev/null +++ b/design-systems/application/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Application - Form page + + + +
    +
    +
    +

    Form module

    +

    Application Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Application, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/application/system/artifacts/landing.html b/design-systems/application/system/artifacts/landing.html new file mode 100644 index 000000000..d27112177 --- /dev/null +++ b/design-systems/application/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Application - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Application Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Application, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/application/system/artifacts/newsletter.html b/design-systems/application/system/artifacts/newsletter.html new file mode 100644 index 000000000..fbe6c240f --- /dev/null +++ b/design-systems/application/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Application - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Application Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Application, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/application/system/artifacts/poster.html b/design-systems/application/system/artifacts/poster.html new file mode 100644 index 000000000..5b61bfb35 --- /dev/null +++ b/design-systems/application/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Application - Poster + + + +
    +
    +
    +

    Poster module

    +

    Application Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Application, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/application/system/index.html b/design-systems/application/system/index.html new file mode 100644 index 000000000..73193d6e4 --- /dev/null +++ b/design-systems/application/system/index.html @@ -0,0 +1,128 @@ + + + + + + Application - system assets + + + +
    +

    Professional & Corporate

    +

    Application system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/application/system/kit.dark.html b/design-systems/application/system/kit.dark.html new file mode 100644 index 000000000..471b7574d --- /dev/null +++ b/design-systems/application/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Application - dark component kit + + + +
    +
    +
    +

    Professional & Corporate system

    +

    Application component kit

    +

    Bundled Open Design package for Application, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/application/system/kit.html b/design-systems/application/system/kit.html new file mode 100644 index 000000000..84f7c2c18 --- /dev/null +++ b/design-systems/application/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Application - component kit + + + +
    +
    +
    +

    Professional & Corporate system

    +

    Application component kit

    +

    Bundled Open Design package for Application, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/application/system/tokens.default.json b/design-systems/application/system/tokens.default.json new file mode 100644 index 000000000..cc30bd6e8 --- /dev/null +++ b/design-systems/application/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#2563eb", + "colorPrimaryBg": "#eef4ff", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 12 +} diff --git a/design-systems/arc/system/artifacts/deck.html b/design-systems/arc/system/artifacts/deck.html new file mode 100644 index 000000000..4d7a4043f --- /dev/null +++ b/design-systems/arc/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Arc Browser - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Arc Browser Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Arc Browser, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/arc/system/artifacts/email.html b/design-systems/arc/system/artifacts/email.html new file mode 100644 index 000000000..e38cc9b23 --- /dev/null +++ b/design-systems/arc/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Arc Browser - Email + + + +
    +
    +
    +

    Email module

    +

    Arc Browser Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Arc Browser, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/arc/system/artifacts/form.html b/design-systems/arc/system/artifacts/form.html new file mode 100644 index 000000000..f274c025c --- /dev/null +++ b/design-systems/arc/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Arc Browser - Form page + + + +
    +
    +
    +

    Form module

    +

    Arc Browser Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Arc Browser, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/arc/system/artifacts/landing.html b/design-systems/arc/system/artifacts/landing.html new file mode 100644 index 000000000..3b64903c4 --- /dev/null +++ b/design-systems/arc/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Arc Browser - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Arc Browser Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Arc Browser, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/arc/system/artifacts/newsletter.html b/design-systems/arc/system/artifacts/newsletter.html new file mode 100644 index 000000000..b2ebf8f49 --- /dev/null +++ b/design-systems/arc/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Arc Browser - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Arc Browser Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Arc Browser, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/arc/system/artifacts/poster.html b/design-systems/arc/system/artifacts/poster.html new file mode 100644 index 000000000..7e78ad63d --- /dev/null +++ b/design-systems/arc/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Arc Browser - Poster + + + +
    +
    +
    +

    Poster module

    +

    Arc Browser Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Arc Browser, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/arc/system/index.html b/design-systems/arc/system/index.html new file mode 100644 index 000000000..494ab3737 --- /dev/null +++ b/design-systems/arc/system/index.html @@ -0,0 +1,128 @@ + + + + + + Arc Browser - system assets + + + +
    +

    Productivity & SaaS

    +

    Arc Browser system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/arc/system/kit.dark.html b/design-systems/arc/system/kit.dark.html new file mode 100644 index 000000000..afe5f9d18 --- /dev/null +++ b/design-systems/arc/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Arc Browser - dark component kit + + + +
    +
    +
    +

    Productivity & SaaS system

    +

    Arc Browser component kit

    +

    Bundled Open Design package for Arc Browser, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/arc/system/kit.html b/design-systems/arc/system/kit.html new file mode 100644 index 000000000..692a878eb --- /dev/null +++ b/design-systems/arc/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Arc Browser - component kit + + + +
    +
    +
    +

    Productivity & SaaS system

    +

    Arc Browser component kit

    +

    Bundled Open Design package for Arc Browser, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/arc/system/tokens.default.json b/design-systems/arc/system/tokens.default.json new file mode 100644 index 000000000..2e03fe102 --- /dev/null +++ b/design-systems/arc/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#ff5f5f", + "colorPrimaryBg": "#fff4ea", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 15, + "borderRadius": 12 +} diff --git a/design-systems/artistic/system/artifacts/deck.html b/design-systems/artistic/system/artifacts/deck.html new file mode 100644 index 000000000..567730972 --- /dev/null +++ b/design-systems/artistic/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Artistic - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Artistic Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Artistic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/artistic/system/artifacts/email.html b/design-systems/artistic/system/artifacts/email.html new file mode 100644 index 000000000..4e3424658 --- /dev/null +++ b/design-systems/artistic/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Artistic - Email + + + +
    +
    +
    +

    Email module

    +

    Artistic Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Artistic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/artistic/system/artifacts/form.html b/design-systems/artistic/system/artifacts/form.html new file mode 100644 index 000000000..f6d61880d --- /dev/null +++ b/design-systems/artistic/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Artistic - Form page + + + +
    +
    +
    +

    Form module

    +

    Artistic Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Artistic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/artistic/system/artifacts/landing.html b/design-systems/artistic/system/artifacts/landing.html new file mode 100644 index 000000000..6ef135de3 --- /dev/null +++ b/design-systems/artistic/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Artistic - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Artistic Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Artistic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/artistic/system/artifacts/newsletter.html b/design-systems/artistic/system/artifacts/newsletter.html new file mode 100644 index 000000000..5d92d8799 --- /dev/null +++ b/design-systems/artistic/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Artistic - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Artistic Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Artistic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/artistic/system/artifacts/poster.html b/design-systems/artistic/system/artifacts/poster.html new file mode 100644 index 000000000..dd8f4baaa --- /dev/null +++ b/design-systems/artistic/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Artistic - Poster + + + +
    +
    +
    +

    Poster module

    +

    Artistic Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Artistic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/artistic/system/index.html b/design-systems/artistic/system/index.html new file mode 100644 index 000000000..08a0eb839 --- /dev/null +++ b/design-systems/artistic/system/index.html @@ -0,0 +1,128 @@ + + + + + + Artistic - system assets + + + +
    +

    Creative & Artistic

    +

    Artistic system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/artistic/system/kit.dark.html b/design-systems/artistic/system/kit.dark.html new file mode 100644 index 000000000..bcea3728a --- /dev/null +++ b/design-systems/artistic/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Artistic - dark component kit + + + +
    +
    +
    +

    Creative & Artistic system

    +

    Artistic component kit

    +

    Bundled Open Design package for Artistic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/artistic/system/kit.html b/design-systems/artistic/system/kit.html new file mode 100644 index 000000000..aff57484c --- /dev/null +++ b/design-systems/artistic/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Artistic - component kit + + + +
    +
    +
    +

    Creative & Artistic system

    +

    Artistic component kit

    +

    Bundled Open Design package for Artistic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/artistic/system/tokens.default.json b/design-systems/artistic/system/tokens.default.json new file mode 100644 index 000000000..436d03f49 --- /dev/null +++ b/design-systems/artistic/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#9b5b32", + "colorPrimaryBg": "#f1e3cf", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 17, + "borderRadius": 16 +} diff --git a/design-systems/atelier-zero/system/artifacts/deck.html b/design-systems/atelier-zero/system/artifacts/deck.html new file mode 100644 index 000000000..bffe6a723 --- /dev/null +++ b/design-systems/atelier-zero/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Atelier Zero - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Atelier Zero Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Atelier Zero, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/atelier-zero/system/artifacts/email.html b/design-systems/atelier-zero/system/artifacts/email.html new file mode 100644 index 000000000..64c6fa0d0 --- /dev/null +++ b/design-systems/atelier-zero/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Atelier Zero - Email + + + +
    +
    +
    +

    Email module

    +

    Atelier Zero Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Atelier Zero, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/atelier-zero/system/artifacts/form.html b/design-systems/atelier-zero/system/artifacts/form.html new file mode 100644 index 000000000..e9d1000fc --- /dev/null +++ b/design-systems/atelier-zero/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Atelier Zero - Form page + + + +
    +
    +
    +

    Form module

    +

    Atelier Zero Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Atelier Zero, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/atelier-zero/system/artifacts/landing.html b/design-systems/atelier-zero/system/artifacts/landing.html new file mode 100644 index 000000000..385f0d97f --- /dev/null +++ b/design-systems/atelier-zero/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Atelier Zero - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Atelier Zero Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Atelier Zero, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/atelier-zero/system/artifacts/newsletter.html b/design-systems/atelier-zero/system/artifacts/newsletter.html new file mode 100644 index 000000000..2ebee357b --- /dev/null +++ b/design-systems/atelier-zero/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Atelier Zero - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Atelier Zero Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Atelier Zero, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/atelier-zero/system/artifacts/poster.html b/design-systems/atelier-zero/system/artifacts/poster.html new file mode 100644 index 000000000..24e2c2df7 --- /dev/null +++ b/design-systems/atelier-zero/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Atelier Zero - Poster + + + +
    +
    +
    +

    Poster module

    +

    Atelier Zero Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Atelier Zero, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/atelier-zero/system/index.html b/design-systems/atelier-zero/system/index.html new file mode 100644 index 000000000..b10315a81 --- /dev/null +++ b/design-systems/atelier-zero/system/index.html @@ -0,0 +1,128 @@ + + + + + + Atelier Zero - system assets + + + +
    +

    Editorial · Studio

    +

    Atelier Zero system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/atelier-zero/system/kit.dark.html b/design-systems/atelier-zero/system/kit.dark.html new file mode 100644 index 000000000..be924f3d4 --- /dev/null +++ b/design-systems/atelier-zero/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Atelier Zero - dark component kit + + + +
    +
    +
    +

    Editorial · Studio system

    +

    Atelier Zero component kit

    +

    Bundled Open Design package for Atelier Zero, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/atelier-zero/system/kit.html b/design-systems/atelier-zero/system/kit.html new file mode 100644 index 000000000..209755ee2 --- /dev/null +++ b/design-systems/atelier-zero/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Atelier Zero - component kit + + + +
    +
    +
    +

    Editorial · Studio system

    +

    Atelier Zero component kit

    +

    Bundled Open Design package for Atelier Zero, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/atelier-zero/system/tokens.default.json b/design-systems/atelier-zero/system/tokens.default.json new file mode 100644 index 000000000..4b7e622b7 --- /dev/null +++ b/design-systems/atelier-zero/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#111111", + "colorPrimaryBg": "#eeeeee", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 8 +} diff --git a/design-systems/bento/system/artifacts/deck.html b/design-systems/bento/system/artifacts/deck.html new file mode 100644 index 000000000..167a1159d --- /dev/null +++ b/design-systems/bento/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Bento - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Bento Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Bento, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bento/system/artifacts/email.html b/design-systems/bento/system/artifacts/email.html new file mode 100644 index 000000000..a9d7423b5 --- /dev/null +++ b/design-systems/bento/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Bento - Email + + + +
    +
    +
    +

    Email module

    +

    Bento Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Bento, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bento/system/artifacts/form.html b/design-systems/bento/system/artifacts/form.html new file mode 100644 index 000000000..8febebb1a --- /dev/null +++ b/design-systems/bento/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Bento - Form page + + + +
    +
    +
    +

    Form module

    +

    Bento Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Bento, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bento/system/artifacts/landing.html b/design-systems/bento/system/artifacts/landing.html new file mode 100644 index 000000000..4ff4f461f --- /dev/null +++ b/design-systems/bento/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Bento - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Bento Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Bento, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bento/system/artifacts/newsletter.html b/design-systems/bento/system/artifacts/newsletter.html new file mode 100644 index 000000000..4588d8491 --- /dev/null +++ b/design-systems/bento/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Bento - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Bento Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Bento, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bento/system/artifacts/poster.html b/design-systems/bento/system/artifacts/poster.html new file mode 100644 index 000000000..1b8cd21f1 --- /dev/null +++ b/design-systems/bento/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Bento - Poster + + + +
    +
    +
    +

    Poster module

    +

    Bento Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Bento, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bento/system/index.html b/design-systems/bento/system/index.html new file mode 100644 index 000000000..ba0e8f3df --- /dev/null +++ b/design-systems/bento/system/index.html @@ -0,0 +1,128 @@ + + + + + + Bento - system assets + + + +
    +

    Layout & Structure

    +

    Bento system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/bento/system/kit.dark.html b/design-systems/bento/system/kit.dark.html new file mode 100644 index 000000000..14ed3e47a --- /dev/null +++ b/design-systems/bento/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Bento - dark component kit + + + +
    +
    +
    +

    Layout & Structure system

    +

    Bento component kit

    +

    Bundled Open Design package for Bento, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/bento/system/kit.html b/design-systems/bento/system/kit.html new file mode 100644 index 000000000..ba0a53bec --- /dev/null +++ b/design-systems/bento/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Bento - component kit + + + +
    +
    +
    +

    Layout & Structure system

    +

    Bento component kit

    +

    Bundled Open Design package for Bento, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/bento/system/tokens.default.json b/design-systems/bento/system/tokens.default.json new file mode 100644 index 000000000..a1beb9985 --- /dev/null +++ b/design-systems/bento/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#2563eb", + "colorPrimaryBg": "#eaf1ff", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/binance/system/artifacts/deck.html b/design-systems/binance/system/artifacts/deck.html new file mode 100644 index 000000000..eed7af5e2 --- /dev/null +++ b/design-systems/binance/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Binance.US - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Binance.US Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Binance.US, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/binance/system/artifacts/email.html b/design-systems/binance/system/artifacts/email.html new file mode 100644 index 000000000..f19061203 --- /dev/null +++ b/design-systems/binance/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Binance.US - Email + + + +
    +
    +
    +

    Email module

    +

    Binance.US Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Binance.US, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/binance/system/artifacts/form.html b/design-systems/binance/system/artifacts/form.html new file mode 100644 index 000000000..aac9e5678 --- /dev/null +++ b/design-systems/binance/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Binance.US - Form page + + + +
    +
    +
    +

    Form module

    +

    Binance.US Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Binance.US, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/binance/system/artifacts/landing.html b/design-systems/binance/system/artifacts/landing.html new file mode 100644 index 000000000..7819bfb8a --- /dev/null +++ b/design-systems/binance/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Binance.US - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Binance.US Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Binance.US, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/binance/system/artifacts/newsletter.html b/design-systems/binance/system/artifacts/newsletter.html new file mode 100644 index 000000000..adbce0e6a --- /dev/null +++ b/design-systems/binance/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Binance.US - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Binance.US Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Binance.US, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/binance/system/artifacts/poster.html b/design-systems/binance/system/artifacts/poster.html new file mode 100644 index 000000000..c2ba02b46 --- /dev/null +++ b/design-systems/binance/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Binance.US - Poster + + + +
    +
    +
    +

    Poster module

    +

    Binance.US Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Binance.US, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/binance/system/index.html b/design-systems/binance/system/index.html new file mode 100644 index 000000000..c93095423 --- /dev/null +++ b/design-systems/binance/system/index.html @@ -0,0 +1,128 @@ + + + + + + Binance.US - system assets + + + +
    +

    Fintech & Crypto

    +

    Binance.US system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/binance/system/kit.dark.html b/design-systems/binance/system/kit.dark.html new file mode 100644 index 000000000..c4a62d4c3 --- /dev/null +++ b/design-systems/binance/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Binance.US - dark component kit + + + +
    +
    +
    +

    Fintech & Crypto system

    +

    Binance.US component kit

    +

    Bundled Open Design package for Binance.US, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/binance/system/kit.html b/design-systems/binance/system/kit.html new file mode 100644 index 000000000..b69863621 --- /dev/null +++ b/design-systems/binance/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Binance.US - component kit + + + +
    +
    +
    +

    Fintech & Crypto system

    +

    Binance.US component kit

    +

    Bundled Open Design package for Binance.US, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/binance/system/tokens.default.json b/design-systems/binance/system/tokens.default.json new file mode 100644 index 000000000..f1856cddc --- /dev/null +++ b/design-systems/binance/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#f0b90b", + "colorPrimaryBg": "#f5f5f5", + "colorPrimaryHover": "#1eaedb", + "colorPrimaryActive": "#d0980b", + "fontSize": 16, + "borderRadius": 12 +} diff --git a/design-systems/bmw-m/system/artifacts/deck.html b/design-systems/bmw-m/system/artifacts/deck.html new file mode 100644 index 000000000..57edcbcaa --- /dev/null +++ b/design-systems/bmw-m/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + BMW M - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    BMW M Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for BMW M, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bmw-m/system/artifacts/email.html b/design-systems/bmw-m/system/artifacts/email.html new file mode 100644 index 000000000..a75c5fd15 --- /dev/null +++ b/design-systems/bmw-m/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + BMW M - Email + + + +
    +
    +
    +

    Email module

    +

    BMW M Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for BMW M, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bmw-m/system/artifacts/form.html b/design-systems/bmw-m/system/artifacts/form.html new file mode 100644 index 000000000..fc37d09b4 --- /dev/null +++ b/design-systems/bmw-m/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + BMW M - Form page + + + +
    +
    +
    +

    Form module

    +

    BMW M Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for BMW M, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bmw-m/system/artifacts/landing.html b/design-systems/bmw-m/system/artifacts/landing.html new file mode 100644 index 000000000..68b39f553 --- /dev/null +++ b/design-systems/bmw-m/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + BMW M - Landing page + + + +
    +
    +
    +

    Landing module

    +

    BMW M Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for BMW M, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bmw-m/system/artifacts/newsletter.html b/design-systems/bmw-m/system/artifacts/newsletter.html new file mode 100644 index 000000000..09bf8db8c --- /dev/null +++ b/design-systems/bmw-m/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + BMW M - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    BMW M Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for BMW M, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bmw-m/system/artifacts/poster.html b/design-systems/bmw-m/system/artifacts/poster.html new file mode 100644 index 000000000..81c344e8a --- /dev/null +++ b/design-systems/bmw-m/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + BMW M - Poster + + + +
    +
    +
    +

    Poster module

    +

    BMW M Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for BMW M, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bmw-m/system/index.html b/design-systems/bmw-m/system/index.html new file mode 100644 index 000000000..c3ece2e31 --- /dev/null +++ b/design-systems/bmw-m/system/index.html @@ -0,0 +1,128 @@ + + + + + + BMW M - system assets + + + +
    +

    Automotive

    +

    BMW M system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/bmw-m/system/kit.dark.html b/design-systems/bmw-m/system/kit.dark.html new file mode 100644 index 000000000..d5cf79bcc --- /dev/null +++ b/design-systems/bmw-m/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + BMW M - dark component kit + + + +
    +
    +
    +

    Automotive system

    +

    BMW M component kit

    +

    Bundled Open Design package for BMW M, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/bmw-m/system/kit.html b/design-systems/bmw-m/system/kit.html new file mode 100644 index 000000000..3dab0181b --- /dev/null +++ b/design-systems/bmw-m/system/kit.html @@ -0,0 +1,149 @@ + + + + + + BMW M - component kit + + + +
    +
    +
    +

    Automotive system

    +

    BMW M component kit

    +

    Bundled Open Design package for BMW M, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/bmw-m/system/tokens.default.json b/design-systems/bmw-m/system/tokens.default.json new file mode 100644 index 000000000..3c11a4f00 --- /dev/null +++ b/design-systems/bmw-m/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#0066b1", + "colorPrimaryBg": "#eef3f8", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 8 +} diff --git a/design-systems/bmw/system/artifacts/deck.html b/design-systems/bmw/system/artifacts/deck.html new file mode 100644 index 000000000..a620723da --- /dev/null +++ b/design-systems/bmw/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + BMW - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    BMW Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for BMW, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bmw/system/artifacts/email.html b/design-systems/bmw/system/artifacts/email.html new file mode 100644 index 000000000..76391ddb5 --- /dev/null +++ b/design-systems/bmw/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + BMW - Email + + + +
    +
    +
    +

    Email module

    +

    BMW Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for BMW, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bmw/system/artifacts/form.html b/design-systems/bmw/system/artifacts/form.html new file mode 100644 index 000000000..e14f5ac9a --- /dev/null +++ b/design-systems/bmw/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + BMW - Form page + + + +
    +
    +
    +

    Form module

    +

    BMW Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for BMW, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bmw/system/artifacts/landing.html b/design-systems/bmw/system/artifacts/landing.html new file mode 100644 index 000000000..cfc2b87e8 --- /dev/null +++ b/design-systems/bmw/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + BMW - Landing page + + + +
    +
    +
    +

    Landing module

    +

    BMW Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for BMW, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bmw/system/artifacts/newsletter.html b/design-systems/bmw/system/artifacts/newsletter.html new file mode 100644 index 000000000..c33c92a08 --- /dev/null +++ b/design-systems/bmw/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + BMW - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    BMW Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for BMW, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bmw/system/artifacts/poster.html b/design-systems/bmw/system/artifacts/poster.html new file mode 100644 index 000000000..07b5821b2 --- /dev/null +++ b/design-systems/bmw/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + BMW - Poster + + + +
    +
    +
    +

    Poster module

    +

    BMW Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for BMW, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bmw/system/index.html b/design-systems/bmw/system/index.html new file mode 100644 index 000000000..5c9576301 --- /dev/null +++ b/design-systems/bmw/system/index.html @@ -0,0 +1,128 @@ + + + + + + BMW - system assets + + + +
    +

    Automotive

    +

    BMW system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/bmw/system/kit.dark.html b/design-systems/bmw/system/kit.dark.html new file mode 100644 index 000000000..32e0b9280 --- /dev/null +++ b/design-systems/bmw/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + BMW - dark component kit + + + +
    +
    +
    +

    Automotive system

    +

    BMW component kit

    +

    Bundled Open Design package for BMW, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/bmw/system/kit.html b/design-systems/bmw/system/kit.html new file mode 100644 index 000000000..cd2c35b0d --- /dev/null +++ b/design-systems/bmw/system/kit.html @@ -0,0 +1,149 @@ + + + + + + BMW - component kit + + + +
    +
    +
    +

    Automotive system

    +

    BMW component kit

    +

    Bundled Open Design package for BMW, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/bmw/system/tokens.default.json b/design-systems/bmw/system/tokens.default.json new file mode 100644 index 000000000..7d16d3f85 --- /dev/null +++ b/design-systems/bmw/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#1c69d4", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "#0653b6", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 18%)", + "fontSize": 16, + "borderRadius": 0 +} diff --git a/design-systems/bold/system/artifacts/deck.html b/design-systems/bold/system/artifacts/deck.html new file mode 100644 index 000000000..3fb16b0c3 --- /dev/null +++ b/design-systems/bold/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Bold - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Bold Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Bold, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bold/system/artifacts/email.html b/design-systems/bold/system/artifacts/email.html new file mode 100644 index 000000000..b7f88a220 --- /dev/null +++ b/design-systems/bold/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Bold - Email + + + +
    +
    +
    +

    Email module

    +

    Bold Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Bold, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bold/system/artifacts/form.html b/design-systems/bold/system/artifacts/form.html new file mode 100644 index 000000000..469729e6c --- /dev/null +++ b/design-systems/bold/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Bold - Form page + + + +
    +
    +
    +

    Form module

    +

    Bold Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Bold, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bold/system/artifacts/landing.html b/design-systems/bold/system/artifacts/landing.html new file mode 100644 index 000000000..959d984ff --- /dev/null +++ b/design-systems/bold/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Bold - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Bold Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Bold, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bold/system/artifacts/newsletter.html b/design-systems/bold/system/artifacts/newsletter.html new file mode 100644 index 000000000..5b2ef8e86 --- /dev/null +++ b/design-systems/bold/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Bold - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Bold Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Bold, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bold/system/artifacts/poster.html b/design-systems/bold/system/artifacts/poster.html new file mode 100644 index 000000000..0d56b3413 --- /dev/null +++ b/design-systems/bold/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Bold - Poster + + + +
    +
    +
    +

    Poster module

    +

    Bold Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Bold, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bold/system/index.html b/design-systems/bold/system/index.html new file mode 100644 index 000000000..11a9f16b7 --- /dev/null +++ b/design-systems/bold/system/index.html @@ -0,0 +1,128 @@ + + + + + + Bold - system assets + + + +
    +

    Bold & Expressive

    +

    Bold system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/bold/system/kit.dark.html b/design-systems/bold/system/kit.dark.html new file mode 100644 index 000000000..ef4060416 --- /dev/null +++ b/design-systems/bold/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Bold - dark component kit + + + +
    +
    +
    +

    Bold & Expressive system

    +

    Bold component kit

    +

    Bundled Open Design package for Bold, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/bold/system/kit.html b/design-systems/bold/system/kit.html new file mode 100644 index 000000000..a71ea8c3c --- /dev/null +++ b/design-systems/bold/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Bold - component kit + + + +
    +
    +
    +

    Bold & Expressive system

    +

    Bold component kit

    +

    Bundled Open Design package for Bold, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/bold/system/tokens.default.json b/design-systems/bold/system/tokens.default.json new file mode 100644 index 000000000..4b7e622b7 --- /dev/null +++ b/design-systems/bold/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#111111", + "colorPrimaryBg": "#eeeeee", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 8 +} diff --git a/design-systems/brutalism/system/artifacts/deck.html b/design-systems/brutalism/system/artifacts/deck.html new file mode 100644 index 000000000..9e8a7b578 --- /dev/null +++ b/design-systems/brutalism/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Brutalism - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Brutalism Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Brutalism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/brutalism/system/artifacts/email.html b/design-systems/brutalism/system/artifacts/email.html new file mode 100644 index 000000000..faacf97a5 --- /dev/null +++ b/design-systems/brutalism/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Brutalism - Email + + + +
    +
    +
    +

    Email module

    +

    Brutalism Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Brutalism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/brutalism/system/artifacts/form.html b/design-systems/brutalism/system/artifacts/form.html new file mode 100644 index 000000000..45f47e3b9 --- /dev/null +++ b/design-systems/brutalism/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Brutalism - Form page + + + +
    +
    +
    +

    Form module

    +

    Brutalism Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Brutalism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/brutalism/system/artifacts/landing.html b/design-systems/brutalism/system/artifacts/landing.html new file mode 100644 index 000000000..c1a1b5358 --- /dev/null +++ b/design-systems/brutalism/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Brutalism - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Brutalism Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Brutalism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/brutalism/system/artifacts/newsletter.html b/design-systems/brutalism/system/artifacts/newsletter.html new file mode 100644 index 000000000..42164092e --- /dev/null +++ b/design-systems/brutalism/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Brutalism - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Brutalism Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Brutalism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/brutalism/system/artifacts/poster.html b/design-systems/brutalism/system/artifacts/poster.html new file mode 100644 index 000000000..1928fbe1c --- /dev/null +++ b/design-systems/brutalism/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Brutalism - Poster + + + +
    +
    +
    +

    Poster module

    +

    Brutalism Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Brutalism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/brutalism/system/index.html b/design-systems/brutalism/system/index.html new file mode 100644 index 000000000..1f9d2cbe7 --- /dev/null +++ b/design-systems/brutalism/system/index.html @@ -0,0 +1,128 @@ + + + + + + Brutalism - system assets + + + +
    +

    Bold & Expressive

    +

    Brutalism system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/brutalism/system/kit.dark.html b/design-systems/brutalism/system/kit.dark.html new file mode 100644 index 000000000..53a2654d3 --- /dev/null +++ b/design-systems/brutalism/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Brutalism - dark component kit + + + +
    +
    +
    +

    Bold & Expressive system

    +

    Brutalism component kit

    +

    Bundled Open Design package for Brutalism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/brutalism/system/kit.html b/design-systems/brutalism/system/kit.html new file mode 100644 index 000000000..508ff3b3b --- /dev/null +++ b/design-systems/brutalism/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Brutalism - component kit + + + +
    +
    +
    +

    Bold & Expressive system

    +

    Brutalism component kit

    +

    Bundled Open Design package for Brutalism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/brutalism/system/tokens.default.json b/design-systems/brutalism/system/tokens.default.json new file mode 100644 index 000000000..9084c8dff --- /dev/null +++ b/design-systems/brutalism/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#ffef5a", + "colorPrimaryBg": "#ffef5a", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 17, + "borderRadius": 0 +} diff --git a/design-systems/bugatti/system/artifacts/deck.html b/design-systems/bugatti/system/artifacts/deck.html new file mode 100644 index 000000000..7e0d5b7d1 --- /dev/null +++ b/design-systems/bugatti/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Bugatti - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Bugatti Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Bugatti, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bugatti/system/artifacts/email.html b/design-systems/bugatti/system/artifacts/email.html new file mode 100644 index 000000000..5d978b12c --- /dev/null +++ b/design-systems/bugatti/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Bugatti - Email + + + +
    +
    +
    +

    Email module

    +

    Bugatti Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Bugatti, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bugatti/system/artifacts/form.html b/design-systems/bugatti/system/artifacts/form.html new file mode 100644 index 000000000..9a0857280 --- /dev/null +++ b/design-systems/bugatti/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Bugatti - Form page + + + +
    +
    +
    +

    Form module

    +

    Bugatti Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Bugatti, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bugatti/system/artifacts/landing.html b/design-systems/bugatti/system/artifacts/landing.html new file mode 100644 index 000000000..26ed6d81e --- /dev/null +++ b/design-systems/bugatti/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Bugatti - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Bugatti Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Bugatti, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bugatti/system/artifacts/newsletter.html b/design-systems/bugatti/system/artifacts/newsletter.html new file mode 100644 index 000000000..fdad5d05b --- /dev/null +++ b/design-systems/bugatti/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Bugatti - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Bugatti Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Bugatti, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bugatti/system/artifacts/poster.html b/design-systems/bugatti/system/artifacts/poster.html new file mode 100644 index 000000000..cfd7c8a42 --- /dev/null +++ b/design-systems/bugatti/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Bugatti - Poster + + + +
    +
    +
    +

    Poster module

    +

    Bugatti Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Bugatti, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/bugatti/system/index.html b/design-systems/bugatti/system/index.html new file mode 100644 index 000000000..91a9b2bfe --- /dev/null +++ b/design-systems/bugatti/system/index.html @@ -0,0 +1,128 @@ + + + + + + Bugatti - system assets + + + +
    +

    Automotive

    +

    Bugatti system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/bugatti/system/kit.dark.html b/design-systems/bugatti/system/kit.dark.html new file mode 100644 index 000000000..74d26c4ee --- /dev/null +++ b/design-systems/bugatti/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Bugatti - dark component kit + + + +
    +
    +
    +

    Automotive system

    +

    Bugatti component kit

    +

    Bundled Open Design package for Bugatti, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/bugatti/system/kit.html b/design-systems/bugatti/system/kit.html new file mode 100644 index 000000000..046d50254 --- /dev/null +++ b/design-systems/bugatti/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Bugatti - component kit + + + +
    +
    +
    +

    Automotive system

    +

    Bugatti component kit

    +

    Bundled Open Design package for Bugatti, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/bugatti/system/tokens.default.json b/design-systems/bugatti/system/tokens.default.json new file mode 100644 index 000000000..b24c06d89 --- /dev/null +++ b/design-systems/bugatti/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#1b4d8f", + "colorPrimaryBg": "#16283f", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 14 +} diff --git a/design-systems/cafe/system/artifacts/deck.html b/design-systems/cafe/system/artifacts/deck.html new file mode 100644 index 000000000..9e0e0ff20 --- /dev/null +++ b/design-systems/cafe/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Cafe - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Cafe Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Cafe, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cafe/system/artifacts/email.html b/design-systems/cafe/system/artifacts/email.html new file mode 100644 index 000000000..c8aa97489 --- /dev/null +++ b/design-systems/cafe/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Cafe - Email + + + +
    +
    +
    +

    Email module

    +

    Cafe Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Cafe, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cafe/system/artifacts/form.html b/design-systems/cafe/system/artifacts/form.html new file mode 100644 index 000000000..cfdfdaeb5 --- /dev/null +++ b/design-systems/cafe/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Cafe - Form page + + + +
    +
    +
    +

    Form module

    +

    Cafe Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Cafe, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cafe/system/artifacts/landing.html b/design-systems/cafe/system/artifacts/landing.html new file mode 100644 index 000000000..b9cdbaeb4 --- /dev/null +++ b/design-systems/cafe/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Cafe - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Cafe Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Cafe, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cafe/system/artifacts/newsletter.html b/design-systems/cafe/system/artifacts/newsletter.html new file mode 100644 index 000000000..d0ef8c931 --- /dev/null +++ b/design-systems/cafe/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Cafe - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Cafe Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Cafe, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cafe/system/artifacts/poster.html b/design-systems/cafe/system/artifacts/poster.html new file mode 100644 index 000000000..79c05a676 --- /dev/null +++ b/design-systems/cafe/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Cafe - Poster + + + +
    +
    +
    +

    Poster module

    +

    Cafe Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Cafe, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cafe/system/index.html b/design-systems/cafe/system/index.html new file mode 100644 index 000000000..ea85926f6 --- /dev/null +++ b/design-systems/cafe/system/index.html @@ -0,0 +1,128 @@ + + + + + + Cafe - system assets + + + +
    +

    Creative & Artistic

    +

    Cafe system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/cafe/system/kit.dark.html b/design-systems/cafe/system/kit.dark.html new file mode 100644 index 000000000..9a92bf2e6 --- /dev/null +++ b/design-systems/cafe/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Cafe - dark component kit + + + +
    +
    +
    +

    Creative & Artistic system

    +

    Cafe component kit

    +

    Bundled Open Design package for Cafe, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/cafe/system/kit.html b/design-systems/cafe/system/kit.html new file mode 100644 index 000000000..6ca191bab --- /dev/null +++ b/design-systems/cafe/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Cafe - component kit + + + +
    +
    +
    +

    Creative & Artistic system

    +

    Cafe component kit

    +

    Bundled Open Design package for Cafe, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/cafe/system/tokens.default.json b/design-systems/cafe/system/tokens.default.json new file mode 100644 index 000000000..436d03f49 --- /dev/null +++ b/design-systems/cafe/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#9b5b32", + "colorPrimaryBg": "#f1e3cf", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 17, + "borderRadius": 16 +} diff --git a/design-systems/cal/system/artifacts/deck.html b/design-systems/cal/system/artifacts/deck.html new file mode 100644 index 000000000..a39adb7f5 --- /dev/null +++ b/design-systems/cal/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Cal.com - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Cal.com Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Cal.com, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cal/system/artifacts/email.html b/design-systems/cal/system/artifacts/email.html new file mode 100644 index 000000000..00ad89977 --- /dev/null +++ b/design-systems/cal/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Cal.com - Email + + + +
    +
    +
    +

    Email module

    +

    Cal.com Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Cal.com, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cal/system/artifacts/form.html b/design-systems/cal/system/artifacts/form.html new file mode 100644 index 000000000..e31e695c2 --- /dev/null +++ b/design-systems/cal/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Cal.com - Form page + + + +
    +
    +
    +

    Form module

    +

    Cal.com Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Cal.com, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cal/system/artifacts/landing.html b/design-systems/cal/system/artifacts/landing.html new file mode 100644 index 000000000..9c3f3269e --- /dev/null +++ b/design-systems/cal/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Cal.com - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Cal.com Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Cal.com, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cal/system/artifacts/newsletter.html b/design-systems/cal/system/artifacts/newsletter.html new file mode 100644 index 000000000..62c2904b6 --- /dev/null +++ b/design-systems/cal/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Cal.com - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Cal.com Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Cal.com, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cal/system/artifacts/poster.html b/design-systems/cal/system/artifacts/poster.html new file mode 100644 index 000000000..bd817933e --- /dev/null +++ b/design-systems/cal/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Cal.com - Poster + + + +
    +
    +
    +

    Poster module

    +

    Cal.com Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Cal.com, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cal/system/index.html b/design-systems/cal/system/index.html new file mode 100644 index 000000000..bf66713fa --- /dev/null +++ b/design-systems/cal/system/index.html @@ -0,0 +1,128 @@ + + + + + + Cal.com - system assets + + + +
    +

    Productivity & SaaS

    +

    Cal.com system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/cal/system/kit.dark.html b/design-systems/cal/system/kit.dark.html new file mode 100644 index 000000000..e902c9f84 --- /dev/null +++ b/design-systems/cal/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Cal.com - dark component kit + + + +
    +
    +
    +

    Productivity & SaaS system

    +

    Cal.com component kit

    +

    Bundled Open Design package for Cal.com, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/cal/system/kit.html b/design-systems/cal/system/kit.html new file mode 100644 index 000000000..7ce2f8fb5 --- /dev/null +++ b/design-systems/cal/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Cal.com - component kit + + + +
    +
    +
    +

    Productivity & SaaS system

    +

    Cal.com component kit

    +

    Bundled Open Design package for Cal.com, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/cal/system/tokens.default.json b/design-systems/cal/system/tokens.default.json new file mode 100644 index 000000000..6c634070e --- /dev/null +++ b/design-systems/cal/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#0099ff", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 12 +} diff --git a/design-systems/canva/system/artifacts/deck.html b/design-systems/canva/system/artifacts/deck.html new file mode 100644 index 000000000..59107156b --- /dev/null +++ b/design-systems/canva/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Canva - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Canva Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Canva, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/canva/system/artifacts/email.html b/design-systems/canva/system/artifacts/email.html new file mode 100644 index 000000000..117cde472 --- /dev/null +++ b/design-systems/canva/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Canva - Email + + + +
    +
    +
    +

    Email module

    +

    Canva Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Canva, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/canva/system/artifacts/form.html b/design-systems/canva/system/artifacts/form.html new file mode 100644 index 000000000..a232e6f4c --- /dev/null +++ b/design-systems/canva/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Canva - Form page + + + +
    +
    +
    +

    Form module

    +

    Canva Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Canva, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/canva/system/artifacts/landing.html b/design-systems/canva/system/artifacts/landing.html new file mode 100644 index 000000000..cad3adaaf --- /dev/null +++ b/design-systems/canva/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Canva - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Canva Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Canva, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/canva/system/artifacts/newsletter.html b/design-systems/canva/system/artifacts/newsletter.html new file mode 100644 index 000000000..b09dcc64d --- /dev/null +++ b/design-systems/canva/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Canva - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Canva Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Canva, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/canva/system/artifacts/poster.html b/design-systems/canva/system/artifacts/poster.html new file mode 100644 index 000000000..1002250d3 --- /dev/null +++ b/design-systems/canva/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Canva - Poster + + + +
    +
    +
    +

    Poster module

    +

    Canva Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Canva, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/canva/system/index.html b/design-systems/canva/system/index.html new file mode 100644 index 000000000..870b52767 --- /dev/null +++ b/design-systems/canva/system/index.html @@ -0,0 +1,128 @@ + + + + + + Canva - system assets + + + +
    +

    Design & Creative

    +

    Canva system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/canva/system/kit.dark.html b/design-systems/canva/system/kit.dark.html new file mode 100644 index 000000000..8e26c5604 --- /dev/null +++ b/design-systems/canva/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Canva - dark component kit + + + +
    +
    +
    +

    Design & Creative system

    +

    Canva component kit

    +

    Bundled Open Design package for Canva, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/canva/system/kit.html b/design-systems/canva/system/kit.html new file mode 100644 index 000000000..cfd4841cf --- /dev/null +++ b/design-systems/canva/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Canva - component kit + + + +
    +
    +
    +

    Design & Creative system

    +

    Canva component kit

    +

    Bundled Open Design package for Canva, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/canva/system/tokens.default.json b/design-systems/canva/system/tokens.default.json new file mode 100644 index 000000000..e55d582cc --- /dev/null +++ b/design-systems/canva/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#7d2ae8", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "#6815d4", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 14, + "borderRadius": 12 +} diff --git a/design-systems/cisco/system/artifacts/deck.html b/design-systems/cisco/system/artifacts/deck.html new file mode 100644 index 000000000..d3c755383 --- /dev/null +++ b/design-systems/cisco/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Cisco - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Cisco Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Cisco, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cisco/system/artifacts/email.html b/design-systems/cisco/system/artifacts/email.html new file mode 100644 index 000000000..44b69d386 --- /dev/null +++ b/design-systems/cisco/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Cisco - Email + + + +
    +
    +
    +

    Email module

    +

    Cisco Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Cisco, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cisco/system/artifacts/form.html b/design-systems/cisco/system/artifacts/form.html new file mode 100644 index 000000000..88a93a8eb --- /dev/null +++ b/design-systems/cisco/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Cisco - Form page + + + +
    +
    +
    +

    Form module

    +

    Cisco Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Cisco, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cisco/system/artifacts/landing.html b/design-systems/cisco/system/artifacts/landing.html new file mode 100644 index 000000000..c7ccd0d08 --- /dev/null +++ b/design-systems/cisco/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Cisco - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Cisco Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Cisco, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cisco/system/artifacts/newsletter.html b/design-systems/cisco/system/artifacts/newsletter.html new file mode 100644 index 000000000..1e90a5c86 --- /dev/null +++ b/design-systems/cisco/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Cisco - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Cisco Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Cisco, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cisco/system/artifacts/poster.html b/design-systems/cisco/system/artifacts/poster.html new file mode 100644 index 000000000..61ec98dba --- /dev/null +++ b/design-systems/cisco/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Cisco - Poster + + + +
    +
    +
    +

    Poster module

    +

    Cisco Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Cisco, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cisco/system/index.html b/design-systems/cisco/system/index.html new file mode 100644 index 000000000..6a67509bc --- /dev/null +++ b/design-systems/cisco/system/index.html @@ -0,0 +1,128 @@ + + + + + + Cisco - system assets + + + +
    +

    Backend & Data

    +

    Cisco system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/cisco/system/kit.dark.html b/design-systems/cisco/system/kit.dark.html new file mode 100644 index 000000000..9122daca9 --- /dev/null +++ b/design-systems/cisco/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Cisco - dark component kit + + + +
    +
    +
    +

    Backend & Data system

    +

    Cisco component kit

    +

    Bundled Open Design package for Cisco, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/cisco/system/kit.html b/design-systems/cisco/system/kit.html new file mode 100644 index 000000000..ce0967dbb --- /dev/null +++ b/design-systems/cisco/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Cisco - component kit + + + +
    +
    +
    +

    Backend & Data system

    +

    Cisco component kit

    +

    Bundled Open Design package for Cisco, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/cisco/system/tokens.default.json b/design-systems/cisco/system/tokens.default.json new file mode 100644 index 000000000..29b76a597 --- /dev/null +++ b/design-systems/cisco/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#049fd9", + "colorPrimaryBg": "#243447", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 20 +} diff --git a/design-systems/claude/system/artifacts/deck.html b/design-systems/claude/system/artifacts/deck.html new file mode 100644 index 000000000..db11917e6 --- /dev/null +++ b/design-systems/claude/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Claude (Anthropic) - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Claude (Anthropic) Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Claude (Anthropic), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/claude/system/artifacts/email.html b/design-systems/claude/system/artifacts/email.html new file mode 100644 index 000000000..89e82b38a --- /dev/null +++ b/design-systems/claude/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Claude (Anthropic) - Email + + + +
    +
    +
    +

    Email module

    +

    Claude (Anthropic) Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Claude (Anthropic), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/claude/system/artifacts/form.html b/design-systems/claude/system/artifacts/form.html new file mode 100644 index 000000000..c399d9865 --- /dev/null +++ b/design-systems/claude/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Claude (Anthropic) - Form page + + + +
    +
    +
    +

    Form module

    +

    Claude (Anthropic) Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Claude (Anthropic), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/claude/system/artifacts/landing.html b/design-systems/claude/system/artifacts/landing.html new file mode 100644 index 000000000..a5d7f1028 --- /dev/null +++ b/design-systems/claude/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Claude (Anthropic) - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Claude (Anthropic) Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Claude (Anthropic), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/claude/system/artifacts/newsletter.html b/design-systems/claude/system/artifacts/newsletter.html new file mode 100644 index 000000000..dee5c1c78 --- /dev/null +++ b/design-systems/claude/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Claude (Anthropic) - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Claude (Anthropic) Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Claude (Anthropic), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/claude/system/artifacts/poster.html b/design-systems/claude/system/artifacts/poster.html new file mode 100644 index 000000000..00978612f --- /dev/null +++ b/design-systems/claude/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Claude (Anthropic) - Poster + + + +
    +
    +
    +

    Poster module

    +

    Claude (Anthropic) Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Claude (Anthropic), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/claude/system/index.html b/design-systems/claude/system/index.html new file mode 100644 index 000000000..edbb48227 --- /dev/null +++ b/design-systems/claude/system/index.html @@ -0,0 +1,128 @@ + + + + + + Claude (Anthropic) - system assets + + + +
    +

    AI & LLM

    +

    Claude (Anthropic) system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/claude/system/kit.dark.html b/design-systems/claude/system/kit.dark.html new file mode 100644 index 000000000..d9bbf30ec --- /dev/null +++ b/design-systems/claude/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Claude (Anthropic) - dark component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    Claude (Anthropic) component kit

    +

    Bundled Open Design package for Claude (Anthropic), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/claude/system/kit.html b/design-systems/claude/system/kit.html new file mode 100644 index 000000000..9de4a298e --- /dev/null +++ b/design-systems/claude/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Claude (Anthropic) - component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    Claude (Anthropic) component kit

    +

    Bundled Open Design package for Claude (Anthropic), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/claude/system/tokens.default.json b/design-systems/claude/system/tokens.default.json new file mode 100644 index 000000000..4ef64e1be --- /dev/null +++ b/design-systems/claude/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#c96442", + "colorPrimaryBg": "#e8e6dc", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 12 +} diff --git a/design-systems/clay/system/artifacts/deck.html b/design-systems/clay/system/artifacts/deck.html new file mode 100644 index 000000000..826ae3e3d --- /dev/null +++ b/design-systems/clay/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Clay - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Clay Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Clay, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/clay/system/artifacts/email.html b/design-systems/clay/system/artifacts/email.html new file mode 100644 index 000000000..6a61fd929 --- /dev/null +++ b/design-systems/clay/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Clay - Email + + + +
    +
    +
    +

    Email module

    +

    Clay Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Clay, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/clay/system/artifacts/form.html b/design-systems/clay/system/artifacts/form.html new file mode 100644 index 000000000..c3e4ed6e2 --- /dev/null +++ b/design-systems/clay/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Clay - Form page + + + +
    +
    +
    +

    Form module

    +

    Clay Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Clay, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/clay/system/artifacts/landing.html b/design-systems/clay/system/artifacts/landing.html new file mode 100644 index 000000000..1b12b28f0 --- /dev/null +++ b/design-systems/clay/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Clay - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Clay Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Clay, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/clay/system/artifacts/newsletter.html b/design-systems/clay/system/artifacts/newsletter.html new file mode 100644 index 000000000..9c7fe9bbe --- /dev/null +++ b/design-systems/clay/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Clay - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Clay Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Clay, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/clay/system/artifacts/poster.html b/design-systems/clay/system/artifacts/poster.html new file mode 100644 index 000000000..bd2ea17f3 --- /dev/null +++ b/design-systems/clay/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Clay - Poster + + + +
    +
    +
    +

    Poster module

    +

    Clay Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Clay, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/clay/system/index.html b/design-systems/clay/system/index.html new file mode 100644 index 000000000..1fa07b1ab --- /dev/null +++ b/design-systems/clay/system/index.html @@ -0,0 +1,128 @@ + + + + + + Clay - system assets + + + +
    +

    Design & Creative

    +

    Clay system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/clay/system/kit.dark.html b/design-systems/clay/system/kit.dark.html new file mode 100644 index 000000000..5730a6c83 --- /dev/null +++ b/design-systems/clay/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Clay - dark component kit + + + +
    +
    +
    +

    Design & Creative system

    +

    Clay component kit

    +

    Bundled Open Design package for Clay, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/clay/system/kit.html b/design-systems/clay/system/kit.html new file mode 100644 index 000000000..60c8891c2 --- /dev/null +++ b/design-systems/clay/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Clay - component kit + + + +
    +
    +
    +

    Design & Creative system

    +

    Clay component kit

    +

    Bundled Open Design package for Clay, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/clay/system/tokens.default.json b/design-systems/clay/system/tokens.default.json new file mode 100644 index 000000000..bb2d78deb --- /dev/null +++ b/design-systems/clay/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#b46a46", + "colorPrimaryBg": "#ead6c7", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 22 +} diff --git a/design-systems/claymorphism/system/artifacts/deck.html b/design-systems/claymorphism/system/artifacts/deck.html new file mode 100644 index 000000000..22371bd3c --- /dev/null +++ b/design-systems/claymorphism/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Claymorphism - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Claymorphism Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Claymorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/claymorphism/system/artifacts/email.html b/design-systems/claymorphism/system/artifacts/email.html new file mode 100644 index 000000000..1c733c225 --- /dev/null +++ b/design-systems/claymorphism/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Claymorphism - Email + + + +
    +
    +
    +

    Email module

    +

    Claymorphism Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Claymorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/claymorphism/system/artifacts/form.html b/design-systems/claymorphism/system/artifacts/form.html new file mode 100644 index 000000000..360802395 --- /dev/null +++ b/design-systems/claymorphism/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Claymorphism - Form page + + + +
    +
    +
    +

    Form module

    +

    Claymorphism Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Claymorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/claymorphism/system/artifacts/landing.html b/design-systems/claymorphism/system/artifacts/landing.html new file mode 100644 index 000000000..a4517c83b --- /dev/null +++ b/design-systems/claymorphism/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Claymorphism - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Claymorphism Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Claymorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/claymorphism/system/artifacts/newsletter.html b/design-systems/claymorphism/system/artifacts/newsletter.html new file mode 100644 index 000000000..af129d13e --- /dev/null +++ b/design-systems/claymorphism/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Claymorphism - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Claymorphism Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Claymorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/claymorphism/system/artifacts/poster.html b/design-systems/claymorphism/system/artifacts/poster.html new file mode 100644 index 000000000..33ce14aed --- /dev/null +++ b/design-systems/claymorphism/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Claymorphism - Poster + + + +
    +
    +
    +

    Poster module

    +

    Claymorphism Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Claymorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/claymorphism/system/index.html b/design-systems/claymorphism/system/index.html new file mode 100644 index 000000000..93cf1d2fb --- /dev/null +++ b/design-systems/claymorphism/system/index.html @@ -0,0 +1,128 @@ + + + + + + Claymorphism - system assets + + + +
    +

    Morphism & Effects

    +

    Claymorphism system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/claymorphism/system/kit.dark.html b/design-systems/claymorphism/system/kit.dark.html new file mode 100644 index 000000000..55b6f600f --- /dev/null +++ b/design-systems/claymorphism/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Claymorphism - dark component kit + + + +
    +
    +
    +

    Morphism & Effects system

    +

    Claymorphism component kit

    +

    Bundled Open Design package for Claymorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/claymorphism/system/kit.html b/design-systems/claymorphism/system/kit.html new file mode 100644 index 000000000..8d0eb223f --- /dev/null +++ b/design-systems/claymorphism/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Claymorphism - component kit + + + +
    +
    +
    +

    Morphism & Effects system

    +

    Claymorphism component kit

    +

    Bundled Open Design package for Claymorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/claymorphism/system/tokens.default.json b/design-systems/claymorphism/system/tokens.default.json new file mode 100644 index 000000000..bb2d78deb --- /dev/null +++ b/design-systems/claymorphism/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#b46a46", + "colorPrimaryBg": "#ead6c7", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 22 +} diff --git a/design-systems/clean/system/artifacts/deck.html b/design-systems/clean/system/artifacts/deck.html new file mode 100644 index 000000000..edfa07a41 --- /dev/null +++ b/design-systems/clean/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Clean - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Clean Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Clean, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/clean/system/artifacts/email.html b/design-systems/clean/system/artifacts/email.html new file mode 100644 index 000000000..98bcccf2f --- /dev/null +++ b/design-systems/clean/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Clean - Email + + + +
    +
    +
    +

    Email module

    +

    Clean Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Clean, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/clean/system/artifacts/form.html b/design-systems/clean/system/artifacts/form.html new file mode 100644 index 000000000..ddb03baf2 --- /dev/null +++ b/design-systems/clean/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Clean - Form page + + + +
    +
    +
    +

    Form module

    +

    Clean Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Clean, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/clean/system/artifacts/landing.html b/design-systems/clean/system/artifacts/landing.html new file mode 100644 index 000000000..29c4bb42d --- /dev/null +++ b/design-systems/clean/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Clean - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Clean Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Clean, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/clean/system/artifacts/newsletter.html b/design-systems/clean/system/artifacts/newsletter.html new file mode 100644 index 000000000..75637b4f8 --- /dev/null +++ b/design-systems/clean/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Clean - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Clean Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Clean, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/clean/system/artifacts/poster.html b/design-systems/clean/system/artifacts/poster.html new file mode 100644 index 000000000..b744c03d2 --- /dev/null +++ b/design-systems/clean/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Clean - Poster + + + +
    +
    +
    +

    Poster module

    +

    Clean Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Clean, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/clean/system/index.html b/design-systems/clean/system/index.html new file mode 100644 index 000000000..6f7aae533 --- /dev/null +++ b/design-systems/clean/system/index.html @@ -0,0 +1,128 @@ + + + + + + Clean - system assets + + + +
    +

    Modern & Minimal

    +

    Clean system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/clean/system/kit.dark.html b/design-systems/clean/system/kit.dark.html new file mode 100644 index 000000000..319b786f5 --- /dev/null +++ b/design-systems/clean/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Clean - dark component kit + + + +
    +
    +
    +

    Modern & Minimal system

    +

    Clean component kit

    +

    Bundled Open Design package for Clean, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/clean/system/kit.html b/design-systems/clean/system/kit.html new file mode 100644 index 000000000..01232a2e0 --- /dev/null +++ b/design-systems/clean/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Clean - component kit + + + +
    +
    +
    +

    Modern & Minimal system

    +

    Clean component kit

    +

    Bundled Open Design package for Clean, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/clean/system/tokens.default.json b/design-systems/clean/system/tokens.default.json new file mode 100644 index 000000000..4b7e622b7 --- /dev/null +++ b/design-systems/clean/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#111111", + "colorPrimaryBg": "#eeeeee", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 8 +} diff --git a/design-systems/clickhouse/system/artifacts/deck.html b/design-systems/clickhouse/system/artifacts/deck.html new file mode 100644 index 000000000..a38bc316a --- /dev/null +++ b/design-systems/clickhouse/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + ClickHouse - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    ClickHouse Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for ClickHouse, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/clickhouse/system/artifacts/email.html b/design-systems/clickhouse/system/artifacts/email.html new file mode 100644 index 000000000..cdb079255 --- /dev/null +++ b/design-systems/clickhouse/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + ClickHouse - Email + + + +
    +
    +
    +

    Email module

    +

    ClickHouse Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for ClickHouse, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/clickhouse/system/artifacts/form.html b/design-systems/clickhouse/system/artifacts/form.html new file mode 100644 index 000000000..9e2c867ca --- /dev/null +++ b/design-systems/clickhouse/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + ClickHouse - Form page + + + +
    +
    +
    +

    Form module

    +

    ClickHouse Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for ClickHouse, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/clickhouse/system/artifacts/landing.html b/design-systems/clickhouse/system/artifacts/landing.html new file mode 100644 index 000000000..3104444d1 --- /dev/null +++ b/design-systems/clickhouse/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + ClickHouse - Landing page + + + +
    +
    +
    +

    Landing module

    +

    ClickHouse Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for ClickHouse, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/clickhouse/system/artifacts/newsletter.html b/design-systems/clickhouse/system/artifacts/newsletter.html new file mode 100644 index 000000000..a26e247c5 --- /dev/null +++ b/design-systems/clickhouse/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + ClickHouse - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    ClickHouse Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for ClickHouse, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/clickhouse/system/artifacts/poster.html b/design-systems/clickhouse/system/artifacts/poster.html new file mode 100644 index 000000000..8a82abca8 --- /dev/null +++ b/design-systems/clickhouse/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + ClickHouse - Poster + + + +
    +
    +
    +

    Poster module

    +

    ClickHouse Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for ClickHouse, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/clickhouse/system/index.html b/design-systems/clickhouse/system/index.html new file mode 100644 index 000000000..ef0032c53 --- /dev/null +++ b/design-systems/clickhouse/system/index.html @@ -0,0 +1,128 @@ + + + + + + ClickHouse - system assets + + + +
    +

    Backend & Data

    +

    ClickHouse system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/clickhouse/system/kit.dark.html b/design-systems/clickhouse/system/kit.dark.html new file mode 100644 index 000000000..6644c3f56 --- /dev/null +++ b/design-systems/clickhouse/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + ClickHouse - dark component kit + + + +
    +
    +
    +

    Backend & Data system

    +

    ClickHouse component kit

    +

    Bundled Open Design package for ClickHouse, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/clickhouse/system/kit.html b/design-systems/clickhouse/system/kit.html new file mode 100644 index 000000000..114dc016b --- /dev/null +++ b/design-systems/clickhouse/system/kit.html @@ -0,0 +1,149 @@ + + + + + + ClickHouse - component kit + + + +
    +
    +
    +

    Backend & Data system

    +

    ClickHouse component kit

    +

    Bundled Open Design package for ClickHouse, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/clickhouse/system/tokens.default.json b/design-systems/clickhouse/system/tokens.default.json new file mode 100644 index 000000000..acd765ee3 --- /dev/null +++ b/design-systems/clickhouse/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#faff69", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "#1d1d1d", + "colorPrimaryActive": "#f4f692", + "fontSize": 16, + "borderRadius": 8 +} diff --git a/design-systems/cohere/system/artifacts/deck.html b/design-systems/cohere/system/artifacts/deck.html new file mode 100644 index 000000000..9e74e602e --- /dev/null +++ b/design-systems/cohere/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Cohere - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Cohere Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Cohere, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cohere/system/artifacts/email.html b/design-systems/cohere/system/artifacts/email.html new file mode 100644 index 000000000..d17e1f691 --- /dev/null +++ b/design-systems/cohere/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Cohere - Email + + + +
    +
    +
    +

    Email module

    +

    Cohere Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Cohere, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cohere/system/artifacts/form.html b/design-systems/cohere/system/artifacts/form.html new file mode 100644 index 000000000..2b3c9383a --- /dev/null +++ b/design-systems/cohere/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Cohere - Form page + + + +
    +
    +
    +

    Form module

    +

    Cohere Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Cohere, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cohere/system/artifacts/landing.html b/design-systems/cohere/system/artifacts/landing.html new file mode 100644 index 000000000..01925eec8 --- /dev/null +++ b/design-systems/cohere/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Cohere - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Cohere Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Cohere, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cohere/system/artifacts/newsletter.html b/design-systems/cohere/system/artifacts/newsletter.html new file mode 100644 index 000000000..59ca2393e --- /dev/null +++ b/design-systems/cohere/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Cohere - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Cohere Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Cohere, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cohere/system/artifacts/poster.html b/design-systems/cohere/system/artifacts/poster.html new file mode 100644 index 000000000..8f16fc7f7 --- /dev/null +++ b/design-systems/cohere/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Cohere - Poster + + + +
    +
    +
    +

    Poster module

    +

    Cohere Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Cohere, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cohere/system/index.html b/design-systems/cohere/system/index.html new file mode 100644 index 000000000..04febcdec --- /dev/null +++ b/design-systems/cohere/system/index.html @@ -0,0 +1,128 @@ + + + + + + Cohere - system assets + + + +
    +

    AI & LLM

    +

    Cohere system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/cohere/system/kit.dark.html b/design-systems/cohere/system/kit.dark.html new file mode 100644 index 000000000..8f144a476 --- /dev/null +++ b/design-systems/cohere/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Cohere - dark component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    Cohere component kit

    +

    Bundled Open Design package for Cohere, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/cohere/system/kit.html b/design-systems/cohere/system/kit.html new file mode 100644 index 000000000..d626cca80 --- /dev/null +++ b/design-systems/cohere/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Cohere - component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    Cohere component kit

    +

    Bundled Open Design package for Cohere, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/cohere/system/tokens.default.json b/design-systems/cohere/system/tokens.default.json new file mode 100644 index 000000000..8c39a6cae --- /dev/null +++ b/design-systems/cohere/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#1863dc", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 16%)", + "fontSize": 16, + "borderRadius": 22 +} diff --git a/design-systems/coinbase/system/artifacts/deck.html b/design-systems/coinbase/system/artifacts/deck.html new file mode 100644 index 000000000..c4b188248 --- /dev/null +++ b/design-systems/coinbase/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Coinbase - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Coinbase Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Coinbase, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/coinbase/system/artifacts/email.html b/design-systems/coinbase/system/artifacts/email.html new file mode 100644 index 000000000..c65decbde --- /dev/null +++ b/design-systems/coinbase/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Coinbase - Email + + + +
    +
    +
    +

    Email module

    +

    Coinbase Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Coinbase, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/coinbase/system/artifacts/form.html b/design-systems/coinbase/system/artifacts/form.html new file mode 100644 index 000000000..8175b2bad --- /dev/null +++ b/design-systems/coinbase/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Coinbase - Form page + + + +
    +
    +
    +

    Form module

    +

    Coinbase Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Coinbase, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/coinbase/system/artifacts/landing.html b/design-systems/coinbase/system/artifacts/landing.html new file mode 100644 index 000000000..b440c7b56 --- /dev/null +++ b/design-systems/coinbase/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Coinbase - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Coinbase Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Coinbase, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/coinbase/system/artifacts/newsletter.html b/design-systems/coinbase/system/artifacts/newsletter.html new file mode 100644 index 000000000..1f4c24a69 --- /dev/null +++ b/design-systems/coinbase/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Coinbase - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Coinbase Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Coinbase, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/coinbase/system/artifacts/poster.html b/design-systems/coinbase/system/artifacts/poster.html new file mode 100644 index 000000000..c93dfd388 --- /dev/null +++ b/design-systems/coinbase/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Coinbase - Poster + + + +
    +
    +
    +

    Poster module

    +

    Coinbase Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Coinbase, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/coinbase/system/index.html b/design-systems/coinbase/system/index.html new file mode 100644 index 000000000..7bf01af1c --- /dev/null +++ b/design-systems/coinbase/system/index.html @@ -0,0 +1,128 @@ + + + + + + Coinbase - system assets + + + +
    +

    Fintech & Crypto

    +

    Coinbase system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/coinbase/system/kit.dark.html b/design-systems/coinbase/system/kit.dark.html new file mode 100644 index 000000000..4606c155b --- /dev/null +++ b/design-systems/coinbase/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Coinbase - dark component kit + + + +
    +
    +
    +

    Fintech & Crypto system

    +

    Coinbase component kit

    +

    Bundled Open Design package for Coinbase, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/coinbase/system/kit.html b/design-systems/coinbase/system/kit.html new file mode 100644 index 000000000..bfa7a510a --- /dev/null +++ b/design-systems/coinbase/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Coinbase - component kit + + + +
    +
    +
    +

    Fintech & Crypto system

    +

    Coinbase component kit

    +

    Bundled Open Design package for Coinbase, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/coinbase/system/tokens.default.json b/design-systems/coinbase/system/tokens.default.json new file mode 100644 index 000000000..25eea52c6 --- /dev/null +++ b/design-systems/coinbase/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#0052ff", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "#578bfa", + "colorPrimaryActive": "#0667d0", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/colorful/system/artifacts/deck.html b/design-systems/colorful/system/artifacts/deck.html new file mode 100644 index 000000000..1a713a0e9 --- /dev/null +++ b/design-systems/colorful/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Colorful - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Colorful Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Colorful, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/colorful/system/artifacts/email.html b/design-systems/colorful/system/artifacts/email.html new file mode 100644 index 000000000..c1a0d2a3a --- /dev/null +++ b/design-systems/colorful/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Colorful - Email + + + +
    +
    +
    +

    Email module

    +

    Colorful Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Colorful, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/colorful/system/artifacts/form.html b/design-systems/colorful/system/artifacts/form.html new file mode 100644 index 000000000..d9b6d10c7 --- /dev/null +++ b/design-systems/colorful/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Colorful - Form page + + + +
    +
    +
    +

    Form module

    +

    Colorful Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Colorful, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/colorful/system/artifacts/landing.html b/design-systems/colorful/system/artifacts/landing.html new file mode 100644 index 000000000..d679118dc --- /dev/null +++ b/design-systems/colorful/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Colorful - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Colorful Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Colorful, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/colorful/system/artifacts/newsletter.html b/design-systems/colorful/system/artifacts/newsletter.html new file mode 100644 index 000000000..e5c43293b --- /dev/null +++ b/design-systems/colorful/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Colorful - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Colorful Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Colorful, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/colorful/system/artifacts/poster.html b/design-systems/colorful/system/artifacts/poster.html new file mode 100644 index 000000000..042baa94f --- /dev/null +++ b/design-systems/colorful/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Colorful - Poster + + + +
    +
    +
    +

    Poster module

    +

    Colorful Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Colorful, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/colorful/system/index.html b/design-systems/colorful/system/index.html new file mode 100644 index 000000000..7951746ab --- /dev/null +++ b/design-systems/colorful/system/index.html @@ -0,0 +1,128 @@ + + + + + + Colorful - system assets + + + +
    +

    Bold & Expressive

    +

    Colorful system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/colorful/system/kit.dark.html b/design-systems/colorful/system/kit.dark.html new file mode 100644 index 000000000..fdc4533af --- /dev/null +++ b/design-systems/colorful/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Colorful - dark component kit + + + +
    +
    +
    +

    Bold & Expressive system

    +

    Colorful component kit

    +

    Bundled Open Design package for Colorful, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/colorful/system/kit.html b/design-systems/colorful/system/kit.html new file mode 100644 index 000000000..24c782afb --- /dev/null +++ b/design-systems/colorful/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Colorful - component kit + + + +
    +
    +
    +

    Bold & Expressive system

    +

    Colorful component kit

    +

    Bundled Open Design package for Colorful, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/colorful/system/tokens.default.json b/design-systems/colorful/system/tokens.default.json new file mode 100644 index 000000000..9dc195c87 --- /dev/null +++ b/design-systems/colorful/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#ff6b00", + "colorPrimaryBg": "#ffef9f", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/composio/system/artifacts/deck.html b/design-systems/composio/system/artifacts/deck.html new file mode 100644 index 000000000..9c00e6e67 --- /dev/null +++ b/design-systems/composio/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Composio - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Composio Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Composio, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/composio/system/artifacts/email.html b/design-systems/composio/system/artifacts/email.html new file mode 100644 index 000000000..ea7fdd1a1 --- /dev/null +++ b/design-systems/composio/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Composio - Email + + + +
    +
    +
    +

    Email module

    +

    Composio Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Composio, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/composio/system/artifacts/form.html b/design-systems/composio/system/artifacts/form.html new file mode 100644 index 000000000..0112d0584 --- /dev/null +++ b/design-systems/composio/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Composio - Form page + + + +
    +
    +
    +

    Form module

    +

    Composio Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Composio, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/composio/system/artifacts/landing.html b/design-systems/composio/system/artifacts/landing.html new file mode 100644 index 000000000..701e7c20f --- /dev/null +++ b/design-systems/composio/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Composio - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Composio Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Composio, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/composio/system/artifacts/newsletter.html b/design-systems/composio/system/artifacts/newsletter.html new file mode 100644 index 000000000..b8df3d2df --- /dev/null +++ b/design-systems/composio/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Composio - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Composio Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Composio, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/composio/system/artifacts/poster.html b/design-systems/composio/system/artifacts/poster.html new file mode 100644 index 000000000..2804f6e8c --- /dev/null +++ b/design-systems/composio/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Composio - Poster + + + +
    +
    +
    +

    Poster module

    +

    Composio Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Composio, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/composio/system/index.html b/design-systems/composio/system/index.html new file mode 100644 index 000000000..33eeef895 --- /dev/null +++ b/design-systems/composio/system/index.html @@ -0,0 +1,128 @@ + + + + + + Composio - system assets + + + +
    +

    Backend & Data

    +

    Composio system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/composio/system/kit.dark.html b/design-systems/composio/system/kit.dark.html new file mode 100644 index 000000000..752f4d73d --- /dev/null +++ b/design-systems/composio/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Composio - dark component kit + + + +
    +
    +
    +

    Backend & Data system

    +

    Composio component kit

    +

    Bundled Open Design package for Composio, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/composio/system/kit.html b/design-systems/composio/system/kit.html new file mode 100644 index 000000000..91b9424f9 --- /dev/null +++ b/design-systems/composio/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Composio - component kit + + + +
    +
    +
    +

    Backend & Data system

    +

    Composio component kit

    +

    Bundled Open Design package for Composio, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/composio/system/tokens.default.json b/design-systems/composio/system/tokens.default.json new file mode 100644 index 000000000..67d655d33 --- /dev/null +++ b/design-systems/composio/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#6d5dfc", + "colorPrimaryBg": "#1b2140", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 15, + "borderRadius": 14 +} diff --git a/design-systems/contemporary/system/artifacts/deck.html b/design-systems/contemporary/system/artifacts/deck.html new file mode 100644 index 000000000..964fa82ee --- /dev/null +++ b/design-systems/contemporary/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Contemporary - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Contemporary Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Contemporary, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/contemporary/system/artifacts/email.html b/design-systems/contemporary/system/artifacts/email.html new file mode 100644 index 000000000..b37131806 --- /dev/null +++ b/design-systems/contemporary/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Contemporary - Email + + + +
    +
    +
    +

    Email module

    +

    Contemporary Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Contemporary, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/contemporary/system/artifacts/form.html b/design-systems/contemporary/system/artifacts/form.html new file mode 100644 index 000000000..e0932009c --- /dev/null +++ b/design-systems/contemporary/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Contemporary - Form page + + + +
    +
    +
    +

    Form module

    +

    Contemporary Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Contemporary, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/contemporary/system/artifacts/landing.html b/design-systems/contemporary/system/artifacts/landing.html new file mode 100644 index 000000000..c4e74635f --- /dev/null +++ b/design-systems/contemporary/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Contemporary - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Contemporary Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Contemporary, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/contemporary/system/artifacts/newsletter.html b/design-systems/contemporary/system/artifacts/newsletter.html new file mode 100644 index 000000000..777f11e13 --- /dev/null +++ b/design-systems/contemporary/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Contemporary - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Contemporary Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Contemporary, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/contemporary/system/artifacts/poster.html b/design-systems/contemporary/system/artifacts/poster.html new file mode 100644 index 000000000..c8a220f69 --- /dev/null +++ b/design-systems/contemporary/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Contemporary - Poster + + + +
    +
    +
    +

    Poster module

    +

    Contemporary Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Contemporary, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/contemporary/system/index.html b/design-systems/contemporary/system/index.html new file mode 100644 index 000000000..ee293b0da --- /dev/null +++ b/design-systems/contemporary/system/index.html @@ -0,0 +1,128 @@ + + + + + + Contemporary - system assets + + + +
    +

    Modern & Minimal

    +

    Contemporary system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/contemporary/system/kit.dark.html b/design-systems/contemporary/system/kit.dark.html new file mode 100644 index 000000000..281ff054d --- /dev/null +++ b/design-systems/contemporary/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Contemporary - dark component kit + + + +
    +
    +
    +

    Modern & Minimal system

    +

    Contemporary component kit

    +

    Bundled Open Design package for Contemporary, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/contemporary/system/kit.html b/design-systems/contemporary/system/kit.html new file mode 100644 index 000000000..2d1b999a9 --- /dev/null +++ b/design-systems/contemporary/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Contemporary - component kit + + + +
    +
    +
    +

    Modern & Minimal system

    +

    Contemporary component kit

    +

    Bundled Open Design package for Contemporary, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/contemporary/system/tokens.default.json b/design-systems/contemporary/system/tokens.default.json new file mode 100644 index 000000000..a1beb9985 --- /dev/null +++ b/design-systems/contemporary/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#2563eb", + "colorPrimaryBg": "#eaf1ff", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/corporate/system/artifacts/deck.html b/design-systems/corporate/system/artifacts/deck.html new file mode 100644 index 000000000..e8784b684 --- /dev/null +++ b/design-systems/corporate/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Corporate - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Corporate Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Corporate, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/corporate/system/artifacts/email.html b/design-systems/corporate/system/artifacts/email.html new file mode 100644 index 000000000..e1fdd60d0 --- /dev/null +++ b/design-systems/corporate/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Corporate - Email + + + +
    +
    +
    +

    Email module

    +

    Corporate Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Corporate, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/corporate/system/artifacts/form.html b/design-systems/corporate/system/artifacts/form.html new file mode 100644 index 000000000..5ca845986 --- /dev/null +++ b/design-systems/corporate/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Corporate - Form page + + + +
    +
    +
    +

    Form module

    +

    Corporate Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Corporate, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/corporate/system/artifacts/landing.html b/design-systems/corporate/system/artifacts/landing.html new file mode 100644 index 000000000..8be3d26b8 --- /dev/null +++ b/design-systems/corporate/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Corporate - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Corporate Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Corporate, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/corporate/system/artifacts/newsletter.html b/design-systems/corporate/system/artifacts/newsletter.html new file mode 100644 index 000000000..46090e694 --- /dev/null +++ b/design-systems/corporate/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Corporate - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Corporate Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Corporate, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/corporate/system/artifacts/poster.html b/design-systems/corporate/system/artifacts/poster.html new file mode 100644 index 000000000..0e3584335 --- /dev/null +++ b/design-systems/corporate/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Corporate - Poster + + + +
    +
    +
    +

    Poster module

    +

    Corporate Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Corporate, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/corporate/system/index.html b/design-systems/corporate/system/index.html new file mode 100644 index 000000000..ff02239a1 --- /dev/null +++ b/design-systems/corporate/system/index.html @@ -0,0 +1,128 @@ + + + + + + Corporate - system assets + + + +
    +

    Professional & Corporate

    +

    Corporate system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/corporate/system/kit.dark.html b/design-systems/corporate/system/kit.dark.html new file mode 100644 index 000000000..3eb671123 --- /dev/null +++ b/design-systems/corporate/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Corporate - dark component kit + + + +
    +
    +
    +

    Professional & Corporate system

    +

    Corporate component kit

    +

    Bundled Open Design package for Corporate, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/corporate/system/kit.html b/design-systems/corporate/system/kit.html new file mode 100644 index 000000000..022d81886 --- /dev/null +++ b/design-systems/corporate/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Corporate - component kit + + + +
    +
    +
    +

    Professional & Corporate system

    +

    Corporate component kit

    +

    Bundled Open Design package for Corporate, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/corporate/system/tokens.default.json b/design-systems/corporate/system/tokens.default.json new file mode 100644 index 000000000..a1beb9985 --- /dev/null +++ b/design-systems/corporate/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#2563eb", + "colorPrimaryBg": "#eaf1ff", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/cosmic/system/artifacts/deck.html b/design-systems/cosmic/system/artifacts/deck.html new file mode 100644 index 000000000..0593dc036 --- /dev/null +++ b/design-systems/cosmic/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Cosmic - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Cosmic Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Cosmic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cosmic/system/artifacts/email.html b/design-systems/cosmic/system/artifacts/email.html new file mode 100644 index 000000000..86635f621 --- /dev/null +++ b/design-systems/cosmic/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Cosmic - Email + + + +
    +
    +
    +

    Email module

    +

    Cosmic Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Cosmic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cosmic/system/artifacts/form.html b/design-systems/cosmic/system/artifacts/form.html new file mode 100644 index 000000000..944f52091 --- /dev/null +++ b/design-systems/cosmic/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Cosmic - Form page + + + +
    +
    +
    +

    Form module

    +

    Cosmic Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Cosmic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cosmic/system/artifacts/landing.html b/design-systems/cosmic/system/artifacts/landing.html new file mode 100644 index 000000000..11a04e879 --- /dev/null +++ b/design-systems/cosmic/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Cosmic - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Cosmic Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Cosmic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cosmic/system/artifacts/newsletter.html b/design-systems/cosmic/system/artifacts/newsletter.html new file mode 100644 index 000000000..fa6d7e93e --- /dev/null +++ b/design-systems/cosmic/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Cosmic - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Cosmic Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Cosmic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cosmic/system/artifacts/poster.html b/design-systems/cosmic/system/artifacts/poster.html new file mode 100644 index 000000000..67e2f444f --- /dev/null +++ b/design-systems/cosmic/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Cosmic - Poster + + + +
    +
    +
    +

    Poster module

    +

    Cosmic Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Cosmic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cosmic/system/index.html b/design-systems/cosmic/system/index.html new file mode 100644 index 000000000..f0b895d01 --- /dev/null +++ b/design-systems/cosmic/system/index.html @@ -0,0 +1,128 @@ + + + + + + Cosmic - system assets + + + +
    +

    Creative & Artistic

    +

    Cosmic system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/cosmic/system/kit.dark.html b/design-systems/cosmic/system/kit.dark.html new file mode 100644 index 000000000..92c874e0d --- /dev/null +++ b/design-systems/cosmic/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Cosmic - dark component kit + + + +
    +
    +
    +

    Creative & Artistic system

    +

    Cosmic component kit

    +

    Bundled Open Design package for Cosmic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/cosmic/system/kit.html b/design-systems/cosmic/system/kit.html new file mode 100644 index 000000000..f2cfd0cb0 --- /dev/null +++ b/design-systems/cosmic/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Cosmic - component kit + + + +
    +
    +
    +

    Creative & Artistic system

    +

    Cosmic component kit

    +

    Bundled Open Design package for Cosmic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/cosmic/system/tokens.default.json b/design-systems/cosmic/system/tokens.default.json new file mode 100644 index 000000000..866bdd39f --- /dev/null +++ b/design-systems/cosmic/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#c084fc", + "colorPrimaryBg": "#1e1540", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/creative/system/artifacts/deck.html b/design-systems/creative/system/artifacts/deck.html new file mode 100644 index 000000000..ddd916456 --- /dev/null +++ b/design-systems/creative/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Creative - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Creative Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Creative, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/creative/system/artifacts/email.html b/design-systems/creative/system/artifacts/email.html new file mode 100644 index 000000000..c61f394d0 --- /dev/null +++ b/design-systems/creative/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Creative - Email + + + +
    +
    +
    +

    Email module

    +

    Creative Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Creative, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/creative/system/artifacts/form.html b/design-systems/creative/system/artifacts/form.html new file mode 100644 index 000000000..3d88256a3 --- /dev/null +++ b/design-systems/creative/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Creative - Form page + + + +
    +
    +
    +

    Form module

    +

    Creative Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Creative, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/creative/system/artifacts/landing.html b/design-systems/creative/system/artifacts/landing.html new file mode 100644 index 000000000..8abbff332 --- /dev/null +++ b/design-systems/creative/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Creative - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Creative Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Creative, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/creative/system/artifacts/newsletter.html b/design-systems/creative/system/artifacts/newsletter.html new file mode 100644 index 000000000..fbcc15fd7 --- /dev/null +++ b/design-systems/creative/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Creative - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Creative Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Creative, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/creative/system/artifacts/poster.html b/design-systems/creative/system/artifacts/poster.html new file mode 100644 index 000000000..d9c1a35e4 --- /dev/null +++ b/design-systems/creative/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Creative - Poster + + + +
    +
    +
    +

    Poster module

    +

    Creative Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Creative, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/creative/system/index.html b/design-systems/creative/system/index.html new file mode 100644 index 000000000..d57bbbe82 --- /dev/null +++ b/design-systems/creative/system/index.html @@ -0,0 +1,128 @@ + + + + + + Creative - system assets + + + +
    +

    Creative & Artistic

    +

    Creative system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/creative/system/kit.dark.html b/design-systems/creative/system/kit.dark.html new file mode 100644 index 000000000..b3fc02954 --- /dev/null +++ b/design-systems/creative/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Creative - dark component kit + + + +
    +
    +
    +

    Creative & Artistic system

    +

    Creative component kit

    +

    Bundled Open Design package for Creative, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/creative/system/kit.html b/design-systems/creative/system/kit.html new file mode 100644 index 000000000..eb10a80c2 --- /dev/null +++ b/design-systems/creative/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Creative - component kit + + + +
    +
    +
    +

    Creative & Artistic system

    +

    Creative component kit

    +

    Bundled Open Design package for Creative, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/creative/system/tokens.default.json b/design-systems/creative/system/tokens.default.json new file mode 100644 index 000000000..9dc195c87 --- /dev/null +++ b/design-systems/creative/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#ff6b00", + "colorPrimaryBg": "#ffef9f", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/cursor/system/artifacts/deck.html b/design-systems/cursor/system/artifacts/deck.html new file mode 100644 index 000000000..3ddc1bc15 --- /dev/null +++ b/design-systems/cursor/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Cursor - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Cursor Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Cursor, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cursor/system/artifacts/email.html b/design-systems/cursor/system/artifacts/email.html new file mode 100644 index 000000000..be2b3924d --- /dev/null +++ b/design-systems/cursor/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Cursor - Email + + + +
    +
    +
    +

    Email module

    +

    Cursor Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Cursor, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cursor/system/artifacts/form.html b/design-systems/cursor/system/artifacts/form.html new file mode 100644 index 000000000..cb965fc12 --- /dev/null +++ b/design-systems/cursor/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Cursor - Form page + + + +
    +
    +
    +

    Form module

    +

    Cursor Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Cursor, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cursor/system/artifacts/landing.html b/design-systems/cursor/system/artifacts/landing.html new file mode 100644 index 000000000..ea8abfd3f --- /dev/null +++ b/design-systems/cursor/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Cursor - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Cursor Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Cursor, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cursor/system/artifacts/newsletter.html b/design-systems/cursor/system/artifacts/newsletter.html new file mode 100644 index 000000000..c77420617 --- /dev/null +++ b/design-systems/cursor/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Cursor - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Cursor Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Cursor, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cursor/system/artifacts/poster.html b/design-systems/cursor/system/artifacts/poster.html new file mode 100644 index 000000000..a0c2b93a0 --- /dev/null +++ b/design-systems/cursor/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Cursor - Poster + + + +
    +
    +
    +

    Poster module

    +

    Cursor Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Cursor, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/cursor/system/index.html b/design-systems/cursor/system/index.html new file mode 100644 index 000000000..35b8503d5 --- /dev/null +++ b/design-systems/cursor/system/index.html @@ -0,0 +1,128 @@ + + + + + + Cursor - system assets + + + +
    +

    Developer Tools

    +

    Cursor system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/cursor/system/kit.dark.html b/design-systems/cursor/system/kit.dark.html new file mode 100644 index 000000000..c3104ac57 --- /dev/null +++ b/design-systems/cursor/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Cursor - dark component kit + + + +
    +
    +
    +

    Developer Tools system

    +

    Cursor component kit

    +

    Bundled Open Design package for Cursor, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/cursor/system/kit.html b/design-systems/cursor/system/kit.html new file mode 100644 index 000000000..3274385d2 --- /dev/null +++ b/design-systems/cursor/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Cursor - component kit + + + +
    +
    +
    +

    Developer Tools system

    +

    Cursor component kit

    +

    Bundled Open Design package for Cursor, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/cursor/system/tokens.default.json b/design-systems/cursor/system/tokens.default.json new file mode 100644 index 000000000..90fb16939 --- /dev/null +++ b/design-systems/cursor/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#f54e00", + "colorPrimaryBg": "#ebeae5", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 10 +} diff --git a/design-systems/dashboard/system/artifacts/deck.html b/design-systems/dashboard/system/artifacts/deck.html new file mode 100644 index 000000000..ef21c58c7 --- /dev/null +++ b/design-systems/dashboard/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Dashboard - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Dashboard Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Dashboard, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/dashboard/system/artifacts/email.html b/design-systems/dashboard/system/artifacts/email.html new file mode 100644 index 000000000..fa06ede8d --- /dev/null +++ b/design-systems/dashboard/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Dashboard - Email + + + +
    +
    +
    +

    Email module

    +

    Dashboard Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Dashboard, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/dashboard/system/artifacts/form.html b/design-systems/dashboard/system/artifacts/form.html new file mode 100644 index 000000000..35502fd16 --- /dev/null +++ b/design-systems/dashboard/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Dashboard - Form page + + + +
    +
    +
    +

    Form module

    +

    Dashboard Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Dashboard, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/dashboard/system/artifacts/landing.html b/design-systems/dashboard/system/artifacts/landing.html new file mode 100644 index 000000000..695f6e902 --- /dev/null +++ b/design-systems/dashboard/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Dashboard - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Dashboard Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Dashboard, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/dashboard/system/artifacts/newsletter.html b/design-systems/dashboard/system/artifacts/newsletter.html new file mode 100644 index 000000000..cd038cdb9 --- /dev/null +++ b/design-systems/dashboard/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Dashboard - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Dashboard Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Dashboard, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/dashboard/system/artifacts/poster.html b/design-systems/dashboard/system/artifacts/poster.html new file mode 100644 index 000000000..90395166f --- /dev/null +++ b/design-systems/dashboard/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Dashboard - Poster + + + +
    +
    +
    +

    Poster module

    +

    Dashboard Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Dashboard, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/dashboard/system/index.html b/design-systems/dashboard/system/index.html new file mode 100644 index 000000000..623f6bda3 --- /dev/null +++ b/design-systems/dashboard/system/index.html @@ -0,0 +1,128 @@ + + + + + + Dashboard - system assets + + + +
    +

    Professional & Corporate

    +

    Dashboard system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/dashboard/system/kit.dark.html b/design-systems/dashboard/system/kit.dark.html new file mode 100644 index 000000000..7e7934a1e --- /dev/null +++ b/design-systems/dashboard/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Dashboard - dark component kit + + + +
    +
    +
    +

    Professional & Corporate system

    +

    Dashboard component kit

    +

    Bundled Open Design package for Dashboard, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/dashboard/system/kit.html b/design-systems/dashboard/system/kit.html new file mode 100644 index 000000000..a83c00f4d --- /dev/null +++ b/design-systems/dashboard/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Dashboard - component kit + + + +
    +
    +
    +

    Professional & Corporate system

    +

    Dashboard component kit

    +

    Bundled Open Design package for Dashboard, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/dashboard/system/tokens.default.json b/design-systems/dashboard/system/tokens.default.json new file mode 100644 index 000000000..31792be5a --- /dev/null +++ b/design-systems/dashboard/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#0ea5e9", + "colorPrimaryBg": "#eef6ff", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 15, + "borderRadius": 12 +} diff --git a/design-systems/default/system/artifacts/deck.html b/design-systems/default/system/artifacts/deck.html new file mode 100644 index 000000000..e2c9d047d --- /dev/null +++ b/design-systems/default/system/artifacts/deck.html @@ -0,0 +1,138 @@ + + + + + + Neutral Modern - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Neutral Modern Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Neutral Modern, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/default/system/artifacts/email.html b/design-systems/default/system/artifacts/email.html new file mode 100644 index 000000000..4c9a87723 --- /dev/null +++ b/design-systems/default/system/artifacts/email.html @@ -0,0 +1,138 @@ + + + + + + Neutral Modern - Email + + + +
    +
    +
    +

    Email module

    +

    Neutral Modern Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Neutral Modern, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/default/system/artifacts/form.html b/design-systems/default/system/artifacts/form.html new file mode 100644 index 000000000..5e3c8bad6 --- /dev/null +++ b/design-systems/default/system/artifacts/form.html @@ -0,0 +1,138 @@ + + + + + + Neutral Modern - Form page + + + +
    +
    +
    +

    Form module

    +

    Neutral Modern Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Neutral Modern, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/default/system/artifacts/landing.html b/design-systems/default/system/artifacts/landing.html new file mode 100644 index 000000000..30f4342d0 --- /dev/null +++ b/design-systems/default/system/artifacts/landing.html @@ -0,0 +1,138 @@ + + + + + + Neutral Modern - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Neutral Modern Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Neutral Modern, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/default/system/artifacts/newsletter.html b/design-systems/default/system/artifacts/newsletter.html new file mode 100644 index 000000000..7efd850b3 --- /dev/null +++ b/design-systems/default/system/artifacts/newsletter.html @@ -0,0 +1,138 @@ + + + + + + Neutral Modern - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Neutral Modern Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Neutral Modern, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/default/system/artifacts/poster.html b/design-systems/default/system/artifacts/poster.html new file mode 100644 index 000000000..e792e29e6 --- /dev/null +++ b/design-systems/default/system/artifacts/poster.html @@ -0,0 +1,138 @@ + + + + + + Neutral Modern - Poster + + + +
    +
    +
    +

    Poster module

    +

    Neutral Modern Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Neutral Modern, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/default/system/index.html b/design-systems/default/system/index.html new file mode 100644 index 000000000..0a06690e1 --- /dev/null +++ b/design-systems/default/system/index.html @@ -0,0 +1,129 @@ + + + + + + Neutral Modern - system assets + + + +
    +

    Starter

    +

    Neutral Modern system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/default/system/kit.dark.html b/design-systems/default/system/kit.dark.html new file mode 100644 index 000000000..781d063c5 --- /dev/null +++ b/design-systems/default/system/kit.dark.html @@ -0,0 +1,150 @@ + + + + + + Neutral Modern - dark component kit + + + +
    +
    +
    +

    Starter system

    +

    Neutral Modern component kit

    +

    Bundled Open Design package for Neutral Modern, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/default/system/kit.html b/design-systems/default/system/kit.html new file mode 100644 index 000000000..236a747c8 --- /dev/null +++ b/design-systems/default/system/kit.html @@ -0,0 +1,150 @@ + + + + + + Neutral Modern - component kit + + + +
    +
    +
    +

    Starter system

    +

    Neutral Modern component kit

    +

    Bundled Open Design package for Neutral Modern, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/default/system/tokens.default.json b/design-systems/default/system/tokens.default.json new file mode 100644 index 000000000..68a6c7d34 --- /dev/null +++ b/design-systems/default/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#2f6feb", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 12 +} diff --git a/design-systems/discord/system/artifacts/deck.html b/design-systems/discord/system/artifacts/deck.html new file mode 100644 index 000000000..4953a9471 --- /dev/null +++ b/design-systems/discord/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Discord - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Discord Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Discord, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/discord/system/artifacts/email.html b/design-systems/discord/system/artifacts/email.html new file mode 100644 index 000000000..c0e109730 --- /dev/null +++ b/design-systems/discord/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Discord - Email + + + +
    +
    +
    +

    Email module

    +

    Discord Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Discord, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/discord/system/artifacts/form.html b/design-systems/discord/system/artifacts/form.html new file mode 100644 index 000000000..17d34564c --- /dev/null +++ b/design-systems/discord/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Discord - Form page + + + +
    +
    +
    +

    Form module

    +

    Discord Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Discord, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/discord/system/artifacts/landing.html b/design-systems/discord/system/artifacts/landing.html new file mode 100644 index 000000000..47bc4ef09 --- /dev/null +++ b/design-systems/discord/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Discord - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Discord Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Discord, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/discord/system/artifacts/newsletter.html b/design-systems/discord/system/artifacts/newsletter.html new file mode 100644 index 000000000..de183e557 --- /dev/null +++ b/design-systems/discord/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Discord - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Discord Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Discord, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/discord/system/artifacts/poster.html b/design-systems/discord/system/artifacts/poster.html new file mode 100644 index 000000000..d56df27a1 --- /dev/null +++ b/design-systems/discord/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Discord - Poster + + + +
    +
    +
    +

    Poster module

    +

    Discord Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Discord, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/discord/system/index.html b/design-systems/discord/system/index.html new file mode 100644 index 000000000..3a53a35e6 --- /dev/null +++ b/design-systems/discord/system/index.html @@ -0,0 +1,128 @@ + + + + + + Discord - system assets + + + +
    +

    Productivity & SaaS

    +

    Discord system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/discord/system/kit.dark.html b/design-systems/discord/system/kit.dark.html new file mode 100644 index 000000000..6d3baea1c --- /dev/null +++ b/design-systems/discord/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Discord - dark component kit + + + +
    +
    +
    +

    Productivity & SaaS system

    +

    Discord component kit

    +

    Bundled Open Design package for Discord, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/discord/system/kit.html b/design-systems/discord/system/kit.html new file mode 100644 index 000000000..b0920aab3 --- /dev/null +++ b/design-systems/discord/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Discord - component kit + + + +
    +
    +
    +

    Productivity & SaaS system

    +

    Discord component kit

    +

    Bundled Open Design package for Discord, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/discord/system/tokens.default.json b/design-systems/discord/system/tokens.default.json new file mode 100644 index 000000000..b199de742 --- /dev/null +++ b/design-systems/discord/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#5865f2", + "colorPrimaryBg": "#1e1f22", + "colorPrimaryHover": "#4752c4", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 8 +} diff --git a/design-systems/dithered/system/artifacts/deck.html b/design-systems/dithered/system/artifacts/deck.html new file mode 100644 index 000000000..977626152 --- /dev/null +++ b/design-systems/dithered/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Dithered - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Dithered Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Dithered, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/dithered/system/artifacts/email.html b/design-systems/dithered/system/artifacts/email.html new file mode 100644 index 000000000..d2ffc17fc --- /dev/null +++ b/design-systems/dithered/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Dithered - Email + + + +
    +
    +
    +

    Email module

    +

    Dithered Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Dithered, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/dithered/system/artifacts/form.html b/design-systems/dithered/system/artifacts/form.html new file mode 100644 index 000000000..a6d53c332 --- /dev/null +++ b/design-systems/dithered/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Dithered - Form page + + + +
    +
    +
    +

    Form module

    +

    Dithered Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Dithered, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/dithered/system/artifacts/landing.html b/design-systems/dithered/system/artifacts/landing.html new file mode 100644 index 000000000..6ab36b5f9 --- /dev/null +++ b/design-systems/dithered/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Dithered - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Dithered Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Dithered, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/dithered/system/artifacts/newsletter.html b/design-systems/dithered/system/artifacts/newsletter.html new file mode 100644 index 000000000..3e28d9776 --- /dev/null +++ b/design-systems/dithered/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Dithered - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Dithered Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Dithered, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/dithered/system/artifacts/poster.html b/design-systems/dithered/system/artifacts/poster.html new file mode 100644 index 000000000..0557f03a1 --- /dev/null +++ b/design-systems/dithered/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Dithered - Poster + + + +
    +
    +
    +

    Poster module

    +

    Dithered Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Dithered, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/dithered/system/index.html b/design-systems/dithered/system/index.html new file mode 100644 index 000000000..60da77524 --- /dev/null +++ b/design-systems/dithered/system/index.html @@ -0,0 +1,128 @@ + + + + + + Dithered - system assets + + + +
    +

    Retro & Nostalgic

    +

    Dithered system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/dithered/system/kit.dark.html b/design-systems/dithered/system/kit.dark.html new file mode 100644 index 000000000..a6508dadd --- /dev/null +++ b/design-systems/dithered/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Dithered - dark component kit + + + +
    +
    +
    +

    Retro & Nostalgic system

    +

    Dithered component kit

    +

    Bundled Open Design package for Dithered, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/dithered/system/kit.html b/design-systems/dithered/system/kit.html new file mode 100644 index 000000000..be7e4b34f --- /dev/null +++ b/design-systems/dithered/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Dithered - component kit + + + +
    +
    +
    +

    Retro & Nostalgic system

    +

    Dithered component kit

    +

    Bundled Open Design package for Dithered, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/dithered/system/tokens.default.json b/design-systems/dithered/system/tokens.default.json new file mode 100644 index 000000000..32e20c3fc --- /dev/null +++ b/design-systems/dithered/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#d24b1f", + "colorPrimaryBg": "#ffdca8", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 14, + "borderRadius": 8 +} diff --git a/design-systems/doodle/system/artifacts/deck.html b/design-systems/doodle/system/artifacts/deck.html new file mode 100644 index 000000000..e09e2bc2c --- /dev/null +++ b/design-systems/doodle/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Doodle - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Doodle Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Doodle, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/doodle/system/artifacts/email.html b/design-systems/doodle/system/artifacts/email.html new file mode 100644 index 000000000..ae5c4bf7f --- /dev/null +++ b/design-systems/doodle/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Doodle - Email + + + +
    +
    +
    +

    Email module

    +

    Doodle Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Doodle, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/doodle/system/artifacts/form.html b/design-systems/doodle/system/artifacts/form.html new file mode 100644 index 000000000..361e67164 --- /dev/null +++ b/design-systems/doodle/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Doodle - Form page + + + +
    +
    +
    +

    Form module

    +

    Doodle Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Doodle, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/doodle/system/artifacts/landing.html b/design-systems/doodle/system/artifacts/landing.html new file mode 100644 index 000000000..e8024f4fa --- /dev/null +++ b/design-systems/doodle/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Doodle - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Doodle Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Doodle, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/doodle/system/artifacts/newsletter.html b/design-systems/doodle/system/artifacts/newsletter.html new file mode 100644 index 000000000..8cf6d6df1 --- /dev/null +++ b/design-systems/doodle/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Doodle - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Doodle Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Doodle, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/doodle/system/artifacts/poster.html b/design-systems/doodle/system/artifacts/poster.html new file mode 100644 index 000000000..4663dcc2e --- /dev/null +++ b/design-systems/doodle/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Doodle - Poster + + + +
    +
    +
    +

    Poster module

    +

    Doodle Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Doodle, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/doodle/system/index.html b/design-systems/doodle/system/index.html new file mode 100644 index 000000000..8265117af --- /dev/null +++ b/design-systems/doodle/system/index.html @@ -0,0 +1,128 @@ + + + + + + Doodle - system assets + + + +
    +

    Creative & Artistic

    +

    Doodle system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/doodle/system/kit.dark.html b/design-systems/doodle/system/kit.dark.html new file mode 100644 index 000000000..f766e26f5 --- /dev/null +++ b/design-systems/doodle/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Doodle - dark component kit + + + +
    +
    +
    +

    Creative & Artistic system

    +

    Doodle component kit

    +

    Bundled Open Design package for Doodle, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/doodle/system/kit.html b/design-systems/doodle/system/kit.html new file mode 100644 index 000000000..0ac66e676 --- /dev/null +++ b/design-systems/doodle/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Doodle - component kit + + + +
    +
    +
    +

    Creative & Artistic system

    +

    Doodle component kit

    +

    Bundled Open Design package for Doodle, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/doodle/system/tokens.default.json b/design-systems/doodle/system/tokens.default.json new file mode 100644 index 000000000..9dc195c87 --- /dev/null +++ b/design-systems/doodle/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#ff6b00", + "colorPrimaryBg": "#ffef9f", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/dramatic/system/artifacts/deck.html b/design-systems/dramatic/system/artifacts/deck.html new file mode 100644 index 000000000..9c7ba4efd --- /dev/null +++ b/design-systems/dramatic/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Dramatic - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Dramatic Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Dramatic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/dramatic/system/artifacts/email.html b/design-systems/dramatic/system/artifacts/email.html new file mode 100644 index 000000000..4e520ecc1 --- /dev/null +++ b/design-systems/dramatic/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Dramatic - Email + + + +
    +
    +
    +

    Email module

    +

    Dramatic Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Dramatic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/dramatic/system/artifacts/form.html b/design-systems/dramatic/system/artifacts/form.html new file mode 100644 index 000000000..3916793a9 --- /dev/null +++ b/design-systems/dramatic/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Dramatic - Form page + + + +
    +
    +
    +

    Form module

    +

    Dramatic Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Dramatic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/dramatic/system/artifacts/landing.html b/design-systems/dramatic/system/artifacts/landing.html new file mode 100644 index 000000000..a8bad8968 --- /dev/null +++ b/design-systems/dramatic/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Dramatic - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Dramatic Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Dramatic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/dramatic/system/artifacts/newsletter.html b/design-systems/dramatic/system/artifacts/newsletter.html new file mode 100644 index 000000000..83e5dca5c --- /dev/null +++ b/design-systems/dramatic/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Dramatic - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Dramatic Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Dramatic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/dramatic/system/artifacts/poster.html b/design-systems/dramatic/system/artifacts/poster.html new file mode 100644 index 000000000..7db11522d --- /dev/null +++ b/design-systems/dramatic/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Dramatic - Poster + + + +
    +
    +
    +

    Poster module

    +

    Dramatic Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Dramatic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/dramatic/system/index.html b/design-systems/dramatic/system/index.html new file mode 100644 index 000000000..a2739e6fc --- /dev/null +++ b/design-systems/dramatic/system/index.html @@ -0,0 +1,128 @@ + + + + + + Dramatic - system assets + + + +
    +

    Bold & Expressive

    +

    Dramatic system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/dramatic/system/kit.dark.html b/design-systems/dramatic/system/kit.dark.html new file mode 100644 index 000000000..660ba4d6c --- /dev/null +++ b/design-systems/dramatic/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Dramatic - dark component kit + + + +
    +
    +
    +

    Bold & Expressive system

    +

    Dramatic component kit

    +

    Bundled Open Design package for Dramatic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/dramatic/system/kit.html b/design-systems/dramatic/system/kit.html new file mode 100644 index 000000000..c33ee430a --- /dev/null +++ b/design-systems/dramatic/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Dramatic - component kit + + + +
    +
    +
    +

    Bold & Expressive system

    +

    Dramatic component kit

    +

    Bundled Open Design package for Dramatic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/dramatic/system/tokens.default.json b/design-systems/dramatic/system/tokens.default.json new file mode 100644 index 000000000..61436e2d3 --- /dev/null +++ b/design-systems/dramatic/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#60a5fa", + "colorPrimaryBg": "#1b2233", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/duolingo/system/artifacts/deck.html b/design-systems/duolingo/system/artifacts/deck.html new file mode 100644 index 000000000..7a936c071 --- /dev/null +++ b/design-systems/duolingo/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Duolingo - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Duolingo Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Duolingo, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/duolingo/system/artifacts/email.html b/design-systems/duolingo/system/artifacts/email.html new file mode 100644 index 000000000..b0406682c --- /dev/null +++ b/design-systems/duolingo/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Duolingo - Email + + + +
    +
    +
    +

    Email module

    +

    Duolingo Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Duolingo, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/duolingo/system/artifacts/form.html b/design-systems/duolingo/system/artifacts/form.html new file mode 100644 index 000000000..2ee3e87b8 --- /dev/null +++ b/design-systems/duolingo/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Duolingo - Form page + + + +
    +
    +
    +

    Form module

    +

    Duolingo Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Duolingo, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/duolingo/system/artifacts/landing.html b/design-systems/duolingo/system/artifacts/landing.html new file mode 100644 index 000000000..0b13bfee0 --- /dev/null +++ b/design-systems/duolingo/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Duolingo - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Duolingo Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Duolingo, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/duolingo/system/artifacts/newsletter.html b/design-systems/duolingo/system/artifacts/newsletter.html new file mode 100644 index 000000000..c8ece86ca --- /dev/null +++ b/design-systems/duolingo/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Duolingo - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Duolingo Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Duolingo, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/duolingo/system/artifacts/poster.html b/design-systems/duolingo/system/artifacts/poster.html new file mode 100644 index 000000000..566e5ab53 --- /dev/null +++ b/design-systems/duolingo/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Duolingo - Poster + + + +
    +
    +
    +

    Poster module

    +

    Duolingo Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Duolingo, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/duolingo/system/index.html b/design-systems/duolingo/system/index.html new file mode 100644 index 000000000..47a7b7a24 --- /dev/null +++ b/design-systems/duolingo/system/index.html @@ -0,0 +1,128 @@ + + + + + + Duolingo - system assets + + + +
    +

    Productivity & SaaS

    +

    Duolingo system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/duolingo/system/kit.dark.html b/design-systems/duolingo/system/kit.dark.html new file mode 100644 index 000000000..c90e9ebab --- /dev/null +++ b/design-systems/duolingo/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Duolingo - dark component kit + + + +
    +
    +
    +

    Productivity & SaaS system

    +

    Duolingo component kit

    +

    Bundled Open Design package for Duolingo, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/duolingo/system/kit.html b/design-systems/duolingo/system/kit.html new file mode 100644 index 000000000..597c7dd57 --- /dev/null +++ b/design-systems/duolingo/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Duolingo - component kit + + + +
    +
    +
    +

    Productivity & SaaS system

    +

    Duolingo component kit

    +

    Bundled Open Design package for Duolingo, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/duolingo/system/tokens.default.json b/design-systems/duolingo/system/tokens.default.json new file mode 100644 index 000000000..d90a4fe23 --- /dev/null +++ b/design-systems/duolingo/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#58cc02", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "#89e219", + "colorPrimaryActive": "#58a700", + "fontSize": 15, + "borderRadius": 16 +} diff --git a/design-systems/editorial/system/artifacts/deck.html b/design-systems/editorial/system/artifacts/deck.html new file mode 100644 index 000000000..75c3b54cb --- /dev/null +++ b/design-systems/editorial/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Editorial - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Editorial Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Editorial, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/editorial/system/artifacts/email.html b/design-systems/editorial/system/artifacts/email.html new file mode 100644 index 000000000..43e556d1f --- /dev/null +++ b/design-systems/editorial/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Editorial - Email + + + +
    +
    +
    +

    Email module

    +

    Editorial Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Editorial, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/editorial/system/artifacts/form.html b/design-systems/editorial/system/artifacts/form.html new file mode 100644 index 000000000..4de79fee4 --- /dev/null +++ b/design-systems/editorial/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Editorial - Form page + + + +
    +
    +
    +

    Form module

    +

    Editorial Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Editorial, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/editorial/system/artifacts/landing.html b/design-systems/editorial/system/artifacts/landing.html new file mode 100644 index 000000000..3d33b8d10 --- /dev/null +++ b/design-systems/editorial/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Editorial - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Editorial Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Editorial, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/editorial/system/artifacts/newsletter.html b/design-systems/editorial/system/artifacts/newsletter.html new file mode 100644 index 000000000..dc7227354 --- /dev/null +++ b/design-systems/editorial/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Editorial - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Editorial Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Editorial, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/editorial/system/artifacts/poster.html b/design-systems/editorial/system/artifacts/poster.html new file mode 100644 index 000000000..faa498125 --- /dev/null +++ b/design-systems/editorial/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Editorial - Poster + + + +
    +
    +
    +

    Poster module

    +

    Editorial Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Editorial, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/editorial/system/index.html b/design-systems/editorial/system/index.html new file mode 100644 index 000000000..2fd0de6a0 --- /dev/null +++ b/design-systems/editorial/system/index.html @@ -0,0 +1,128 @@ + + + + + + Editorial - system assets + + + +
    +

    Creative & Artistic

    +

    Editorial system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/editorial/system/kit.dark.html b/design-systems/editorial/system/kit.dark.html new file mode 100644 index 000000000..3b5b698db --- /dev/null +++ b/design-systems/editorial/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Editorial - dark component kit + + + +
    +
    +
    +

    Creative & Artistic system

    +

    Editorial component kit

    +

    Bundled Open Design package for Editorial, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/editorial/system/kit.html b/design-systems/editorial/system/kit.html new file mode 100644 index 000000000..b551c933d --- /dev/null +++ b/design-systems/editorial/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Editorial - component kit + + + +
    +
    +
    +

    Creative & Artistic system

    +

    Editorial component kit

    +

    Bundled Open Design package for Editorial, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/editorial/system/tokens.default.json b/design-systems/editorial/system/tokens.default.json new file mode 100644 index 000000000..d9aa98c0c --- /dev/null +++ b/design-systems/editorial/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#9a5a2f", + "colorPrimaryBg": "#f1e6d6", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 18, + "borderRadius": 8 +} diff --git a/design-systems/elegant/system/artifacts/deck.html b/design-systems/elegant/system/artifacts/deck.html new file mode 100644 index 000000000..6eb997328 --- /dev/null +++ b/design-systems/elegant/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Elegant - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Elegant Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Elegant, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/elegant/system/artifacts/email.html b/design-systems/elegant/system/artifacts/email.html new file mode 100644 index 000000000..0f26611f9 --- /dev/null +++ b/design-systems/elegant/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Elegant - Email + + + +
    +
    +
    +

    Email module

    +

    Elegant Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Elegant, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/elegant/system/artifacts/form.html b/design-systems/elegant/system/artifacts/form.html new file mode 100644 index 000000000..75cf71872 --- /dev/null +++ b/design-systems/elegant/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Elegant - Form page + + + +
    +
    +
    +

    Form module

    +

    Elegant Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Elegant, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/elegant/system/artifacts/landing.html b/design-systems/elegant/system/artifacts/landing.html new file mode 100644 index 000000000..8008d0798 --- /dev/null +++ b/design-systems/elegant/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Elegant - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Elegant Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Elegant, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/elegant/system/artifacts/newsletter.html b/design-systems/elegant/system/artifacts/newsletter.html new file mode 100644 index 000000000..fb52278dd --- /dev/null +++ b/design-systems/elegant/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Elegant - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Elegant Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Elegant, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/elegant/system/artifacts/poster.html b/design-systems/elegant/system/artifacts/poster.html new file mode 100644 index 000000000..7dcf783f8 --- /dev/null +++ b/design-systems/elegant/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Elegant - Poster + + + +
    +
    +
    +

    Poster module

    +

    Elegant Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Elegant, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/elegant/system/index.html b/design-systems/elegant/system/index.html new file mode 100644 index 000000000..b3f625750 --- /dev/null +++ b/design-systems/elegant/system/index.html @@ -0,0 +1,128 @@ + + + + + + Elegant - system assets + + + +
    +

    Professional & Corporate

    +

    Elegant system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/elegant/system/kit.dark.html b/design-systems/elegant/system/kit.dark.html new file mode 100644 index 000000000..a266b1320 --- /dev/null +++ b/design-systems/elegant/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Elegant - dark component kit + + + +
    +
    +
    +

    Professional & Corporate system

    +

    Elegant component kit

    +

    Bundled Open Design package for Elegant, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/elegant/system/kit.html b/design-systems/elegant/system/kit.html new file mode 100644 index 000000000..fbd1b6e01 --- /dev/null +++ b/design-systems/elegant/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Elegant - component kit + + + +
    +
    +
    +

    Professional & Corporate system

    +

    Elegant component kit

    +

    Bundled Open Design package for Elegant, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/elegant/system/tokens.default.json b/design-systems/elegant/system/tokens.default.json new file mode 100644 index 000000000..436d03f49 --- /dev/null +++ b/design-systems/elegant/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#9b5b32", + "colorPrimaryBg": "#f1e3cf", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 17, + "borderRadius": 16 +} diff --git a/design-systems/elevenlabs/system/artifacts/deck.html b/design-systems/elevenlabs/system/artifacts/deck.html new file mode 100644 index 000000000..9b92b7bcf --- /dev/null +++ b/design-systems/elevenlabs/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + ElevenLabs - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    ElevenLabs Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for ElevenLabs, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/elevenlabs/system/artifacts/email.html b/design-systems/elevenlabs/system/artifacts/email.html new file mode 100644 index 000000000..80db11df1 --- /dev/null +++ b/design-systems/elevenlabs/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + ElevenLabs - Email + + + +
    +
    +
    +

    Email module

    +

    ElevenLabs Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for ElevenLabs, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/elevenlabs/system/artifacts/form.html b/design-systems/elevenlabs/system/artifacts/form.html new file mode 100644 index 000000000..ebb5189e8 --- /dev/null +++ b/design-systems/elevenlabs/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + ElevenLabs - Form page + + + +
    +
    +
    +

    Form module

    +

    ElevenLabs Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for ElevenLabs, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/elevenlabs/system/artifacts/landing.html b/design-systems/elevenlabs/system/artifacts/landing.html new file mode 100644 index 000000000..58178e651 --- /dev/null +++ b/design-systems/elevenlabs/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + ElevenLabs - Landing page + + + +
    +
    +
    +

    Landing module

    +

    ElevenLabs Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for ElevenLabs, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/elevenlabs/system/artifacts/newsletter.html b/design-systems/elevenlabs/system/artifacts/newsletter.html new file mode 100644 index 000000000..4ac15794a --- /dev/null +++ b/design-systems/elevenlabs/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + ElevenLabs - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    ElevenLabs Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for ElevenLabs, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/elevenlabs/system/artifacts/poster.html b/design-systems/elevenlabs/system/artifacts/poster.html new file mode 100644 index 000000000..19da7b268 --- /dev/null +++ b/design-systems/elevenlabs/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + ElevenLabs - Poster + + + +
    +
    +
    +

    Poster module

    +

    ElevenLabs Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for ElevenLabs, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/elevenlabs/system/index.html b/design-systems/elevenlabs/system/index.html new file mode 100644 index 000000000..29559dcee --- /dev/null +++ b/design-systems/elevenlabs/system/index.html @@ -0,0 +1,128 @@ + + + + + + ElevenLabs - system assets + + + +
    +

    AI & LLM

    +

    ElevenLabs system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/elevenlabs/system/kit.dark.html b/design-systems/elevenlabs/system/kit.dark.html new file mode 100644 index 000000000..bea3cc32b --- /dev/null +++ b/design-systems/elevenlabs/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + ElevenLabs - dark component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    ElevenLabs component kit

    +

    Bundled Open Design package for ElevenLabs, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/elevenlabs/system/kit.html b/design-systems/elevenlabs/system/kit.html new file mode 100644 index 000000000..6b0b34e74 --- /dev/null +++ b/design-systems/elevenlabs/system/kit.html @@ -0,0 +1,149 @@ + + + + + + ElevenLabs - component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    ElevenLabs component kit

    +

    Bundled Open Design package for ElevenLabs, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/elevenlabs/system/tokens.default.json b/design-systems/elevenlabs/system/tokens.default.json new file mode 100644 index 000000000..10cc1d0d6 --- /dev/null +++ b/design-systems/elevenlabs/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#000000", + "colorPrimaryBg": "#f5f2ef", + "colorPrimaryHover": "#1a1a1a", + "colorPrimaryActive": "#333333", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/energetic/system/artifacts/deck.html b/design-systems/energetic/system/artifacts/deck.html new file mode 100644 index 000000000..8b78de701 --- /dev/null +++ b/design-systems/energetic/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Energetic - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Energetic Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Energetic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/energetic/system/artifacts/email.html b/design-systems/energetic/system/artifacts/email.html new file mode 100644 index 000000000..c7b419e2d --- /dev/null +++ b/design-systems/energetic/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Energetic - Email + + + +
    +
    +
    +

    Email module

    +

    Energetic Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Energetic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/energetic/system/artifacts/form.html b/design-systems/energetic/system/artifacts/form.html new file mode 100644 index 000000000..4c4b7285a --- /dev/null +++ b/design-systems/energetic/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Energetic - Form page + + + +
    +
    +
    +

    Form module

    +

    Energetic Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Energetic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/energetic/system/artifacts/landing.html b/design-systems/energetic/system/artifacts/landing.html new file mode 100644 index 000000000..cd1191d4c --- /dev/null +++ b/design-systems/energetic/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Energetic - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Energetic Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Energetic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/energetic/system/artifacts/newsletter.html b/design-systems/energetic/system/artifacts/newsletter.html new file mode 100644 index 000000000..a61637492 --- /dev/null +++ b/design-systems/energetic/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Energetic - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Energetic Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Energetic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/energetic/system/artifacts/poster.html b/design-systems/energetic/system/artifacts/poster.html new file mode 100644 index 000000000..a1827ba79 --- /dev/null +++ b/design-systems/energetic/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Energetic - Poster + + + +
    +
    +
    +

    Poster module

    +

    Energetic Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Energetic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/energetic/system/index.html b/design-systems/energetic/system/index.html new file mode 100644 index 000000000..45f775fcd --- /dev/null +++ b/design-systems/energetic/system/index.html @@ -0,0 +1,128 @@ + + + + + + Energetic - system assets + + + +
    +

    Bold & Expressive

    +

    Energetic system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/energetic/system/kit.dark.html b/design-systems/energetic/system/kit.dark.html new file mode 100644 index 000000000..76caacf04 --- /dev/null +++ b/design-systems/energetic/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Energetic - dark component kit + + + +
    +
    +
    +

    Bold & Expressive system

    +

    Energetic component kit

    +

    Bundled Open Design package for Energetic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/energetic/system/kit.html b/design-systems/energetic/system/kit.html new file mode 100644 index 000000000..1720fa1d1 --- /dev/null +++ b/design-systems/energetic/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Energetic - component kit + + + +
    +
    +
    +

    Bold & Expressive system

    +

    Energetic component kit

    +

    Bundled Open Design package for Energetic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/energetic/system/tokens.default.json b/design-systems/energetic/system/tokens.default.json new file mode 100644 index 000000000..9dc195c87 --- /dev/null +++ b/design-systems/energetic/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#ff6b00", + "colorPrimaryBg": "#ffef9f", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/enterprise/system/artifacts/deck.html b/design-systems/enterprise/system/artifacts/deck.html new file mode 100644 index 000000000..0ec7b12fa --- /dev/null +++ b/design-systems/enterprise/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Enterprise - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Enterprise Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Enterprise, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/enterprise/system/artifacts/email.html b/design-systems/enterprise/system/artifacts/email.html new file mode 100644 index 000000000..65615a09d --- /dev/null +++ b/design-systems/enterprise/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Enterprise - Email + + + +
    +
    +
    +

    Email module

    +

    Enterprise Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Enterprise, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/enterprise/system/artifacts/form.html b/design-systems/enterprise/system/artifacts/form.html new file mode 100644 index 000000000..62cd52364 --- /dev/null +++ b/design-systems/enterprise/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Enterprise - Form page + + + +
    +
    +
    +

    Form module

    +

    Enterprise Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Enterprise, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/enterprise/system/artifacts/landing.html b/design-systems/enterprise/system/artifacts/landing.html new file mode 100644 index 000000000..c2d7a2e51 --- /dev/null +++ b/design-systems/enterprise/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Enterprise - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Enterprise Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Enterprise, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/enterprise/system/artifacts/newsletter.html b/design-systems/enterprise/system/artifacts/newsletter.html new file mode 100644 index 000000000..5d3439d20 --- /dev/null +++ b/design-systems/enterprise/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Enterprise - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Enterprise Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Enterprise, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/enterprise/system/artifacts/poster.html b/design-systems/enterprise/system/artifacts/poster.html new file mode 100644 index 000000000..131df5b56 --- /dev/null +++ b/design-systems/enterprise/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Enterprise - Poster + + + +
    +
    +
    +

    Poster module

    +

    Enterprise Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Enterprise, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/enterprise/system/index.html b/design-systems/enterprise/system/index.html new file mode 100644 index 000000000..568dadf20 --- /dev/null +++ b/design-systems/enterprise/system/index.html @@ -0,0 +1,128 @@ + + + + + + Enterprise - system assets + + + +
    +

    Professional & Corporate

    +

    Enterprise system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/enterprise/system/kit.dark.html b/design-systems/enterprise/system/kit.dark.html new file mode 100644 index 000000000..1a8ab9d24 --- /dev/null +++ b/design-systems/enterprise/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Enterprise - dark component kit + + + +
    +
    +
    +

    Professional & Corporate system

    +

    Enterprise component kit

    +

    Bundled Open Design package for Enterprise, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/enterprise/system/kit.html b/design-systems/enterprise/system/kit.html new file mode 100644 index 000000000..e66ffdf9b --- /dev/null +++ b/design-systems/enterprise/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Enterprise - component kit + + + +
    +
    +
    +

    Professional & Corporate system

    +

    Enterprise component kit

    +

    Bundled Open Design package for Enterprise, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/enterprise/system/tokens.default.json b/design-systems/enterprise/system/tokens.default.json new file mode 100644 index 000000000..fe77d7a67 --- /dev/null +++ b/design-systems/enterprise/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#1d4ed8", + "colorPrimaryBg": "#eef2f7", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 10 +} diff --git a/design-systems/expo/system/artifacts/deck.html b/design-systems/expo/system/artifacts/deck.html new file mode 100644 index 000000000..02f46195b --- /dev/null +++ b/design-systems/expo/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Expo - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Expo Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Expo, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/expo/system/artifacts/email.html b/design-systems/expo/system/artifacts/email.html new file mode 100644 index 000000000..f1e3baec1 --- /dev/null +++ b/design-systems/expo/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Expo - Email + + + +
    +
    +
    +

    Email module

    +

    Expo Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Expo, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/expo/system/artifacts/form.html b/design-systems/expo/system/artifacts/form.html new file mode 100644 index 000000000..0466ac3dd --- /dev/null +++ b/design-systems/expo/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Expo - Form page + + + +
    +
    +
    +

    Form module

    +

    Expo Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Expo, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/expo/system/artifacts/landing.html b/design-systems/expo/system/artifacts/landing.html new file mode 100644 index 000000000..e83837840 --- /dev/null +++ b/design-systems/expo/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Expo - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Expo Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Expo, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/expo/system/artifacts/newsletter.html b/design-systems/expo/system/artifacts/newsletter.html new file mode 100644 index 000000000..fbe0012a8 --- /dev/null +++ b/design-systems/expo/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Expo - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Expo Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Expo, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/expo/system/artifacts/poster.html b/design-systems/expo/system/artifacts/poster.html new file mode 100644 index 000000000..7a0941dc7 --- /dev/null +++ b/design-systems/expo/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Expo - Poster + + + +
    +
    +
    +

    Poster module

    +

    Expo Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Expo, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/expo/system/index.html b/design-systems/expo/system/index.html new file mode 100644 index 000000000..cbbc8b2f9 --- /dev/null +++ b/design-systems/expo/system/index.html @@ -0,0 +1,128 @@ + + + + + + Expo - system assets + + + +
    +

    Developer Tools

    +

    Expo system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/expo/system/kit.dark.html b/design-systems/expo/system/kit.dark.html new file mode 100644 index 000000000..4e83e612d --- /dev/null +++ b/design-systems/expo/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Expo - dark component kit + + + +
    +
    +
    +

    Developer Tools system

    +

    Expo component kit

    +

    Bundled Open Design package for Expo, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/expo/system/kit.html b/design-systems/expo/system/kit.html new file mode 100644 index 000000000..87a5386be --- /dev/null +++ b/design-systems/expo/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Expo - component kit + + + +
    +
    +
    +

    Developer Tools system

    +

    Expo component kit

    +

    Bundled Open Design package for Expo, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/expo/system/tokens.default.json b/design-systems/expo/system/tokens.default.json new file mode 100644 index 000000000..789cd669d --- /dev/null +++ b/design-systems/expo/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#000020", + "colorPrimaryBg": "#eef2ff", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 14 +} diff --git a/design-systems/expressive/system/artifacts/deck.html b/design-systems/expressive/system/artifacts/deck.html new file mode 100644 index 000000000..f8b41a574 --- /dev/null +++ b/design-systems/expressive/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Expressive - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Expressive Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Expressive, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/expressive/system/artifacts/email.html b/design-systems/expressive/system/artifacts/email.html new file mode 100644 index 000000000..5cf6a53fc --- /dev/null +++ b/design-systems/expressive/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Expressive - Email + + + +
    +
    +
    +

    Email module

    +

    Expressive Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Expressive, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/expressive/system/artifacts/form.html b/design-systems/expressive/system/artifacts/form.html new file mode 100644 index 000000000..25b9037ca --- /dev/null +++ b/design-systems/expressive/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Expressive - Form page + + + +
    +
    +
    +

    Form module

    +

    Expressive Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Expressive, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/expressive/system/artifacts/landing.html b/design-systems/expressive/system/artifacts/landing.html new file mode 100644 index 000000000..2ee9d2af3 --- /dev/null +++ b/design-systems/expressive/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Expressive - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Expressive Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Expressive, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/expressive/system/artifacts/newsletter.html b/design-systems/expressive/system/artifacts/newsletter.html new file mode 100644 index 000000000..30dbe7ee5 --- /dev/null +++ b/design-systems/expressive/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Expressive - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Expressive Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Expressive, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/expressive/system/artifacts/poster.html b/design-systems/expressive/system/artifacts/poster.html new file mode 100644 index 000000000..175adc7aa --- /dev/null +++ b/design-systems/expressive/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Expressive - Poster + + + +
    +
    +
    +

    Poster module

    +

    Expressive Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Expressive, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/expressive/system/index.html b/design-systems/expressive/system/index.html new file mode 100644 index 000000000..e9a20a682 --- /dev/null +++ b/design-systems/expressive/system/index.html @@ -0,0 +1,128 @@ + + + + + + Expressive - system assets + + + +
    +

    Bold & Expressive

    +

    Expressive system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/expressive/system/kit.dark.html b/design-systems/expressive/system/kit.dark.html new file mode 100644 index 000000000..1dc75bbb6 --- /dev/null +++ b/design-systems/expressive/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Expressive - dark component kit + + + +
    +
    +
    +

    Bold & Expressive system

    +

    Expressive component kit

    +

    Bundled Open Design package for Expressive, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/expressive/system/kit.html b/design-systems/expressive/system/kit.html new file mode 100644 index 000000000..95627d67b --- /dev/null +++ b/design-systems/expressive/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Expressive - component kit + + + +
    +
    +
    +

    Bold & Expressive system

    +

    Expressive component kit

    +

    Bundled Open Design package for Expressive, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/expressive/system/tokens.default.json b/design-systems/expressive/system/tokens.default.json new file mode 100644 index 000000000..b6225f32c --- /dev/null +++ b/design-systems/expressive/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#7c3aed", + "colorPrimaryBg": "#efe8ff", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/fantasy/system/artifacts/deck.html b/design-systems/fantasy/system/artifacts/deck.html new file mode 100644 index 000000000..f81d9ba33 --- /dev/null +++ b/design-systems/fantasy/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Fantasy - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Fantasy Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Fantasy, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/fantasy/system/artifacts/email.html b/design-systems/fantasy/system/artifacts/email.html new file mode 100644 index 000000000..1fe233927 --- /dev/null +++ b/design-systems/fantasy/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Fantasy - Email + + + +
    +
    +
    +

    Email module

    +

    Fantasy Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Fantasy, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/fantasy/system/artifacts/form.html b/design-systems/fantasy/system/artifacts/form.html new file mode 100644 index 000000000..de5b2b19a --- /dev/null +++ b/design-systems/fantasy/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Fantasy - Form page + + + +
    +
    +
    +

    Form module

    +

    Fantasy Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Fantasy, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/fantasy/system/artifacts/landing.html b/design-systems/fantasy/system/artifacts/landing.html new file mode 100644 index 000000000..358f5faf2 --- /dev/null +++ b/design-systems/fantasy/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Fantasy - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Fantasy Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Fantasy, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/fantasy/system/artifacts/newsletter.html b/design-systems/fantasy/system/artifacts/newsletter.html new file mode 100644 index 000000000..859276e92 --- /dev/null +++ b/design-systems/fantasy/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Fantasy - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Fantasy Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Fantasy, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/fantasy/system/artifacts/poster.html b/design-systems/fantasy/system/artifacts/poster.html new file mode 100644 index 000000000..3e50cf2ad --- /dev/null +++ b/design-systems/fantasy/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Fantasy - Poster + + + +
    +
    +
    +

    Poster module

    +

    Fantasy Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Fantasy, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/fantasy/system/index.html b/design-systems/fantasy/system/index.html new file mode 100644 index 000000000..ec7d073a0 --- /dev/null +++ b/design-systems/fantasy/system/index.html @@ -0,0 +1,128 @@ + + + + + + Fantasy - system assets + + + +
    +

    Creative & Artistic

    +

    Fantasy system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/fantasy/system/kit.dark.html b/design-systems/fantasy/system/kit.dark.html new file mode 100644 index 000000000..c4576b41e --- /dev/null +++ b/design-systems/fantasy/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Fantasy - dark component kit + + + +
    +
    +
    +

    Creative & Artistic system

    +

    Fantasy component kit

    +

    Bundled Open Design package for Fantasy, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/fantasy/system/kit.html b/design-systems/fantasy/system/kit.html new file mode 100644 index 000000000..1ba1eee37 --- /dev/null +++ b/design-systems/fantasy/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Fantasy - component kit + + + +
    +
    +
    +

    Creative & Artistic system

    +

    Fantasy component kit

    +

    Bundled Open Design package for Fantasy, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/fantasy/system/tokens.default.json b/design-systems/fantasy/system/tokens.default.json new file mode 100644 index 000000000..866bdd39f --- /dev/null +++ b/design-systems/fantasy/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#c084fc", + "colorPrimaryBg": "#1e1540", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/ferrari/system/artifacts/deck.html b/design-systems/ferrari/system/artifacts/deck.html new file mode 100644 index 000000000..24cf264dc --- /dev/null +++ b/design-systems/ferrari/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Ferrari - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Ferrari Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Ferrari, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/ferrari/system/artifacts/email.html b/design-systems/ferrari/system/artifacts/email.html new file mode 100644 index 000000000..bd968a8d1 --- /dev/null +++ b/design-systems/ferrari/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Ferrari - Email + + + +
    +
    +
    +

    Email module

    +

    Ferrari Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Ferrari, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/ferrari/system/artifacts/form.html b/design-systems/ferrari/system/artifacts/form.html new file mode 100644 index 000000000..e12865daf --- /dev/null +++ b/design-systems/ferrari/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Ferrari - Form page + + + +
    +
    +
    +

    Form module

    +

    Ferrari Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Ferrari, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/ferrari/system/artifacts/landing.html b/design-systems/ferrari/system/artifacts/landing.html new file mode 100644 index 000000000..cc4984b67 --- /dev/null +++ b/design-systems/ferrari/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Ferrari - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Ferrari Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Ferrari, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/ferrari/system/artifacts/newsletter.html b/design-systems/ferrari/system/artifacts/newsletter.html new file mode 100644 index 000000000..eea08e06d --- /dev/null +++ b/design-systems/ferrari/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Ferrari - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Ferrari Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Ferrari, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/ferrari/system/artifacts/poster.html b/design-systems/ferrari/system/artifacts/poster.html new file mode 100644 index 000000000..4e1689e58 --- /dev/null +++ b/design-systems/ferrari/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Ferrari - Poster + + + +
    +
    +
    +

    Poster module

    +

    Ferrari Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Ferrari, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/ferrari/system/index.html b/design-systems/ferrari/system/index.html new file mode 100644 index 000000000..9b98d8390 --- /dev/null +++ b/design-systems/ferrari/system/index.html @@ -0,0 +1,128 @@ + + + + + + Ferrari - system assets + + + +
    +

    Automotive

    +

    Ferrari system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/ferrari/system/kit.dark.html b/design-systems/ferrari/system/kit.dark.html new file mode 100644 index 000000000..d0aa078e7 --- /dev/null +++ b/design-systems/ferrari/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Ferrari - dark component kit + + + +
    +
    +
    +

    Automotive system

    +

    Ferrari component kit

    +

    Bundled Open Design package for Ferrari, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/ferrari/system/kit.html b/design-systems/ferrari/system/kit.html new file mode 100644 index 000000000..abca269f9 --- /dev/null +++ b/design-systems/ferrari/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Ferrari - component kit + + + +
    +
    +
    +

    Automotive system

    +

    Ferrari component kit

    +

    Bundled Open Design package for Ferrari, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/ferrari/system/tokens.default.json b/design-systems/ferrari/system/tokens.default.json new file mode 100644 index 000000000..56e889492 --- /dev/null +++ b/design-systems/ferrari/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#dc0000", + "colorPrimaryBg": "#23130f", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 8 +} diff --git a/design-systems/figma/system/artifacts/deck.html b/design-systems/figma/system/artifacts/deck.html new file mode 100644 index 000000000..573901931 --- /dev/null +++ b/design-systems/figma/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Figma - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Figma Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Figma, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/figma/system/artifacts/email.html b/design-systems/figma/system/artifacts/email.html new file mode 100644 index 000000000..78eeb206f --- /dev/null +++ b/design-systems/figma/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Figma - Email + + + +
    +
    +
    +

    Email module

    +

    Figma Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Figma, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/figma/system/artifacts/form.html b/design-systems/figma/system/artifacts/form.html new file mode 100644 index 000000000..5ae736bef --- /dev/null +++ b/design-systems/figma/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Figma - Form page + + + +
    +
    +
    +

    Form module

    +

    Figma Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Figma, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/figma/system/artifacts/landing.html b/design-systems/figma/system/artifacts/landing.html new file mode 100644 index 000000000..d3af6f3f9 --- /dev/null +++ b/design-systems/figma/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Figma - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Figma Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Figma, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/figma/system/artifacts/newsletter.html b/design-systems/figma/system/artifacts/newsletter.html new file mode 100644 index 000000000..fd90f579f --- /dev/null +++ b/design-systems/figma/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Figma - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Figma Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Figma, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/figma/system/artifacts/poster.html b/design-systems/figma/system/artifacts/poster.html new file mode 100644 index 000000000..88a2c9b69 --- /dev/null +++ b/design-systems/figma/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Figma - Poster + + + +
    +
    +
    +

    Poster module

    +

    Figma Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Figma, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/figma/system/index.html b/design-systems/figma/system/index.html new file mode 100644 index 000000000..2113e946a --- /dev/null +++ b/design-systems/figma/system/index.html @@ -0,0 +1,128 @@ + + + + + + Figma - system assets + + + +
    +

    Design & Creative

    +

    Figma system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/figma/system/kit.dark.html b/design-systems/figma/system/kit.dark.html new file mode 100644 index 000000000..3e1df4cd6 --- /dev/null +++ b/design-systems/figma/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Figma - dark component kit + + + +
    +
    +
    +

    Design & Creative system

    +

    Figma component kit

    +

    Bundled Open Design package for Figma, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/figma/system/kit.html b/design-systems/figma/system/kit.html new file mode 100644 index 000000000..91f6759d0 --- /dev/null +++ b/design-systems/figma/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Figma - component kit + + + +
    +
    +
    +

    Design & Creative system

    +

    Figma component kit

    +

    Bundled Open Design package for Figma, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/figma/system/tokens.default.json b/design-systems/figma/system/tokens.default.json new file mode 100644 index 000000000..619ab14ea --- /dev/null +++ b/design-systems/figma/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#000000", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "rgba(0, 0, 0, 0.85)", + "colorPrimaryActive": "rgba(0, 0, 0, 0.08)", + "fontSize": 16, + "borderRadius": 8 +} diff --git a/design-systems/flat/system/artifacts/deck.html b/design-systems/flat/system/artifacts/deck.html new file mode 100644 index 000000000..653678a2c --- /dev/null +++ b/design-systems/flat/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Flat - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Flat Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Flat, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/flat/system/artifacts/email.html b/design-systems/flat/system/artifacts/email.html new file mode 100644 index 000000000..fc69f3e0a --- /dev/null +++ b/design-systems/flat/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Flat - Email + + + +
    +
    +
    +

    Email module

    +

    Flat Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Flat, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/flat/system/artifacts/form.html b/design-systems/flat/system/artifacts/form.html new file mode 100644 index 000000000..2756828c3 --- /dev/null +++ b/design-systems/flat/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Flat - Form page + + + +
    +
    +
    +

    Form module

    +

    Flat Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Flat, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/flat/system/artifacts/landing.html b/design-systems/flat/system/artifacts/landing.html new file mode 100644 index 000000000..c4d5dd539 --- /dev/null +++ b/design-systems/flat/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Flat - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Flat Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Flat, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/flat/system/artifacts/newsletter.html b/design-systems/flat/system/artifacts/newsletter.html new file mode 100644 index 000000000..6972846f0 --- /dev/null +++ b/design-systems/flat/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Flat - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Flat Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Flat, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/flat/system/artifacts/poster.html b/design-systems/flat/system/artifacts/poster.html new file mode 100644 index 000000000..2a22db5d2 --- /dev/null +++ b/design-systems/flat/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Flat - Poster + + + +
    +
    +
    +

    Poster module

    +

    Flat Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Flat, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/flat/system/index.html b/design-systems/flat/system/index.html new file mode 100644 index 000000000..f9e66e5d9 --- /dev/null +++ b/design-systems/flat/system/index.html @@ -0,0 +1,128 @@ + + + + + + Flat - system assets + + + +
    +

    Modern & Minimal

    +

    Flat system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/flat/system/kit.dark.html b/design-systems/flat/system/kit.dark.html new file mode 100644 index 000000000..69a971469 --- /dev/null +++ b/design-systems/flat/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Flat - dark component kit + + + +
    +
    +
    +

    Modern & Minimal system

    +

    Flat component kit

    +

    Bundled Open Design package for Flat, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/flat/system/kit.html b/design-systems/flat/system/kit.html new file mode 100644 index 000000000..b135286a7 --- /dev/null +++ b/design-systems/flat/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Flat - component kit + + + +
    +
    +
    +

    Modern & Minimal system

    +

    Flat component kit

    +

    Bundled Open Design package for Flat, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/flat/system/tokens.default.json b/design-systems/flat/system/tokens.default.json new file mode 100644 index 000000000..a1beb9985 --- /dev/null +++ b/design-systems/flat/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#2563eb", + "colorPrimaryBg": "#eaf1ff", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/framer/system/artifacts/deck.html b/design-systems/framer/system/artifacts/deck.html new file mode 100644 index 000000000..46669e51d --- /dev/null +++ b/design-systems/framer/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Framer - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Framer Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Framer, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/framer/system/artifacts/email.html b/design-systems/framer/system/artifacts/email.html new file mode 100644 index 000000000..1439cb7ca --- /dev/null +++ b/design-systems/framer/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Framer - Email + + + +
    +
    +
    +

    Email module

    +

    Framer Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Framer, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/framer/system/artifacts/form.html b/design-systems/framer/system/artifacts/form.html new file mode 100644 index 000000000..0d7978a9d --- /dev/null +++ b/design-systems/framer/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Framer - Form page + + + +
    +
    +
    +

    Form module

    +

    Framer Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Framer, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/framer/system/artifacts/landing.html b/design-systems/framer/system/artifacts/landing.html new file mode 100644 index 000000000..67b750919 --- /dev/null +++ b/design-systems/framer/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Framer - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Framer Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Framer, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/framer/system/artifacts/newsletter.html b/design-systems/framer/system/artifacts/newsletter.html new file mode 100644 index 000000000..9c96a42f3 --- /dev/null +++ b/design-systems/framer/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Framer - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Framer Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Framer, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/framer/system/artifacts/poster.html b/design-systems/framer/system/artifacts/poster.html new file mode 100644 index 000000000..7537d4451 --- /dev/null +++ b/design-systems/framer/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Framer - Poster + + + +
    +
    +
    +

    Poster module

    +

    Framer Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Framer, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/framer/system/index.html b/design-systems/framer/system/index.html new file mode 100644 index 000000000..6236d1fcc --- /dev/null +++ b/design-systems/framer/system/index.html @@ -0,0 +1,128 @@ + + + + + + Framer - system assets + + + +
    +

    Design & Creative

    +

    Framer system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/framer/system/kit.dark.html b/design-systems/framer/system/kit.dark.html new file mode 100644 index 000000000..b8778cdad --- /dev/null +++ b/design-systems/framer/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Framer - dark component kit + + + +
    +
    +
    +

    Design & Creative system

    +

    Framer component kit

    +

    Bundled Open Design package for Framer, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/framer/system/kit.html b/design-systems/framer/system/kit.html new file mode 100644 index 000000000..69d57bcbb --- /dev/null +++ b/design-systems/framer/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Framer - component kit + + + +
    +
    +
    +

    Design & Creative system

    +

    Framer component kit

    +

    Bundled Open Design package for Framer, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/framer/system/tokens.default.json b/design-systems/framer/system/tokens.default.json new file mode 100644 index 000000000..30682bc4c --- /dev/null +++ b/design-systems/framer/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#0099ff", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 15, + "borderRadius": 12 +} diff --git a/design-systems/friendly/system/artifacts/deck.html b/design-systems/friendly/system/artifacts/deck.html new file mode 100644 index 000000000..b5c2f721c --- /dev/null +++ b/design-systems/friendly/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Friendly - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Friendly Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Friendly, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/friendly/system/artifacts/email.html b/design-systems/friendly/system/artifacts/email.html new file mode 100644 index 000000000..3918ed3d1 --- /dev/null +++ b/design-systems/friendly/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Friendly - Email + + + +
    +
    +
    +

    Email module

    +

    Friendly Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Friendly, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/friendly/system/artifacts/form.html b/design-systems/friendly/system/artifacts/form.html new file mode 100644 index 000000000..0eb17ee7f --- /dev/null +++ b/design-systems/friendly/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Friendly - Form page + + + +
    +
    +
    +

    Form module

    +

    Friendly Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Friendly, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/friendly/system/artifacts/landing.html b/design-systems/friendly/system/artifacts/landing.html new file mode 100644 index 000000000..ae469f692 --- /dev/null +++ b/design-systems/friendly/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Friendly - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Friendly Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Friendly, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/friendly/system/artifacts/newsletter.html b/design-systems/friendly/system/artifacts/newsletter.html new file mode 100644 index 000000000..e46897a9b --- /dev/null +++ b/design-systems/friendly/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Friendly - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Friendly Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Friendly, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/friendly/system/artifacts/poster.html b/design-systems/friendly/system/artifacts/poster.html new file mode 100644 index 000000000..cac62505f --- /dev/null +++ b/design-systems/friendly/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Friendly - Poster + + + +
    +
    +
    +

    Poster module

    +

    Friendly Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Friendly, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/friendly/system/index.html b/design-systems/friendly/system/index.html new file mode 100644 index 000000000..eaf37b98c --- /dev/null +++ b/design-systems/friendly/system/index.html @@ -0,0 +1,128 @@ + + + + + + Friendly - system assets + + + +
    +

    Creative & Artistic

    +

    Friendly system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/friendly/system/kit.dark.html b/design-systems/friendly/system/kit.dark.html new file mode 100644 index 000000000..87f4d5a25 --- /dev/null +++ b/design-systems/friendly/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Friendly - dark component kit + + + +
    +
    +
    +

    Creative & Artistic system

    +

    Friendly component kit

    +

    Bundled Open Design package for Friendly, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/friendly/system/kit.html b/design-systems/friendly/system/kit.html new file mode 100644 index 000000000..3952c7b0a --- /dev/null +++ b/design-systems/friendly/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Friendly - component kit + + + +
    +
    +
    +

    Creative & Artistic system

    +

    Friendly component kit

    +

    Bundled Open Design package for Friendly, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/friendly/system/tokens.default.json b/design-systems/friendly/system/tokens.default.json new file mode 100644 index 000000000..9dc195c87 --- /dev/null +++ b/design-systems/friendly/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#ff6b00", + "colorPrimaryBg": "#ffef9f", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/futuristic/system/artifacts/deck.html b/design-systems/futuristic/system/artifacts/deck.html new file mode 100644 index 000000000..f3ae15672 --- /dev/null +++ b/design-systems/futuristic/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Futuristic - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Futuristic Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Futuristic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/futuristic/system/artifacts/email.html b/design-systems/futuristic/system/artifacts/email.html new file mode 100644 index 000000000..77c01c968 --- /dev/null +++ b/design-systems/futuristic/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Futuristic - Email + + + +
    +
    +
    +

    Email module

    +

    Futuristic Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Futuristic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/futuristic/system/artifacts/form.html b/design-systems/futuristic/system/artifacts/form.html new file mode 100644 index 000000000..7d789bf85 --- /dev/null +++ b/design-systems/futuristic/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Futuristic - Form page + + + +
    +
    +
    +

    Form module

    +

    Futuristic Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Futuristic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/futuristic/system/artifacts/landing.html b/design-systems/futuristic/system/artifacts/landing.html new file mode 100644 index 000000000..f1793da9b --- /dev/null +++ b/design-systems/futuristic/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Futuristic - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Futuristic Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Futuristic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/futuristic/system/artifacts/newsletter.html b/design-systems/futuristic/system/artifacts/newsletter.html new file mode 100644 index 000000000..2d2b13328 --- /dev/null +++ b/design-systems/futuristic/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Futuristic - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Futuristic Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Futuristic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/futuristic/system/artifacts/poster.html b/design-systems/futuristic/system/artifacts/poster.html new file mode 100644 index 000000000..39a58eefc --- /dev/null +++ b/design-systems/futuristic/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Futuristic - Poster + + + +
    +
    +
    +

    Poster module

    +

    Futuristic Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Futuristic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/futuristic/system/index.html b/design-systems/futuristic/system/index.html new file mode 100644 index 000000000..2477fc8f2 --- /dev/null +++ b/design-systems/futuristic/system/index.html @@ -0,0 +1,128 @@ + + + + + + Futuristic - system assets + + + +
    +

    Themed & Unique

    +

    Futuristic system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/futuristic/system/kit.dark.html b/design-systems/futuristic/system/kit.dark.html new file mode 100644 index 000000000..feb81b8a4 --- /dev/null +++ b/design-systems/futuristic/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Futuristic - dark component kit + + + +
    +
    +
    +

    Themed & Unique system

    +

    Futuristic component kit

    +

    Bundled Open Design package for Futuristic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/futuristic/system/kit.html b/design-systems/futuristic/system/kit.html new file mode 100644 index 000000000..c3e685cf2 --- /dev/null +++ b/design-systems/futuristic/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Futuristic - component kit + + + +
    +
    +
    +

    Themed & Unique system

    +

    Futuristic component kit

    +

    Bundled Open Design package for Futuristic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/futuristic/system/tokens.default.json b/design-systems/futuristic/system/tokens.default.json new file mode 100644 index 000000000..61436e2d3 --- /dev/null +++ b/design-systems/futuristic/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#60a5fa", + "colorPrimaryBg": "#1b2233", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/github/system/artifacts/deck.html b/design-systems/github/system/artifacts/deck.html new file mode 100644 index 000000000..9cd0b4e59 --- /dev/null +++ b/design-systems/github/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + GitHub - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    GitHub Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for GitHub, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/github/system/artifacts/email.html b/design-systems/github/system/artifacts/email.html new file mode 100644 index 000000000..cbc670810 --- /dev/null +++ b/design-systems/github/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + GitHub - Email + + + +
    +
    +
    +

    Email module

    +

    GitHub Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for GitHub, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/github/system/artifacts/form.html b/design-systems/github/system/artifacts/form.html new file mode 100644 index 000000000..2a7a2811b --- /dev/null +++ b/design-systems/github/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + GitHub - Form page + + + +
    +
    +
    +

    Form module

    +

    GitHub Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for GitHub, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/github/system/artifacts/landing.html b/design-systems/github/system/artifacts/landing.html new file mode 100644 index 000000000..c1bdd5793 --- /dev/null +++ b/design-systems/github/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + GitHub - Landing page + + + +
    +
    +
    +

    Landing module

    +

    GitHub Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for GitHub, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/github/system/artifacts/newsletter.html b/design-systems/github/system/artifacts/newsletter.html new file mode 100644 index 000000000..0a7146362 --- /dev/null +++ b/design-systems/github/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + GitHub - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    GitHub Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for GitHub, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/github/system/artifacts/poster.html b/design-systems/github/system/artifacts/poster.html new file mode 100644 index 000000000..eece7797d --- /dev/null +++ b/design-systems/github/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + GitHub - Poster + + + +
    +
    +
    +

    Poster module

    +

    GitHub Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for GitHub, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/github/system/index.html b/design-systems/github/system/index.html new file mode 100644 index 000000000..765ffffba --- /dev/null +++ b/design-systems/github/system/index.html @@ -0,0 +1,128 @@ + + + + + + GitHub - system assets + + + +
    +

    Developer Tools

    +

    GitHub system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/github/system/kit.dark.html b/design-systems/github/system/kit.dark.html new file mode 100644 index 000000000..0ceb824da --- /dev/null +++ b/design-systems/github/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + GitHub - dark component kit + + + +
    +
    +
    +

    Developer Tools system

    +

    GitHub component kit

    +

    Bundled Open Design package for GitHub, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/github/system/kit.html b/design-systems/github/system/kit.html new file mode 100644 index 000000000..8e37fb9c8 --- /dev/null +++ b/design-systems/github/system/kit.html @@ -0,0 +1,149 @@ + + + + + + GitHub - component kit + + + +
    +
    +
    +

    Developer Tools system

    +

    GitHub component kit

    +

    Bundled Open Design package for GitHub, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/github/system/tokens.default.json b/design-systems/github/system/tokens.default.json new file mode 100644 index 000000000..2c2273340 --- /dev/null +++ b/design-systems/github/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#0969da", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "#0550ae", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 14, + "borderRadius": 6 +} diff --git a/design-systems/glassmorphism/system/artifacts/deck.html b/design-systems/glassmorphism/system/artifacts/deck.html new file mode 100644 index 000000000..d43a646f3 --- /dev/null +++ b/design-systems/glassmorphism/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Glassmorphism - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Glassmorphism Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Glassmorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/glassmorphism/system/artifacts/email.html b/design-systems/glassmorphism/system/artifacts/email.html new file mode 100644 index 000000000..362c2fa97 --- /dev/null +++ b/design-systems/glassmorphism/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Glassmorphism - Email + + + +
    +
    +
    +

    Email module

    +

    Glassmorphism Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Glassmorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/glassmorphism/system/artifacts/form.html b/design-systems/glassmorphism/system/artifacts/form.html new file mode 100644 index 000000000..e02a8b63e --- /dev/null +++ b/design-systems/glassmorphism/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Glassmorphism - Form page + + + +
    +
    +
    +

    Form module

    +

    Glassmorphism Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Glassmorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/glassmorphism/system/artifacts/landing.html b/design-systems/glassmorphism/system/artifacts/landing.html new file mode 100644 index 000000000..476ccd94a --- /dev/null +++ b/design-systems/glassmorphism/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Glassmorphism - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Glassmorphism Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Glassmorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/glassmorphism/system/artifacts/newsletter.html b/design-systems/glassmorphism/system/artifacts/newsletter.html new file mode 100644 index 000000000..c04794be2 --- /dev/null +++ b/design-systems/glassmorphism/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Glassmorphism - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Glassmorphism Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Glassmorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/glassmorphism/system/artifacts/poster.html b/design-systems/glassmorphism/system/artifacts/poster.html new file mode 100644 index 000000000..34277451c --- /dev/null +++ b/design-systems/glassmorphism/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Glassmorphism - Poster + + + +
    +
    +
    +

    Poster module

    +

    Glassmorphism Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Glassmorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/glassmorphism/system/index.html b/design-systems/glassmorphism/system/index.html new file mode 100644 index 000000000..d71f115c1 --- /dev/null +++ b/design-systems/glassmorphism/system/index.html @@ -0,0 +1,128 @@ + + + + + + Glassmorphism - system assets + + + +
    +

    Morphism & Effects

    +

    Glassmorphism system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/glassmorphism/system/kit.dark.html b/design-systems/glassmorphism/system/kit.dark.html new file mode 100644 index 000000000..fd8425807 --- /dev/null +++ b/design-systems/glassmorphism/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Glassmorphism - dark component kit + + + +
    +
    +
    +

    Morphism & Effects system

    +

    Glassmorphism component kit

    +

    Bundled Open Design package for Glassmorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/glassmorphism/system/kit.html b/design-systems/glassmorphism/system/kit.html new file mode 100644 index 000000000..1bf6d7465 --- /dev/null +++ b/design-systems/glassmorphism/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Glassmorphism - component kit + + + +
    +
    +
    +

    Morphism & Effects system

    +

    Glassmorphism component kit

    +

    Bundled Open Design package for Glassmorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/glassmorphism/system/tokens.default.json b/design-systems/glassmorphism/system/tokens.default.json new file mode 100644 index 000000000..84f6563b9 --- /dev/null +++ b/design-systems/glassmorphism/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#4f8cff", + "colorPrimaryBg": "rgba(238, 246, 255, 0.72)", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 24 +} diff --git a/design-systems/gradient/system/artifacts/deck.html b/design-systems/gradient/system/artifacts/deck.html new file mode 100644 index 000000000..e5195c9e1 --- /dev/null +++ b/design-systems/gradient/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Gradient - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Gradient Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Gradient, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/gradient/system/artifacts/email.html b/design-systems/gradient/system/artifacts/email.html new file mode 100644 index 000000000..2a679df1e --- /dev/null +++ b/design-systems/gradient/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Gradient - Email + + + +
    +
    +
    +

    Email module

    +

    Gradient Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Gradient, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/gradient/system/artifacts/form.html b/design-systems/gradient/system/artifacts/form.html new file mode 100644 index 000000000..858f2fbf7 --- /dev/null +++ b/design-systems/gradient/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Gradient - Form page + + + +
    +
    +
    +

    Form module

    +

    Gradient Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Gradient, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/gradient/system/artifacts/landing.html b/design-systems/gradient/system/artifacts/landing.html new file mode 100644 index 000000000..aeb15805f --- /dev/null +++ b/design-systems/gradient/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Gradient - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Gradient Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Gradient, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/gradient/system/artifacts/newsletter.html b/design-systems/gradient/system/artifacts/newsletter.html new file mode 100644 index 000000000..5453c8f48 --- /dev/null +++ b/design-systems/gradient/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Gradient - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Gradient Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Gradient, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/gradient/system/artifacts/poster.html b/design-systems/gradient/system/artifacts/poster.html new file mode 100644 index 000000000..48fca4ea9 --- /dev/null +++ b/design-systems/gradient/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Gradient - Poster + + + +
    +
    +
    +

    Poster module

    +

    Gradient Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Gradient, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/gradient/system/index.html b/design-systems/gradient/system/index.html new file mode 100644 index 000000000..a1954cca7 --- /dev/null +++ b/design-systems/gradient/system/index.html @@ -0,0 +1,128 @@ + + + + + + Gradient - system assets + + + +
    +

    Morphism & Effects

    +

    Gradient system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/gradient/system/kit.dark.html b/design-systems/gradient/system/kit.dark.html new file mode 100644 index 000000000..7f9312b28 --- /dev/null +++ b/design-systems/gradient/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Gradient - dark component kit + + + +
    +
    +
    +

    Morphism & Effects system

    +

    Gradient component kit

    +

    Bundled Open Design package for Gradient, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/gradient/system/kit.html b/design-systems/gradient/system/kit.html new file mode 100644 index 000000000..9ea728831 --- /dev/null +++ b/design-systems/gradient/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Gradient - component kit + + + +
    +
    +
    +

    Morphism & Effects system

    +

    Gradient component kit

    +

    Bundled Open Design package for Gradient, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/gradient/system/tokens.default.json b/design-systems/gradient/system/tokens.default.json new file mode 100644 index 000000000..db112bda9 --- /dev/null +++ b/design-systems/gradient/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#7c3aed", + "colorPrimaryBg": "#efe7ff", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 20 +} diff --git a/design-systems/hashicorp/system/artifacts/deck.html b/design-systems/hashicorp/system/artifacts/deck.html new file mode 100644 index 000000000..8b0ef3073 --- /dev/null +++ b/design-systems/hashicorp/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + HashiCorp - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    HashiCorp Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for HashiCorp, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/hashicorp/system/artifacts/email.html b/design-systems/hashicorp/system/artifacts/email.html new file mode 100644 index 000000000..57e409876 --- /dev/null +++ b/design-systems/hashicorp/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + HashiCorp - Email + + + +
    +
    +
    +

    Email module

    +

    HashiCorp Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for HashiCorp, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/hashicorp/system/artifacts/form.html b/design-systems/hashicorp/system/artifacts/form.html new file mode 100644 index 000000000..c7eae848b --- /dev/null +++ b/design-systems/hashicorp/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + HashiCorp - Form page + + + +
    +
    +
    +

    Form module

    +

    HashiCorp Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for HashiCorp, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/hashicorp/system/artifacts/landing.html b/design-systems/hashicorp/system/artifacts/landing.html new file mode 100644 index 000000000..ed70cc2c5 --- /dev/null +++ b/design-systems/hashicorp/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + HashiCorp - Landing page + + + +
    +
    +
    +

    Landing module

    +

    HashiCorp Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for HashiCorp, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/hashicorp/system/artifacts/newsletter.html b/design-systems/hashicorp/system/artifacts/newsletter.html new file mode 100644 index 000000000..518cfb680 --- /dev/null +++ b/design-systems/hashicorp/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + HashiCorp - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    HashiCorp Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for HashiCorp, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/hashicorp/system/artifacts/poster.html b/design-systems/hashicorp/system/artifacts/poster.html new file mode 100644 index 000000000..9d448be08 --- /dev/null +++ b/design-systems/hashicorp/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + HashiCorp - Poster + + + +
    +
    +
    +

    Poster module

    +

    HashiCorp Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for HashiCorp, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/hashicorp/system/index.html b/design-systems/hashicorp/system/index.html new file mode 100644 index 000000000..3eab98e66 --- /dev/null +++ b/design-systems/hashicorp/system/index.html @@ -0,0 +1,128 @@ + + + + + + HashiCorp - system assets + + + +
    +

    Backend & Data

    +

    HashiCorp system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/hashicorp/system/kit.dark.html b/design-systems/hashicorp/system/kit.dark.html new file mode 100644 index 000000000..f102a1d75 --- /dev/null +++ b/design-systems/hashicorp/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + HashiCorp - dark component kit + + + +
    +
    +
    +

    Backend & Data system

    +

    HashiCorp component kit

    +

    Bundled Open Design package for HashiCorp, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/hashicorp/system/kit.html b/design-systems/hashicorp/system/kit.html new file mode 100644 index 000000000..b305f0485 --- /dev/null +++ b/design-systems/hashicorp/system/kit.html @@ -0,0 +1,149 @@ + + + + + + HashiCorp - component kit + + + +
    +
    +
    +

    Backend & Data system

    +

    HashiCorp component kit

    +

    Bundled Open Design package for HashiCorp, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/hashicorp/system/tokens.default.json b/design-systems/hashicorp/system/tokens.default.json new file mode 100644 index 000000000..a6d26e2fc --- /dev/null +++ b/design-systems/hashicorp/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#1060ff", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "#2b89ff", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 8 +} diff --git a/design-systems/hud/system/artifacts/deck.html b/design-systems/hud/system/artifacts/deck.html new file mode 100644 index 000000000..f3e041e5a --- /dev/null +++ b/design-systems/hud/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + HUD Design System - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    HUD Design System Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for HUD Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/hud/system/artifacts/email.html b/design-systems/hud/system/artifacts/email.html new file mode 100644 index 000000000..b01248ce6 --- /dev/null +++ b/design-systems/hud/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + HUD Design System - Email + + + +
    +
    +
    +

    Email module

    +

    HUD Design System Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for HUD Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/hud/system/artifacts/form.html b/design-systems/hud/system/artifacts/form.html new file mode 100644 index 000000000..fe3bb48b6 --- /dev/null +++ b/design-systems/hud/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + HUD Design System - Form page + + + +
    +
    +
    +

    Form module

    +

    HUD Design System Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for HUD Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/hud/system/artifacts/landing.html b/design-systems/hud/system/artifacts/landing.html new file mode 100644 index 000000000..89fa6b7b0 --- /dev/null +++ b/design-systems/hud/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + HUD Design System - Landing page + + + +
    +
    +
    +

    Landing module

    +

    HUD Design System Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for HUD Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/hud/system/artifacts/newsletter.html b/design-systems/hud/system/artifacts/newsletter.html new file mode 100644 index 000000000..3f8120474 --- /dev/null +++ b/design-systems/hud/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + HUD Design System - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    HUD Design System Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for HUD Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/hud/system/artifacts/poster.html b/design-systems/hud/system/artifacts/poster.html new file mode 100644 index 000000000..54820c4f7 --- /dev/null +++ b/design-systems/hud/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + HUD Design System - Poster + + + +
    +
    +
    +

    Poster module

    +

    HUD Design System Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for HUD Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/hud/system/index.html b/design-systems/hud/system/index.html new file mode 100644 index 000000000..611df8966 --- /dev/null +++ b/design-systems/hud/system/index.html @@ -0,0 +1,128 @@ + + + + + + HUD Design System - system assets + + + +
    +

    Themed & Unique

    +

    HUD Design System system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/hud/system/kit.dark.html b/design-systems/hud/system/kit.dark.html new file mode 100644 index 000000000..83a61cbee --- /dev/null +++ b/design-systems/hud/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + HUD Design System - dark component kit + + + +
    +
    +
    +

    Themed & Unique system

    +

    HUD Design System component kit

    +

    Bundled Open Design package for HUD Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/hud/system/kit.html b/design-systems/hud/system/kit.html new file mode 100644 index 000000000..bae7bf192 --- /dev/null +++ b/design-systems/hud/system/kit.html @@ -0,0 +1,149 @@ + + + + + + HUD Design System - component kit + + + +
    +
    +
    +

    Themed & Unique system

    +

    HUD Design System component kit

    +

    Bundled Open Design package for HUD Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/hud/system/tokens.default.json b/design-systems/hud/system/tokens.default.json new file mode 100644 index 000000000..4ec6f0c7b --- /dev/null +++ b/design-systems/hud/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#60a5fa", + "colorPrimaryBg": "#1b2233", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 14, + "borderRadius": 16 +} diff --git a/design-systems/huggingface/system/artifacts/deck.html b/design-systems/huggingface/system/artifacts/deck.html new file mode 100644 index 000000000..f7901698b --- /dev/null +++ b/design-systems/huggingface/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Hugging Face - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Hugging Face Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Hugging Face, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/huggingface/system/artifacts/email.html b/design-systems/huggingface/system/artifacts/email.html new file mode 100644 index 000000000..7554a3a5d --- /dev/null +++ b/design-systems/huggingface/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Hugging Face - Email + + + +
    +
    +
    +

    Email module

    +

    Hugging Face Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Hugging Face, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/huggingface/system/artifacts/form.html b/design-systems/huggingface/system/artifacts/form.html new file mode 100644 index 000000000..a6ac41078 --- /dev/null +++ b/design-systems/huggingface/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Hugging Face - Form page + + + +
    +
    +
    +

    Form module

    +

    Hugging Face Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Hugging Face, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/huggingface/system/artifacts/landing.html b/design-systems/huggingface/system/artifacts/landing.html new file mode 100644 index 000000000..2c16f2e4b --- /dev/null +++ b/design-systems/huggingface/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Hugging Face - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Hugging Face Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Hugging Face, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/huggingface/system/artifacts/newsletter.html b/design-systems/huggingface/system/artifacts/newsletter.html new file mode 100644 index 000000000..e4793fdc9 --- /dev/null +++ b/design-systems/huggingface/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Hugging Face - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Hugging Face Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Hugging Face, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/huggingface/system/artifacts/poster.html b/design-systems/huggingface/system/artifacts/poster.html new file mode 100644 index 000000000..4ec7a8ece --- /dev/null +++ b/design-systems/huggingface/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Hugging Face - Poster + + + +
    +
    +
    +

    Poster module

    +

    Hugging Face Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Hugging Face, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/huggingface/system/index.html b/design-systems/huggingface/system/index.html new file mode 100644 index 000000000..13fdaba5e --- /dev/null +++ b/design-systems/huggingface/system/index.html @@ -0,0 +1,128 @@ + + + + + + Hugging Face - system assets + + + +
    +

    AI & LLM

    +

    Hugging Face system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/huggingface/system/kit.dark.html b/design-systems/huggingface/system/kit.dark.html new file mode 100644 index 000000000..a04233004 --- /dev/null +++ b/design-systems/huggingface/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Hugging Face - dark component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    Hugging Face component kit

    +

    Bundled Open Design package for Hugging Face, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/huggingface/system/kit.html b/design-systems/huggingface/system/kit.html new file mode 100644 index 000000000..ebfa95620 --- /dev/null +++ b/design-systems/huggingface/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Hugging Face - component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    Hugging Face component kit

    +

    Bundled Open Design package for Hugging Face, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/huggingface/system/tokens.default.json b/design-systems/huggingface/system/tokens.default.json new file mode 100644 index 000000000..ff8c1f4a9 --- /dev/null +++ b/design-systems/huggingface/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#ffd21e", + "colorPrimaryBg": "#fff4cc", + "colorPrimaryHover": "#f59e0b", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 20%)", + "fontSize": 15, + "borderRadius": 6 +} diff --git a/design-systems/ibm/system/artifacts/deck.html b/design-systems/ibm/system/artifacts/deck.html new file mode 100644 index 000000000..b7a5a3d61 --- /dev/null +++ b/design-systems/ibm/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + IBM - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    IBM Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for IBM, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/ibm/system/artifacts/email.html b/design-systems/ibm/system/artifacts/email.html new file mode 100644 index 000000000..2c82ac91a --- /dev/null +++ b/design-systems/ibm/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + IBM - Email + + + +
    +
    +
    +

    Email module

    +

    IBM Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for IBM, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/ibm/system/artifacts/form.html b/design-systems/ibm/system/artifacts/form.html new file mode 100644 index 000000000..5f755e071 --- /dev/null +++ b/design-systems/ibm/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + IBM - Form page + + + +
    +
    +
    +

    Form module

    +

    IBM Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for IBM, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/ibm/system/artifacts/landing.html b/design-systems/ibm/system/artifacts/landing.html new file mode 100644 index 000000000..b66cdc4d4 --- /dev/null +++ b/design-systems/ibm/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + IBM - Landing page + + + +
    +
    +
    +

    Landing module

    +

    IBM Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for IBM, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/ibm/system/artifacts/newsletter.html b/design-systems/ibm/system/artifacts/newsletter.html new file mode 100644 index 000000000..874d492e3 --- /dev/null +++ b/design-systems/ibm/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + IBM - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    IBM Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for IBM, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/ibm/system/artifacts/poster.html b/design-systems/ibm/system/artifacts/poster.html new file mode 100644 index 000000000..73781a910 --- /dev/null +++ b/design-systems/ibm/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + IBM - Poster + + + +
    +
    +
    +

    Poster module

    +

    IBM Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for IBM, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/ibm/system/index.html b/design-systems/ibm/system/index.html new file mode 100644 index 000000000..616d77f36 --- /dev/null +++ b/design-systems/ibm/system/index.html @@ -0,0 +1,128 @@ + + + + + + IBM - system assets + + + +
    +

    Media & Consumer

    +

    IBM system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/ibm/system/kit.dark.html b/design-systems/ibm/system/kit.dark.html new file mode 100644 index 000000000..7a7f7062f --- /dev/null +++ b/design-systems/ibm/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + IBM - dark component kit + + + +
    +
    +
    +

    Media & Consumer system

    +

    IBM component kit

    +

    Bundled Open Design package for IBM, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/ibm/system/kit.html b/design-systems/ibm/system/kit.html new file mode 100644 index 000000000..e7ddf3e00 --- /dev/null +++ b/design-systems/ibm/system/kit.html @@ -0,0 +1,149 @@ + + + + + + IBM - component kit + + + +
    +
    +
    +

    Media & Consumer system

    +

    IBM component kit

    +

    Bundled Open Design package for IBM, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/ibm/system/tokens.default.json b/design-systems/ibm/system/tokens.default.json new file mode 100644 index 000000000..6f2b261ed --- /dev/null +++ b/design-systems/ibm/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#0f62fe", + "colorPrimaryBg": "#edf5ff", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 0 +} diff --git a/design-systems/intercom/system/artifacts/deck.html b/design-systems/intercom/system/artifacts/deck.html new file mode 100644 index 000000000..178d63f91 --- /dev/null +++ b/design-systems/intercom/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Intercom - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Intercom Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Intercom, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/intercom/system/artifacts/email.html b/design-systems/intercom/system/artifacts/email.html new file mode 100644 index 000000000..71efcbdfe --- /dev/null +++ b/design-systems/intercom/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Intercom - Email + + + +
    +
    +
    +

    Email module

    +

    Intercom Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Intercom, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/intercom/system/artifacts/form.html b/design-systems/intercom/system/artifacts/form.html new file mode 100644 index 000000000..d8c9914f7 --- /dev/null +++ b/design-systems/intercom/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Intercom - Form page + + + +
    +
    +
    +

    Form module

    +

    Intercom Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Intercom, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/intercom/system/artifacts/landing.html b/design-systems/intercom/system/artifacts/landing.html new file mode 100644 index 000000000..f80cefc00 --- /dev/null +++ b/design-systems/intercom/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Intercom - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Intercom Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Intercom, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/intercom/system/artifacts/newsletter.html b/design-systems/intercom/system/artifacts/newsletter.html new file mode 100644 index 000000000..bd0efe835 --- /dev/null +++ b/design-systems/intercom/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Intercom - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Intercom Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Intercom, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/intercom/system/artifacts/poster.html b/design-systems/intercom/system/artifacts/poster.html new file mode 100644 index 000000000..0b085ac25 --- /dev/null +++ b/design-systems/intercom/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Intercom - Poster + + + +
    +
    +
    +

    Poster module

    +

    Intercom Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Intercom, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/intercom/system/index.html b/design-systems/intercom/system/index.html new file mode 100644 index 000000000..29781723c --- /dev/null +++ b/design-systems/intercom/system/index.html @@ -0,0 +1,128 @@ + + + + + + Intercom - system assets + + + +
    +

    Productivity & SaaS

    +

    Intercom system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/intercom/system/kit.dark.html b/design-systems/intercom/system/kit.dark.html new file mode 100644 index 000000000..5b82ff19b --- /dev/null +++ b/design-systems/intercom/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Intercom - dark component kit + + + +
    +
    +
    +

    Productivity & SaaS system

    +

    Intercom component kit

    +

    Bundled Open Design package for Intercom, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/intercom/system/kit.html b/design-systems/intercom/system/kit.html new file mode 100644 index 000000000..92d7bf22f --- /dev/null +++ b/design-systems/intercom/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Intercom - component kit + + + +
    +
    +
    +

    Productivity & SaaS system

    +

    Intercom component kit

    +

    Bundled Open Design package for Intercom, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/intercom/system/tokens.default.json b/design-systems/intercom/system/tokens.default.json new file mode 100644 index 000000000..c219f1cdb --- /dev/null +++ b/design-systems/intercom/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#ff5600", + "colorPrimaryBg": "#faf9f6", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 6 +} diff --git a/design-systems/kami/system/artifacts/deck.html b/design-systems/kami/system/artifacts/deck.html new file mode 100644 index 000000000..c722b80f3 --- /dev/null +++ b/design-systems/kami/system/artifacts/deck.html @@ -0,0 +1,153 @@ + + + + + + kami (紙 / 纸) - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    kami (紙 / 纸) Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for kami (紙 / 纸), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/kami/system/artifacts/email.html b/design-systems/kami/system/artifacts/email.html new file mode 100644 index 000000000..a2ed1f058 --- /dev/null +++ b/design-systems/kami/system/artifacts/email.html @@ -0,0 +1,153 @@ + + + + + + kami (紙 / 纸) - Email + + + +
    +
    +
    +

    Email module

    +

    kami (紙 / 纸) Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for kami (紙 / 纸), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/kami/system/artifacts/form.html b/design-systems/kami/system/artifacts/form.html new file mode 100644 index 000000000..bb451e97a --- /dev/null +++ b/design-systems/kami/system/artifacts/form.html @@ -0,0 +1,153 @@ + + + + + + kami (紙 / 纸) - Form page + + + +
    +
    +
    +

    Form module

    +

    kami (紙 / 纸) Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for kami (紙 / 纸), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/kami/system/artifacts/landing.html b/design-systems/kami/system/artifacts/landing.html new file mode 100644 index 000000000..fa705b8d7 --- /dev/null +++ b/design-systems/kami/system/artifacts/landing.html @@ -0,0 +1,153 @@ + + + + + + kami (紙 / 纸) - Landing page + + + +
    +
    +
    +

    Landing module

    +

    kami (紙 / 纸) Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for kami (紙 / 纸), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/kami/system/artifacts/newsletter.html b/design-systems/kami/system/artifacts/newsletter.html new file mode 100644 index 000000000..7dd729aa7 --- /dev/null +++ b/design-systems/kami/system/artifacts/newsletter.html @@ -0,0 +1,153 @@ + + + + + + kami (紙 / 纸) - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    kami (紙 / 纸) Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for kami (紙 / 纸), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/kami/system/artifacts/poster.html b/design-systems/kami/system/artifacts/poster.html new file mode 100644 index 000000000..78894ae15 --- /dev/null +++ b/design-systems/kami/system/artifacts/poster.html @@ -0,0 +1,153 @@ + + + + + + kami (紙 / 纸) - Poster + + + +
    +
    +
    +

    Poster module

    +

    kami (紙 / 纸) Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for kami (紙 / 纸), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/kami/system/index.html b/design-systems/kami/system/index.html new file mode 100644 index 000000000..68ea7dca1 --- /dev/null +++ b/design-systems/kami/system/index.html @@ -0,0 +1,144 @@ + + + + + + kami (紙 / 纸) - system assets + + + +
    +

    Editorial & Print

    +

    kami (紙 / 纸) system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/kami/system/kit.dark.html b/design-systems/kami/system/kit.dark.html new file mode 100644 index 000000000..e2a16e9ce --- /dev/null +++ b/design-systems/kami/system/kit.dark.html @@ -0,0 +1,165 @@ + + + + + + kami (紙 / 纸) - dark component kit + + + +
    +
    +
    +

    Editorial & Print system

    +

    kami (紙 / 纸) component kit

    +

    Bundled Open Design package for kami (紙 / 纸), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/kami/system/kit.html b/design-systems/kami/system/kit.html new file mode 100644 index 000000000..b4ce75b2a --- /dev/null +++ b/design-systems/kami/system/kit.html @@ -0,0 +1,165 @@ + + + + + + kami (紙 / 纸) - component kit + + + +
    +
    +
    +

    Editorial & Print system

    +

    kami (紙 / 纸) component kit

    +

    Bundled Open Design package for kami (紙 / 纸), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/kami/system/tokens.default.json b/design-systems/kami/system/tokens.default.json new file mode 100644 index 000000000..8f83a19e2 --- /dev/null +++ b/design-systems/kami/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#1b365d", + "colorPrimaryBg": "#e8e6dc", + "colorPrimaryHover": "var(--accent)", + "colorPrimaryActive": "#142a48", + "fontSize": 14, + "borderRadius": 8 +} diff --git a/design-systems/kraken/system/artifacts/deck.html b/design-systems/kraken/system/artifacts/deck.html new file mode 100644 index 000000000..4027c3f63 --- /dev/null +++ b/design-systems/kraken/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Kraken - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Kraken Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Kraken, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/kraken/system/artifacts/email.html b/design-systems/kraken/system/artifacts/email.html new file mode 100644 index 000000000..7f5ff3d99 --- /dev/null +++ b/design-systems/kraken/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Kraken - Email + + + +
    +
    +
    +

    Email module

    +

    Kraken Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Kraken, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/kraken/system/artifacts/form.html b/design-systems/kraken/system/artifacts/form.html new file mode 100644 index 000000000..dda8022ae --- /dev/null +++ b/design-systems/kraken/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Kraken - Form page + + + +
    +
    +
    +

    Form module

    +

    Kraken Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Kraken, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/kraken/system/artifacts/landing.html b/design-systems/kraken/system/artifacts/landing.html new file mode 100644 index 000000000..34869171c --- /dev/null +++ b/design-systems/kraken/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Kraken - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Kraken Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Kraken, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/kraken/system/artifacts/newsletter.html b/design-systems/kraken/system/artifacts/newsletter.html new file mode 100644 index 000000000..6521204d7 --- /dev/null +++ b/design-systems/kraken/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Kraken - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Kraken Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Kraken, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/kraken/system/artifacts/poster.html b/design-systems/kraken/system/artifacts/poster.html new file mode 100644 index 000000000..e6d68e8ae --- /dev/null +++ b/design-systems/kraken/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Kraken - Poster + + + +
    +
    +
    +

    Poster module

    +

    Kraken Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Kraken, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/kraken/system/index.html b/design-systems/kraken/system/index.html new file mode 100644 index 000000000..302e59a98 --- /dev/null +++ b/design-systems/kraken/system/index.html @@ -0,0 +1,128 @@ + + + + + + Kraken - system assets + + + +
    +

    Fintech & Crypto

    +

    Kraken system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/kraken/system/kit.dark.html b/design-systems/kraken/system/kit.dark.html new file mode 100644 index 000000000..ec51dabe3 --- /dev/null +++ b/design-systems/kraken/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Kraken - dark component kit + + + +
    +
    +
    +

    Fintech & Crypto system

    +

    Kraken component kit

    +

    Bundled Open Design package for Kraken, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/kraken/system/kit.html b/design-systems/kraken/system/kit.html new file mode 100644 index 000000000..af51c9bba --- /dev/null +++ b/design-systems/kraken/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Kraken - component kit + + + +
    +
    +
    +

    Fintech & Crypto system

    +

    Kraken component kit

    +

    Bundled Open Design package for Kraken, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/kraken/system/tokens.default.json b/design-systems/kraken/system/tokens.default.json new file mode 100644 index 000000000..058909502 --- /dev/null +++ b/design-systems/kraken/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#7132f5", + "colorPrimaryBg": "#1b2450", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 15, + "borderRadius": 12 +} diff --git a/design-systems/lamborghini/system/artifacts/deck.html b/design-systems/lamborghini/system/artifacts/deck.html new file mode 100644 index 000000000..0af0af28e --- /dev/null +++ b/design-systems/lamborghini/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Lamborghini - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Lamborghini Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Lamborghini, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/lamborghini/system/artifacts/email.html b/design-systems/lamborghini/system/artifacts/email.html new file mode 100644 index 000000000..49ed2e183 --- /dev/null +++ b/design-systems/lamborghini/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Lamborghini - Email + + + +
    +
    +
    +

    Email module

    +

    Lamborghini Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Lamborghini, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/lamborghini/system/artifacts/form.html b/design-systems/lamborghini/system/artifacts/form.html new file mode 100644 index 000000000..9cff3e754 --- /dev/null +++ b/design-systems/lamborghini/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Lamborghini - Form page + + + +
    +
    +
    +

    Form module

    +

    Lamborghini Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Lamborghini, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/lamborghini/system/artifacts/landing.html b/design-systems/lamborghini/system/artifacts/landing.html new file mode 100644 index 000000000..a1fc9261a --- /dev/null +++ b/design-systems/lamborghini/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Lamborghini - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Lamborghini Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Lamborghini, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/lamborghini/system/artifacts/newsletter.html b/design-systems/lamborghini/system/artifacts/newsletter.html new file mode 100644 index 000000000..728dc3cd1 --- /dev/null +++ b/design-systems/lamborghini/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Lamborghini - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Lamborghini Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Lamborghini, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/lamborghini/system/artifacts/poster.html b/design-systems/lamborghini/system/artifacts/poster.html new file mode 100644 index 000000000..6a3b7628f --- /dev/null +++ b/design-systems/lamborghini/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Lamborghini - Poster + + + +
    +
    +
    +

    Poster module

    +

    Lamborghini Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Lamborghini, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/lamborghini/system/index.html b/design-systems/lamborghini/system/index.html new file mode 100644 index 000000000..44cf89fa9 --- /dev/null +++ b/design-systems/lamborghini/system/index.html @@ -0,0 +1,128 @@ + + + + + + Lamborghini - system assets + + + +
    +

    Automotive

    +

    Lamborghini system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/lamborghini/system/kit.dark.html b/design-systems/lamborghini/system/kit.dark.html new file mode 100644 index 000000000..fc4ba2bbb --- /dev/null +++ b/design-systems/lamborghini/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Lamborghini - dark component kit + + + +
    +
    +
    +

    Automotive system

    +

    Lamborghini component kit

    +

    Bundled Open Design package for Lamborghini, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/lamborghini/system/kit.html b/design-systems/lamborghini/system/kit.html new file mode 100644 index 000000000..99d22a5bc --- /dev/null +++ b/design-systems/lamborghini/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Lamborghini - component kit + + + +
    +
    +
    +

    Automotive system

    +

    Lamborghini component kit

    +

    Bundled Open Design package for Lamborghini, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/lamborghini/system/tokens.default.json b/design-systems/lamborghini/system/tokens.default.json new file mode 100644 index 000000000..8c1f6e202 --- /dev/null +++ b/design-systems/lamborghini/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#d4af37", + "colorPrimaryBg": "#211b0b", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 6 +} diff --git a/design-systems/levels/system/artifacts/deck.html b/design-systems/levels/system/artifacts/deck.html new file mode 100644 index 000000000..d0cadf243 --- /dev/null +++ b/design-systems/levels/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Levels - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Levels Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Levels, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/levels/system/artifacts/email.html b/design-systems/levels/system/artifacts/email.html new file mode 100644 index 000000000..7daddd011 --- /dev/null +++ b/design-systems/levels/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Levels - Email + + + +
    +
    +
    +

    Email module

    +

    Levels Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Levels, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/levels/system/artifacts/form.html b/design-systems/levels/system/artifacts/form.html new file mode 100644 index 000000000..686b26b88 --- /dev/null +++ b/design-systems/levels/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Levels - Form page + + + +
    +
    +
    +

    Form module

    +

    Levels Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Levels, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/levels/system/artifacts/landing.html b/design-systems/levels/system/artifacts/landing.html new file mode 100644 index 000000000..519e92829 --- /dev/null +++ b/design-systems/levels/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Levels - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Levels Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Levels, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/levels/system/artifacts/newsletter.html b/design-systems/levels/system/artifacts/newsletter.html new file mode 100644 index 000000000..43c4b508b --- /dev/null +++ b/design-systems/levels/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Levels - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Levels Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Levels, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/levels/system/artifacts/poster.html b/design-systems/levels/system/artifacts/poster.html new file mode 100644 index 000000000..f635732d0 --- /dev/null +++ b/design-systems/levels/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Levels - Poster + + + +
    +
    +
    +

    Poster module

    +

    Levels Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Levels, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/levels/system/index.html b/design-systems/levels/system/index.html new file mode 100644 index 000000000..f7c1c614c --- /dev/null +++ b/design-systems/levels/system/index.html @@ -0,0 +1,128 @@ + + + + + + Levels - system assets + + + +
    +

    Layout & Structure

    +

    Levels system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/levels/system/kit.dark.html b/design-systems/levels/system/kit.dark.html new file mode 100644 index 000000000..664436ec9 --- /dev/null +++ b/design-systems/levels/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Levels - dark component kit + + + +
    +
    +
    +

    Layout & Structure system

    +

    Levels component kit

    +

    Bundled Open Design package for Levels, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/levels/system/kit.html b/design-systems/levels/system/kit.html new file mode 100644 index 000000000..edd0c0afd --- /dev/null +++ b/design-systems/levels/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Levels - component kit + + + +
    +
    +
    +

    Layout & Structure system

    +

    Levels component kit

    +

    Bundled Open Design package for Levels, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/levels/system/tokens.default.json b/design-systems/levels/system/tokens.default.json new file mode 100644 index 000000000..90f533e0e --- /dev/null +++ b/design-systems/levels/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#2f8f46", + "colorPrimaryBg": "#eef7ed", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 18 +} diff --git a/design-systems/linear-app/system/artifacts/deck.html b/design-systems/linear-app/system/artifacts/deck.html new file mode 100644 index 000000000..81fc1780d --- /dev/null +++ b/design-systems/linear-app/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Linear - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Linear Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Linear, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/linear-app/system/artifacts/email.html b/design-systems/linear-app/system/artifacts/email.html new file mode 100644 index 000000000..6881f6208 --- /dev/null +++ b/design-systems/linear-app/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Linear - Email + + + +
    +
    +
    +

    Email module

    +

    Linear Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Linear, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/linear-app/system/artifacts/form.html b/design-systems/linear-app/system/artifacts/form.html new file mode 100644 index 000000000..dd5e94d42 --- /dev/null +++ b/design-systems/linear-app/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Linear - Form page + + + +
    +
    +
    +

    Form module

    +

    Linear Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Linear, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/linear-app/system/artifacts/landing.html b/design-systems/linear-app/system/artifacts/landing.html new file mode 100644 index 000000000..2b102b18e --- /dev/null +++ b/design-systems/linear-app/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Linear - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Linear Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Linear, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/linear-app/system/artifacts/newsletter.html b/design-systems/linear-app/system/artifacts/newsletter.html new file mode 100644 index 000000000..6a9cbd071 --- /dev/null +++ b/design-systems/linear-app/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Linear - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Linear Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Linear, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/linear-app/system/artifacts/poster.html b/design-systems/linear-app/system/artifacts/poster.html new file mode 100644 index 000000000..631f608b3 --- /dev/null +++ b/design-systems/linear-app/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Linear - Poster + + + +
    +
    +
    +

    Poster module

    +

    Linear Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Linear, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/linear-app/system/index.html b/design-systems/linear-app/system/index.html new file mode 100644 index 000000000..02e75bbf0 --- /dev/null +++ b/design-systems/linear-app/system/index.html @@ -0,0 +1,128 @@ + + + + + + Linear - system assets + + + +
    +

    Productivity & SaaS

    +

    Linear system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/linear-app/system/kit.dark.html b/design-systems/linear-app/system/kit.dark.html new file mode 100644 index 000000000..a2eb7a1e3 --- /dev/null +++ b/design-systems/linear-app/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Linear - dark component kit + + + +
    +
    +
    +

    Productivity & SaaS system

    +

    Linear component kit

    +

    Bundled Open Design package for Linear, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/linear-app/system/kit.html b/design-systems/linear-app/system/kit.html new file mode 100644 index 000000000..632cc0341 --- /dev/null +++ b/design-systems/linear-app/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Linear - component kit + + + +
    +
    +
    +

    Productivity & SaaS system

    +

    Linear component kit

    +

    Bundled Open Design package for Linear, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/linear-app/system/tokens.default.json b/design-systems/linear-app/system/tokens.default.json new file mode 100644 index 000000000..107b56b23 --- /dev/null +++ b/design-systems/linear-app/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#5e6ad2", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "#828fff", + "colorPrimaryActive": "#4752c4", + "fontSize": 16, + "borderRadius": 8 +} diff --git a/design-systems/lingo/system/artifacts/deck.html b/design-systems/lingo/system/artifacts/deck.html new file mode 100644 index 000000000..c30b22454 --- /dev/null +++ b/design-systems/lingo/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Lingo - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Lingo Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Lingo, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/lingo/system/artifacts/email.html b/design-systems/lingo/system/artifacts/email.html new file mode 100644 index 000000000..851e025a7 --- /dev/null +++ b/design-systems/lingo/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Lingo - Email + + + +
    +
    +
    +

    Email module

    +

    Lingo Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Lingo, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/lingo/system/artifacts/form.html b/design-systems/lingo/system/artifacts/form.html new file mode 100644 index 000000000..8a10e3fb9 --- /dev/null +++ b/design-systems/lingo/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Lingo - Form page + + + +
    +
    +
    +

    Form module

    +

    Lingo Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Lingo, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/lingo/system/artifacts/landing.html b/design-systems/lingo/system/artifacts/landing.html new file mode 100644 index 000000000..fd5191bc8 --- /dev/null +++ b/design-systems/lingo/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Lingo - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Lingo Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Lingo, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/lingo/system/artifacts/newsletter.html b/design-systems/lingo/system/artifacts/newsletter.html new file mode 100644 index 000000000..31425e51a --- /dev/null +++ b/design-systems/lingo/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Lingo - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Lingo Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Lingo, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/lingo/system/artifacts/poster.html b/design-systems/lingo/system/artifacts/poster.html new file mode 100644 index 000000000..9d1b0a327 --- /dev/null +++ b/design-systems/lingo/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Lingo - Poster + + + +
    +
    +
    +

    Poster module

    +

    Lingo Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Lingo, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/lingo/system/index.html b/design-systems/lingo/system/index.html new file mode 100644 index 000000000..8598774ba --- /dev/null +++ b/design-systems/lingo/system/index.html @@ -0,0 +1,128 @@ + + + + + + Lingo - system assets + + + +
    +

    Creative & Artistic

    +

    Lingo system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/lingo/system/kit.dark.html b/design-systems/lingo/system/kit.dark.html new file mode 100644 index 000000000..71dd169fe --- /dev/null +++ b/design-systems/lingo/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Lingo - dark component kit + + + +
    +
    +
    +

    Creative & Artistic system

    +

    Lingo component kit

    +

    Bundled Open Design package for Lingo, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/lingo/system/kit.html b/design-systems/lingo/system/kit.html new file mode 100644 index 000000000..14687b20b --- /dev/null +++ b/design-systems/lingo/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Lingo - component kit + + + +
    +
    +
    +

    Creative & Artistic system

    +

    Lingo component kit

    +

    Bundled Open Design package for Lingo, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/lingo/system/tokens.default.json b/design-systems/lingo/system/tokens.default.json new file mode 100644 index 000000000..3286d922c --- /dev/null +++ b/design-systems/lingo/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#6d4aff", + "colorPrimaryBg": "#f1ecff", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/loom/system/artifacts/deck.html b/design-systems/loom/system/artifacts/deck.html new file mode 100644 index 000000000..73b50287d --- /dev/null +++ b/design-systems/loom/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Loom Design System - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Loom Design System Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Loom Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/loom/system/artifacts/email.html b/design-systems/loom/system/artifacts/email.html new file mode 100644 index 000000000..f32658c50 --- /dev/null +++ b/design-systems/loom/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Loom Design System - Email + + + +
    +
    +
    +

    Email module

    +

    Loom Design System Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Loom Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/loom/system/artifacts/form.html b/design-systems/loom/system/artifacts/form.html new file mode 100644 index 000000000..efa7d3c8a --- /dev/null +++ b/design-systems/loom/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Loom Design System - Form page + + + +
    +
    +
    +

    Form module

    +

    Loom Design System Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Loom Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/loom/system/artifacts/landing.html b/design-systems/loom/system/artifacts/landing.html new file mode 100644 index 000000000..c7737f874 --- /dev/null +++ b/design-systems/loom/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Loom Design System - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Loom Design System Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Loom Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/loom/system/artifacts/newsletter.html b/design-systems/loom/system/artifacts/newsletter.html new file mode 100644 index 000000000..ac3227cd9 --- /dev/null +++ b/design-systems/loom/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Loom Design System - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Loom Design System Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Loom Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/loom/system/artifacts/poster.html b/design-systems/loom/system/artifacts/poster.html new file mode 100644 index 000000000..24ca5ba04 --- /dev/null +++ b/design-systems/loom/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Loom Design System - Poster + + + +
    +
    +
    +

    Poster module

    +

    Loom Design System Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Loom Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/loom/system/index.html b/design-systems/loom/system/index.html new file mode 100644 index 000000000..b46e08a94 --- /dev/null +++ b/design-systems/loom/system/index.html @@ -0,0 +1,128 @@ + + + + + + Loom Design System - system assets + + + +
    +

    Themed & Unique

    +

    Loom Design System system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/loom/system/kit.dark.html b/design-systems/loom/system/kit.dark.html new file mode 100644 index 000000000..891b2ce43 --- /dev/null +++ b/design-systems/loom/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Loom Design System - dark component kit + + + +
    +
    +
    +

    Themed & Unique system

    +

    Loom Design System component kit

    +

    Bundled Open Design package for Loom Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/loom/system/kit.html b/design-systems/loom/system/kit.html new file mode 100644 index 000000000..f2a58545d --- /dev/null +++ b/design-systems/loom/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Loom Design System - component kit + + + +
    +
    +
    +

    Themed & Unique system

    +

    Loom Design System component kit

    +

    Bundled Open Design package for Loom Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/loom/system/tokens.default.json b/design-systems/loom/system/tokens.default.json new file mode 100644 index 000000000..8ae1f206e --- /dev/null +++ b/design-systems/loom/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#625df5", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "#5048e5", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 14, + "borderRadius": 6 +} diff --git a/design-systems/lovable/system/artifacts/deck.html b/design-systems/lovable/system/artifacts/deck.html new file mode 100644 index 000000000..e553f8d78 --- /dev/null +++ b/design-systems/lovable/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Lovable - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Lovable Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Lovable, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/lovable/system/artifacts/email.html b/design-systems/lovable/system/artifacts/email.html new file mode 100644 index 000000000..2da4a4d3f --- /dev/null +++ b/design-systems/lovable/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Lovable - Email + + + +
    +
    +
    +

    Email module

    +

    Lovable Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Lovable, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/lovable/system/artifacts/form.html b/design-systems/lovable/system/artifacts/form.html new file mode 100644 index 000000000..b81f8783d --- /dev/null +++ b/design-systems/lovable/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Lovable - Form page + + + +
    +
    +
    +

    Form module

    +

    Lovable Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Lovable, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/lovable/system/artifacts/landing.html b/design-systems/lovable/system/artifacts/landing.html new file mode 100644 index 000000000..d59ead88f --- /dev/null +++ b/design-systems/lovable/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Lovable - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Lovable Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Lovable, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/lovable/system/artifacts/newsletter.html b/design-systems/lovable/system/artifacts/newsletter.html new file mode 100644 index 000000000..cac0aa042 --- /dev/null +++ b/design-systems/lovable/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Lovable - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Lovable Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Lovable, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/lovable/system/artifacts/poster.html b/design-systems/lovable/system/artifacts/poster.html new file mode 100644 index 000000000..ab7ee60a5 --- /dev/null +++ b/design-systems/lovable/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Lovable - Poster + + + +
    +
    +
    +

    Poster module

    +

    Lovable Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Lovable, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/lovable/system/index.html b/design-systems/lovable/system/index.html new file mode 100644 index 000000000..89f437720 --- /dev/null +++ b/design-systems/lovable/system/index.html @@ -0,0 +1,128 @@ + + + + + + Lovable - system assets + + + +
    +

    Developer Tools

    +

    Lovable system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/lovable/system/kit.dark.html b/design-systems/lovable/system/kit.dark.html new file mode 100644 index 000000000..98c32b18e --- /dev/null +++ b/design-systems/lovable/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Lovable - dark component kit + + + +
    +
    +
    +

    Developer Tools system

    +

    Lovable component kit

    +

    Bundled Open Design package for Lovable, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/lovable/system/kit.html b/design-systems/lovable/system/kit.html new file mode 100644 index 000000000..e3e20b22f --- /dev/null +++ b/design-systems/lovable/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Lovable - component kit + + + +
    +
    +
    +

    Developer Tools system

    +

    Lovable component kit

    +

    Bundled Open Design package for Lovable, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/lovable/system/tokens.default.json b/design-systems/lovable/system/tokens.default.json new file mode 100644 index 000000000..c068cece0 --- /dev/null +++ b/design-systems/lovable/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#ff4d8d", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 12 +} diff --git a/design-systems/luxury/system/artifacts/deck.html b/design-systems/luxury/system/artifacts/deck.html new file mode 100644 index 000000000..e2128baf4 --- /dev/null +++ b/design-systems/luxury/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Luxury - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Luxury Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Luxury, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/luxury/system/artifacts/email.html b/design-systems/luxury/system/artifacts/email.html new file mode 100644 index 000000000..f2d4fa1b8 --- /dev/null +++ b/design-systems/luxury/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Luxury - Email + + + +
    +
    +
    +

    Email module

    +

    Luxury Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Luxury, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/luxury/system/artifacts/form.html b/design-systems/luxury/system/artifacts/form.html new file mode 100644 index 000000000..fe9efb948 --- /dev/null +++ b/design-systems/luxury/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Luxury - Form page + + + +
    +
    +
    +

    Form module

    +

    Luxury Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Luxury, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/luxury/system/artifacts/landing.html b/design-systems/luxury/system/artifacts/landing.html new file mode 100644 index 000000000..49a4473d9 --- /dev/null +++ b/design-systems/luxury/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Luxury - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Luxury Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Luxury, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/luxury/system/artifacts/newsletter.html b/design-systems/luxury/system/artifacts/newsletter.html new file mode 100644 index 000000000..ec3dd85ac --- /dev/null +++ b/design-systems/luxury/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Luxury - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Luxury Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Luxury, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/luxury/system/artifacts/poster.html b/design-systems/luxury/system/artifacts/poster.html new file mode 100644 index 000000000..362df354f --- /dev/null +++ b/design-systems/luxury/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Luxury - Poster + + + +
    +
    +
    +

    Poster module

    +

    Luxury Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Luxury, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/luxury/system/index.html b/design-systems/luxury/system/index.html new file mode 100644 index 000000000..2b55874ea --- /dev/null +++ b/design-systems/luxury/system/index.html @@ -0,0 +1,128 @@ + + + + + + Luxury - system assets + + + +
    +

    Professional & Corporate

    +

    Luxury system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/luxury/system/kit.dark.html b/design-systems/luxury/system/kit.dark.html new file mode 100644 index 000000000..c5074ac49 --- /dev/null +++ b/design-systems/luxury/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Luxury - dark component kit + + + +
    +
    +
    +

    Professional & Corporate system

    +

    Luxury component kit

    +

    Bundled Open Design package for Luxury, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/luxury/system/kit.html b/design-systems/luxury/system/kit.html new file mode 100644 index 000000000..493246db5 --- /dev/null +++ b/design-systems/luxury/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Luxury - component kit + + + +
    +
    +
    +

    Professional & Corporate system

    +

    Luxury component kit

    +

    Bundled Open Design package for Luxury, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/luxury/system/tokens.default.json b/design-systems/luxury/system/tokens.default.json new file mode 100644 index 000000000..5eca2fba7 --- /dev/null +++ b/design-systems/luxury/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#c6a15b", + "colorPrimaryBg": "#241e14", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 14 +} diff --git a/design-systems/mastercard/system/artifacts/deck.html b/design-systems/mastercard/system/artifacts/deck.html new file mode 100644 index 000000000..80e5fb560 --- /dev/null +++ b/design-systems/mastercard/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Mastercard - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Mastercard Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Mastercard, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mastercard/system/artifacts/email.html b/design-systems/mastercard/system/artifacts/email.html new file mode 100644 index 000000000..236a238d9 --- /dev/null +++ b/design-systems/mastercard/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Mastercard - Email + + + +
    +
    +
    +

    Email module

    +

    Mastercard Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Mastercard, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mastercard/system/artifacts/form.html b/design-systems/mastercard/system/artifacts/form.html new file mode 100644 index 000000000..cce7eaa1f --- /dev/null +++ b/design-systems/mastercard/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Mastercard - Form page + + + +
    +
    +
    +

    Form module

    +

    Mastercard Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Mastercard, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mastercard/system/artifacts/landing.html b/design-systems/mastercard/system/artifacts/landing.html new file mode 100644 index 000000000..95b23b7e3 --- /dev/null +++ b/design-systems/mastercard/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Mastercard - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Mastercard Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Mastercard, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mastercard/system/artifacts/newsletter.html b/design-systems/mastercard/system/artifacts/newsletter.html new file mode 100644 index 000000000..5a7e0e895 --- /dev/null +++ b/design-systems/mastercard/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Mastercard - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Mastercard Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Mastercard, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mastercard/system/artifacts/poster.html b/design-systems/mastercard/system/artifacts/poster.html new file mode 100644 index 000000000..6a96117cd --- /dev/null +++ b/design-systems/mastercard/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Mastercard - Poster + + + +
    +
    +
    +

    Poster module

    +

    Mastercard Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Mastercard, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mastercard/system/index.html b/design-systems/mastercard/system/index.html new file mode 100644 index 000000000..e64edc734 --- /dev/null +++ b/design-systems/mastercard/system/index.html @@ -0,0 +1,128 @@ + + + + + + Mastercard - system assets + + + +
    +

    Fintech & Crypto

    +

    Mastercard system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/mastercard/system/kit.dark.html b/design-systems/mastercard/system/kit.dark.html new file mode 100644 index 000000000..3ee38a8c7 --- /dev/null +++ b/design-systems/mastercard/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Mastercard - dark component kit + + + +
    +
    +
    +

    Fintech & Crypto system

    +

    Mastercard component kit

    +

    Bundled Open Design package for Mastercard, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/mastercard/system/kit.html b/design-systems/mastercard/system/kit.html new file mode 100644 index 000000000..603fa14cb --- /dev/null +++ b/design-systems/mastercard/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Mastercard - component kit + + + +
    +
    +
    +

    Fintech & Crypto system

    +

    Mastercard component kit

    +

    Bundled Open Design package for Mastercard, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/mastercard/system/tokens.default.json b/design-systems/mastercard/system/tokens.default.json new file mode 100644 index 000000000..d77968678 --- /dev/null +++ b/design-systems/mastercard/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#cf4500", + "colorPrimaryBg": "#f7e8de", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 40 +} diff --git a/design-systems/material/system/artifacts/deck.html b/design-systems/material/system/artifacts/deck.html new file mode 100644 index 000000000..3f94caca3 --- /dev/null +++ b/design-systems/material/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Material - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Material Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Material, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/material/system/artifacts/email.html b/design-systems/material/system/artifacts/email.html new file mode 100644 index 000000000..6892fcbd8 --- /dev/null +++ b/design-systems/material/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Material - Email + + + +
    +
    +
    +

    Email module

    +

    Material Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Material, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/material/system/artifacts/form.html b/design-systems/material/system/artifacts/form.html new file mode 100644 index 000000000..9efc14f30 --- /dev/null +++ b/design-systems/material/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Material - Form page + + + +
    +
    +
    +

    Form module

    +

    Material Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Material, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/material/system/artifacts/landing.html b/design-systems/material/system/artifacts/landing.html new file mode 100644 index 000000000..2b6bfc23b --- /dev/null +++ b/design-systems/material/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Material - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Material Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Material, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/material/system/artifacts/newsletter.html b/design-systems/material/system/artifacts/newsletter.html new file mode 100644 index 000000000..13d6fbe7b --- /dev/null +++ b/design-systems/material/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Material - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Material Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Material, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/material/system/artifacts/poster.html b/design-systems/material/system/artifacts/poster.html new file mode 100644 index 000000000..e44aafa70 --- /dev/null +++ b/design-systems/material/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Material - Poster + + + +
    +
    +
    +

    Poster module

    +

    Material Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Material, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/material/system/index.html b/design-systems/material/system/index.html new file mode 100644 index 000000000..5eef49303 --- /dev/null +++ b/design-systems/material/system/index.html @@ -0,0 +1,128 @@ + + + + + + Material - system assets + + + +
    +

    Professional & Corporate

    +

    Material system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/material/system/kit.dark.html b/design-systems/material/system/kit.dark.html new file mode 100644 index 000000000..00a7b9cbc --- /dev/null +++ b/design-systems/material/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Material - dark component kit + + + +
    +
    +
    +

    Professional & Corporate system

    +

    Material component kit

    +

    Bundled Open Design package for Material, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/material/system/kit.html b/design-systems/material/system/kit.html new file mode 100644 index 000000000..8f77420f0 --- /dev/null +++ b/design-systems/material/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Material - component kit + + + +
    +
    +
    +

    Professional & Corporate system

    +

    Material component kit

    +

    Bundled Open Design package for Material, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/material/system/tokens.default.json b/design-systems/material/system/tokens.default.json new file mode 100644 index 000000000..3a1dd9327 --- /dev/null +++ b/design-systems/material/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#1a73e8", + "colorPrimaryBg": "#e8f0fe", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 12 +} diff --git a/design-systems/meta/system/artifacts/deck.html b/design-systems/meta/system/artifacts/deck.html new file mode 100644 index 000000000..a401ab576 --- /dev/null +++ b/design-systems/meta/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Meta (Store) - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Meta (Store) Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Meta (Store), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/meta/system/artifacts/email.html b/design-systems/meta/system/artifacts/email.html new file mode 100644 index 000000000..2486fb255 --- /dev/null +++ b/design-systems/meta/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Meta (Store) - Email + + + +
    +
    +
    +

    Email module

    +

    Meta (Store) Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Meta (Store), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/meta/system/artifacts/form.html b/design-systems/meta/system/artifacts/form.html new file mode 100644 index 000000000..367f39bd6 --- /dev/null +++ b/design-systems/meta/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Meta (Store) - Form page + + + +
    +
    +
    +

    Form module

    +

    Meta (Store) Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Meta (Store), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/meta/system/artifacts/landing.html b/design-systems/meta/system/artifacts/landing.html new file mode 100644 index 000000000..ab97e58d3 --- /dev/null +++ b/design-systems/meta/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Meta (Store) - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Meta (Store) Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Meta (Store), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/meta/system/artifacts/newsletter.html b/design-systems/meta/system/artifacts/newsletter.html new file mode 100644 index 000000000..cb4c14dde --- /dev/null +++ b/design-systems/meta/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Meta (Store) - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Meta (Store) Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Meta (Store), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/meta/system/artifacts/poster.html b/design-systems/meta/system/artifacts/poster.html new file mode 100644 index 000000000..8880c51ef --- /dev/null +++ b/design-systems/meta/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Meta (Store) - Poster + + + +
    +
    +
    +

    Poster module

    +

    Meta (Store) Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Meta (Store), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/meta/system/index.html b/design-systems/meta/system/index.html new file mode 100644 index 000000000..5cb4ae6af --- /dev/null +++ b/design-systems/meta/system/index.html @@ -0,0 +1,128 @@ + + + + + + Meta (Store) - system assets + + + +
    +

    E-Commerce & Retail

    +

    Meta (Store) system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/meta/system/kit.dark.html b/design-systems/meta/system/kit.dark.html new file mode 100644 index 000000000..7afc5823d --- /dev/null +++ b/design-systems/meta/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Meta (Store) - dark component kit + + + +
    +
    +
    +

    E-Commerce & Retail system

    +

    Meta (Store) component kit

    +

    Bundled Open Design package for Meta (Store), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/meta/system/kit.html b/design-systems/meta/system/kit.html new file mode 100644 index 000000000..02902d09c --- /dev/null +++ b/design-systems/meta/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Meta (Store) - component kit + + + +
    +
    +
    +

    E-Commerce & Retail system

    +

    Meta (Store) component kit

    +

    Bundled Open Design package for Meta (Store), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/meta/system/tokens.default.json b/design-systems/meta/system/tokens.default.json new file mode 100644 index 000000000..bd346858d --- /dev/null +++ b/design-systems/meta/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#0064e0", + "colorPrimaryBg": "#f2f0e6", + "colorPrimaryHover": "#0143b5", + "colorPrimaryActive": "#004bb9", + "fontSize": 16, + "borderRadius": 20 +} diff --git a/design-systems/minimal/system/artifacts/deck.html b/design-systems/minimal/system/artifacts/deck.html new file mode 100644 index 000000000..e275f85c9 --- /dev/null +++ b/design-systems/minimal/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Minimal - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Minimal Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Minimal, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/minimal/system/artifacts/email.html b/design-systems/minimal/system/artifacts/email.html new file mode 100644 index 000000000..938e0995f --- /dev/null +++ b/design-systems/minimal/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Minimal - Email + + + +
    +
    +
    +

    Email module

    +

    Minimal Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Minimal, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/minimal/system/artifacts/form.html b/design-systems/minimal/system/artifacts/form.html new file mode 100644 index 000000000..ead5203c3 --- /dev/null +++ b/design-systems/minimal/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Minimal - Form page + + + +
    +
    +
    +

    Form module

    +

    Minimal Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Minimal, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/minimal/system/artifacts/landing.html b/design-systems/minimal/system/artifacts/landing.html new file mode 100644 index 000000000..4c4a464d7 --- /dev/null +++ b/design-systems/minimal/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Minimal - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Minimal Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Minimal, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/minimal/system/artifacts/newsletter.html b/design-systems/minimal/system/artifacts/newsletter.html new file mode 100644 index 000000000..64a93f659 --- /dev/null +++ b/design-systems/minimal/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Minimal - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Minimal Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Minimal, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/minimal/system/artifacts/poster.html b/design-systems/minimal/system/artifacts/poster.html new file mode 100644 index 000000000..32e913f9c --- /dev/null +++ b/design-systems/minimal/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Minimal - Poster + + + +
    +
    +
    +

    Poster module

    +

    Minimal Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Minimal, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/minimal/system/index.html b/design-systems/minimal/system/index.html new file mode 100644 index 000000000..3806e0f14 --- /dev/null +++ b/design-systems/minimal/system/index.html @@ -0,0 +1,128 @@ + + + + + + Minimal - system assets + + + +
    +

    Modern & Minimal

    +

    Minimal system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/minimal/system/kit.dark.html b/design-systems/minimal/system/kit.dark.html new file mode 100644 index 000000000..add97ec9d --- /dev/null +++ b/design-systems/minimal/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Minimal - dark component kit + + + +
    +
    +
    +

    Modern & Minimal system

    +

    Minimal component kit

    +

    Bundled Open Design package for Minimal, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/minimal/system/kit.html b/design-systems/minimal/system/kit.html new file mode 100644 index 000000000..8b07c3499 --- /dev/null +++ b/design-systems/minimal/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Minimal - component kit + + + +
    +
    +
    +

    Modern & Minimal system

    +

    Minimal component kit

    +

    Bundled Open Design package for Minimal, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/minimal/system/tokens.default.json b/design-systems/minimal/system/tokens.default.json new file mode 100644 index 000000000..4142376b3 --- /dev/null +++ b/design-systems/minimal/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#111111", + "colorPrimaryBg": "#f5f5f5", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 4 +} diff --git a/design-systems/minimax/system/artifacts/deck.html b/design-systems/minimax/system/artifacts/deck.html new file mode 100644 index 000000000..b7edc6f3e --- /dev/null +++ b/design-systems/minimax/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + MiniMax - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    MiniMax Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for MiniMax, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/minimax/system/artifacts/email.html b/design-systems/minimax/system/artifacts/email.html new file mode 100644 index 000000000..d51a45d8f --- /dev/null +++ b/design-systems/minimax/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + MiniMax - Email + + + +
    +
    +
    +

    Email module

    +

    MiniMax Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for MiniMax, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/minimax/system/artifacts/form.html b/design-systems/minimax/system/artifacts/form.html new file mode 100644 index 000000000..959c71dc8 --- /dev/null +++ b/design-systems/minimax/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + MiniMax - Form page + + + +
    +
    +
    +

    Form module

    +

    MiniMax Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for MiniMax, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/minimax/system/artifacts/landing.html b/design-systems/minimax/system/artifacts/landing.html new file mode 100644 index 000000000..1a9f6059e --- /dev/null +++ b/design-systems/minimax/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + MiniMax - Landing page + + + +
    +
    +
    +

    Landing module

    +

    MiniMax Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for MiniMax, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/minimax/system/artifacts/newsletter.html b/design-systems/minimax/system/artifacts/newsletter.html new file mode 100644 index 000000000..b299d1fbb --- /dev/null +++ b/design-systems/minimax/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + MiniMax - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    MiniMax Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for MiniMax, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/minimax/system/artifacts/poster.html b/design-systems/minimax/system/artifacts/poster.html new file mode 100644 index 000000000..cf72d375a --- /dev/null +++ b/design-systems/minimax/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + MiniMax - Poster + + + +
    +
    +
    +

    Poster module

    +

    MiniMax Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for MiniMax, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/minimax/system/index.html b/design-systems/minimax/system/index.html new file mode 100644 index 000000000..4183bd2c0 --- /dev/null +++ b/design-systems/minimax/system/index.html @@ -0,0 +1,128 @@ + + + + + + MiniMax - system assets + + + +
    +

    AI & LLM

    +

    MiniMax system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/minimax/system/kit.dark.html b/design-systems/minimax/system/kit.dark.html new file mode 100644 index 000000000..0afe26afe --- /dev/null +++ b/design-systems/minimax/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + MiniMax - dark component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    MiniMax component kit

    +

    Bundled Open Design package for MiniMax, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/minimax/system/kit.html b/design-systems/minimax/system/kit.html new file mode 100644 index 000000000..f1ca52da0 --- /dev/null +++ b/design-systems/minimax/system/kit.html @@ -0,0 +1,149 @@ + + + + + + MiniMax - component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    MiniMax component kit

    +

    Bundled Open Design package for MiniMax, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/minimax/system/tokens.default.json b/design-systems/minimax/system/tokens.default.json new file mode 100644 index 000000000..3cafa2d85 --- /dev/null +++ b/design-systems/minimax/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#1456f0", + "colorPrimaryBg": "#f0f0f0", + "colorPrimaryHover": "#2563eb", + "colorPrimaryActive": "#1d4ed8", + "fontSize": 16, + "borderRadius": 13 +} diff --git a/design-systems/mintlify/system/artifacts/deck.html b/design-systems/mintlify/system/artifacts/deck.html new file mode 100644 index 000000000..9574d319f --- /dev/null +++ b/design-systems/mintlify/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Mintlify - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Mintlify Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Mintlify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mintlify/system/artifacts/email.html b/design-systems/mintlify/system/artifacts/email.html new file mode 100644 index 000000000..b8b1346a1 --- /dev/null +++ b/design-systems/mintlify/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Mintlify - Email + + + +
    +
    +
    +

    Email module

    +

    Mintlify Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Mintlify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mintlify/system/artifacts/form.html b/design-systems/mintlify/system/artifacts/form.html new file mode 100644 index 000000000..5e3acb6aa --- /dev/null +++ b/design-systems/mintlify/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Mintlify - Form page + + + +
    +
    +
    +

    Form module

    +

    Mintlify Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Mintlify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mintlify/system/artifacts/landing.html b/design-systems/mintlify/system/artifacts/landing.html new file mode 100644 index 000000000..ae9a086cc --- /dev/null +++ b/design-systems/mintlify/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Mintlify - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Mintlify Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Mintlify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mintlify/system/artifacts/newsletter.html b/design-systems/mintlify/system/artifacts/newsletter.html new file mode 100644 index 000000000..33dfba721 --- /dev/null +++ b/design-systems/mintlify/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Mintlify - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Mintlify Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Mintlify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mintlify/system/artifacts/poster.html b/design-systems/mintlify/system/artifacts/poster.html new file mode 100644 index 000000000..ded2da113 --- /dev/null +++ b/design-systems/mintlify/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Mintlify - Poster + + + +
    +
    +
    +

    Poster module

    +

    Mintlify Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Mintlify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mintlify/system/index.html b/design-systems/mintlify/system/index.html new file mode 100644 index 000000000..5dc825e39 --- /dev/null +++ b/design-systems/mintlify/system/index.html @@ -0,0 +1,128 @@ + + + + + + Mintlify - system assets + + + +
    +

    Productivity & SaaS

    +

    Mintlify system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/mintlify/system/kit.dark.html b/design-systems/mintlify/system/kit.dark.html new file mode 100644 index 000000000..f08fd6d52 --- /dev/null +++ b/design-systems/mintlify/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Mintlify - dark component kit + + + +
    +
    +
    +

    Productivity & SaaS system

    +

    Mintlify component kit

    +

    Bundled Open Design package for Mintlify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/mintlify/system/kit.html b/design-systems/mintlify/system/kit.html new file mode 100644 index 000000000..71ef70cc1 --- /dev/null +++ b/design-systems/mintlify/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Mintlify - component kit + + + +
    +
    +
    +

    Productivity & SaaS system

    +

    Mintlify component kit

    +

    Bundled Open Design package for Mintlify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/mintlify/system/tokens.default.json b/design-systems/mintlify/system/tokens.default.json new file mode 100644 index 000000000..07ba06468 --- /dev/null +++ b/design-systems/mintlify/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#18E299", + "colorPrimaryBg": "#fafafa", + "colorPrimaryHover": "#0fa76e", + "colorPrimaryActive": "color-mix(in oklab, var(--accent-hover), black 12%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/miro/system/artifacts/deck.html b/design-systems/miro/system/artifacts/deck.html new file mode 100644 index 000000000..00dc019c4 --- /dev/null +++ b/design-systems/miro/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Miro - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Miro Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Miro, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/miro/system/artifacts/email.html b/design-systems/miro/system/artifacts/email.html new file mode 100644 index 000000000..6400d929c --- /dev/null +++ b/design-systems/miro/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Miro - Email + + + +
    +
    +
    +

    Email module

    +

    Miro Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Miro, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/miro/system/artifacts/form.html b/design-systems/miro/system/artifacts/form.html new file mode 100644 index 000000000..7ccaa5b7c --- /dev/null +++ b/design-systems/miro/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Miro - Form page + + + +
    +
    +
    +

    Form module

    +

    Miro Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Miro, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/miro/system/artifacts/landing.html b/design-systems/miro/system/artifacts/landing.html new file mode 100644 index 000000000..a71f35e37 --- /dev/null +++ b/design-systems/miro/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Miro - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Miro Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Miro, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/miro/system/artifacts/newsletter.html b/design-systems/miro/system/artifacts/newsletter.html new file mode 100644 index 000000000..a7a368a9c --- /dev/null +++ b/design-systems/miro/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Miro - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Miro Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Miro, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/miro/system/artifacts/poster.html b/design-systems/miro/system/artifacts/poster.html new file mode 100644 index 000000000..1d2a0e636 --- /dev/null +++ b/design-systems/miro/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Miro - Poster + + + +
    +
    +
    +

    Poster module

    +

    Miro Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Miro, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/miro/system/index.html b/design-systems/miro/system/index.html new file mode 100644 index 000000000..dea5e2fe0 --- /dev/null +++ b/design-systems/miro/system/index.html @@ -0,0 +1,128 @@ + + + + + + Miro - system assets + + + +
    +

    Design & Creative

    +

    Miro system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/miro/system/kit.dark.html b/design-systems/miro/system/kit.dark.html new file mode 100644 index 000000000..55a1cbe0e --- /dev/null +++ b/design-systems/miro/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Miro - dark component kit + + + +
    +
    +
    +

    Design & Creative system

    +

    Miro component kit

    +

    Bundled Open Design package for Miro, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/miro/system/kit.html b/design-systems/miro/system/kit.html new file mode 100644 index 000000000..19ec95511 --- /dev/null +++ b/design-systems/miro/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Miro - component kit + + + +
    +
    +
    +

    Design & Creative system

    +

    Miro component kit

    +

    Bundled Open Design package for Miro, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/miro/system/tokens.default.json b/design-systems/miro/system/tokens.default.json new file mode 100644 index 000000000..71e109fc3 --- /dev/null +++ b/design-systems/miro/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#ffd02f", + "colorPrimaryBg": "#fff3a3", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 18 +} diff --git a/design-systems/mission-control/system/artifacts/deck.html b/design-systems/mission-control/system/artifacts/deck.html new file mode 100644 index 000000000..98accf024 --- /dev/null +++ b/design-systems/mission-control/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Mission Control Design System - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Mission Control Design System Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Mission Control Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mission-control/system/artifacts/email.html b/design-systems/mission-control/system/artifacts/email.html new file mode 100644 index 000000000..cfee2f10a --- /dev/null +++ b/design-systems/mission-control/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Mission Control Design System - Email + + + +
    +
    +
    +

    Email module

    +

    Mission Control Design System Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Mission Control Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mission-control/system/artifacts/form.html b/design-systems/mission-control/system/artifacts/form.html new file mode 100644 index 000000000..2c34f07f7 --- /dev/null +++ b/design-systems/mission-control/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Mission Control Design System - Form page + + + +
    +
    +
    +

    Form module

    +

    Mission Control Design System Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Mission Control Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mission-control/system/artifacts/landing.html b/design-systems/mission-control/system/artifacts/landing.html new file mode 100644 index 000000000..df588bef4 --- /dev/null +++ b/design-systems/mission-control/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Mission Control Design System - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Mission Control Design System Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Mission Control Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mission-control/system/artifacts/newsletter.html b/design-systems/mission-control/system/artifacts/newsletter.html new file mode 100644 index 000000000..5fb5c2e75 --- /dev/null +++ b/design-systems/mission-control/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Mission Control Design System - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Mission Control Design System Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Mission Control Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mission-control/system/artifacts/poster.html b/design-systems/mission-control/system/artifacts/poster.html new file mode 100644 index 000000000..82af6d989 --- /dev/null +++ b/design-systems/mission-control/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Mission Control Design System - Poster + + + +
    +
    +
    +

    Poster module

    +

    Mission Control Design System Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Mission Control Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mission-control/system/index.html b/design-systems/mission-control/system/index.html new file mode 100644 index 000000000..2b6ef7c3a --- /dev/null +++ b/design-systems/mission-control/system/index.html @@ -0,0 +1,128 @@ + + + + + + Mission Control Design System - system assets + + + +
    +

    Developer Tools

    +

    Mission Control Design System system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/mission-control/system/kit.dark.html b/design-systems/mission-control/system/kit.dark.html new file mode 100644 index 000000000..354d90dd9 --- /dev/null +++ b/design-systems/mission-control/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Mission Control Design System - dark component kit + + + +
    +
    +
    +

    Developer Tools system

    +

    Mission Control Design System component kit

    +

    Bundled Open Design package for Mission Control Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/mission-control/system/kit.html b/design-systems/mission-control/system/kit.html new file mode 100644 index 000000000..342279ff8 --- /dev/null +++ b/design-systems/mission-control/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Mission Control Design System - component kit + + + +
    +
    +
    +

    Developer Tools system

    +

    Mission Control Design System component kit

    +

    Bundled Open Design package for Mission Control Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/mission-control/system/tokens.default.json b/design-systems/mission-control/system/tokens.default.json new file mode 100644 index 000000000..4ec6f0c7b --- /dev/null +++ b/design-systems/mission-control/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#60a5fa", + "colorPrimaryBg": "#1b2233", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 14, + "borderRadius": 16 +} diff --git a/design-systems/mistral-ai/system/artifacts/deck.html b/design-systems/mistral-ai/system/artifacts/deck.html new file mode 100644 index 000000000..c432cbc4e --- /dev/null +++ b/design-systems/mistral-ai/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Mistral AI - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Mistral AI Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Mistral AI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mistral-ai/system/artifacts/email.html b/design-systems/mistral-ai/system/artifacts/email.html new file mode 100644 index 000000000..3a9f9c08f --- /dev/null +++ b/design-systems/mistral-ai/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Mistral AI - Email + + + +
    +
    +
    +

    Email module

    +

    Mistral AI Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Mistral AI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mistral-ai/system/artifacts/form.html b/design-systems/mistral-ai/system/artifacts/form.html new file mode 100644 index 000000000..7aa3ac886 --- /dev/null +++ b/design-systems/mistral-ai/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Mistral AI - Form page + + + +
    +
    +
    +

    Form module

    +

    Mistral AI Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Mistral AI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mistral-ai/system/artifacts/landing.html b/design-systems/mistral-ai/system/artifacts/landing.html new file mode 100644 index 000000000..5dbb26263 --- /dev/null +++ b/design-systems/mistral-ai/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Mistral AI - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Mistral AI Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Mistral AI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mistral-ai/system/artifacts/newsletter.html b/design-systems/mistral-ai/system/artifacts/newsletter.html new file mode 100644 index 000000000..a6ab5e4a6 --- /dev/null +++ b/design-systems/mistral-ai/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Mistral AI - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Mistral AI Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Mistral AI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mistral-ai/system/artifacts/poster.html b/design-systems/mistral-ai/system/artifacts/poster.html new file mode 100644 index 000000000..75902472b --- /dev/null +++ b/design-systems/mistral-ai/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Mistral AI - Poster + + + +
    +
    +
    +

    Poster module

    +

    Mistral AI Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Mistral AI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mistral-ai/system/index.html b/design-systems/mistral-ai/system/index.html new file mode 100644 index 000000000..1230aa684 --- /dev/null +++ b/design-systems/mistral-ai/system/index.html @@ -0,0 +1,128 @@ + + + + + + Mistral AI - system assets + + + +
    +

    AI & LLM

    +

    Mistral AI system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/mistral-ai/system/kit.dark.html b/design-systems/mistral-ai/system/kit.dark.html new file mode 100644 index 000000000..0f41798e4 --- /dev/null +++ b/design-systems/mistral-ai/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Mistral AI - dark component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    Mistral AI component kit

    +

    Bundled Open Design package for Mistral AI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/mistral-ai/system/kit.html b/design-systems/mistral-ai/system/kit.html new file mode 100644 index 000000000..3224260b7 --- /dev/null +++ b/design-systems/mistral-ai/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Mistral AI - component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    Mistral AI component kit

    +

    Bundled Open Design package for Mistral AI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/mistral-ai/system/tokens.default.json b/design-systems/mistral-ai/system/tokens.default.json new file mode 100644 index 000000000..4a207ba82 --- /dev/null +++ b/design-systems/mistral-ai/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#fa520f", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "#fb6424", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 12%)", + "fontSize": 16, + "borderRadius": 2 +} diff --git a/design-systems/modern/system/artifacts/deck.html b/design-systems/modern/system/artifacts/deck.html new file mode 100644 index 000000000..a003b6c35 --- /dev/null +++ b/design-systems/modern/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Modern - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Modern Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Modern, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/modern/system/artifacts/email.html b/design-systems/modern/system/artifacts/email.html new file mode 100644 index 000000000..b3dadc381 --- /dev/null +++ b/design-systems/modern/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Modern - Email + + + +
    +
    +
    +

    Email module

    +

    Modern Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Modern, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/modern/system/artifacts/form.html b/design-systems/modern/system/artifacts/form.html new file mode 100644 index 000000000..3be157697 --- /dev/null +++ b/design-systems/modern/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Modern - Form page + + + +
    +
    +
    +

    Form module

    +

    Modern Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Modern, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/modern/system/artifacts/landing.html b/design-systems/modern/system/artifacts/landing.html new file mode 100644 index 000000000..bd1327a18 --- /dev/null +++ b/design-systems/modern/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Modern - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Modern Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Modern, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/modern/system/artifacts/newsletter.html b/design-systems/modern/system/artifacts/newsletter.html new file mode 100644 index 000000000..cd8e2fc47 --- /dev/null +++ b/design-systems/modern/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Modern - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Modern Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Modern, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/modern/system/artifacts/poster.html b/design-systems/modern/system/artifacts/poster.html new file mode 100644 index 000000000..cfc6bd1a2 --- /dev/null +++ b/design-systems/modern/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Modern - Poster + + + +
    +
    +
    +

    Poster module

    +

    Modern Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Modern, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/modern/system/index.html b/design-systems/modern/system/index.html new file mode 100644 index 000000000..0e6362d2c --- /dev/null +++ b/design-systems/modern/system/index.html @@ -0,0 +1,128 @@ + + + + + + Modern - system assets + + + +
    +

    Modern & Minimal

    +

    Modern system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/modern/system/kit.dark.html b/design-systems/modern/system/kit.dark.html new file mode 100644 index 000000000..8c63d4f42 --- /dev/null +++ b/design-systems/modern/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Modern - dark component kit + + + +
    +
    +
    +

    Modern & Minimal system

    +

    Modern component kit

    +

    Bundled Open Design package for Modern, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/modern/system/kit.html b/design-systems/modern/system/kit.html new file mode 100644 index 000000000..dff7c5972 --- /dev/null +++ b/design-systems/modern/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Modern - component kit + + + +
    +
    +
    +

    Modern & Minimal system

    +

    Modern component kit

    +

    Bundled Open Design package for Modern, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/modern/system/tokens.default.json b/design-systems/modern/system/tokens.default.json new file mode 100644 index 000000000..289f0de46 --- /dev/null +++ b/design-systems/modern/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#4f46e5", + "colorPrimaryBg": "#eef1ff", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/mongodb/system/artifacts/deck.html b/design-systems/mongodb/system/artifacts/deck.html new file mode 100644 index 000000000..310ad3d5c --- /dev/null +++ b/design-systems/mongodb/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + MongoDB - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    MongoDB Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for MongoDB, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mongodb/system/artifacts/email.html b/design-systems/mongodb/system/artifacts/email.html new file mode 100644 index 000000000..1b1ab24af --- /dev/null +++ b/design-systems/mongodb/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + MongoDB - Email + + + +
    +
    +
    +

    Email module

    +

    MongoDB Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for MongoDB, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mongodb/system/artifacts/form.html b/design-systems/mongodb/system/artifacts/form.html new file mode 100644 index 000000000..99a2b3a37 --- /dev/null +++ b/design-systems/mongodb/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + MongoDB - Form page + + + +
    +
    +
    +

    Form module

    +

    MongoDB Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for MongoDB, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mongodb/system/artifacts/landing.html b/design-systems/mongodb/system/artifacts/landing.html new file mode 100644 index 000000000..55bed9f43 --- /dev/null +++ b/design-systems/mongodb/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + MongoDB - Landing page + + + +
    +
    +
    +

    Landing module

    +

    MongoDB Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for MongoDB, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mongodb/system/artifacts/newsletter.html b/design-systems/mongodb/system/artifacts/newsletter.html new file mode 100644 index 000000000..a1854c3ed --- /dev/null +++ b/design-systems/mongodb/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + MongoDB - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    MongoDB Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for MongoDB, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mongodb/system/artifacts/poster.html b/design-systems/mongodb/system/artifacts/poster.html new file mode 100644 index 000000000..169a1f3c4 --- /dev/null +++ b/design-systems/mongodb/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + MongoDB - Poster + + + +
    +
    +
    +

    Poster module

    +

    MongoDB Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for MongoDB, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mongodb/system/index.html b/design-systems/mongodb/system/index.html new file mode 100644 index 000000000..e67dc6a8d --- /dev/null +++ b/design-systems/mongodb/system/index.html @@ -0,0 +1,128 @@ + + + + + + MongoDB - system assets + + + +
    +

    Backend & Data

    +

    MongoDB system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/mongodb/system/kit.dark.html b/design-systems/mongodb/system/kit.dark.html new file mode 100644 index 000000000..dd98cbbcf --- /dev/null +++ b/design-systems/mongodb/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + MongoDB - dark component kit + + + +
    +
    +
    +

    Backend & Data system

    +

    MongoDB component kit

    +

    Bundled Open Design package for MongoDB, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/mongodb/system/kit.html b/design-systems/mongodb/system/kit.html new file mode 100644 index 000000000..0bd4a70b2 --- /dev/null +++ b/design-systems/mongodb/system/kit.html @@ -0,0 +1,149 @@ + + + + + + MongoDB - component kit + + + +
    +
    +
    +

    Backend & Data system

    +

    MongoDB component kit

    +

    Bundled Open Design package for MongoDB, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/mongodb/system/tokens.default.json b/design-systems/mongodb/system/tokens.default.json new file mode 100644 index 000000000..daa323eb3 --- /dev/null +++ b/design-systems/mongodb/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#00ed64", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "#00684a", + "colorPrimaryActive": "color-mix(in oklab, var(--accent-hover), black 12%)", + "fontSize": 16, + "borderRadius": 8 +} diff --git a/design-systems/mono/system/artifacts/deck.html b/design-systems/mono/system/artifacts/deck.html new file mode 100644 index 000000000..4d6e3e45c --- /dev/null +++ b/design-systems/mono/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Mono - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Mono Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Mono, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mono/system/artifacts/email.html b/design-systems/mono/system/artifacts/email.html new file mode 100644 index 000000000..6fbd2f9cf --- /dev/null +++ b/design-systems/mono/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Mono - Email + + + +
    +
    +
    +

    Email module

    +

    Mono Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Mono, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mono/system/artifacts/form.html b/design-systems/mono/system/artifacts/form.html new file mode 100644 index 000000000..1fe30bbbb --- /dev/null +++ b/design-systems/mono/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Mono - Form page + + + +
    +
    +
    +

    Form module

    +

    Mono Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Mono, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mono/system/artifacts/landing.html b/design-systems/mono/system/artifacts/landing.html new file mode 100644 index 000000000..abc7fd9cf --- /dev/null +++ b/design-systems/mono/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Mono - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Mono Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Mono, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mono/system/artifacts/newsletter.html b/design-systems/mono/system/artifacts/newsletter.html new file mode 100644 index 000000000..54d670f0d --- /dev/null +++ b/design-systems/mono/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Mono - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Mono Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Mono, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mono/system/artifacts/poster.html b/design-systems/mono/system/artifacts/poster.html new file mode 100644 index 000000000..ded4f6e91 --- /dev/null +++ b/design-systems/mono/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Mono - Poster + + + +
    +
    +
    +

    Poster module

    +

    Mono Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Mono, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/mono/system/index.html b/design-systems/mono/system/index.html new file mode 100644 index 000000000..5d19e8389 --- /dev/null +++ b/design-systems/mono/system/index.html @@ -0,0 +1,128 @@ + + + + + + Mono - system assets + + + +
    +

    Modern & Minimal

    +

    Mono system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/mono/system/kit.dark.html b/design-systems/mono/system/kit.dark.html new file mode 100644 index 000000000..d7f0d6254 --- /dev/null +++ b/design-systems/mono/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Mono - dark component kit + + + +
    +
    +
    +

    Modern & Minimal system

    +

    Mono component kit

    +

    Bundled Open Design package for Mono, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/mono/system/kit.html b/design-systems/mono/system/kit.html new file mode 100644 index 000000000..cf1e0010c --- /dev/null +++ b/design-systems/mono/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Mono - component kit + + + +
    +
    +
    +

    Modern & Minimal system

    +

    Mono component kit

    +

    Bundled Open Design package for Mono, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/mono/system/tokens.default.json b/design-systems/mono/system/tokens.default.json new file mode 100644 index 000000000..1c3234bf3 --- /dev/null +++ b/design-systems/mono/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#111111", + "colorPrimaryBg": "#eeeeee", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 14, + "borderRadius": 8 +} diff --git a/design-systems/neobrutalism/system/artifacts/deck.html b/design-systems/neobrutalism/system/artifacts/deck.html new file mode 100644 index 000000000..08104ea11 --- /dev/null +++ b/design-systems/neobrutalism/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Neobrutalism - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Neobrutalism Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Neobrutalism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/neobrutalism/system/artifacts/email.html b/design-systems/neobrutalism/system/artifacts/email.html new file mode 100644 index 000000000..d72892fd8 --- /dev/null +++ b/design-systems/neobrutalism/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Neobrutalism - Email + + + +
    +
    +
    +

    Email module

    +

    Neobrutalism Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Neobrutalism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/neobrutalism/system/artifacts/form.html b/design-systems/neobrutalism/system/artifacts/form.html new file mode 100644 index 000000000..2f6f06b7e --- /dev/null +++ b/design-systems/neobrutalism/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Neobrutalism - Form page + + + +
    +
    +
    +

    Form module

    +

    Neobrutalism Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Neobrutalism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/neobrutalism/system/artifacts/landing.html b/design-systems/neobrutalism/system/artifacts/landing.html new file mode 100644 index 000000000..07e2b02a6 --- /dev/null +++ b/design-systems/neobrutalism/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Neobrutalism - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Neobrutalism Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Neobrutalism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/neobrutalism/system/artifacts/newsletter.html b/design-systems/neobrutalism/system/artifacts/newsletter.html new file mode 100644 index 000000000..5e9da0618 --- /dev/null +++ b/design-systems/neobrutalism/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Neobrutalism - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Neobrutalism Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Neobrutalism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/neobrutalism/system/artifacts/poster.html b/design-systems/neobrutalism/system/artifacts/poster.html new file mode 100644 index 000000000..56bd4cf05 --- /dev/null +++ b/design-systems/neobrutalism/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Neobrutalism - Poster + + + +
    +
    +
    +

    Poster module

    +

    Neobrutalism Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Neobrutalism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/neobrutalism/system/index.html b/design-systems/neobrutalism/system/index.html new file mode 100644 index 000000000..dbedb05cc --- /dev/null +++ b/design-systems/neobrutalism/system/index.html @@ -0,0 +1,128 @@ + + + + + + Neobrutalism - system assets + + + +
    +

    Bold & Expressive

    +

    Neobrutalism system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/neobrutalism/system/kit.dark.html b/design-systems/neobrutalism/system/kit.dark.html new file mode 100644 index 000000000..1f52973a3 --- /dev/null +++ b/design-systems/neobrutalism/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Neobrutalism - dark component kit + + + +
    +
    +
    +

    Bold & Expressive system

    +

    Neobrutalism component kit

    +

    Bundled Open Design package for Neobrutalism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/neobrutalism/system/kit.html b/design-systems/neobrutalism/system/kit.html new file mode 100644 index 000000000..844dd6996 --- /dev/null +++ b/design-systems/neobrutalism/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Neobrutalism - component kit + + + +
    +
    +
    +

    Bold & Expressive system

    +

    Neobrutalism component kit

    +

    Bundled Open Design package for Neobrutalism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/neobrutalism/system/tokens.default.json b/design-systems/neobrutalism/system/tokens.default.json new file mode 100644 index 000000000..0246f5b63 --- /dev/null +++ b/design-systems/neobrutalism/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#d24b1f", + "colorPrimaryBg": "#ffdca8", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 8 +} diff --git a/design-systems/neon/system/artifacts/deck.html b/design-systems/neon/system/artifacts/deck.html new file mode 100644 index 000000000..cb5fb8c54 --- /dev/null +++ b/design-systems/neon/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Neon - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Neon Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Neon, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/neon/system/artifacts/email.html b/design-systems/neon/system/artifacts/email.html new file mode 100644 index 000000000..134255fe6 --- /dev/null +++ b/design-systems/neon/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Neon - Email + + + +
    +
    +
    +

    Email module

    +

    Neon Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Neon, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/neon/system/artifacts/form.html b/design-systems/neon/system/artifacts/form.html new file mode 100644 index 000000000..1c11c36f1 --- /dev/null +++ b/design-systems/neon/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Neon - Form page + + + +
    +
    +
    +

    Form module

    +

    Neon Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Neon, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/neon/system/artifacts/landing.html b/design-systems/neon/system/artifacts/landing.html new file mode 100644 index 000000000..69d978fe8 --- /dev/null +++ b/design-systems/neon/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Neon - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Neon Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Neon, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/neon/system/artifacts/newsletter.html b/design-systems/neon/system/artifacts/newsletter.html new file mode 100644 index 000000000..3795e5326 --- /dev/null +++ b/design-systems/neon/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Neon - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Neon Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Neon, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/neon/system/artifacts/poster.html b/design-systems/neon/system/artifacts/poster.html new file mode 100644 index 000000000..e05770a63 --- /dev/null +++ b/design-systems/neon/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Neon - Poster + + + +
    +
    +
    +

    Poster module

    +

    Neon Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Neon, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/neon/system/index.html b/design-systems/neon/system/index.html new file mode 100644 index 000000000..19555754a --- /dev/null +++ b/design-systems/neon/system/index.html @@ -0,0 +1,128 @@ + + + + + + Neon - system assets + + + +
    +

    Morphism & Effects

    +

    Neon system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/neon/system/kit.dark.html b/design-systems/neon/system/kit.dark.html new file mode 100644 index 000000000..be7cab1ac --- /dev/null +++ b/design-systems/neon/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Neon - dark component kit + + + +
    +
    +
    +

    Morphism & Effects system

    +

    Neon component kit

    +

    Bundled Open Design package for Neon, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/neon/system/kit.html b/design-systems/neon/system/kit.html new file mode 100644 index 000000000..4de898566 --- /dev/null +++ b/design-systems/neon/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Neon - component kit + + + +
    +
    +
    +

    Morphism & Effects system

    +

    Neon component kit

    +

    Bundled Open Design package for Neon, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/neon/system/tokens.default.json b/design-systems/neon/system/tokens.default.json new file mode 100644 index 000000000..866bdd39f --- /dev/null +++ b/design-systems/neon/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#c084fc", + "colorPrimaryBg": "#1e1540", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/neumorphism/system/artifacts/deck.html b/design-systems/neumorphism/system/artifacts/deck.html new file mode 100644 index 000000000..07d348874 --- /dev/null +++ b/design-systems/neumorphism/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Neumorphism - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Neumorphism Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Neumorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/neumorphism/system/artifacts/email.html b/design-systems/neumorphism/system/artifacts/email.html new file mode 100644 index 000000000..21d6cc350 --- /dev/null +++ b/design-systems/neumorphism/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Neumorphism - Email + + + +
    +
    +
    +

    Email module

    +

    Neumorphism Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Neumorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/neumorphism/system/artifacts/form.html b/design-systems/neumorphism/system/artifacts/form.html new file mode 100644 index 000000000..443edb72b --- /dev/null +++ b/design-systems/neumorphism/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Neumorphism - Form page + + + +
    +
    +
    +

    Form module

    +

    Neumorphism Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Neumorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/neumorphism/system/artifacts/landing.html b/design-systems/neumorphism/system/artifacts/landing.html new file mode 100644 index 000000000..bc345f127 --- /dev/null +++ b/design-systems/neumorphism/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Neumorphism - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Neumorphism Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Neumorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/neumorphism/system/artifacts/newsletter.html b/design-systems/neumorphism/system/artifacts/newsletter.html new file mode 100644 index 000000000..bd350b655 --- /dev/null +++ b/design-systems/neumorphism/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Neumorphism - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Neumorphism Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Neumorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/neumorphism/system/artifacts/poster.html b/design-systems/neumorphism/system/artifacts/poster.html new file mode 100644 index 000000000..a7b19bc12 --- /dev/null +++ b/design-systems/neumorphism/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Neumorphism - Poster + + + +
    +
    +
    +

    Poster module

    +

    Neumorphism Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Neumorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/neumorphism/system/index.html b/design-systems/neumorphism/system/index.html new file mode 100644 index 000000000..e7376c31a --- /dev/null +++ b/design-systems/neumorphism/system/index.html @@ -0,0 +1,128 @@ + + + + + + Neumorphism - system assets + + + +
    +

    Morphism & Effects

    +

    Neumorphism system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/neumorphism/system/kit.dark.html b/design-systems/neumorphism/system/kit.dark.html new file mode 100644 index 000000000..4a5778a34 --- /dev/null +++ b/design-systems/neumorphism/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Neumorphism - dark component kit + + + +
    +
    +
    +

    Morphism & Effects system

    +

    Neumorphism component kit

    +

    Bundled Open Design package for Neumorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/neumorphism/system/kit.html b/design-systems/neumorphism/system/kit.html new file mode 100644 index 000000000..4377830c2 --- /dev/null +++ b/design-systems/neumorphism/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Neumorphism - component kit + + + +
    +
    +
    +

    Morphism & Effects system

    +

    Neumorphism component kit

    +

    Bundled Open Design package for Neumorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/neumorphism/system/tokens.default.json b/design-systems/neumorphism/system/tokens.default.json new file mode 100644 index 000000000..bb2d78deb --- /dev/null +++ b/design-systems/neumorphism/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#b46a46", + "colorPrimaryBg": "#ead6c7", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 22 +} diff --git a/design-systems/nike/system/artifacts/deck.html b/design-systems/nike/system/artifacts/deck.html new file mode 100644 index 000000000..6238f3d9b --- /dev/null +++ b/design-systems/nike/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Nike - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Nike Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Nike, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/nike/system/artifacts/email.html b/design-systems/nike/system/artifacts/email.html new file mode 100644 index 000000000..c3fc61b26 --- /dev/null +++ b/design-systems/nike/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Nike - Email + + + +
    +
    +
    +

    Email module

    +

    Nike Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Nike, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/nike/system/artifacts/form.html b/design-systems/nike/system/artifacts/form.html new file mode 100644 index 000000000..5bd68f9a2 --- /dev/null +++ b/design-systems/nike/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Nike - Form page + + + +
    +
    +
    +

    Form module

    +

    Nike Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Nike, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/nike/system/artifacts/landing.html b/design-systems/nike/system/artifacts/landing.html new file mode 100644 index 000000000..18f1561f3 --- /dev/null +++ b/design-systems/nike/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Nike - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Nike Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Nike, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/nike/system/artifacts/newsletter.html b/design-systems/nike/system/artifacts/newsletter.html new file mode 100644 index 000000000..990b636c4 --- /dev/null +++ b/design-systems/nike/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Nike - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Nike Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Nike, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/nike/system/artifacts/poster.html b/design-systems/nike/system/artifacts/poster.html new file mode 100644 index 000000000..1389837f5 --- /dev/null +++ b/design-systems/nike/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Nike - Poster + + + +
    +
    +
    +

    Poster module

    +

    Nike Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Nike, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/nike/system/index.html b/design-systems/nike/system/index.html new file mode 100644 index 000000000..5ed20138d --- /dev/null +++ b/design-systems/nike/system/index.html @@ -0,0 +1,128 @@ + + + + + + Nike - system assets + + + +
    +

    E-Commerce & Retail

    +

    Nike system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/nike/system/kit.dark.html b/design-systems/nike/system/kit.dark.html new file mode 100644 index 000000000..efeae4511 --- /dev/null +++ b/design-systems/nike/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Nike - dark component kit + + + +
    +
    +
    +

    E-Commerce & Retail system

    +

    Nike component kit

    +

    Bundled Open Design package for Nike, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/nike/system/kit.html b/design-systems/nike/system/kit.html new file mode 100644 index 000000000..ea1737403 --- /dev/null +++ b/design-systems/nike/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Nike - component kit + + + +
    +
    +
    +

    E-Commerce & Retail system

    +

    Nike component kit

    +

    Bundled Open Design package for Nike, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/nike/system/tokens.default.json b/design-systems/nike/system/tokens.default.json new file mode 100644 index 000000000..7c394af9e --- /dev/null +++ b/design-systems/nike/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#111111", + "colorPrimaryBg": "#fafafa", + "colorPrimaryHover": "#707072", + "colorPrimaryActive": "#000000", + "fontSize": 16, + "borderRadius": 20 +} diff --git a/design-systems/notion/system/artifacts/deck.html b/design-systems/notion/system/artifacts/deck.html new file mode 100644 index 000000000..2cab4d3a5 --- /dev/null +++ b/design-systems/notion/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Notion - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Notion Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Notion, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/notion/system/artifacts/email.html b/design-systems/notion/system/artifacts/email.html new file mode 100644 index 000000000..adebc76d0 --- /dev/null +++ b/design-systems/notion/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Notion - Email + + + +
    +
    +
    +

    Email module

    +

    Notion Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Notion, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/notion/system/artifacts/form.html b/design-systems/notion/system/artifacts/form.html new file mode 100644 index 000000000..396448bd0 --- /dev/null +++ b/design-systems/notion/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Notion - Form page + + + +
    +
    +
    +

    Form module

    +

    Notion Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Notion, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/notion/system/artifacts/landing.html b/design-systems/notion/system/artifacts/landing.html new file mode 100644 index 000000000..38d68b260 --- /dev/null +++ b/design-systems/notion/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Notion - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Notion Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Notion, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/notion/system/artifacts/newsletter.html b/design-systems/notion/system/artifacts/newsletter.html new file mode 100644 index 000000000..e7d23aa66 --- /dev/null +++ b/design-systems/notion/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Notion - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Notion Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Notion, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/notion/system/artifacts/poster.html b/design-systems/notion/system/artifacts/poster.html new file mode 100644 index 000000000..ecd356d5c --- /dev/null +++ b/design-systems/notion/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Notion - Poster + + + +
    +
    +
    +

    Poster module

    +

    Notion Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Notion, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/notion/system/index.html b/design-systems/notion/system/index.html new file mode 100644 index 000000000..0091a0264 --- /dev/null +++ b/design-systems/notion/system/index.html @@ -0,0 +1,128 @@ + + + + + + Notion - system assets + + + +
    +

    Productivity & SaaS

    +

    Notion system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/notion/system/kit.dark.html b/design-systems/notion/system/kit.dark.html new file mode 100644 index 000000000..ccbeef6db --- /dev/null +++ b/design-systems/notion/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Notion - dark component kit + + + +
    +
    +
    +

    Productivity & SaaS system

    +

    Notion component kit

    +

    Bundled Open Design package for Notion, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/notion/system/kit.html b/design-systems/notion/system/kit.html new file mode 100644 index 000000000..609248f55 --- /dev/null +++ b/design-systems/notion/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Notion - component kit + + + +
    +
    +
    +

    Productivity & SaaS system

    +

    Notion component kit

    +

    Bundled Open Design package for Notion, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/notion/system/tokens.default.json b/design-systems/notion/system/tokens.default.json new file mode 100644 index 000000000..193d483cc --- /dev/null +++ b/design-systems/notion/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#0075de", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "#005bab", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 8 +} diff --git a/design-systems/nvidia/system/artifacts/deck.html b/design-systems/nvidia/system/artifacts/deck.html new file mode 100644 index 000000000..0e3d113fc --- /dev/null +++ b/design-systems/nvidia/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + NVIDIA - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    NVIDIA Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for NVIDIA, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/nvidia/system/artifacts/email.html b/design-systems/nvidia/system/artifacts/email.html new file mode 100644 index 000000000..762622038 --- /dev/null +++ b/design-systems/nvidia/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + NVIDIA - Email + + + +
    +
    +
    +

    Email module

    +

    NVIDIA Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for NVIDIA, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/nvidia/system/artifacts/form.html b/design-systems/nvidia/system/artifacts/form.html new file mode 100644 index 000000000..8f5cd5f51 --- /dev/null +++ b/design-systems/nvidia/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + NVIDIA - Form page + + + +
    +
    +
    +

    Form module

    +

    NVIDIA Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for NVIDIA, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/nvidia/system/artifacts/landing.html b/design-systems/nvidia/system/artifacts/landing.html new file mode 100644 index 000000000..db8bf3e20 --- /dev/null +++ b/design-systems/nvidia/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + NVIDIA - Landing page + + + +
    +
    +
    +

    Landing module

    +

    NVIDIA Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for NVIDIA, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/nvidia/system/artifacts/newsletter.html b/design-systems/nvidia/system/artifacts/newsletter.html new file mode 100644 index 000000000..7dc7ac4c3 --- /dev/null +++ b/design-systems/nvidia/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + NVIDIA - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    NVIDIA Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for NVIDIA, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/nvidia/system/artifacts/poster.html b/design-systems/nvidia/system/artifacts/poster.html new file mode 100644 index 000000000..002916d39 --- /dev/null +++ b/design-systems/nvidia/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + NVIDIA - Poster + + + +
    +
    +
    +

    Poster module

    +

    NVIDIA Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for NVIDIA, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/nvidia/system/index.html b/design-systems/nvidia/system/index.html new file mode 100644 index 000000000..d5d0a9737 --- /dev/null +++ b/design-systems/nvidia/system/index.html @@ -0,0 +1,128 @@ + + + + + + NVIDIA - system assets + + + +
    +

    Media & Consumer

    +

    NVIDIA system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/nvidia/system/kit.dark.html b/design-systems/nvidia/system/kit.dark.html new file mode 100644 index 000000000..301f5b7d2 --- /dev/null +++ b/design-systems/nvidia/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + NVIDIA - dark component kit + + + +
    +
    +
    +

    Media & Consumer system

    +

    NVIDIA component kit

    +

    Bundled Open Design package for NVIDIA, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/nvidia/system/kit.html b/design-systems/nvidia/system/kit.html new file mode 100644 index 000000000..cc36cc3c9 --- /dev/null +++ b/design-systems/nvidia/system/kit.html @@ -0,0 +1,149 @@ + + + + + + NVIDIA - component kit + + + +
    +
    +
    +

    Media & Consumer system

    +

    NVIDIA component kit

    +

    Bundled Open Design package for NVIDIA, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/nvidia/system/tokens.default.json b/design-systems/nvidia/system/tokens.default.json new file mode 100644 index 000000000..b04d6a8ef --- /dev/null +++ b/design-systems/nvidia/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#76b900", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "#1eaedb", + "colorPrimaryActive": "#007fff", + "fontSize": 16, + "borderRadius": 2 +} diff --git a/design-systems/ollama/system/artifacts/deck.html b/design-systems/ollama/system/artifacts/deck.html new file mode 100644 index 000000000..0bb148f39 --- /dev/null +++ b/design-systems/ollama/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Ollama - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Ollama Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Ollama, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/ollama/system/artifacts/email.html b/design-systems/ollama/system/artifacts/email.html new file mode 100644 index 000000000..25fa0e107 --- /dev/null +++ b/design-systems/ollama/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Ollama - Email + + + +
    +
    +
    +

    Email module

    +

    Ollama Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Ollama, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/ollama/system/artifacts/form.html b/design-systems/ollama/system/artifacts/form.html new file mode 100644 index 000000000..c972781ad --- /dev/null +++ b/design-systems/ollama/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Ollama - Form page + + + +
    +
    +
    +

    Form module

    +

    Ollama Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Ollama, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/ollama/system/artifacts/landing.html b/design-systems/ollama/system/artifacts/landing.html new file mode 100644 index 000000000..5dc1bc642 --- /dev/null +++ b/design-systems/ollama/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Ollama - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Ollama Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Ollama, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/ollama/system/artifacts/newsletter.html b/design-systems/ollama/system/artifacts/newsletter.html new file mode 100644 index 000000000..97dec68c3 --- /dev/null +++ b/design-systems/ollama/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Ollama - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Ollama Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Ollama, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/ollama/system/artifacts/poster.html b/design-systems/ollama/system/artifacts/poster.html new file mode 100644 index 000000000..45a2064d7 --- /dev/null +++ b/design-systems/ollama/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Ollama - Poster + + + +
    +
    +
    +

    Poster module

    +

    Ollama Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Ollama, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/ollama/system/index.html b/design-systems/ollama/system/index.html new file mode 100644 index 000000000..e082d81b8 --- /dev/null +++ b/design-systems/ollama/system/index.html @@ -0,0 +1,128 @@ + + + + + + Ollama - system assets + + + +
    +

    AI & LLM

    +

    Ollama system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/ollama/system/kit.dark.html b/design-systems/ollama/system/kit.dark.html new file mode 100644 index 000000000..4b12d1d6c --- /dev/null +++ b/design-systems/ollama/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Ollama - dark component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    Ollama component kit

    +

    Bundled Open Design package for Ollama, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/ollama/system/kit.html b/design-systems/ollama/system/kit.html new file mode 100644 index 000000000..edfd0741c --- /dev/null +++ b/design-systems/ollama/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Ollama - component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    Ollama component kit

    +

    Bundled Open Design package for Ollama, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/ollama/system/tokens.default.json b/design-systems/ollama/system/tokens.default.json new file mode 100644 index 000000000..22afaab7f --- /dev/null +++ b/design-systems/ollama/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#000000", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "#262626", + "colorPrimaryActive": "#404040", + "fontSize": 16, + "borderRadius": 12 +} diff --git a/design-systems/openai/system/artifacts/deck.html b/design-systems/openai/system/artifacts/deck.html new file mode 100644 index 000000000..13e2173a9 --- /dev/null +++ b/design-systems/openai/system/artifacts/deck.html @@ -0,0 +1,138 @@ + + + + + + OpenAI - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    OpenAI Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for OpenAI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/openai/system/artifacts/email.html b/design-systems/openai/system/artifacts/email.html new file mode 100644 index 000000000..273be4080 --- /dev/null +++ b/design-systems/openai/system/artifacts/email.html @@ -0,0 +1,138 @@ + + + + + + OpenAI - Email + + + +
    +
    +
    +

    Email module

    +

    OpenAI Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for OpenAI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/openai/system/artifacts/form.html b/design-systems/openai/system/artifacts/form.html new file mode 100644 index 000000000..e5479235d --- /dev/null +++ b/design-systems/openai/system/artifacts/form.html @@ -0,0 +1,138 @@ + + + + + + OpenAI - Form page + + + +
    +
    +
    +

    Form module

    +

    OpenAI Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for OpenAI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/openai/system/artifacts/landing.html b/design-systems/openai/system/artifacts/landing.html new file mode 100644 index 000000000..17580f1f3 --- /dev/null +++ b/design-systems/openai/system/artifacts/landing.html @@ -0,0 +1,138 @@ + + + + + + OpenAI - Landing page + + + +
    +
    +
    +

    Landing module

    +

    OpenAI Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for OpenAI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/openai/system/artifacts/newsletter.html b/design-systems/openai/system/artifacts/newsletter.html new file mode 100644 index 000000000..c68f7e6b9 --- /dev/null +++ b/design-systems/openai/system/artifacts/newsletter.html @@ -0,0 +1,138 @@ + + + + + + OpenAI - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    OpenAI Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for OpenAI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/openai/system/artifacts/poster.html b/design-systems/openai/system/artifacts/poster.html new file mode 100644 index 000000000..5ab4db80f --- /dev/null +++ b/design-systems/openai/system/artifacts/poster.html @@ -0,0 +1,138 @@ + + + + + + OpenAI - Poster + + + +
    +
    +
    +

    Poster module

    +

    OpenAI Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for OpenAI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/openai/system/index.html b/design-systems/openai/system/index.html new file mode 100644 index 000000000..42a4c517a --- /dev/null +++ b/design-systems/openai/system/index.html @@ -0,0 +1,129 @@ + + + + + + OpenAI - system assets + + + +
    +

    AI & LLM

    +

    OpenAI system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/openai/system/kit.dark.html b/design-systems/openai/system/kit.dark.html new file mode 100644 index 000000000..2dce25eb5 --- /dev/null +++ b/design-systems/openai/system/kit.dark.html @@ -0,0 +1,150 @@ + + + + + + OpenAI - dark component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    OpenAI component kit

    +

    Bundled Open Design package for OpenAI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/openai/system/kit.html b/design-systems/openai/system/kit.html new file mode 100644 index 000000000..9f41c509e --- /dev/null +++ b/design-systems/openai/system/kit.html @@ -0,0 +1,150 @@ + + + + + + OpenAI - component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    OpenAI component kit

    +

    Bundled Open Design package for OpenAI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/openai/system/tokens.default.json b/design-systems/openai/system/tokens.default.json new file mode 100644 index 000000000..9329b7abc --- /dev/null +++ b/design-systems/openai/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#10a37f", + "colorPrimaryBg": "#fafafa", + "colorPrimaryHover": "#0a7a5e", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/opencode-ai/system/artifacts/deck.html b/design-systems/opencode-ai/system/artifacts/deck.html new file mode 100644 index 000000000..a58945e60 --- /dev/null +++ b/design-systems/opencode-ai/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + OpenCode - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    OpenCode Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for OpenCode, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/opencode-ai/system/artifacts/email.html b/design-systems/opencode-ai/system/artifacts/email.html new file mode 100644 index 000000000..76322874d --- /dev/null +++ b/design-systems/opencode-ai/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + OpenCode - Email + + + +
    +
    +
    +

    Email module

    +

    OpenCode Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for OpenCode, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/opencode-ai/system/artifacts/form.html b/design-systems/opencode-ai/system/artifacts/form.html new file mode 100644 index 000000000..2e03b6d1f --- /dev/null +++ b/design-systems/opencode-ai/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + OpenCode - Form page + + + +
    +
    +
    +

    Form module

    +

    OpenCode Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for OpenCode, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/opencode-ai/system/artifacts/landing.html b/design-systems/opencode-ai/system/artifacts/landing.html new file mode 100644 index 000000000..0c45885a3 --- /dev/null +++ b/design-systems/opencode-ai/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + OpenCode - Landing page + + + +
    +
    +
    +

    Landing module

    +

    OpenCode Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for OpenCode, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/opencode-ai/system/artifacts/newsletter.html b/design-systems/opencode-ai/system/artifacts/newsletter.html new file mode 100644 index 000000000..b1031683f --- /dev/null +++ b/design-systems/opencode-ai/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + OpenCode - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    OpenCode Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for OpenCode, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/opencode-ai/system/artifacts/poster.html b/design-systems/opencode-ai/system/artifacts/poster.html new file mode 100644 index 000000000..ea8bf35ec --- /dev/null +++ b/design-systems/opencode-ai/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + OpenCode - Poster + + + +
    +
    +
    +

    Poster module

    +

    OpenCode Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for OpenCode, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/opencode-ai/system/index.html b/design-systems/opencode-ai/system/index.html new file mode 100644 index 000000000..ca32c134d --- /dev/null +++ b/design-systems/opencode-ai/system/index.html @@ -0,0 +1,128 @@ + + + + + + OpenCode - system assets + + + +
    +

    AI & LLM

    +

    OpenCode system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/opencode-ai/system/kit.dark.html b/design-systems/opencode-ai/system/kit.dark.html new file mode 100644 index 000000000..abd33a92b --- /dev/null +++ b/design-systems/opencode-ai/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + OpenCode - dark component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    OpenCode component kit

    +

    Bundled Open Design package for OpenCode, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/opencode-ai/system/kit.html b/design-systems/opencode-ai/system/kit.html new file mode 100644 index 000000000..47da4d9be --- /dev/null +++ b/design-systems/opencode-ai/system/kit.html @@ -0,0 +1,149 @@ + + + + + + OpenCode - component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    OpenCode component kit

    +

    Bundled Open Design package for OpenCode, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/opencode-ai/system/tokens.default.json b/design-systems/opencode-ai/system/tokens.default.json new file mode 100644 index 000000000..9e91e8af4 --- /dev/null +++ b/design-systems/opencode-ai/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#007aff", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "#0056b3", + "colorPrimaryActive": "#004085", + "fontSize": 16, + "borderRadius": 6 +} diff --git a/design-systems/pacman/system/artifacts/deck.html b/design-systems/pacman/system/artifacts/deck.html new file mode 100644 index 000000000..8f452fc85 --- /dev/null +++ b/design-systems/pacman/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Pacman - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Pacman Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Pacman, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/pacman/system/artifacts/email.html b/design-systems/pacman/system/artifacts/email.html new file mode 100644 index 000000000..692c07889 --- /dev/null +++ b/design-systems/pacman/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Pacman - Email + + + +
    +
    +
    +

    Email module

    +

    Pacman Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Pacman, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/pacman/system/artifacts/form.html b/design-systems/pacman/system/artifacts/form.html new file mode 100644 index 000000000..93fea977b --- /dev/null +++ b/design-systems/pacman/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Pacman - Form page + + + +
    +
    +
    +

    Form module

    +

    Pacman Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Pacman, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/pacman/system/artifacts/landing.html b/design-systems/pacman/system/artifacts/landing.html new file mode 100644 index 000000000..32c865cf3 --- /dev/null +++ b/design-systems/pacman/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Pacman - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Pacman Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Pacman, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/pacman/system/artifacts/newsletter.html b/design-systems/pacman/system/artifacts/newsletter.html new file mode 100644 index 000000000..469c9ced8 --- /dev/null +++ b/design-systems/pacman/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Pacman - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Pacman Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Pacman, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/pacman/system/artifacts/poster.html b/design-systems/pacman/system/artifacts/poster.html new file mode 100644 index 000000000..8069e6793 --- /dev/null +++ b/design-systems/pacman/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Pacman - Poster + + + +
    +
    +
    +

    Poster module

    +

    Pacman Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Pacman, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/pacman/system/index.html b/design-systems/pacman/system/index.html new file mode 100644 index 000000000..41b6d7de2 --- /dev/null +++ b/design-systems/pacman/system/index.html @@ -0,0 +1,128 @@ + + + + + + Pacman - system assets + + + +
    +

    Themed & Unique

    +

    Pacman system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/pacman/system/kit.dark.html b/design-systems/pacman/system/kit.dark.html new file mode 100644 index 000000000..3d3891bbb --- /dev/null +++ b/design-systems/pacman/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Pacman - dark component kit + + + +
    +
    +
    +

    Themed & Unique system

    +

    Pacman component kit

    +

    Bundled Open Design package for Pacman, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/pacman/system/kit.html b/design-systems/pacman/system/kit.html new file mode 100644 index 000000000..005e2ca2c --- /dev/null +++ b/design-systems/pacman/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Pacman - component kit + + + +
    +
    +
    +

    Themed & Unique system

    +

    Pacman component kit

    +

    Bundled Open Design package for Pacman, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/pacman/system/tokens.default.json b/design-systems/pacman/system/tokens.default.json new file mode 100644 index 000000000..ee68f65a4 --- /dev/null +++ b/design-systems/pacman/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#ffcc00", + "colorPrimaryBg": "#1f1b08", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 14, + "borderRadius": 18 +} diff --git a/design-systems/paper/system/artifacts/deck.html b/design-systems/paper/system/artifacts/deck.html new file mode 100644 index 000000000..b00dc6c08 --- /dev/null +++ b/design-systems/paper/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Paper - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Paper Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Paper, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/paper/system/artifacts/email.html b/design-systems/paper/system/artifacts/email.html new file mode 100644 index 000000000..2ece218a1 --- /dev/null +++ b/design-systems/paper/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Paper - Email + + + +
    +
    +
    +

    Email module

    +

    Paper Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Paper, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/paper/system/artifacts/form.html b/design-systems/paper/system/artifacts/form.html new file mode 100644 index 000000000..6a105161e --- /dev/null +++ b/design-systems/paper/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Paper - Form page + + + +
    +
    +
    +

    Form module

    +

    Paper Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Paper, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/paper/system/artifacts/landing.html b/design-systems/paper/system/artifacts/landing.html new file mode 100644 index 000000000..ef77b5d58 --- /dev/null +++ b/design-systems/paper/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Paper - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Paper Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Paper, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/paper/system/artifacts/newsletter.html b/design-systems/paper/system/artifacts/newsletter.html new file mode 100644 index 000000000..903614db2 --- /dev/null +++ b/design-systems/paper/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Paper - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Paper Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Paper, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/paper/system/artifacts/poster.html b/design-systems/paper/system/artifacts/poster.html new file mode 100644 index 000000000..d017c1b27 --- /dev/null +++ b/design-systems/paper/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Paper - Poster + + + +
    +
    +
    +

    Poster module

    +

    Paper Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Paper, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/paper/system/index.html b/design-systems/paper/system/index.html new file mode 100644 index 000000000..8c8a678d5 --- /dev/null +++ b/design-systems/paper/system/index.html @@ -0,0 +1,128 @@ + + + + + + Paper - system assets + + + +
    +

    Retro & Nostalgic

    +

    Paper system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/paper/system/kit.dark.html b/design-systems/paper/system/kit.dark.html new file mode 100644 index 000000000..11ed93bff --- /dev/null +++ b/design-systems/paper/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Paper - dark component kit + + + +
    +
    +
    +

    Retro & Nostalgic system

    +

    Paper component kit

    +

    Bundled Open Design package for Paper, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/paper/system/kit.html b/design-systems/paper/system/kit.html new file mode 100644 index 000000000..46157912c --- /dev/null +++ b/design-systems/paper/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Paper - component kit + + + +
    +
    +
    +

    Retro & Nostalgic system

    +

    Paper component kit

    +

    Bundled Open Design package for Paper, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/paper/system/tokens.default.json b/design-systems/paper/system/tokens.default.json new file mode 100644 index 000000000..7a807d5f7 --- /dev/null +++ b/design-systems/paper/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#8f5d24", + "colorPrimaryBg": "#efe0bd", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 17, + "borderRadius": 16 +} diff --git a/design-systems/perplexity/system/artifacts/deck.html b/design-systems/perplexity/system/artifacts/deck.html new file mode 100644 index 000000000..93a848a69 --- /dev/null +++ b/design-systems/perplexity/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Perplexity AI - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Perplexity AI Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Perplexity AI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/perplexity/system/artifacts/email.html b/design-systems/perplexity/system/artifacts/email.html new file mode 100644 index 000000000..161566c61 --- /dev/null +++ b/design-systems/perplexity/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Perplexity AI - Email + + + +
    +
    +
    +

    Email module

    +

    Perplexity AI Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Perplexity AI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/perplexity/system/artifacts/form.html b/design-systems/perplexity/system/artifacts/form.html new file mode 100644 index 000000000..e8ed462e9 --- /dev/null +++ b/design-systems/perplexity/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Perplexity AI - Form page + + + +
    +
    +
    +

    Form module

    +

    Perplexity AI Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Perplexity AI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/perplexity/system/artifacts/landing.html b/design-systems/perplexity/system/artifacts/landing.html new file mode 100644 index 000000000..542835afd --- /dev/null +++ b/design-systems/perplexity/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Perplexity AI - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Perplexity AI Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Perplexity AI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/perplexity/system/artifacts/newsletter.html b/design-systems/perplexity/system/artifacts/newsletter.html new file mode 100644 index 000000000..13be245f7 --- /dev/null +++ b/design-systems/perplexity/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Perplexity AI - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Perplexity AI Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Perplexity AI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/perplexity/system/artifacts/poster.html b/design-systems/perplexity/system/artifacts/poster.html new file mode 100644 index 000000000..77c6399fd --- /dev/null +++ b/design-systems/perplexity/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Perplexity AI - Poster + + + +
    +
    +
    +

    Poster module

    +

    Perplexity AI Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Perplexity AI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/perplexity/system/index.html b/design-systems/perplexity/system/index.html new file mode 100644 index 000000000..06d3a52f7 --- /dev/null +++ b/design-systems/perplexity/system/index.html @@ -0,0 +1,128 @@ + + + + + + Perplexity AI - system assets + + + +
    +

    AI & LLM

    +

    Perplexity AI system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/perplexity/system/kit.dark.html b/design-systems/perplexity/system/kit.dark.html new file mode 100644 index 000000000..cf28efbb9 --- /dev/null +++ b/design-systems/perplexity/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Perplexity AI - dark component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    Perplexity AI component kit

    +

    Bundled Open Design package for Perplexity AI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/perplexity/system/kit.html b/design-systems/perplexity/system/kit.html new file mode 100644 index 000000000..05b8964c1 --- /dev/null +++ b/design-systems/perplexity/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Perplexity AI - component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    Perplexity AI component kit

    +

    Bundled Open Design package for Perplexity AI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/perplexity/system/tokens.default.json b/design-systems/perplexity/system/tokens.default.json new file mode 100644 index 000000000..c3e86f621 --- /dev/null +++ b/design-systems/perplexity/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#a855f7", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "#c084fc", + "colorPrimaryActive": "#9333ea", + "fontSize": 15, + "borderRadius": 8 +} diff --git a/design-systems/perspective/system/artifacts/deck.html b/design-systems/perspective/system/artifacts/deck.html new file mode 100644 index 000000000..a2b58c134 --- /dev/null +++ b/design-systems/perspective/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Perspective - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Perspective Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Perspective, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/perspective/system/artifacts/email.html b/design-systems/perspective/system/artifacts/email.html new file mode 100644 index 000000000..769bb2f35 --- /dev/null +++ b/design-systems/perspective/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Perspective - Email + + + +
    +
    +
    +

    Email module

    +

    Perspective Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Perspective, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/perspective/system/artifacts/form.html b/design-systems/perspective/system/artifacts/form.html new file mode 100644 index 000000000..835ae20fe --- /dev/null +++ b/design-systems/perspective/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Perspective - Form page + + + +
    +
    +
    +

    Form module

    +

    Perspective Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Perspective, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/perspective/system/artifacts/landing.html b/design-systems/perspective/system/artifacts/landing.html new file mode 100644 index 000000000..082d05516 --- /dev/null +++ b/design-systems/perspective/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Perspective - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Perspective Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Perspective, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/perspective/system/artifacts/newsletter.html b/design-systems/perspective/system/artifacts/newsletter.html new file mode 100644 index 000000000..430fb2980 --- /dev/null +++ b/design-systems/perspective/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Perspective - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Perspective Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Perspective, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/perspective/system/artifacts/poster.html b/design-systems/perspective/system/artifacts/poster.html new file mode 100644 index 000000000..ac87d5056 --- /dev/null +++ b/design-systems/perspective/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Perspective - Poster + + + +
    +
    +
    +

    Poster module

    +

    Perspective Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Perspective, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/perspective/system/index.html b/design-systems/perspective/system/index.html new file mode 100644 index 000000000..95ca9ef29 --- /dev/null +++ b/design-systems/perspective/system/index.html @@ -0,0 +1,128 @@ + + + + + + Perspective - system assets + + + +
    +

    Layout & Structure

    +

    Perspective system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/perspective/system/kit.dark.html b/design-systems/perspective/system/kit.dark.html new file mode 100644 index 000000000..6a70affcd --- /dev/null +++ b/design-systems/perspective/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Perspective - dark component kit + + + +
    +
    +
    +

    Layout & Structure system

    +

    Perspective component kit

    +

    Bundled Open Design package for Perspective, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/perspective/system/kit.html b/design-systems/perspective/system/kit.html new file mode 100644 index 000000000..83b39f7ba --- /dev/null +++ b/design-systems/perspective/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Perspective - component kit + + + +
    +
    +
    +

    Layout & Structure system

    +

    Perspective component kit

    +

    Bundled Open Design package for Perspective, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/perspective/system/tokens.default.json b/design-systems/perspective/system/tokens.default.json new file mode 100644 index 000000000..a1beb9985 --- /dev/null +++ b/design-systems/perspective/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#2563eb", + "colorPrimaryBg": "#eaf1ff", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/pinterest/system/artifacts/deck.html b/design-systems/pinterest/system/artifacts/deck.html new file mode 100644 index 000000000..930f94aaf --- /dev/null +++ b/design-systems/pinterest/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Pinterest - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Pinterest Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Pinterest, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/pinterest/system/artifacts/email.html b/design-systems/pinterest/system/artifacts/email.html new file mode 100644 index 000000000..283daaf05 --- /dev/null +++ b/design-systems/pinterest/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Pinterest - Email + + + +
    +
    +
    +

    Email module

    +

    Pinterest Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Pinterest, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/pinterest/system/artifacts/form.html b/design-systems/pinterest/system/artifacts/form.html new file mode 100644 index 000000000..40ceb2801 --- /dev/null +++ b/design-systems/pinterest/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Pinterest - Form page + + + +
    +
    +
    +

    Form module

    +

    Pinterest Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Pinterest, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/pinterest/system/artifacts/landing.html b/design-systems/pinterest/system/artifacts/landing.html new file mode 100644 index 000000000..adb971533 --- /dev/null +++ b/design-systems/pinterest/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Pinterest - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Pinterest Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Pinterest, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/pinterest/system/artifacts/newsletter.html b/design-systems/pinterest/system/artifacts/newsletter.html new file mode 100644 index 000000000..e7bc0f1d7 --- /dev/null +++ b/design-systems/pinterest/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Pinterest - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Pinterest Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Pinterest, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/pinterest/system/artifacts/poster.html b/design-systems/pinterest/system/artifacts/poster.html new file mode 100644 index 000000000..d36006ceb --- /dev/null +++ b/design-systems/pinterest/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Pinterest - Poster + + + +
    +
    +
    +

    Poster module

    +

    Pinterest Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Pinterest, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/pinterest/system/index.html b/design-systems/pinterest/system/index.html new file mode 100644 index 000000000..cb5f518e5 --- /dev/null +++ b/design-systems/pinterest/system/index.html @@ -0,0 +1,128 @@ + + + + + + Pinterest - system assets + + + +
    +

    Media & Consumer

    +

    Pinterest system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/pinterest/system/kit.dark.html b/design-systems/pinterest/system/kit.dark.html new file mode 100644 index 000000000..6d10c9ed0 --- /dev/null +++ b/design-systems/pinterest/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Pinterest - dark component kit + + + +
    +
    +
    +

    Media & Consumer system

    +

    Pinterest component kit

    +

    Bundled Open Design package for Pinterest, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/pinterest/system/kit.html b/design-systems/pinterest/system/kit.html new file mode 100644 index 000000000..1ad81aa42 --- /dev/null +++ b/design-systems/pinterest/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Pinterest - component kit + + + +
    +
    +
    +

    Media & Consumer system

    +

    Pinterest component kit

    +

    Bundled Open Design package for Pinterest, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/pinterest/system/tokens.default.json b/design-systems/pinterest/system/tokens.default.json new file mode 100644 index 000000000..b44cca28e --- /dev/null +++ b/design-systems/pinterest/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#e60023", + "colorPrimaryBg": "#e5e5e0", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/playstation/system/artifacts/deck.html b/design-systems/playstation/system/artifacts/deck.html new file mode 100644 index 000000000..701d78350 --- /dev/null +++ b/design-systems/playstation/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + PlayStation - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    PlayStation Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for PlayStation, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/playstation/system/artifacts/email.html b/design-systems/playstation/system/artifacts/email.html new file mode 100644 index 000000000..0c8dc7268 --- /dev/null +++ b/design-systems/playstation/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + PlayStation - Email + + + +
    +
    +
    +

    Email module

    +

    PlayStation Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for PlayStation, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/playstation/system/artifacts/form.html b/design-systems/playstation/system/artifacts/form.html new file mode 100644 index 000000000..d8ff8b71f --- /dev/null +++ b/design-systems/playstation/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + PlayStation - Form page + + + +
    +
    +
    +

    Form module

    +

    PlayStation Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for PlayStation, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/playstation/system/artifacts/landing.html b/design-systems/playstation/system/artifacts/landing.html new file mode 100644 index 000000000..0f6c53ca5 --- /dev/null +++ b/design-systems/playstation/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + PlayStation - Landing page + + + +
    +
    +
    +

    Landing module

    +

    PlayStation Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for PlayStation, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/playstation/system/artifacts/newsletter.html b/design-systems/playstation/system/artifacts/newsletter.html new file mode 100644 index 000000000..9f7b51ccf --- /dev/null +++ b/design-systems/playstation/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + PlayStation - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    PlayStation Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for PlayStation, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/playstation/system/artifacts/poster.html b/design-systems/playstation/system/artifacts/poster.html new file mode 100644 index 000000000..0006fb9cd --- /dev/null +++ b/design-systems/playstation/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + PlayStation - Poster + + + +
    +
    +
    +

    Poster module

    +

    PlayStation Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for PlayStation, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/playstation/system/index.html b/design-systems/playstation/system/index.html new file mode 100644 index 000000000..99f34aa8b --- /dev/null +++ b/design-systems/playstation/system/index.html @@ -0,0 +1,128 @@ + + + + + + PlayStation - system assets + + + +
    +

    Media & Consumer

    +

    PlayStation system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/playstation/system/kit.dark.html b/design-systems/playstation/system/kit.dark.html new file mode 100644 index 000000000..54d2df186 --- /dev/null +++ b/design-systems/playstation/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + PlayStation - dark component kit + + + +
    +
    +
    +

    Media & Consumer system

    +

    PlayStation component kit

    +

    Bundled Open Design package for PlayStation, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/playstation/system/kit.html b/design-systems/playstation/system/kit.html new file mode 100644 index 000000000..3bd1c9aa5 --- /dev/null +++ b/design-systems/playstation/system/kit.html @@ -0,0 +1,149 @@ + + + + + + PlayStation - component kit + + + +
    +
    +
    +

    Media & Consumer system

    +

    PlayStation component kit

    +

    Bundled Open Design package for PlayStation, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/playstation/system/tokens.default.json b/design-systems/playstation/system/tokens.default.json new file mode 100644 index 000000000..b3f8ef473 --- /dev/null +++ b/design-systems/playstation/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#0070cc", + "colorPrimaryBg": "#f5f7fa", + "colorPrimaryHover": "#1eaedb", + "colorPrimaryActive": "#0068bd", + "fontSize": 18, + "borderRadius": 12 +} diff --git a/design-systems/posthog/system/artifacts/deck.html b/design-systems/posthog/system/artifacts/deck.html new file mode 100644 index 000000000..c0206efae --- /dev/null +++ b/design-systems/posthog/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + PostHog - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    PostHog Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for PostHog, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/posthog/system/artifacts/email.html b/design-systems/posthog/system/artifacts/email.html new file mode 100644 index 000000000..2a2998eb0 --- /dev/null +++ b/design-systems/posthog/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + PostHog - Email + + + +
    +
    +
    +

    Email module

    +

    PostHog Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for PostHog, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/posthog/system/artifacts/form.html b/design-systems/posthog/system/artifacts/form.html new file mode 100644 index 000000000..53aa1f7b0 --- /dev/null +++ b/design-systems/posthog/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + PostHog - Form page + + + +
    +
    +
    +

    Form module

    +

    PostHog Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for PostHog, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/posthog/system/artifacts/landing.html b/design-systems/posthog/system/artifacts/landing.html new file mode 100644 index 000000000..db4acf760 --- /dev/null +++ b/design-systems/posthog/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + PostHog - Landing page + + + +
    +
    +
    +

    Landing module

    +

    PostHog Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for PostHog, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/posthog/system/artifacts/newsletter.html b/design-systems/posthog/system/artifacts/newsletter.html new file mode 100644 index 000000000..90a30d953 --- /dev/null +++ b/design-systems/posthog/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + PostHog - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    PostHog Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for PostHog, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/posthog/system/artifacts/poster.html b/design-systems/posthog/system/artifacts/poster.html new file mode 100644 index 000000000..17a9b0692 --- /dev/null +++ b/design-systems/posthog/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + PostHog - Poster + + + +
    +
    +
    +

    Poster module

    +

    PostHog Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for PostHog, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/posthog/system/index.html b/design-systems/posthog/system/index.html new file mode 100644 index 000000000..f8e3f9957 --- /dev/null +++ b/design-systems/posthog/system/index.html @@ -0,0 +1,128 @@ + + + + + + PostHog - system assets + + + +
    +

    Backend & Data

    +

    PostHog system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/posthog/system/kit.dark.html b/design-systems/posthog/system/kit.dark.html new file mode 100644 index 000000000..17748eb52 --- /dev/null +++ b/design-systems/posthog/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + PostHog - dark component kit + + + +
    +
    +
    +

    Backend & Data system

    +

    PostHog component kit

    +

    Bundled Open Design package for PostHog, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/posthog/system/kit.html b/design-systems/posthog/system/kit.html new file mode 100644 index 000000000..f7266d8db --- /dev/null +++ b/design-systems/posthog/system/kit.html @@ -0,0 +1,149 @@ + + + + + + PostHog - component kit + + + +
    +
    +
    +

    Backend & Data system

    +

    PostHog component kit

    +

    Bundled Open Design package for PostHog, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/posthog/system/tokens.default.json b/design-systems/posthog/system/tokens.default.json new file mode 100644 index 000000000..72e61e15f --- /dev/null +++ b/design-systems/posthog/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#F54E00", + "colorPrimaryBg": "#e5e7e0", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 6 +} diff --git a/design-systems/premium/system/artifacts/deck.html b/design-systems/premium/system/artifacts/deck.html new file mode 100644 index 000000000..25a6aa12e --- /dev/null +++ b/design-systems/premium/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Premium - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Premium Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Premium, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/premium/system/artifacts/email.html b/design-systems/premium/system/artifacts/email.html new file mode 100644 index 000000000..2f5997d07 --- /dev/null +++ b/design-systems/premium/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Premium - Email + + + +
    +
    +
    +

    Email module

    +

    Premium Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Premium, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/premium/system/artifacts/form.html b/design-systems/premium/system/artifacts/form.html new file mode 100644 index 000000000..7e72a7e34 --- /dev/null +++ b/design-systems/premium/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Premium - Form page + + + +
    +
    +
    +

    Form module

    +

    Premium Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Premium, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/premium/system/artifacts/landing.html b/design-systems/premium/system/artifacts/landing.html new file mode 100644 index 000000000..c094afe25 --- /dev/null +++ b/design-systems/premium/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Premium - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Premium Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Premium, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/premium/system/artifacts/newsletter.html b/design-systems/premium/system/artifacts/newsletter.html new file mode 100644 index 000000000..96196b3c6 --- /dev/null +++ b/design-systems/premium/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Premium - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Premium Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Premium, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/premium/system/artifacts/poster.html b/design-systems/premium/system/artifacts/poster.html new file mode 100644 index 000000000..7784211de --- /dev/null +++ b/design-systems/premium/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Premium - Poster + + + +
    +
    +
    +

    Poster module

    +

    Premium Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Premium, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/premium/system/index.html b/design-systems/premium/system/index.html new file mode 100644 index 000000000..38f87b6a6 --- /dev/null +++ b/design-systems/premium/system/index.html @@ -0,0 +1,128 @@ + + + + + + Premium - system assets + + + +
    +

    Professional & Corporate

    +

    Premium system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/premium/system/kit.dark.html b/design-systems/premium/system/kit.dark.html new file mode 100644 index 000000000..5f0b5fb14 --- /dev/null +++ b/design-systems/premium/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Premium - dark component kit + + + +
    +
    +
    +

    Professional & Corporate system

    +

    Premium component kit

    +

    Bundled Open Design package for Premium, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/premium/system/kit.html b/design-systems/premium/system/kit.html new file mode 100644 index 000000000..5a31a60a5 --- /dev/null +++ b/design-systems/premium/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Premium - component kit + + + +
    +
    +
    +

    Professional & Corporate system

    +

    Premium component kit

    +

    Bundled Open Design package for Premium, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/premium/system/tokens.default.json b/design-systems/premium/system/tokens.default.json new file mode 100644 index 000000000..6fccffd48 --- /dev/null +++ b/design-systems/premium/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#a06a3b", + "colorPrimaryBg": "#f0e7d8", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/professional/system/artifacts/deck.html b/design-systems/professional/system/artifacts/deck.html new file mode 100644 index 000000000..468a5ea56 --- /dev/null +++ b/design-systems/professional/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Professional - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Professional Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Professional, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/professional/system/artifacts/email.html b/design-systems/professional/system/artifacts/email.html new file mode 100644 index 000000000..7088c81e0 --- /dev/null +++ b/design-systems/professional/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Professional - Email + + + +
    +
    +
    +

    Email module

    +

    Professional Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Professional, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/professional/system/artifacts/form.html b/design-systems/professional/system/artifacts/form.html new file mode 100644 index 000000000..ebfa40085 --- /dev/null +++ b/design-systems/professional/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Professional - Form page + + + +
    +
    +
    +

    Form module

    +

    Professional Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Professional, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/professional/system/artifacts/landing.html b/design-systems/professional/system/artifacts/landing.html new file mode 100644 index 000000000..f1b57444d --- /dev/null +++ b/design-systems/professional/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Professional - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Professional Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Professional, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/professional/system/artifacts/newsletter.html b/design-systems/professional/system/artifacts/newsletter.html new file mode 100644 index 000000000..bac4de645 --- /dev/null +++ b/design-systems/professional/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Professional - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Professional Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Professional, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/professional/system/artifacts/poster.html b/design-systems/professional/system/artifacts/poster.html new file mode 100644 index 000000000..957c07f13 --- /dev/null +++ b/design-systems/professional/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Professional - Poster + + + +
    +
    +
    +

    Poster module

    +

    Professional Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Professional, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/professional/system/index.html b/design-systems/professional/system/index.html new file mode 100644 index 000000000..314897d9f --- /dev/null +++ b/design-systems/professional/system/index.html @@ -0,0 +1,128 @@ + + + + + + Professional - system assets + + + +
    +

    Professional & Corporate

    +

    Professional system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/professional/system/kit.dark.html b/design-systems/professional/system/kit.dark.html new file mode 100644 index 000000000..8bec4d5be --- /dev/null +++ b/design-systems/professional/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Professional - dark component kit + + + +
    +
    +
    +

    Professional & Corporate system

    +

    Professional component kit

    +

    Bundled Open Design package for Professional, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/professional/system/kit.html b/design-systems/professional/system/kit.html new file mode 100644 index 000000000..9aa420590 --- /dev/null +++ b/design-systems/professional/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Professional - component kit + + + +
    +
    +
    +

    Professional & Corporate system

    +

    Professional component kit

    +

    Bundled Open Design package for Professional, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/professional/system/tokens.default.json b/design-systems/professional/system/tokens.default.json new file mode 100644 index 000000000..a1beb9985 --- /dev/null +++ b/design-systems/professional/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#2563eb", + "colorPrimaryBg": "#eaf1ff", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/publication/system/artifacts/deck.html b/design-systems/publication/system/artifacts/deck.html new file mode 100644 index 000000000..4bd1ee501 --- /dev/null +++ b/design-systems/publication/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Publication - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Publication Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Publication, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/publication/system/artifacts/email.html b/design-systems/publication/system/artifacts/email.html new file mode 100644 index 000000000..610250981 --- /dev/null +++ b/design-systems/publication/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Publication - Email + + + +
    +
    +
    +

    Email module

    +

    Publication Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Publication, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/publication/system/artifacts/form.html b/design-systems/publication/system/artifacts/form.html new file mode 100644 index 000000000..c757355ec --- /dev/null +++ b/design-systems/publication/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Publication - Form page + + + +
    +
    +
    +

    Form module

    +

    Publication Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Publication, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/publication/system/artifacts/landing.html b/design-systems/publication/system/artifacts/landing.html new file mode 100644 index 000000000..58f7a6c5a --- /dev/null +++ b/design-systems/publication/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Publication - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Publication Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Publication, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/publication/system/artifacts/newsletter.html b/design-systems/publication/system/artifacts/newsletter.html new file mode 100644 index 000000000..f5c8a6114 --- /dev/null +++ b/design-systems/publication/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Publication - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Publication Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Publication, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/publication/system/artifacts/poster.html b/design-systems/publication/system/artifacts/poster.html new file mode 100644 index 000000000..8e22074ab --- /dev/null +++ b/design-systems/publication/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Publication - Poster + + + +
    +
    +
    +

    Poster module

    +

    Publication Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Publication, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/publication/system/index.html b/design-systems/publication/system/index.html new file mode 100644 index 000000000..f33c9c789 --- /dev/null +++ b/design-systems/publication/system/index.html @@ -0,0 +1,128 @@ + + + + + + Publication - system assets + + + +
    +

    Creative & Artistic

    +

    Publication system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/publication/system/kit.dark.html b/design-systems/publication/system/kit.dark.html new file mode 100644 index 000000000..795669c80 --- /dev/null +++ b/design-systems/publication/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Publication - dark component kit + + + +
    +
    +
    +

    Creative & Artistic system

    +

    Publication component kit

    +

    Bundled Open Design package for Publication, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/publication/system/kit.html b/design-systems/publication/system/kit.html new file mode 100644 index 000000000..a268618d9 --- /dev/null +++ b/design-systems/publication/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Publication - component kit + + + +
    +
    +
    +

    Creative & Artistic system

    +

    Publication component kit

    +

    Bundled Open Design package for Publication, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/publication/system/tokens.default.json b/design-systems/publication/system/tokens.default.json new file mode 100644 index 000000000..faef6c1cc --- /dev/null +++ b/design-systems/publication/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#c1121f", + "colorPrimaryBg": "#fff2f0", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 17, + "borderRadius": 0 +} diff --git a/design-systems/raycast/system/artifacts/deck.html b/design-systems/raycast/system/artifacts/deck.html new file mode 100644 index 000000000..1e2190b41 --- /dev/null +++ b/design-systems/raycast/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Raycast - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Raycast Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Raycast, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/raycast/system/artifacts/email.html b/design-systems/raycast/system/artifacts/email.html new file mode 100644 index 000000000..942df1304 --- /dev/null +++ b/design-systems/raycast/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Raycast - Email + + + +
    +
    +
    +

    Email module

    +

    Raycast Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Raycast, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/raycast/system/artifacts/form.html b/design-systems/raycast/system/artifacts/form.html new file mode 100644 index 000000000..a4fc984d6 --- /dev/null +++ b/design-systems/raycast/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Raycast - Form page + + + +
    +
    +
    +

    Form module

    +

    Raycast Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Raycast, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/raycast/system/artifacts/landing.html b/design-systems/raycast/system/artifacts/landing.html new file mode 100644 index 000000000..563000bf6 --- /dev/null +++ b/design-systems/raycast/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Raycast - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Raycast Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Raycast, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/raycast/system/artifacts/newsletter.html b/design-systems/raycast/system/artifacts/newsletter.html new file mode 100644 index 000000000..8d419cdf0 --- /dev/null +++ b/design-systems/raycast/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Raycast - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Raycast Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Raycast, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/raycast/system/artifacts/poster.html b/design-systems/raycast/system/artifacts/poster.html new file mode 100644 index 000000000..376252b52 --- /dev/null +++ b/design-systems/raycast/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Raycast - Poster + + + +
    +
    +
    +

    Poster module

    +

    Raycast Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Raycast, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/raycast/system/index.html b/design-systems/raycast/system/index.html new file mode 100644 index 000000000..9fa2ce930 --- /dev/null +++ b/design-systems/raycast/system/index.html @@ -0,0 +1,128 @@ + + + + + + Raycast - system assets + + + +
    +

    Developer Tools

    +

    Raycast system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/raycast/system/kit.dark.html b/design-systems/raycast/system/kit.dark.html new file mode 100644 index 000000000..e3c7f59c5 --- /dev/null +++ b/design-systems/raycast/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Raycast - dark component kit + + + +
    +
    +
    +

    Developer Tools system

    +

    Raycast component kit

    +

    Bundled Open Design package for Raycast, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/raycast/system/kit.html b/design-systems/raycast/system/kit.html new file mode 100644 index 000000000..79a494209 --- /dev/null +++ b/design-systems/raycast/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Raycast - component kit + + + +
    +
    +
    +

    Developer Tools system

    +

    Raycast component kit

    +

    Bundled Open Design package for Raycast, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/raycast/system/tokens.default.json b/design-systems/raycast/system/tokens.default.json new file mode 100644 index 000000000..1fd816d8d --- /dev/null +++ b/design-systems/raycast/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#FF6363", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "#ff7777", + "colorPrimaryActive": "#e85757", + "fontSize": 16, + "borderRadius": 12 +} diff --git a/design-systems/refined/system/artifacts/deck.html b/design-systems/refined/system/artifacts/deck.html new file mode 100644 index 000000000..fd03616fb --- /dev/null +++ b/design-systems/refined/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Refined - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Refined Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Refined, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/refined/system/artifacts/email.html b/design-systems/refined/system/artifacts/email.html new file mode 100644 index 000000000..2294959bf --- /dev/null +++ b/design-systems/refined/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Refined - Email + + + +
    +
    +
    +

    Email module

    +

    Refined Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Refined, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/refined/system/artifacts/form.html b/design-systems/refined/system/artifacts/form.html new file mode 100644 index 000000000..a25b2a59d --- /dev/null +++ b/design-systems/refined/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Refined - Form page + + + +
    +
    +
    +

    Form module

    +

    Refined Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Refined, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/refined/system/artifacts/landing.html b/design-systems/refined/system/artifacts/landing.html new file mode 100644 index 000000000..89caed6f3 --- /dev/null +++ b/design-systems/refined/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Refined - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Refined Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Refined, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/refined/system/artifacts/newsletter.html b/design-systems/refined/system/artifacts/newsletter.html new file mode 100644 index 000000000..1fad7496b --- /dev/null +++ b/design-systems/refined/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Refined - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Refined Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Refined, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/refined/system/artifacts/poster.html b/design-systems/refined/system/artifacts/poster.html new file mode 100644 index 000000000..be9525a38 --- /dev/null +++ b/design-systems/refined/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Refined - Poster + + + +
    +
    +
    +

    Poster module

    +

    Refined Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Refined, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/refined/system/index.html b/design-systems/refined/system/index.html new file mode 100644 index 000000000..98faad0ae --- /dev/null +++ b/design-systems/refined/system/index.html @@ -0,0 +1,128 @@ + + + + + + Refined - system assets + + + +
    +

    Modern & Minimal

    +

    Refined system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/refined/system/kit.dark.html b/design-systems/refined/system/kit.dark.html new file mode 100644 index 000000000..0bcf474e8 --- /dev/null +++ b/design-systems/refined/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Refined - dark component kit + + + +
    +
    +
    +

    Modern & Minimal system

    +

    Refined component kit

    +

    Bundled Open Design package for Refined, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/refined/system/kit.html b/design-systems/refined/system/kit.html new file mode 100644 index 000000000..501530cb5 --- /dev/null +++ b/design-systems/refined/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Refined - component kit + + + +
    +
    +
    +

    Modern & Minimal system

    +

    Refined component kit

    +

    Bundled Open Design package for Refined, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/refined/system/tokens.default.json b/design-systems/refined/system/tokens.default.json new file mode 100644 index 000000000..436d03f49 --- /dev/null +++ b/design-systems/refined/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#9b5b32", + "colorPrimaryBg": "#f1e3cf", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 17, + "borderRadius": 16 +} diff --git a/design-systems/renault/system/artifacts/deck.html b/design-systems/renault/system/artifacts/deck.html new file mode 100644 index 000000000..bebf3fec6 --- /dev/null +++ b/design-systems/renault/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Renault - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Renault Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Renault, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/renault/system/artifacts/email.html b/design-systems/renault/system/artifacts/email.html new file mode 100644 index 000000000..4f07b4e38 --- /dev/null +++ b/design-systems/renault/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Renault - Email + + + +
    +
    +
    +

    Email module

    +

    Renault Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Renault, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/renault/system/artifacts/form.html b/design-systems/renault/system/artifacts/form.html new file mode 100644 index 000000000..12ba8c456 --- /dev/null +++ b/design-systems/renault/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Renault - Form page + + + +
    +
    +
    +

    Form module

    +

    Renault Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Renault, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/renault/system/artifacts/landing.html b/design-systems/renault/system/artifacts/landing.html new file mode 100644 index 000000000..21b3aafb5 --- /dev/null +++ b/design-systems/renault/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Renault - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Renault Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Renault, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/renault/system/artifacts/newsletter.html b/design-systems/renault/system/artifacts/newsletter.html new file mode 100644 index 000000000..aff0aee29 --- /dev/null +++ b/design-systems/renault/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Renault - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Renault Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Renault, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/renault/system/artifacts/poster.html b/design-systems/renault/system/artifacts/poster.html new file mode 100644 index 000000000..86cd29e3e --- /dev/null +++ b/design-systems/renault/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Renault - Poster + + + +
    +
    +
    +

    Poster module

    +

    Renault Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Renault, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/renault/system/index.html b/design-systems/renault/system/index.html new file mode 100644 index 000000000..134c9beea --- /dev/null +++ b/design-systems/renault/system/index.html @@ -0,0 +1,128 @@ + + + + + + Renault - system assets + + + +
    +

    Automotive

    +

    Renault system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/renault/system/kit.dark.html b/design-systems/renault/system/kit.dark.html new file mode 100644 index 000000000..ce8a92834 --- /dev/null +++ b/design-systems/renault/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Renault - dark component kit + + + +
    +
    +
    +

    Automotive system

    +

    Renault component kit

    +

    Bundled Open Design package for Renault, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/renault/system/kit.html b/design-systems/renault/system/kit.html new file mode 100644 index 000000000..9e5ad622b --- /dev/null +++ b/design-systems/renault/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Renault - component kit + + + +
    +
    +
    +

    Automotive system

    +

    Renault component kit

    +

    Bundled Open Design package for Renault, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/renault/system/tokens.default.json b/design-systems/renault/system/tokens.default.json new file mode 100644 index 000000000..0393c08f9 --- /dev/null +++ b/design-systems/renault/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#ffcc33", + "colorPrimaryBg": "#fff4bf", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 8 +} diff --git a/design-systems/replicate/system/artifacts/deck.html b/design-systems/replicate/system/artifacts/deck.html new file mode 100644 index 000000000..579a62c9f --- /dev/null +++ b/design-systems/replicate/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Replicate - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Replicate Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Replicate, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/replicate/system/artifacts/email.html b/design-systems/replicate/system/artifacts/email.html new file mode 100644 index 000000000..aff79dcab --- /dev/null +++ b/design-systems/replicate/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Replicate - Email + + + +
    +
    +
    +

    Email module

    +

    Replicate Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Replicate, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/replicate/system/artifacts/form.html b/design-systems/replicate/system/artifacts/form.html new file mode 100644 index 000000000..757f82737 --- /dev/null +++ b/design-systems/replicate/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Replicate - Form page + + + +
    +
    +
    +

    Form module

    +

    Replicate Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Replicate, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/replicate/system/artifacts/landing.html b/design-systems/replicate/system/artifacts/landing.html new file mode 100644 index 000000000..9d80ba86a --- /dev/null +++ b/design-systems/replicate/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Replicate - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Replicate Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Replicate, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/replicate/system/artifacts/newsletter.html b/design-systems/replicate/system/artifacts/newsletter.html new file mode 100644 index 000000000..d1f257419 --- /dev/null +++ b/design-systems/replicate/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Replicate - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Replicate Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Replicate, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/replicate/system/artifacts/poster.html b/design-systems/replicate/system/artifacts/poster.html new file mode 100644 index 000000000..5fa871d86 --- /dev/null +++ b/design-systems/replicate/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Replicate - Poster + + + +
    +
    +
    +

    Poster module

    +

    Replicate Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Replicate, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/replicate/system/index.html b/design-systems/replicate/system/index.html new file mode 100644 index 000000000..3643ced99 --- /dev/null +++ b/design-systems/replicate/system/index.html @@ -0,0 +1,128 @@ + + + + + + Replicate - system assets + + + +
    +

    AI & LLM

    +

    Replicate system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/replicate/system/kit.dark.html b/design-systems/replicate/system/kit.dark.html new file mode 100644 index 000000000..85d0a94a8 --- /dev/null +++ b/design-systems/replicate/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Replicate - dark component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    Replicate component kit

    +

    Bundled Open Design package for Replicate, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/replicate/system/kit.html b/design-systems/replicate/system/kit.html new file mode 100644 index 000000000..2b7caa7b2 --- /dev/null +++ b/design-systems/replicate/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Replicate - component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    Replicate component kit

    +

    Bundled Open Design package for Replicate, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/replicate/system/tokens.default.json b/design-systems/replicate/system/tokens.default.json new file mode 100644 index 000000000..a0b728f83 --- /dev/null +++ b/design-systems/replicate/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#ea2804", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 16%)", + "fontSize": 16, + "borderRadius": 9999 +} diff --git a/design-systems/resend/system/artifacts/deck.html b/design-systems/resend/system/artifacts/deck.html new file mode 100644 index 000000000..05ff269ed --- /dev/null +++ b/design-systems/resend/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Resend - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Resend Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Resend, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/resend/system/artifacts/email.html b/design-systems/resend/system/artifacts/email.html new file mode 100644 index 000000000..e89e2c4d2 --- /dev/null +++ b/design-systems/resend/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Resend - Email + + + +
    +
    +
    +

    Email module

    +

    Resend Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Resend, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/resend/system/artifacts/form.html b/design-systems/resend/system/artifacts/form.html new file mode 100644 index 000000000..2914cf028 --- /dev/null +++ b/design-systems/resend/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Resend - Form page + + + +
    +
    +
    +

    Form module

    +

    Resend Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Resend, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/resend/system/artifacts/landing.html b/design-systems/resend/system/artifacts/landing.html new file mode 100644 index 000000000..840e59a87 --- /dev/null +++ b/design-systems/resend/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Resend - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Resend Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Resend, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/resend/system/artifacts/newsletter.html b/design-systems/resend/system/artifacts/newsletter.html new file mode 100644 index 000000000..fbb0edfd9 --- /dev/null +++ b/design-systems/resend/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Resend - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Resend Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Resend, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/resend/system/artifacts/poster.html b/design-systems/resend/system/artifacts/poster.html new file mode 100644 index 000000000..e1d5ea52d --- /dev/null +++ b/design-systems/resend/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Resend - Poster + + + +
    +
    +
    +

    Poster module

    +

    Resend Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Resend, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/resend/system/index.html b/design-systems/resend/system/index.html new file mode 100644 index 000000000..650eabd13 --- /dev/null +++ b/design-systems/resend/system/index.html @@ -0,0 +1,128 @@ + + + + + + Resend - system assets + + + +
    +

    Productivity & SaaS

    +

    Resend system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/resend/system/kit.dark.html b/design-systems/resend/system/kit.dark.html new file mode 100644 index 000000000..98b5764fd --- /dev/null +++ b/design-systems/resend/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Resend - dark component kit + + + +
    +
    +
    +

    Productivity & SaaS system

    +

    Resend component kit

    +

    Bundled Open Design package for Resend, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/resend/system/kit.html b/design-systems/resend/system/kit.html new file mode 100644 index 000000000..29183c225 --- /dev/null +++ b/design-systems/resend/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Resend - component kit + + + +
    +
    +
    +

    Productivity & SaaS system

    +

    Resend component kit

    +

    Bundled Open Design package for Resend, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/resend/system/tokens.default.json b/design-systems/resend/system/tokens.default.json new file mode 100644 index 000000000..31b5efe71 --- /dev/null +++ b/design-systems/resend/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#ff801f", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), white 10%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 12%)", + "fontSize": 16, + "borderRadius": 8 +} diff --git a/design-systems/retro/system/artifacts/deck.html b/design-systems/retro/system/artifacts/deck.html new file mode 100644 index 000000000..7d644adae --- /dev/null +++ b/design-systems/retro/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Retro - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Retro Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Retro, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/retro/system/artifacts/email.html b/design-systems/retro/system/artifacts/email.html new file mode 100644 index 000000000..7aff7a36e --- /dev/null +++ b/design-systems/retro/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Retro - Email + + + +
    +
    +
    +

    Email module

    +

    Retro Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Retro, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/retro/system/artifacts/form.html b/design-systems/retro/system/artifacts/form.html new file mode 100644 index 000000000..737d343e4 --- /dev/null +++ b/design-systems/retro/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Retro - Form page + + + +
    +
    +
    +

    Form module

    +

    Retro Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Retro, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/retro/system/artifacts/landing.html b/design-systems/retro/system/artifacts/landing.html new file mode 100644 index 000000000..05c4cb6be --- /dev/null +++ b/design-systems/retro/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Retro - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Retro Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Retro, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/retro/system/artifacts/newsletter.html b/design-systems/retro/system/artifacts/newsletter.html new file mode 100644 index 000000000..4f5a068fe --- /dev/null +++ b/design-systems/retro/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Retro - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Retro Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Retro, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/retro/system/artifacts/poster.html b/design-systems/retro/system/artifacts/poster.html new file mode 100644 index 000000000..45e87238e --- /dev/null +++ b/design-systems/retro/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Retro - Poster + + + +
    +
    +
    +

    Poster module

    +

    Retro Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Retro, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/retro/system/index.html b/design-systems/retro/system/index.html new file mode 100644 index 000000000..cc06d0a00 --- /dev/null +++ b/design-systems/retro/system/index.html @@ -0,0 +1,128 @@ + + + + + + Retro - system assets + + + +
    +

    Retro & Nostalgic

    +

    Retro system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/retro/system/kit.dark.html b/design-systems/retro/system/kit.dark.html new file mode 100644 index 000000000..e62b68a75 --- /dev/null +++ b/design-systems/retro/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Retro - dark component kit + + + +
    +
    +
    +

    Retro & Nostalgic system

    +

    Retro component kit

    +

    Bundled Open Design package for Retro, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/retro/system/kit.html b/design-systems/retro/system/kit.html new file mode 100644 index 000000000..53123efd9 --- /dev/null +++ b/design-systems/retro/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Retro - component kit + + + +
    +
    +
    +

    Retro & Nostalgic system

    +

    Retro component kit

    +

    Bundled Open Design package for Retro, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/retro/system/tokens.default.json b/design-systems/retro/system/tokens.default.json new file mode 100644 index 000000000..0246f5b63 --- /dev/null +++ b/design-systems/retro/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#d24b1f", + "colorPrimaryBg": "#ffdca8", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 8 +} diff --git a/design-systems/revolut/system/artifacts/deck.html b/design-systems/revolut/system/artifacts/deck.html new file mode 100644 index 000000000..21d8b2e7b --- /dev/null +++ b/design-systems/revolut/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Revolut - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Revolut Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Revolut, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/revolut/system/artifacts/email.html b/design-systems/revolut/system/artifacts/email.html new file mode 100644 index 000000000..cfaef55ee --- /dev/null +++ b/design-systems/revolut/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Revolut - Email + + + +
    +
    +
    +

    Email module

    +

    Revolut Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Revolut, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/revolut/system/artifacts/form.html b/design-systems/revolut/system/artifacts/form.html new file mode 100644 index 000000000..b243aa151 --- /dev/null +++ b/design-systems/revolut/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Revolut - Form page + + + +
    +
    +
    +

    Form module

    +

    Revolut Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Revolut, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/revolut/system/artifacts/landing.html b/design-systems/revolut/system/artifacts/landing.html new file mode 100644 index 000000000..52dd66d70 --- /dev/null +++ b/design-systems/revolut/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Revolut - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Revolut Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Revolut, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/revolut/system/artifacts/newsletter.html b/design-systems/revolut/system/artifacts/newsletter.html new file mode 100644 index 000000000..55a42b619 --- /dev/null +++ b/design-systems/revolut/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Revolut - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Revolut Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Revolut, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/revolut/system/artifacts/poster.html b/design-systems/revolut/system/artifacts/poster.html new file mode 100644 index 000000000..3dc11b0f6 --- /dev/null +++ b/design-systems/revolut/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Revolut - Poster + + + +
    +
    +
    +

    Poster module

    +

    Revolut Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Revolut, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/revolut/system/index.html b/design-systems/revolut/system/index.html new file mode 100644 index 000000000..d8fb479b1 --- /dev/null +++ b/design-systems/revolut/system/index.html @@ -0,0 +1,128 @@ + + + + + + Revolut - system assets + + + +
    +

    Fintech & Crypto

    +

    Revolut system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/revolut/system/kit.dark.html b/design-systems/revolut/system/kit.dark.html new file mode 100644 index 000000000..86f5de626 --- /dev/null +++ b/design-systems/revolut/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Revolut - dark component kit + + + +
    +
    +
    +

    Fintech & Crypto system

    +

    Revolut component kit

    +

    Bundled Open Design package for Revolut, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/revolut/system/kit.html b/design-systems/revolut/system/kit.html new file mode 100644 index 000000000..6feb4fabf --- /dev/null +++ b/design-systems/revolut/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Revolut - component kit + + + +
    +
    +
    +

    Fintech & Crypto system

    +

    Revolut component kit

    +

    Bundled Open Design package for Revolut, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/revolut/system/tokens.default.json b/design-systems/revolut/system/tokens.default.json new file mode 100644 index 000000000..e65be3b34 --- /dev/null +++ b/design-systems/revolut/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#0666eb", + "colorPrimaryBg": "#eef4ff", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 20 +} diff --git a/design-systems/runwayml/system/artifacts/deck.html b/design-systems/runwayml/system/artifacts/deck.html new file mode 100644 index 000000000..e1a405bfb --- /dev/null +++ b/design-systems/runwayml/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Runway - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Runway Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Runway, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/runwayml/system/artifacts/email.html b/design-systems/runwayml/system/artifacts/email.html new file mode 100644 index 000000000..b8baf306c --- /dev/null +++ b/design-systems/runwayml/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Runway - Email + + + +
    +
    +
    +

    Email module

    +

    Runway Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Runway, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/runwayml/system/artifacts/form.html b/design-systems/runwayml/system/artifacts/form.html new file mode 100644 index 000000000..acbfcf9ef --- /dev/null +++ b/design-systems/runwayml/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Runway - Form page + + + +
    +
    +
    +

    Form module

    +

    Runway Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Runway, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/runwayml/system/artifacts/landing.html b/design-systems/runwayml/system/artifacts/landing.html new file mode 100644 index 000000000..6e975ccfe --- /dev/null +++ b/design-systems/runwayml/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Runway - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Runway Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Runway, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/runwayml/system/artifacts/newsletter.html b/design-systems/runwayml/system/artifacts/newsletter.html new file mode 100644 index 000000000..137648719 --- /dev/null +++ b/design-systems/runwayml/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Runway - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Runway Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Runway, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/runwayml/system/artifacts/poster.html b/design-systems/runwayml/system/artifacts/poster.html new file mode 100644 index 000000000..1ad5dd73f --- /dev/null +++ b/design-systems/runwayml/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Runway - Poster + + + +
    +
    +
    +

    Poster module

    +

    Runway Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Runway, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/runwayml/system/index.html b/design-systems/runwayml/system/index.html new file mode 100644 index 000000000..46eeb7e1f --- /dev/null +++ b/design-systems/runwayml/system/index.html @@ -0,0 +1,128 @@ + + + + + + Runway - system assets + + + +
    +

    AI & LLM

    +

    Runway system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/runwayml/system/kit.dark.html b/design-systems/runwayml/system/kit.dark.html new file mode 100644 index 000000000..c650301e2 --- /dev/null +++ b/design-systems/runwayml/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Runway - dark component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    Runway component kit

    +

    Bundled Open Design package for Runway, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/runwayml/system/kit.html b/design-systems/runwayml/system/kit.html new file mode 100644 index 000000000..ccadcb9fd --- /dev/null +++ b/design-systems/runwayml/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Runway - component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    Runway component kit

    +

    Bundled Open Design package for Runway, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/runwayml/system/tokens.default.json b/design-systems/runwayml/system/tokens.default.json new file mode 100644 index 000000000..1269452c1 --- /dev/null +++ b/design-systems/runwayml/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#ffffff", + "colorPrimaryBg": "#030303", + "colorPrimaryHover": "#e9ecf2", + "colorPrimaryActive": "#c9ccd1", + "fontSize": 16, + "borderRadius": 8 +} diff --git a/design-systems/sanity/system/artifacts/deck.html b/design-systems/sanity/system/artifacts/deck.html new file mode 100644 index 000000000..deccb4274 --- /dev/null +++ b/design-systems/sanity/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Sanity - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Sanity Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Sanity, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/sanity/system/artifacts/email.html b/design-systems/sanity/system/artifacts/email.html new file mode 100644 index 000000000..9b7505421 --- /dev/null +++ b/design-systems/sanity/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Sanity - Email + + + +
    +
    +
    +

    Email module

    +

    Sanity Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Sanity, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/sanity/system/artifacts/form.html b/design-systems/sanity/system/artifacts/form.html new file mode 100644 index 000000000..680f761fb --- /dev/null +++ b/design-systems/sanity/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Sanity - Form page + + + +
    +
    +
    +

    Form module

    +

    Sanity Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Sanity, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/sanity/system/artifacts/landing.html b/design-systems/sanity/system/artifacts/landing.html new file mode 100644 index 000000000..f5599d708 --- /dev/null +++ b/design-systems/sanity/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Sanity - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Sanity Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Sanity, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/sanity/system/artifacts/newsletter.html b/design-systems/sanity/system/artifacts/newsletter.html new file mode 100644 index 000000000..d81893f09 --- /dev/null +++ b/design-systems/sanity/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Sanity - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Sanity Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Sanity, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/sanity/system/artifacts/poster.html b/design-systems/sanity/system/artifacts/poster.html new file mode 100644 index 000000000..ce7c2f5ce --- /dev/null +++ b/design-systems/sanity/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Sanity - Poster + + + +
    +
    +
    +

    Poster module

    +

    Sanity Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Sanity, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/sanity/system/index.html b/design-systems/sanity/system/index.html new file mode 100644 index 000000000..a63157cf2 --- /dev/null +++ b/design-systems/sanity/system/index.html @@ -0,0 +1,128 @@ + + + + + + Sanity - system assets + + + +
    +

    Backend & Data

    +

    Sanity system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/sanity/system/kit.dark.html b/design-systems/sanity/system/kit.dark.html new file mode 100644 index 000000000..bcd299bd2 --- /dev/null +++ b/design-systems/sanity/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Sanity - dark component kit + + + +
    +
    +
    +

    Backend & Data system

    +

    Sanity component kit

    +

    Bundled Open Design package for Sanity, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/sanity/system/kit.html b/design-systems/sanity/system/kit.html new file mode 100644 index 000000000..a7ad56839 --- /dev/null +++ b/design-systems/sanity/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Sanity - component kit + + + +
    +
    +
    +

    Backend & Data system

    +

    Sanity component kit

    +

    Bundled Open Design package for Sanity, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/sanity/system/tokens.default.json b/design-systems/sanity/system/tokens.default.json new file mode 100644 index 000000000..e10444d81 --- /dev/null +++ b/design-systems/sanity/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#f03e2f", + "colorPrimaryBg": "#fff1ef", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 10 +} diff --git a/design-systems/sentry/system/artifacts/deck.html b/design-systems/sentry/system/artifacts/deck.html new file mode 100644 index 000000000..4ef4a5be4 --- /dev/null +++ b/design-systems/sentry/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Sentry - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Sentry Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Sentry, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/sentry/system/artifacts/email.html b/design-systems/sentry/system/artifacts/email.html new file mode 100644 index 000000000..cb7c96df8 --- /dev/null +++ b/design-systems/sentry/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Sentry - Email + + + +
    +
    +
    +

    Email module

    +

    Sentry Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Sentry, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/sentry/system/artifacts/form.html b/design-systems/sentry/system/artifacts/form.html new file mode 100644 index 000000000..ac6c01cc1 --- /dev/null +++ b/design-systems/sentry/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Sentry - Form page + + + +
    +
    +
    +

    Form module

    +

    Sentry Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Sentry, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/sentry/system/artifacts/landing.html b/design-systems/sentry/system/artifacts/landing.html new file mode 100644 index 000000000..494323ac5 --- /dev/null +++ b/design-systems/sentry/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Sentry - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Sentry Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Sentry, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/sentry/system/artifacts/newsletter.html b/design-systems/sentry/system/artifacts/newsletter.html new file mode 100644 index 000000000..77be722a6 --- /dev/null +++ b/design-systems/sentry/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Sentry - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Sentry Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Sentry, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/sentry/system/artifacts/poster.html b/design-systems/sentry/system/artifacts/poster.html new file mode 100644 index 000000000..77eb18308 --- /dev/null +++ b/design-systems/sentry/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Sentry - Poster + + + +
    +
    +
    +

    Poster module

    +

    Sentry Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Sentry, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/sentry/system/index.html b/design-systems/sentry/system/index.html new file mode 100644 index 000000000..44ae51b04 --- /dev/null +++ b/design-systems/sentry/system/index.html @@ -0,0 +1,128 @@ + + + + + + Sentry - system assets + + + +
    +

    Backend & Data

    +

    Sentry system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/sentry/system/kit.dark.html b/design-systems/sentry/system/kit.dark.html new file mode 100644 index 000000000..0d86718e4 --- /dev/null +++ b/design-systems/sentry/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Sentry - dark component kit + + + +
    +
    +
    +

    Backend & Data system

    +

    Sentry component kit

    +

    Bundled Open Design package for Sentry, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/sentry/system/kit.html b/design-systems/sentry/system/kit.html new file mode 100644 index 000000000..d88bd4785 --- /dev/null +++ b/design-systems/sentry/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Sentry - component kit + + + +
    +
    +
    +

    Backend & Data system

    +

    Sentry component kit

    +

    Bundled Open Design package for Sentry, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/sentry/system/tokens.default.json b/design-systems/sentry/system/tokens.default.json new file mode 100644 index 000000000..ca9bf6c74 --- /dev/null +++ b/design-systems/sentry/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#6a5fc1", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 8 +} diff --git a/design-systems/shadcn/system/artifacts/deck.html b/design-systems/shadcn/system/artifacts/deck.html new file mode 100644 index 000000000..9158d2e0e --- /dev/null +++ b/design-systems/shadcn/system/artifacts/deck.html @@ -0,0 +1,144 @@ + + + + + + Shadcn - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Shadcn Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Shadcn, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/shadcn/system/artifacts/email.html b/design-systems/shadcn/system/artifacts/email.html new file mode 100644 index 000000000..663dc4d32 --- /dev/null +++ b/design-systems/shadcn/system/artifacts/email.html @@ -0,0 +1,144 @@ + + + + + + Shadcn - Email + + + +
    +
    +
    +

    Email module

    +

    Shadcn Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Shadcn, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/shadcn/system/artifacts/form.html b/design-systems/shadcn/system/artifacts/form.html new file mode 100644 index 000000000..bc0e96e2e --- /dev/null +++ b/design-systems/shadcn/system/artifacts/form.html @@ -0,0 +1,144 @@ + + + + + + Shadcn - Form page + + + +
    +
    +
    +

    Form module

    +

    Shadcn Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Shadcn, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/shadcn/system/artifacts/landing.html b/design-systems/shadcn/system/artifacts/landing.html new file mode 100644 index 000000000..432e8f51e --- /dev/null +++ b/design-systems/shadcn/system/artifacts/landing.html @@ -0,0 +1,144 @@ + + + + + + Shadcn - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Shadcn Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Shadcn, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/shadcn/system/artifacts/newsletter.html b/design-systems/shadcn/system/artifacts/newsletter.html new file mode 100644 index 000000000..1c3902d9f --- /dev/null +++ b/design-systems/shadcn/system/artifacts/newsletter.html @@ -0,0 +1,144 @@ + + + + + + Shadcn - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Shadcn Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Shadcn, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/shadcn/system/artifacts/poster.html b/design-systems/shadcn/system/artifacts/poster.html new file mode 100644 index 000000000..5dfda10ea --- /dev/null +++ b/design-systems/shadcn/system/artifacts/poster.html @@ -0,0 +1,144 @@ + + + + + + Shadcn - Poster + + + +
    +
    +
    +

    Poster module

    +

    Shadcn Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Shadcn, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/shadcn/system/index.html b/design-systems/shadcn/system/index.html new file mode 100644 index 000000000..445771fe7 --- /dev/null +++ b/design-systems/shadcn/system/index.html @@ -0,0 +1,135 @@ + + + + + + Shadcn - system assets + + + +
    +

    Modern & Minimal

    +

    Shadcn system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/shadcn/system/kit.dark.html b/design-systems/shadcn/system/kit.dark.html new file mode 100644 index 000000000..157eea72f --- /dev/null +++ b/design-systems/shadcn/system/kit.dark.html @@ -0,0 +1,156 @@ + + + + + + Shadcn - dark component kit + + + +
    +
    +
    +

    Modern & Minimal system

    +

    Shadcn component kit

    +

    Bundled Open Design package for Shadcn, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/shadcn/system/kit.html b/design-systems/shadcn/system/kit.html new file mode 100644 index 000000000..b9cc28b12 --- /dev/null +++ b/design-systems/shadcn/system/kit.html @@ -0,0 +1,156 @@ + + + + + + Shadcn - component kit + + + +
    +
    +
    +

    Modern & Minimal system

    +

    Shadcn component kit

    +

    Bundled Open Design package for Shadcn, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/shadcn/system/tokens.default.json b/design-systems/shadcn/system/tokens.default.json new file mode 100644 index 000000000..5256ba0c7 --- /dev/null +++ b/design-systems/shadcn/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#000000", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), white 10%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), white 18%)", + "fontSize": 16, + "borderRadius": 8 +} diff --git a/design-systems/shopify/system/artifacts/deck.html b/design-systems/shopify/system/artifacts/deck.html new file mode 100644 index 000000000..7b14284e7 --- /dev/null +++ b/design-systems/shopify/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Shopify - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Shopify Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Shopify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/shopify/system/artifacts/email.html b/design-systems/shopify/system/artifacts/email.html new file mode 100644 index 000000000..8e36e99aa --- /dev/null +++ b/design-systems/shopify/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Shopify - Email + + + +
    +
    +
    +

    Email module

    +

    Shopify Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Shopify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/shopify/system/artifacts/form.html b/design-systems/shopify/system/artifacts/form.html new file mode 100644 index 000000000..b2e564baa --- /dev/null +++ b/design-systems/shopify/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Shopify - Form page + + + +
    +
    +
    +

    Form module

    +

    Shopify Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Shopify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/shopify/system/artifacts/landing.html b/design-systems/shopify/system/artifacts/landing.html new file mode 100644 index 000000000..e26351d4d --- /dev/null +++ b/design-systems/shopify/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Shopify - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Shopify Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Shopify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/shopify/system/artifacts/newsletter.html b/design-systems/shopify/system/artifacts/newsletter.html new file mode 100644 index 000000000..508fc2ee3 --- /dev/null +++ b/design-systems/shopify/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Shopify - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Shopify Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Shopify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/shopify/system/artifacts/poster.html b/design-systems/shopify/system/artifacts/poster.html new file mode 100644 index 000000000..412fc5f3c --- /dev/null +++ b/design-systems/shopify/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Shopify - Poster + + + +
    +
    +
    +

    Poster module

    +

    Shopify Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Shopify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/shopify/system/index.html b/design-systems/shopify/system/index.html new file mode 100644 index 000000000..88f6f5977 --- /dev/null +++ b/design-systems/shopify/system/index.html @@ -0,0 +1,128 @@ + + + + + + Shopify - system assets + + + +
    +

    E-Commerce & Retail

    +

    Shopify system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/shopify/system/kit.dark.html b/design-systems/shopify/system/kit.dark.html new file mode 100644 index 000000000..9d2b58430 --- /dev/null +++ b/design-systems/shopify/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Shopify - dark component kit + + + +
    +
    +
    +

    E-Commerce & Retail system

    +

    Shopify component kit

    +

    Bundled Open Design package for Shopify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/shopify/system/kit.html b/design-systems/shopify/system/kit.html new file mode 100644 index 000000000..3e39e78ce --- /dev/null +++ b/design-systems/shopify/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Shopify - component kit + + + +
    +
    +
    +

    E-Commerce & Retail system

    +

    Shopify component kit

    +

    Bundled Open Design package for Shopify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/shopify/system/tokens.default.json b/design-systems/shopify/system/tokens.default.json new file mode 100644 index 000000000..572b508ce --- /dev/null +++ b/design-systems/shopify/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#36f4a4", + "colorPrimaryBg": "#061a1c", + "colorPrimaryHover": "#2de097", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 18, + "borderRadius": 8 +} diff --git a/design-systems/simple/system/artifacts/deck.html b/design-systems/simple/system/artifacts/deck.html new file mode 100644 index 000000000..b40427a46 --- /dev/null +++ b/design-systems/simple/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Simple - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Simple Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Simple, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/simple/system/artifacts/email.html b/design-systems/simple/system/artifacts/email.html new file mode 100644 index 000000000..c714185db --- /dev/null +++ b/design-systems/simple/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Simple - Email + + + +
    +
    +
    +

    Email module

    +

    Simple Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Simple, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/simple/system/artifacts/form.html b/design-systems/simple/system/artifacts/form.html new file mode 100644 index 000000000..001f7a6a5 --- /dev/null +++ b/design-systems/simple/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Simple - Form page + + + +
    +
    +
    +

    Form module

    +

    Simple Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Simple, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/simple/system/artifacts/landing.html b/design-systems/simple/system/artifacts/landing.html new file mode 100644 index 000000000..3d204c7d0 --- /dev/null +++ b/design-systems/simple/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Simple - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Simple Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Simple, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/simple/system/artifacts/newsletter.html b/design-systems/simple/system/artifacts/newsletter.html new file mode 100644 index 000000000..6629c2dc4 --- /dev/null +++ b/design-systems/simple/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Simple - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Simple Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Simple, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/simple/system/artifacts/poster.html b/design-systems/simple/system/artifacts/poster.html new file mode 100644 index 000000000..c6e7dfd04 --- /dev/null +++ b/design-systems/simple/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Simple - Poster + + + +
    +
    +
    +

    Poster module

    +

    Simple Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Simple, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/simple/system/index.html b/design-systems/simple/system/index.html new file mode 100644 index 000000000..a95572c40 --- /dev/null +++ b/design-systems/simple/system/index.html @@ -0,0 +1,128 @@ + + + + + + Simple - system assets + + + +
    +

    Modern & Minimal

    +

    Simple system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/simple/system/kit.dark.html b/design-systems/simple/system/kit.dark.html new file mode 100644 index 000000000..4f793f210 --- /dev/null +++ b/design-systems/simple/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Simple - dark component kit + + + +
    +
    +
    +

    Modern & Minimal system

    +

    Simple component kit

    +

    Bundled Open Design package for Simple, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/simple/system/kit.html b/design-systems/simple/system/kit.html new file mode 100644 index 000000000..ff8791e6a --- /dev/null +++ b/design-systems/simple/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Simple - component kit + + + +
    +
    +
    +

    Modern & Minimal system

    +

    Simple component kit

    +

    Bundled Open Design package for Simple, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/simple/system/tokens.default.json b/design-systems/simple/system/tokens.default.json new file mode 100644 index 000000000..a1beb9985 --- /dev/null +++ b/design-systems/simple/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#2563eb", + "colorPrimaryBg": "#eaf1ff", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/skeumorphism/system/artifacts/deck.html b/design-systems/skeumorphism/system/artifacts/deck.html new file mode 100644 index 000000000..d8d1b74bf --- /dev/null +++ b/design-systems/skeumorphism/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Skeumorphism - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Skeumorphism Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Skeumorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/skeumorphism/system/artifacts/email.html b/design-systems/skeumorphism/system/artifacts/email.html new file mode 100644 index 000000000..07fb1374f --- /dev/null +++ b/design-systems/skeumorphism/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Skeumorphism - Email + + + +
    +
    +
    +

    Email module

    +

    Skeumorphism Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Skeumorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/skeumorphism/system/artifacts/form.html b/design-systems/skeumorphism/system/artifacts/form.html new file mode 100644 index 000000000..4c1496513 --- /dev/null +++ b/design-systems/skeumorphism/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Skeumorphism - Form page + + + +
    +
    +
    +

    Form module

    +

    Skeumorphism Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Skeumorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/skeumorphism/system/artifacts/landing.html b/design-systems/skeumorphism/system/artifacts/landing.html new file mode 100644 index 000000000..a110def17 --- /dev/null +++ b/design-systems/skeumorphism/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Skeumorphism - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Skeumorphism Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Skeumorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/skeumorphism/system/artifacts/newsletter.html b/design-systems/skeumorphism/system/artifacts/newsletter.html new file mode 100644 index 000000000..572fa6ee0 --- /dev/null +++ b/design-systems/skeumorphism/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Skeumorphism - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Skeumorphism Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Skeumorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/skeumorphism/system/artifacts/poster.html b/design-systems/skeumorphism/system/artifacts/poster.html new file mode 100644 index 000000000..e36d04608 --- /dev/null +++ b/design-systems/skeumorphism/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Skeumorphism - Poster + + + +
    +
    +
    +

    Poster module

    +

    Skeumorphism Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Skeumorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/skeumorphism/system/index.html b/design-systems/skeumorphism/system/index.html new file mode 100644 index 000000000..0887fd269 --- /dev/null +++ b/design-systems/skeumorphism/system/index.html @@ -0,0 +1,128 @@ + + + + + + Skeumorphism - system assets + + + +
    +

    Morphism & Effects

    +

    Skeumorphism system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/skeumorphism/system/kit.dark.html b/design-systems/skeumorphism/system/kit.dark.html new file mode 100644 index 000000000..eeb8f1fcc --- /dev/null +++ b/design-systems/skeumorphism/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Skeumorphism - dark component kit + + + +
    +
    +
    +

    Morphism & Effects system

    +

    Skeumorphism component kit

    +

    Bundled Open Design package for Skeumorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/skeumorphism/system/kit.html b/design-systems/skeumorphism/system/kit.html new file mode 100644 index 000000000..65464f2c4 --- /dev/null +++ b/design-systems/skeumorphism/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Skeumorphism - component kit + + + +
    +
    +
    +

    Morphism & Effects system

    +

    Skeumorphism component kit

    +

    Bundled Open Design package for Skeumorphism, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/skeumorphism/system/tokens.default.json b/design-systems/skeumorphism/system/tokens.default.json new file mode 100644 index 000000000..bb2d78deb --- /dev/null +++ b/design-systems/skeumorphism/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#b46a46", + "colorPrimaryBg": "#ead6c7", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 22 +} diff --git a/design-systems/slack/system/artifacts/deck.html b/design-systems/slack/system/artifacts/deck.html new file mode 100644 index 000000000..0e1d680bc --- /dev/null +++ b/design-systems/slack/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Slack - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Slack Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Slack, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/slack/system/artifacts/email.html b/design-systems/slack/system/artifacts/email.html new file mode 100644 index 000000000..f6c7628db --- /dev/null +++ b/design-systems/slack/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Slack - Email + + + +
    +
    +
    +

    Email module

    +

    Slack Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Slack, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/slack/system/artifacts/form.html b/design-systems/slack/system/artifacts/form.html new file mode 100644 index 000000000..1c0e2a703 --- /dev/null +++ b/design-systems/slack/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Slack - Form page + + + +
    +
    +
    +

    Form module

    +

    Slack Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Slack, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/slack/system/artifacts/landing.html b/design-systems/slack/system/artifacts/landing.html new file mode 100644 index 000000000..40d21c937 --- /dev/null +++ b/design-systems/slack/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Slack - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Slack Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Slack, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/slack/system/artifacts/newsletter.html b/design-systems/slack/system/artifacts/newsletter.html new file mode 100644 index 000000000..a071faa20 --- /dev/null +++ b/design-systems/slack/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Slack - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Slack Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Slack, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/slack/system/artifacts/poster.html b/design-systems/slack/system/artifacts/poster.html new file mode 100644 index 000000000..032aa2943 --- /dev/null +++ b/design-systems/slack/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Slack - Poster + + + +
    +
    +
    +

    Poster module

    +

    Slack Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Slack, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/slack/system/index.html b/design-systems/slack/system/index.html new file mode 100644 index 000000000..6e81d664d --- /dev/null +++ b/design-systems/slack/system/index.html @@ -0,0 +1,128 @@ + + + + + + Slack - system assets + + + +
    +

    Productivity & SaaS

    +

    Slack system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/slack/system/kit.dark.html b/design-systems/slack/system/kit.dark.html new file mode 100644 index 000000000..eca4c0987 --- /dev/null +++ b/design-systems/slack/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Slack - dark component kit + + + +
    +
    +
    +

    Productivity & SaaS system

    +

    Slack component kit

    +

    Bundled Open Design package for Slack, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/slack/system/kit.html b/design-systems/slack/system/kit.html new file mode 100644 index 000000000..20e139a2e --- /dev/null +++ b/design-systems/slack/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Slack - component kit + + + +
    +
    +
    +

    Productivity & SaaS system

    +

    Slack component kit

    +

    Bundled Open Design package for Slack, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/slack/system/tokens.default.json b/design-systems/slack/system/tokens.default.json new file mode 100644 index 000000000..554f67281 --- /dev/null +++ b/design-systems/slack/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#4a154b", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "#611f69", + "colorPrimaryActive": "#350d36", + "fontSize": 15, + "borderRadius": 8 +} diff --git a/design-systems/sleek/system/artifacts/deck.html b/design-systems/sleek/system/artifacts/deck.html new file mode 100644 index 000000000..369ccbf40 --- /dev/null +++ b/design-systems/sleek/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Sleek - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Sleek Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Sleek, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/sleek/system/artifacts/email.html b/design-systems/sleek/system/artifacts/email.html new file mode 100644 index 000000000..527f27945 --- /dev/null +++ b/design-systems/sleek/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Sleek - Email + + + +
    +
    +
    +

    Email module

    +

    Sleek Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Sleek, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/sleek/system/artifacts/form.html b/design-systems/sleek/system/artifacts/form.html new file mode 100644 index 000000000..1eef1076d --- /dev/null +++ b/design-systems/sleek/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Sleek - Form page + + + +
    +
    +
    +

    Form module

    +

    Sleek Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Sleek, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/sleek/system/artifacts/landing.html b/design-systems/sleek/system/artifacts/landing.html new file mode 100644 index 000000000..5b6cd9a71 --- /dev/null +++ b/design-systems/sleek/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Sleek - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Sleek Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Sleek, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/sleek/system/artifacts/newsletter.html b/design-systems/sleek/system/artifacts/newsletter.html new file mode 100644 index 000000000..689900bc3 --- /dev/null +++ b/design-systems/sleek/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Sleek - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Sleek Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Sleek, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/sleek/system/artifacts/poster.html b/design-systems/sleek/system/artifacts/poster.html new file mode 100644 index 000000000..e06bf2e95 --- /dev/null +++ b/design-systems/sleek/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Sleek - Poster + + + +
    +
    +
    +

    Poster module

    +

    Sleek Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Sleek, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/sleek/system/index.html b/design-systems/sleek/system/index.html new file mode 100644 index 000000000..1e5e00798 --- /dev/null +++ b/design-systems/sleek/system/index.html @@ -0,0 +1,128 @@ + + + + + + Sleek - system assets + + + +
    +

    Modern & Minimal

    +

    Sleek system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/sleek/system/kit.dark.html b/design-systems/sleek/system/kit.dark.html new file mode 100644 index 000000000..0f15cf7f2 --- /dev/null +++ b/design-systems/sleek/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Sleek - dark component kit + + + +
    +
    +
    +

    Modern & Minimal system

    +

    Sleek component kit

    +

    Bundled Open Design package for Sleek, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/sleek/system/kit.html b/design-systems/sleek/system/kit.html new file mode 100644 index 000000000..63429d8ef --- /dev/null +++ b/design-systems/sleek/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Sleek - component kit + + + +
    +
    +
    +

    Modern & Minimal system

    +

    Sleek component kit

    +

    Bundled Open Design package for Sleek, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/sleek/system/tokens.default.json b/design-systems/sleek/system/tokens.default.json new file mode 100644 index 000000000..61436e2d3 --- /dev/null +++ b/design-systems/sleek/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#60a5fa", + "colorPrimaryBg": "#1b2233", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/spacex/system/artifacts/deck.html b/design-systems/spacex/system/artifacts/deck.html new file mode 100644 index 000000000..a4bc56ea2 --- /dev/null +++ b/design-systems/spacex/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + SpaceX - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    SpaceX Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for SpaceX, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/spacex/system/artifacts/email.html b/design-systems/spacex/system/artifacts/email.html new file mode 100644 index 000000000..ec5553d15 --- /dev/null +++ b/design-systems/spacex/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + SpaceX - Email + + + +
    +
    +
    +

    Email module

    +

    SpaceX Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for SpaceX, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/spacex/system/artifacts/form.html b/design-systems/spacex/system/artifacts/form.html new file mode 100644 index 000000000..cc925fb9a --- /dev/null +++ b/design-systems/spacex/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + SpaceX - Form page + + + +
    +
    +
    +

    Form module

    +

    SpaceX Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for SpaceX, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/spacex/system/artifacts/landing.html b/design-systems/spacex/system/artifacts/landing.html new file mode 100644 index 000000000..7335571dd --- /dev/null +++ b/design-systems/spacex/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + SpaceX - Landing page + + + +
    +
    +
    +

    Landing module

    +

    SpaceX Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for SpaceX, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/spacex/system/artifacts/newsletter.html b/design-systems/spacex/system/artifacts/newsletter.html new file mode 100644 index 000000000..87a194550 --- /dev/null +++ b/design-systems/spacex/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + SpaceX - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    SpaceX Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for SpaceX, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/spacex/system/artifacts/poster.html b/design-systems/spacex/system/artifacts/poster.html new file mode 100644 index 000000000..64a24a468 --- /dev/null +++ b/design-systems/spacex/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + SpaceX - Poster + + + +
    +
    +
    +

    Poster module

    +

    SpaceX Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for SpaceX, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/spacex/system/index.html b/design-systems/spacex/system/index.html new file mode 100644 index 000000000..6ec7d747c --- /dev/null +++ b/design-systems/spacex/system/index.html @@ -0,0 +1,128 @@ + + + + + + SpaceX - system assets + + + +
    +

    Media & Consumer

    +

    SpaceX system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/spacex/system/kit.dark.html b/design-systems/spacex/system/kit.dark.html new file mode 100644 index 000000000..2cfe4545d --- /dev/null +++ b/design-systems/spacex/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + SpaceX - dark component kit + + + +
    +
    +
    +

    Media & Consumer system

    +

    SpaceX component kit

    +

    Bundled Open Design package for SpaceX, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/spacex/system/kit.html b/design-systems/spacex/system/kit.html new file mode 100644 index 000000000..781f66354 --- /dev/null +++ b/design-systems/spacex/system/kit.html @@ -0,0 +1,149 @@ + + + + + + SpaceX - component kit + + + +
    +
    +
    +

    Media & Consumer system

    +

    SpaceX component kit

    +

    Bundled Open Design package for SpaceX, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/spacex/system/tokens.default.json b/design-systems/spacex/system/tokens.default.json new file mode 100644 index 000000000..e80735698 --- /dev/null +++ b/design-systems/spacex/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#f0f0fa", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "#ffffff", + "colorPrimaryActive": "#d8d8e6", + "fontSize": 16, + "borderRadius": 4 +} diff --git a/design-systems/spacious/system/artifacts/deck.html b/design-systems/spacious/system/artifacts/deck.html new file mode 100644 index 000000000..98ea65f11 --- /dev/null +++ b/design-systems/spacious/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Spacious - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Spacious Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Spacious, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/spacious/system/artifacts/email.html b/design-systems/spacious/system/artifacts/email.html new file mode 100644 index 000000000..10dc0a1be --- /dev/null +++ b/design-systems/spacious/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Spacious - Email + + + +
    +
    +
    +

    Email module

    +

    Spacious Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Spacious, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/spacious/system/artifacts/form.html b/design-systems/spacious/system/artifacts/form.html new file mode 100644 index 000000000..37c5e0456 --- /dev/null +++ b/design-systems/spacious/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Spacious - Form page + + + +
    +
    +
    +

    Form module

    +

    Spacious Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Spacious, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/spacious/system/artifacts/landing.html b/design-systems/spacious/system/artifacts/landing.html new file mode 100644 index 000000000..ddddcadf6 --- /dev/null +++ b/design-systems/spacious/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Spacious - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Spacious Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Spacious, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/spacious/system/artifacts/newsletter.html b/design-systems/spacious/system/artifacts/newsletter.html new file mode 100644 index 000000000..01df37766 --- /dev/null +++ b/design-systems/spacious/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Spacious - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Spacious Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Spacious, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/spacious/system/artifacts/poster.html b/design-systems/spacious/system/artifacts/poster.html new file mode 100644 index 000000000..9970b5098 --- /dev/null +++ b/design-systems/spacious/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Spacious - Poster + + + +
    +
    +
    +

    Poster module

    +

    Spacious Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Spacious, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/spacious/system/index.html b/design-systems/spacious/system/index.html new file mode 100644 index 000000000..de4ed4efa --- /dev/null +++ b/design-systems/spacious/system/index.html @@ -0,0 +1,128 @@ + + + + + + Spacious - system assets + + + +
    +

    Layout & Structure

    +

    Spacious system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/spacious/system/kit.dark.html b/design-systems/spacious/system/kit.dark.html new file mode 100644 index 000000000..4ef5645c9 --- /dev/null +++ b/design-systems/spacious/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Spacious - dark component kit + + + +
    +
    +
    +

    Layout & Structure system

    +

    Spacious component kit

    +

    Bundled Open Design package for Spacious, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/spacious/system/kit.html b/design-systems/spacious/system/kit.html new file mode 100644 index 000000000..368ab773d --- /dev/null +++ b/design-systems/spacious/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Spacious - component kit + + + +
    +
    +
    +

    Layout & Structure system

    +

    Spacious component kit

    +

    Bundled Open Design package for Spacious, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/spacious/system/tokens.default.json b/design-systems/spacious/system/tokens.default.json new file mode 100644 index 000000000..7a807d5f7 --- /dev/null +++ b/design-systems/spacious/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#8f5d24", + "colorPrimaryBg": "#efe0bd", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 17, + "borderRadius": 16 +} diff --git a/design-systems/spotify/system/artifacts/deck.html b/design-systems/spotify/system/artifacts/deck.html new file mode 100644 index 000000000..59753a1d9 --- /dev/null +++ b/design-systems/spotify/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Spotify - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Spotify Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Spotify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/spotify/system/artifacts/email.html b/design-systems/spotify/system/artifacts/email.html new file mode 100644 index 000000000..915916931 --- /dev/null +++ b/design-systems/spotify/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Spotify - Email + + + +
    +
    +
    +

    Email module

    +

    Spotify Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Spotify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/spotify/system/artifacts/form.html b/design-systems/spotify/system/artifacts/form.html new file mode 100644 index 000000000..0769664d3 --- /dev/null +++ b/design-systems/spotify/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Spotify - Form page + + + +
    +
    +
    +

    Form module

    +

    Spotify Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Spotify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/spotify/system/artifacts/landing.html b/design-systems/spotify/system/artifacts/landing.html new file mode 100644 index 000000000..861852345 --- /dev/null +++ b/design-systems/spotify/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Spotify - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Spotify Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Spotify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/spotify/system/artifacts/newsletter.html b/design-systems/spotify/system/artifacts/newsletter.html new file mode 100644 index 000000000..c9c199b37 --- /dev/null +++ b/design-systems/spotify/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Spotify - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Spotify Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Spotify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/spotify/system/artifacts/poster.html b/design-systems/spotify/system/artifacts/poster.html new file mode 100644 index 000000000..81427f8c4 --- /dev/null +++ b/design-systems/spotify/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Spotify - Poster + + + +
    +
    +
    +

    Poster module

    +

    Spotify Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Spotify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/spotify/system/index.html b/design-systems/spotify/system/index.html new file mode 100644 index 000000000..f45cb4f4b --- /dev/null +++ b/design-systems/spotify/system/index.html @@ -0,0 +1,128 @@ + + + + + + Spotify - system assets + + + +
    +

    Media & Consumer

    +

    Spotify system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/spotify/system/kit.dark.html b/design-systems/spotify/system/kit.dark.html new file mode 100644 index 000000000..f01d7758e --- /dev/null +++ b/design-systems/spotify/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Spotify - dark component kit + + + +
    +
    +
    +

    Media & Consumer system

    +

    Spotify component kit

    +

    Bundled Open Design package for Spotify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/spotify/system/kit.html b/design-systems/spotify/system/kit.html new file mode 100644 index 000000000..4c7bafb54 --- /dev/null +++ b/design-systems/spotify/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Spotify - component kit + + + +
    +
    +
    +

    Media & Consumer system

    +

    Spotify component kit

    +

    Bundled Open Design package for Spotify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/spotify/system/tokens.default.json b/design-systems/spotify/system/tokens.default.json new file mode 100644 index 000000000..14932d4de --- /dev/null +++ b/design-systems/spotify/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#1ed760", + "colorPrimaryBg": "#1f1f1f", + "colorPrimaryHover": "#1db954", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 10%)", + "fontSize": 16, + "borderRadius": 6 +} diff --git a/design-systems/starbucks/system/artifacts/deck.html b/design-systems/starbucks/system/artifacts/deck.html new file mode 100644 index 000000000..175133995 --- /dev/null +++ b/design-systems/starbucks/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Starbucks - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Starbucks Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Starbucks, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/starbucks/system/artifacts/email.html b/design-systems/starbucks/system/artifacts/email.html new file mode 100644 index 000000000..48c369fcb --- /dev/null +++ b/design-systems/starbucks/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Starbucks - Email + + + +
    +
    +
    +

    Email module

    +

    Starbucks Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Starbucks, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/starbucks/system/artifacts/form.html b/design-systems/starbucks/system/artifacts/form.html new file mode 100644 index 000000000..9429e1b05 --- /dev/null +++ b/design-systems/starbucks/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Starbucks - Form page + + + +
    +
    +
    +

    Form module

    +

    Starbucks Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Starbucks, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/starbucks/system/artifacts/landing.html b/design-systems/starbucks/system/artifacts/landing.html new file mode 100644 index 000000000..3b3b6a4eb --- /dev/null +++ b/design-systems/starbucks/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Starbucks - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Starbucks Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Starbucks, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/starbucks/system/artifacts/newsletter.html b/design-systems/starbucks/system/artifacts/newsletter.html new file mode 100644 index 000000000..a3bea1cd4 --- /dev/null +++ b/design-systems/starbucks/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Starbucks - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Starbucks Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Starbucks, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/starbucks/system/artifacts/poster.html b/design-systems/starbucks/system/artifacts/poster.html new file mode 100644 index 000000000..2b036dd63 --- /dev/null +++ b/design-systems/starbucks/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Starbucks - Poster + + + +
    +
    +
    +

    Poster module

    +

    Starbucks Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Starbucks, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/starbucks/system/index.html b/design-systems/starbucks/system/index.html new file mode 100644 index 000000000..ea9f40a3b --- /dev/null +++ b/design-systems/starbucks/system/index.html @@ -0,0 +1,128 @@ + + + + + + Starbucks - system assets + + + +
    +

    E-Commerce & Retail

    +

    Starbucks system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/starbucks/system/kit.dark.html b/design-systems/starbucks/system/kit.dark.html new file mode 100644 index 000000000..ecd015525 --- /dev/null +++ b/design-systems/starbucks/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Starbucks - dark component kit + + + +
    +
    +
    +

    E-Commerce & Retail system

    +

    Starbucks component kit

    +

    Bundled Open Design package for Starbucks, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/starbucks/system/kit.html b/design-systems/starbucks/system/kit.html new file mode 100644 index 000000000..43083ca93 --- /dev/null +++ b/design-systems/starbucks/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Starbucks - component kit + + + +
    +
    +
    +

    E-Commerce & Retail system

    +

    Starbucks component kit

    +

    Bundled Open Design package for Starbucks, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/starbucks/system/tokens.default.json b/design-systems/starbucks/system/tokens.default.json new file mode 100644 index 000000000..b610765f1 --- /dev/null +++ b/design-systems/starbucks/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#00754A", + "colorPrimaryBg": "#edebe9", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 12 +} diff --git a/design-systems/storytelling/system/artifacts/deck.html b/design-systems/storytelling/system/artifacts/deck.html new file mode 100644 index 000000000..4816a3324 --- /dev/null +++ b/design-systems/storytelling/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Storytelling - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Storytelling Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Storytelling, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/storytelling/system/artifacts/email.html b/design-systems/storytelling/system/artifacts/email.html new file mode 100644 index 000000000..6217fde9e --- /dev/null +++ b/design-systems/storytelling/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Storytelling - Email + + + +
    +
    +
    +

    Email module

    +

    Storytelling Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Storytelling, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/storytelling/system/artifacts/form.html b/design-systems/storytelling/system/artifacts/form.html new file mode 100644 index 000000000..16fb0a043 --- /dev/null +++ b/design-systems/storytelling/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Storytelling - Form page + + + +
    +
    +
    +

    Form module

    +

    Storytelling Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Storytelling, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/storytelling/system/artifacts/landing.html b/design-systems/storytelling/system/artifacts/landing.html new file mode 100644 index 000000000..287877206 --- /dev/null +++ b/design-systems/storytelling/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Storytelling - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Storytelling Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Storytelling, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/storytelling/system/artifacts/newsletter.html b/design-systems/storytelling/system/artifacts/newsletter.html new file mode 100644 index 000000000..73e94ed4a --- /dev/null +++ b/design-systems/storytelling/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Storytelling - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Storytelling Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Storytelling, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/storytelling/system/artifacts/poster.html b/design-systems/storytelling/system/artifacts/poster.html new file mode 100644 index 000000000..9522b7514 --- /dev/null +++ b/design-systems/storytelling/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Storytelling - Poster + + + +
    +
    +
    +

    Poster module

    +

    Storytelling Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Storytelling, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/storytelling/system/index.html b/design-systems/storytelling/system/index.html new file mode 100644 index 000000000..32265af25 --- /dev/null +++ b/design-systems/storytelling/system/index.html @@ -0,0 +1,128 @@ + + + + + + Storytelling - system assets + + + +
    +

    Creative & Artistic

    +

    Storytelling system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/storytelling/system/kit.dark.html b/design-systems/storytelling/system/kit.dark.html new file mode 100644 index 000000000..130a15bb9 --- /dev/null +++ b/design-systems/storytelling/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Storytelling - dark component kit + + + +
    +
    +
    +

    Creative & Artistic system

    +

    Storytelling component kit

    +

    Bundled Open Design package for Storytelling, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/storytelling/system/kit.html b/design-systems/storytelling/system/kit.html new file mode 100644 index 000000000..8fd7cac9f --- /dev/null +++ b/design-systems/storytelling/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Storytelling - component kit + + + +
    +
    +
    +

    Creative & Artistic system

    +

    Storytelling component kit

    +

    Bundled Open Design package for Storytelling, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/storytelling/system/tokens.default.json b/design-systems/storytelling/system/tokens.default.json new file mode 100644 index 000000000..436d03f49 --- /dev/null +++ b/design-systems/storytelling/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#9b5b32", + "colorPrimaryBg": "#f1e3cf", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 17, + "borderRadius": 16 +} diff --git a/design-systems/stripe/system/artifacts/deck.html b/design-systems/stripe/system/artifacts/deck.html new file mode 100644 index 000000000..c9324d33e --- /dev/null +++ b/design-systems/stripe/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Stripe - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Stripe Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Stripe, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/stripe/system/artifacts/email.html b/design-systems/stripe/system/artifacts/email.html new file mode 100644 index 000000000..2b7f63cc5 --- /dev/null +++ b/design-systems/stripe/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Stripe - Email + + + +
    +
    +
    +

    Email module

    +

    Stripe Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Stripe, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/stripe/system/artifacts/form.html b/design-systems/stripe/system/artifacts/form.html new file mode 100644 index 000000000..ac520b746 --- /dev/null +++ b/design-systems/stripe/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Stripe - Form page + + + +
    +
    +
    +

    Form module

    +

    Stripe Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Stripe, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/stripe/system/artifacts/landing.html b/design-systems/stripe/system/artifacts/landing.html new file mode 100644 index 000000000..4f3f36ab7 --- /dev/null +++ b/design-systems/stripe/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Stripe - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Stripe Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Stripe, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/stripe/system/artifacts/newsletter.html b/design-systems/stripe/system/artifacts/newsletter.html new file mode 100644 index 000000000..83c99d191 --- /dev/null +++ b/design-systems/stripe/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Stripe - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Stripe Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Stripe, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/stripe/system/artifacts/poster.html b/design-systems/stripe/system/artifacts/poster.html new file mode 100644 index 000000000..914327b4c --- /dev/null +++ b/design-systems/stripe/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Stripe - Poster + + + +
    +
    +
    +

    Poster module

    +

    Stripe Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Stripe, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/stripe/system/index.html b/design-systems/stripe/system/index.html new file mode 100644 index 000000000..6c29b0ab9 --- /dev/null +++ b/design-systems/stripe/system/index.html @@ -0,0 +1,128 @@ + + + + + + Stripe - system assets + + + +
    +

    Fintech & Crypto

    +

    Stripe system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/stripe/system/kit.dark.html b/design-systems/stripe/system/kit.dark.html new file mode 100644 index 000000000..143227315 --- /dev/null +++ b/design-systems/stripe/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Stripe - dark component kit + + + +
    +
    +
    +

    Fintech & Crypto system

    +

    Stripe component kit

    +

    Bundled Open Design package for Stripe, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/stripe/system/kit.html b/design-systems/stripe/system/kit.html new file mode 100644 index 000000000..d1606cf99 --- /dev/null +++ b/design-systems/stripe/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Stripe - component kit + + + +
    +
    +
    +

    Fintech & Crypto system

    +

    Stripe component kit

    +

    Bundled Open Design package for Stripe, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/stripe/system/tokens.default.json b/design-systems/stripe/system/tokens.default.json new file mode 100644 index 000000000..e9d079eec --- /dev/null +++ b/design-systems/stripe/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#533afd", + "colorPrimaryBg": "#f6f9fc", + "colorPrimaryHover": "#4434d4", + "colorPrimaryActive": "#2e2b8c", + "fontSize": 16, + "borderRadius": 6 +} diff --git a/design-systems/supabase/system/artifacts/deck.html b/design-systems/supabase/system/artifacts/deck.html new file mode 100644 index 000000000..97cac243c --- /dev/null +++ b/design-systems/supabase/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Supabase - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Supabase Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Supabase, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/supabase/system/artifacts/email.html b/design-systems/supabase/system/artifacts/email.html new file mode 100644 index 000000000..27a2da1ac --- /dev/null +++ b/design-systems/supabase/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Supabase - Email + + + +
    +
    +
    +

    Email module

    +

    Supabase Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Supabase, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/supabase/system/artifacts/form.html b/design-systems/supabase/system/artifacts/form.html new file mode 100644 index 000000000..50651df37 --- /dev/null +++ b/design-systems/supabase/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Supabase - Form page + + + +
    +
    +
    +

    Form module

    +

    Supabase Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Supabase, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/supabase/system/artifacts/landing.html b/design-systems/supabase/system/artifacts/landing.html new file mode 100644 index 000000000..4ab9d476d --- /dev/null +++ b/design-systems/supabase/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Supabase - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Supabase Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Supabase, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/supabase/system/artifacts/newsletter.html b/design-systems/supabase/system/artifacts/newsletter.html new file mode 100644 index 000000000..350de831b --- /dev/null +++ b/design-systems/supabase/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Supabase - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Supabase Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Supabase, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/supabase/system/artifacts/poster.html b/design-systems/supabase/system/artifacts/poster.html new file mode 100644 index 000000000..68a8e8919 --- /dev/null +++ b/design-systems/supabase/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Supabase - Poster + + + +
    +
    +
    +

    Poster module

    +

    Supabase Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Supabase, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/supabase/system/index.html b/design-systems/supabase/system/index.html new file mode 100644 index 000000000..0e3b1b7cb --- /dev/null +++ b/design-systems/supabase/system/index.html @@ -0,0 +1,128 @@ + + + + + + Supabase - system assets + + + +
    +

    Backend & Data

    +

    Supabase system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/supabase/system/kit.dark.html b/design-systems/supabase/system/kit.dark.html new file mode 100644 index 000000000..e5959ab2d --- /dev/null +++ b/design-systems/supabase/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Supabase - dark component kit + + + +
    +
    +
    +

    Backend & Data system

    +

    Supabase component kit

    +

    Bundled Open Design package for Supabase, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/supabase/system/kit.html b/design-systems/supabase/system/kit.html new file mode 100644 index 000000000..79ea5f497 --- /dev/null +++ b/design-systems/supabase/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Supabase - component kit + + + +
    +
    +
    +

    Backend & Data system

    +

    Supabase component kit

    +

    Bundled Open Design package for Supabase, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/supabase/system/tokens.default.json b/design-systems/supabase/system/tokens.default.json new file mode 100644 index 000000000..e08656854 --- /dev/null +++ b/design-systems/supabase/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#3ecf8e", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "#00c573", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 8 +} diff --git a/design-systems/superhuman/system/artifacts/deck.html b/design-systems/superhuman/system/artifacts/deck.html new file mode 100644 index 000000000..3e8f03dc8 --- /dev/null +++ b/design-systems/superhuman/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Superhuman - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Superhuman Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Superhuman, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/superhuman/system/artifacts/email.html b/design-systems/superhuman/system/artifacts/email.html new file mode 100644 index 000000000..1f3c1a769 --- /dev/null +++ b/design-systems/superhuman/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Superhuman - Email + + + +
    +
    +
    +

    Email module

    +

    Superhuman Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Superhuman, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/superhuman/system/artifacts/form.html b/design-systems/superhuman/system/artifacts/form.html new file mode 100644 index 000000000..e55939d83 --- /dev/null +++ b/design-systems/superhuman/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Superhuman - Form page + + + +
    +
    +
    +

    Form module

    +

    Superhuman Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Superhuman, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/superhuman/system/artifacts/landing.html b/design-systems/superhuman/system/artifacts/landing.html new file mode 100644 index 000000000..0cecf7614 --- /dev/null +++ b/design-systems/superhuman/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Superhuman - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Superhuman Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Superhuman, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/superhuman/system/artifacts/newsletter.html b/design-systems/superhuman/system/artifacts/newsletter.html new file mode 100644 index 000000000..bcb430daf --- /dev/null +++ b/design-systems/superhuman/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Superhuman - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Superhuman Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Superhuman, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/superhuman/system/artifacts/poster.html b/design-systems/superhuman/system/artifacts/poster.html new file mode 100644 index 000000000..70650a2ca --- /dev/null +++ b/design-systems/superhuman/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Superhuman - Poster + + + +
    +
    +
    +

    Poster module

    +

    Superhuman Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Superhuman, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/superhuman/system/index.html b/design-systems/superhuman/system/index.html new file mode 100644 index 000000000..622dc4c65 --- /dev/null +++ b/design-systems/superhuman/system/index.html @@ -0,0 +1,128 @@ + + + + + + Superhuman - system assets + + + +
    +

    Developer Tools

    +

    Superhuman system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/superhuman/system/kit.dark.html b/design-systems/superhuman/system/kit.dark.html new file mode 100644 index 000000000..616a9382c --- /dev/null +++ b/design-systems/superhuman/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Superhuman - dark component kit + + + +
    +
    +
    +

    Developer Tools system

    +

    Superhuman component kit

    +

    Bundled Open Design package for Superhuman, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/superhuman/system/kit.html b/design-systems/superhuman/system/kit.html new file mode 100644 index 000000000..121671a2e --- /dev/null +++ b/design-systems/superhuman/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Superhuman - component kit + + + +
    +
    +
    +

    Developer Tools system

    +

    Superhuman component kit

    +

    Bundled Open Design package for Superhuman, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/superhuman/system/tokens.default.json b/design-systems/superhuman/system/tokens.default.json new file mode 100644 index 000000000..8a80b10ad --- /dev/null +++ b/design-systems/superhuman/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#cbb7fb", + "colorPrimaryBg": "#e9e5dd", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 6%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 12%)", + "fontSize": 16, + "borderRadius": 8 +} diff --git a/design-systems/tesla/system/artifacts/deck.html b/design-systems/tesla/system/artifacts/deck.html new file mode 100644 index 000000000..7a19a4bf8 --- /dev/null +++ b/design-systems/tesla/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Tesla - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Tesla Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Tesla, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/tesla/system/artifacts/email.html b/design-systems/tesla/system/artifacts/email.html new file mode 100644 index 000000000..328f853d7 --- /dev/null +++ b/design-systems/tesla/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Tesla - Email + + + +
    +
    +
    +

    Email module

    +

    Tesla Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Tesla, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/tesla/system/artifacts/form.html b/design-systems/tesla/system/artifacts/form.html new file mode 100644 index 000000000..c40c1cabd --- /dev/null +++ b/design-systems/tesla/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Tesla - Form page + + + +
    +
    +
    +

    Form module

    +

    Tesla Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Tesla, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/tesla/system/artifacts/landing.html b/design-systems/tesla/system/artifacts/landing.html new file mode 100644 index 000000000..e4ed2f80e --- /dev/null +++ b/design-systems/tesla/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Tesla - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Tesla Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Tesla, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/tesla/system/artifacts/newsletter.html b/design-systems/tesla/system/artifacts/newsletter.html new file mode 100644 index 000000000..321215993 --- /dev/null +++ b/design-systems/tesla/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Tesla - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Tesla Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Tesla, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/tesla/system/artifacts/poster.html b/design-systems/tesla/system/artifacts/poster.html new file mode 100644 index 000000000..37a7e4c06 --- /dev/null +++ b/design-systems/tesla/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Tesla - Poster + + + +
    +
    +
    +

    Poster module

    +

    Tesla Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Tesla, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/tesla/system/index.html b/design-systems/tesla/system/index.html new file mode 100644 index 000000000..57767c2b9 --- /dev/null +++ b/design-systems/tesla/system/index.html @@ -0,0 +1,128 @@ + + + + + + Tesla - system assets + + + +
    +

    Automotive

    +

    Tesla system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/tesla/system/kit.dark.html b/design-systems/tesla/system/kit.dark.html new file mode 100644 index 000000000..4a396276d --- /dev/null +++ b/design-systems/tesla/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Tesla - dark component kit + + + +
    +
    +
    +

    Automotive system

    +

    Tesla component kit

    +

    Bundled Open Design package for Tesla, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/tesla/system/kit.html b/design-systems/tesla/system/kit.html new file mode 100644 index 000000000..6e8443431 --- /dev/null +++ b/design-systems/tesla/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Tesla - component kit + + + +
    +
    +
    +

    Automotive system

    +

    Tesla component kit

    +

    Bundled Open Design package for Tesla, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/tesla/system/tokens.default.json b/design-systems/tesla/system/tokens.default.json new file mode 100644 index 000000000..4e3d38fe8 --- /dev/null +++ b/design-systems/tesla/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#3e6ae1", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 14, + "borderRadius": 12 +} diff --git a/design-systems/tetris/system/artifacts/deck.html b/design-systems/tetris/system/artifacts/deck.html new file mode 100644 index 000000000..90bbdd6c2 --- /dev/null +++ b/design-systems/tetris/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Tetris - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Tetris Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Tetris, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/tetris/system/artifacts/email.html b/design-systems/tetris/system/artifacts/email.html new file mode 100644 index 000000000..0672073db --- /dev/null +++ b/design-systems/tetris/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Tetris - Email + + + +
    +
    +
    +

    Email module

    +

    Tetris Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Tetris, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/tetris/system/artifacts/form.html b/design-systems/tetris/system/artifacts/form.html new file mode 100644 index 000000000..432271e6d --- /dev/null +++ b/design-systems/tetris/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Tetris - Form page + + + +
    +
    +
    +

    Form module

    +

    Tetris Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Tetris, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/tetris/system/artifacts/landing.html b/design-systems/tetris/system/artifacts/landing.html new file mode 100644 index 000000000..34ef957b6 --- /dev/null +++ b/design-systems/tetris/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Tetris - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Tetris Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Tetris, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/tetris/system/artifacts/newsletter.html b/design-systems/tetris/system/artifacts/newsletter.html new file mode 100644 index 000000000..621b229d3 --- /dev/null +++ b/design-systems/tetris/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Tetris - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Tetris Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Tetris, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/tetris/system/artifacts/poster.html b/design-systems/tetris/system/artifacts/poster.html new file mode 100644 index 000000000..5eee4558f --- /dev/null +++ b/design-systems/tetris/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Tetris - Poster + + + +
    +
    +
    +

    Poster module

    +

    Tetris Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Tetris, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/tetris/system/index.html b/design-systems/tetris/system/index.html new file mode 100644 index 000000000..4c17b5add --- /dev/null +++ b/design-systems/tetris/system/index.html @@ -0,0 +1,128 @@ + + + + + + Tetris - system assets + + + +
    +

    Themed & Unique

    +

    Tetris system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/tetris/system/kit.dark.html b/design-systems/tetris/system/kit.dark.html new file mode 100644 index 000000000..36af3d6a7 --- /dev/null +++ b/design-systems/tetris/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Tetris - dark component kit + + + +
    +
    +
    +

    Themed & Unique system

    +

    Tetris component kit

    +

    Bundled Open Design package for Tetris, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/tetris/system/kit.html b/design-systems/tetris/system/kit.html new file mode 100644 index 000000000..aa9d2d344 --- /dev/null +++ b/design-systems/tetris/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Tetris - component kit + + + +
    +
    +
    +

    Themed & Unique system

    +

    Tetris component kit

    +

    Bundled Open Design package for Tetris, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/tetris/system/tokens.default.json b/design-systems/tetris/system/tokens.default.json new file mode 100644 index 000000000..deb023245 --- /dev/null +++ b/design-systems/tetris/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#00f0f0", + "colorPrimaryBg": "#17203a", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 14, + "borderRadius": 0 +} diff --git a/design-systems/theverge/system/artifacts/deck.html b/design-systems/theverge/system/artifacts/deck.html new file mode 100644 index 000000000..c81e7c2f0 --- /dev/null +++ b/design-systems/theverge/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + The Verge - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    The Verge Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for The Verge, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/theverge/system/artifacts/email.html b/design-systems/theverge/system/artifacts/email.html new file mode 100644 index 000000000..4245ec8a9 --- /dev/null +++ b/design-systems/theverge/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + The Verge - Email + + + +
    +
    +
    +

    Email module

    +

    The Verge Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for The Verge, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/theverge/system/artifacts/form.html b/design-systems/theverge/system/artifacts/form.html new file mode 100644 index 000000000..7d8295b2b --- /dev/null +++ b/design-systems/theverge/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + The Verge - Form page + + + +
    +
    +
    +

    Form module

    +

    The Verge Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for The Verge, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/theverge/system/artifacts/landing.html b/design-systems/theverge/system/artifacts/landing.html new file mode 100644 index 000000000..cc4e29c36 --- /dev/null +++ b/design-systems/theverge/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + The Verge - Landing page + + + +
    +
    +
    +

    Landing module

    +

    The Verge Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for The Verge, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/theverge/system/artifacts/newsletter.html b/design-systems/theverge/system/artifacts/newsletter.html new file mode 100644 index 000000000..a9ec145e6 --- /dev/null +++ b/design-systems/theverge/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + The Verge - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    The Verge Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for The Verge, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/theverge/system/artifacts/poster.html b/design-systems/theverge/system/artifacts/poster.html new file mode 100644 index 000000000..f66033a11 --- /dev/null +++ b/design-systems/theverge/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + The Verge - Poster + + + +
    +
    +
    +

    Poster module

    +

    The Verge Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for The Verge, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/theverge/system/index.html b/design-systems/theverge/system/index.html new file mode 100644 index 000000000..02998dc5d --- /dev/null +++ b/design-systems/theverge/system/index.html @@ -0,0 +1,128 @@ + + + + + + The Verge - system assets + + + +
    +

    Media & Consumer

    +

    The Verge system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/theverge/system/kit.dark.html b/design-systems/theverge/system/kit.dark.html new file mode 100644 index 000000000..d94319ee7 --- /dev/null +++ b/design-systems/theverge/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + The Verge - dark component kit + + + +
    +
    +
    +

    Media & Consumer system

    +

    The Verge component kit

    +

    Bundled Open Design package for The Verge, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/theverge/system/kit.html b/design-systems/theverge/system/kit.html new file mode 100644 index 000000000..43e5d5504 --- /dev/null +++ b/design-systems/theverge/system/kit.html @@ -0,0 +1,149 @@ + + + + + + The Verge - component kit + + + +
    +
    +
    +

    Media & Consumer system

    +

    The Verge component kit

    +

    Bundled Open Design package for The Verge, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/theverge/system/tokens.default.json b/design-systems/theverge/system/tokens.default.json new file mode 100644 index 000000000..dd86c9fa8 --- /dev/null +++ b/design-systems/theverge/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#ff00a8", + "colorPrimaryBg": "#211022", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 8 +} diff --git a/design-systems/together-ai/system/artifacts/deck.html b/design-systems/together-ai/system/artifacts/deck.html new file mode 100644 index 000000000..b672a5997 --- /dev/null +++ b/design-systems/together-ai/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Together AI - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Together AI Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Together AI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/together-ai/system/artifacts/email.html b/design-systems/together-ai/system/artifacts/email.html new file mode 100644 index 000000000..1755e7827 --- /dev/null +++ b/design-systems/together-ai/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Together AI - Email + + + +
    +
    +
    +

    Email module

    +

    Together AI Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Together AI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/together-ai/system/artifacts/form.html b/design-systems/together-ai/system/artifacts/form.html new file mode 100644 index 000000000..e1420715c --- /dev/null +++ b/design-systems/together-ai/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Together AI - Form page + + + +
    +
    +
    +

    Form module

    +

    Together AI Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Together AI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/together-ai/system/artifacts/landing.html b/design-systems/together-ai/system/artifacts/landing.html new file mode 100644 index 000000000..bb479bde0 --- /dev/null +++ b/design-systems/together-ai/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Together AI - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Together AI Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Together AI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/together-ai/system/artifacts/newsletter.html b/design-systems/together-ai/system/artifacts/newsletter.html new file mode 100644 index 000000000..6767d959d --- /dev/null +++ b/design-systems/together-ai/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Together AI - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Together AI Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Together AI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/together-ai/system/artifacts/poster.html b/design-systems/together-ai/system/artifacts/poster.html new file mode 100644 index 000000000..e3f78b29a --- /dev/null +++ b/design-systems/together-ai/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Together AI - Poster + + + +
    +
    +
    +

    Poster module

    +

    Together AI Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Together AI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/together-ai/system/index.html b/design-systems/together-ai/system/index.html new file mode 100644 index 000000000..3ca60d4ba --- /dev/null +++ b/design-systems/together-ai/system/index.html @@ -0,0 +1,128 @@ + + + + + + Together AI - system assets + + + +
    +

    AI & LLM

    +

    Together AI system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/together-ai/system/kit.dark.html b/design-systems/together-ai/system/kit.dark.html new file mode 100644 index 000000000..92ebc367b --- /dev/null +++ b/design-systems/together-ai/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Together AI - dark component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    Together AI component kit

    +

    Bundled Open Design package for Together AI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/together-ai/system/kit.html b/design-systems/together-ai/system/kit.html new file mode 100644 index 000000000..343d27853 --- /dev/null +++ b/design-systems/together-ai/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Together AI - component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    Together AI component kit

    +

    Bundled Open Design package for Together AI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/together-ai/system/tokens.default.json b/design-systems/together-ai/system/tokens.default.json new file mode 100644 index 000000000..3d9eccf57 --- /dev/null +++ b/design-systems/together-ai/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#010120", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), white 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), white 16%)", + "fontSize": 16, + "borderRadius": 8 +} diff --git a/design-systems/totality-festival/system/artifacts/deck.html b/design-systems/totality-festival/system/artifacts/deck.html new file mode 100644 index 000000000..1192c1b60 --- /dev/null +++ b/design-systems/totality-festival/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Totality Festival - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Totality Festival Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Totality Festival, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/totality-festival/system/artifacts/email.html b/design-systems/totality-festival/system/artifacts/email.html new file mode 100644 index 000000000..c98cba4cb --- /dev/null +++ b/design-systems/totality-festival/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Totality Festival - Email + + + +
    +
    +
    +

    Email module

    +

    Totality Festival Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Totality Festival, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/totality-festival/system/artifacts/form.html b/design-systems/totality-festival/system/artifacts/form.html new file mode 100644 index 000000000..5bdff1dad --- /dev/null +++ b/design-systems/totality-festival/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Totality Festival - Form page + + + +
    +
    +
    +

    Form module

    +

    Totality Festival Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Totality Festival, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/totality-festival/system/artifacts/landing.html b/design-systems/totality-festival/system/artifacts/landing.html new file mode 100644 index 000000000..7a0b5e22b --- /dev/null +++ b/design-systems/totality-festival/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Totality Festival - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Totality Festival Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Totality Festival, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/totality-festival/system/artifacts/newsletter.html b/design-systems/totality-festival/system/artifacts/newsletter.html new file mode 100644 index 000000000..a59fdbd69 --- /dev/null +++ b/design-systems/totality-festival/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Totality Festival - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Totality Festival Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Totality Festival, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/totality-festival/system/artifacts/poster.html b/design-systems/totality-festival/system/artifacts/poster.html new file mode 100644 index 000000000..62820292b --- /dev/null +++ b/design-systems/totality-festival/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Totality Festival - Poster + + + +
    +
    +
    +

    Poster module

    +

    Totality Festival Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Totality Festival, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/totality-festival/system/index.html b/design-systems/totality-festival/system/index.html new file mode 100644 index 000000000..230870126 --- /dev/null +++ b/design-systems/totality-festival/system/index.html @@ -0,0 +1,128 @@ + + + + + + Totality Festival - system assets + + + +
    +

    Themed & Unique

    +

    Totality Festival system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/totality-festival/system/kit.dark.html b/design-systems/totality-festival/system/kit.dark.html new file mode 100644 index 000000000..9b493369d --- /dev/null +++ b/design-systems/totality-festival/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Totality Festival - dark component kit + + + +
    +
    +
    +

    Themed & Unique system

    +

    Totality Festival component kit

    +

    Bundled Open Design package for Totality Festival, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/totality-festival/system/kit.html b/design-systems/totality-festival/system/kit.html new file mode 100644 index 000000000..5c1f3c99e --- /dev/null +++ b/design-systems/totality-festival/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Totality Festival - component kit + + + +
    +
    +
    +

    Themed & Unique system

    +

    Totality Festival component kit

    +

    Bundled Open Design package for Totality Festival, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/totality-festival/system/tokens.default.json b/design-systems/totality-festival/system/tokens.default.json new file mode 100644 index 000000000..866bdd39f --- /dev/null +++ b/design-systems/totality-festival/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#c084fc", + "colorPrimaryBg": "#1e1540", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/trading-terminal/system/artifacts/deck.html b/design-systems/trading-terminal/system/artifacts/deck.html new file mode 100644 index 000000000..89201dbfd --- /dev/null +++ b/design-systems/trading-terminal/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Trading Terminal Design System - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Trading Terminal Design System Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Trading Terminal Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/trading-terminal/system/artifacts/email.html b/design-systems/trading-terminal/system/artifacts/email.html new file mode 100644 index 000000000..4bf29fb7c --- /dev/null +++ b/design-systems/trading-terminal/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Trading Terminal Design System - Email + + + +
    +
    +
    +

    Email module

    +

    Trading Terminal Design System Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Trading Terminal Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/trading-terminal/system/artifacts/form.html b/design-systems/trading-terminal/system/artifacts/form.html new file mode 100644 index 000000000..ff32af0eb --- /dev/null +++ b/design-systems/trading-terminal/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Trading Terminal Design System - Form page + + + +
    +
    +
    +

    Form module

    +

    Trading Terminal Design System Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Trading Terminal Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/trading-terminal/system/artifacts/landing.html b/design-systems/trading-terminal/system/artifacts/landing.html new file mode 100644 index 000000000..fbd5e0a14 --- /dev/null +++ b/design-systems/trading-terminal/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Trading Terminal Design System - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Trading Terminal Design System Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Trading Terminal Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/trading-terminal/system/artifacts/newsletter.html b/design-systems/trading-terminal/system/artifacts/newsletter.html new file mode 100644 index 000000000..4313bf7c5 --- /dev/null +++ b/design-systems/trading-terminal/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Trading Terminal Design System - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Trading Terminal Design System Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Trading Terminal Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/trading-terminal/system/artifacts/poster.html b/design-systems/trading-terminal/system/artifacts/poster.html new file mode 100644 index 000000000..e8580da7c --- /dev/null +++ b/design-systems/trading-terminal/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Trading Terminal Design System - Poster + + + +
    +
    +
    +

    Poster module

    +

    Trading Terminal Design System Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Trading Terminal Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/trading-terminal/system/index.html b/design-systems/trading-terminal/system/index.html new file mode 100644 index 000000000..4ccc9b900 --- /dev/null +++ b/design-systems/trading-terminal/system/index.html @@ -0,0 +1,128 @@ + + + + + + Trading Terminal Design System - system assets + + + +
    +

    Themed & Unique

    +

    Trading Terminal Design System system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/trading-terminal/system/kit.dark.html b/design-systems/trading-terminal/system/kit.dark.html new file mode 100644 index 000000000..e7059610d --- /dev/null +++ b/design-systems/trading-terminal/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Trading Terminal Design System - dark component kit + + + +
    +
    +
    +

    Themed & Unique system

    +

    Trading Terminal Design System component kit

    +

    Bundled Open Design package for Trading Terminal Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/trading-terminal/system/kit.html b/design-systems/trading-terminal/system/kit.html new file mode 100644 index 000000000..a5a48a689 --- /dev/null +++ b/design-systems/trading-terminal/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Trading Terminal Design System - component kit + + + +
    +
    +
    +

    Themed & Unique system

    +

    Trading Terminal Design System component kit

    +

    Bundled Open Design package for Trading Terminal Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/trading-terminal/system/tokens.default.json b/design-systems/trading-terminal/system/tokens.default.json new file mode 100644 index 000000000..fe644870b --- /dev/null +++ b/design-systems/trading-terminal/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#38bdf8", + "colorPrimaryBg": "#162238", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 14, + "borderRadius": 8 +} diff --git a/design-systems/uber/system/artifacts/deck.html b/design-systems/uber/system/artifacts/deck.html new file mode 100644 index 000000000..3900cd96f --- /dev/null +++ b/design-systems/uber/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Uber - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Uber Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Uber, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/uber/system/artifacts/email.html b/design-systems/uber/system/artifacts/email.html new file mode 100644 index 000000000..560fe5968 --- /dev/null +++ b/design-systems/uber/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Uber - Email + + + +
    +
    +
    +

    Email module

    +

    Uber Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Uber, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/uber/system/artifacts/form.html b/design-systems/uber/system/artifacts/form.html new file mode 100644 index 000000000..2196ac0ca --- /dev/null +++ b/design-systems/uber/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Uber - Form page + + + +
    +
    +
    +

    Form module

    +

    Uber Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Uber, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/uber/system/artifacts/landing.html b/design-systems/uber/system/artifacts/landing.html new file mode 100644 index 000000000..51b669fe2 --- /dev/null +++ b/design-systems/uber/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Uber - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Uber Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Uber, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/uber/system/artifacts/newsletter.html b/design-systems/uber/system/artifacts/newsletter.html new file mode 100644 index 000000000..9c4e29f36 --- /dev/null +++ b/design-systems/uber/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Uber - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Uber Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Uber, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/uber/system/artifacts/poster.html b/design-systems/uber/system/artifacts/poster.html new file mode 100644 index 000000000..634535af4 --- /dev/null +++ b/design-systems/uber/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Uber - Poster + + + +
    +
    +
    +

    Poster module

    +

    Uber Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Uber, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/uber/system/index.html b/design-systems/uber/system/index.html new file mode 100644 index 000000000..dbb6632bb --- /dev/null +++ b/design-systems/uber/system/index.html @@ -0,0 +1,128 @@ + + + + + + Uber - system assets + + + +
    +

    Media & Consumer

    +

    Uber system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/uber/system/kit.dark.html b/design-systems/uber/system/kit.dark.html new file mode 100644 index 000000000..468ddc146 --- /dev/null +++ b/design-systems/uber/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Uber - dark component kit + + + +
    +
    +
    +

    Media & Consumer system

    +

    Uber component kit

    +

    Bundled Open Design package for Uber, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/uber/system/kit.html b/design-systems/uber/system/kit.html new file mode 100644 index 000000000..f39b99d91 --- /dev/null +++ b/design-systems/uber/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Uber - component kit + + + +
    +
    +
    +

    Media & Consumer system

    +

    Uber component kit

    +

    Bundled Open Design package for Uber, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/uber/system/tokens.default.json b/design-systems/uber/system/tokens.default.json new file mode 100644 index 000000000..4e58ad058 --- /dev/null +++ b/design-systems/uber/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#000000", + "colorPrimaryBg": "#f8f8f8", + "colorPrimaryHover": "#e2e2e2", + "colorPrimaryActive": "rgba(0, 0, 0, 0.08)", + "fontSize": 16, + "borderRadius": 8 +} diff --git a/design-systems/urdu/system/artifacts/deck.html b/design-systems/urdu/system/artifacts/deck.html new file mode 100644 index 000000000..6dee86e3f --- /dev/null +++ b/design-systems/urdu/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Urdu Modern (Indus Script System) - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Urdu Modern (Indus Script System) Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Urdu Modern (Indus Script System), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/urdu/system/artifacts/email.html b/design-systems/urdu/system/artifacts/email.html new file mode 100644 index 000000000..dca754fa7 --- /dev/null +++ b/design-systems/urdu/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Urdu Modern (Indus Script System) - Email + + + +
    +
    +
    +

    Email module

    +

    Urdu Modern (Indus Script System) Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Urdu Modern (Indus Script System), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/urdu/system/artifacts/form.html b/design-systems/urdu/system/artifacts/form.html new file mode 100644 index 000000000..f0c2ccf99 --- /dev/null +++ b/design-systems/urdu/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Urdu Modern (Indus Script System) - Form page + + + +
    +
    +
    +

    Form module

    +

    Urdu Modern (Indus Script System) Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Urdu Modern (Indus Script System), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/urdu/system/artifacts/landing.html b/design-systems/urdu/system/artifacts/landing.html new file mode 100644 index 000000000..ca1c93558 --- /dev/null +++ b/design-systems/urdu/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Urdu Modern (Indus Script System) - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Urdu Modern (Indus Script System) Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Urdu Modern (Indus Script System), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/urdu/system/artifacts/newsletter.html b/design-systems/urdu/system/artifacts/newsletter.html new file mode 100644 index 000000000..77350b5aa --- /dev/null +++ b/design-systems/urdu/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Urdu Modern (Indus Script System) - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Urdu Modern (Indus Script System) Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Urdu Modern (Indus Script System), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/urdu/system/artifacts/poster.html b/design-systems/urdu/system/artifacts/poster.html new file mode 100644 index 000000000..f044d4894 --- /dev/null +++ b/design-systems/urdu/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Urdu Modern (Indus Script System) - Poster + + + +
    +
    +
    +

    Poster module

    +

    Urdu Modern (Indus Script System) Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Urdu Modern (Indus Script System), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/urdu/system/index.html b/design-systems/urdu/system/index.html new file mode 100644 index 000000000..1e6c8f45c --- /dev/null +++ b/design-systems/urdu/system/index.html @@ -0,0 +1,128 @@ + + + + + + Urdu Modern (Indus Script System) - system assets + + + +
    +

    Editorial / Personal / Publication

    +

    Urdu Modern (Indus Script System) system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/urdu/system/kit.dark.html b/design-systems/urdu/system/kit.dark.html new file mode 100644 index 000000000..9835d0361 --- /dev/null +++ b/design-systems/urdu/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Urdu Modern (Indus Script System) - dark component kit + + + +
    +
    +
    +

    Editorial / Personal / Publication system

    +

    Urdu Modern (Indus Script System) component kit

    +

    Bundled Open Design package for Urdu Modern (Indus Script System), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/urdu/system/kit.html b/design-systems/urdu/system/kit.html new file mode 100644 index 000000000..6f663c3c6 --- /dev/null +++ b/design-systems/urdu/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Urdu Modern (Indus Script System) - component kit + + + +
    +
    +
    +

    Editorial / Personal / Publication system

    +

    Urdu Modern (Indus Script System) component kit

    +

    Bundled Open Design package for Urdu Modern (Indus Script System), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/urdu/system/tokens.default.json b/design-systems/urdu/system/tokens.default.json new file mode 100644 index 000000000..d115b6111 --- /dev/null +++ b/design-systems/urdu/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#1f8f46", + "colorPrimaryBg": "#e5f5e7", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/vercel/system/artifacts/deck.html b/design-systems/vercel/system/artifacts/deck.html new file mode 100644 index 000000000..2d9922ed3 --- /dev/null +++ b/design-systems/vercel/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Vercel - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Vercel Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Vercel, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/vercel/system/artifacts/email.html b/design-systems/vercel/system/artifacts/email.html new file mode 100644 index 000000000..c7130673f --- /dev/null +++ b/design-systems/vercel/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Vercel - Email + + + +
    +
    +
    +

    Email module

    +

    Vercel Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Vercel, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/vercel/system/artifacts/form.html b/design-systems/vercel/system/artifacts/form.html new file mode 100644 index 000000000..2c371208e --- /dev/null +++ b/design-systems/vercel/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Vercel - Form page + + + +
    +
    +
    +

    Form module

    +

    Vercel Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Vercel, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/vercel/system/artifacts/landing.html b/design-systems/vercel/system/artifacts/landing.html new file mode 100644 index 000000000..0a01b409c --- /dev/null +++ b/design-systems/vercel/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Vercel - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Vercel Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Vercel, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/vercel/system/artifacts/newsletter.html b/design-systems/vercel/system/artifacts/newsletter.html new file mode 100644 index 000000000..a1692697a --- /dev/null +++ b/design-systems/vercel/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Vercel - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Vercel Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Vercel, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/vercel/system/artifacts/poster.html b/design-systems/vercel/system/artifacts/poster.html new file mode 100644 index 000000000..bc8c0b929 --- /dev/null +++ b/design-systems/vercel/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Vercel - Poster + + + +
    +
    +
    +

    Poster module

    +

    Vercel Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Vercel, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/vercel/system/index.html b/design-systems/vercel/system/index.html new file mode 100644 index 000000000..942075e9c --- /dev/null +++ b/design-systems/vercel/system/index.html @@ -0,0 +1,128 @@ + + + + + + Vercel - system assets + + + +
    +

    Developer Tools

    +

    Vercel system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/vercel/system/kit.dark.html b/design-systems/vercel/system/kit.dark.html new file mode 100644 index 000000000..5a10442cf --- /dev/null +++ b/design-systems/vercel/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Vercel - dark component kit + + + +
    +
    +
    +

    Developer Tools system

    +

    Vercel component kit

    +

    Bundled Open Design package for Vercel, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/vercel/system/kit.html b/design-systems/vercel/system/kit.html new file mode 100644 index 000000000..218da0a1d --- /dev/null +++ b/design-systems/vercel/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Vercel - component kit + + + +
    +
    +
    +

    Developer Tools system

    +

    Vercel component kit

    +

    Bundled Open Design package for Vercel, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/vercel/system/tokens.default.json b/design-systems/vercel/system/tokens.default.json new file mode 100644 index 000000000..03cc5a4d7 --- /dev/null +++ b/design-systems/vercel/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#0070f3", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 8 +} diff --git a/design-systems/vibrant/system/artifacts/deck.html b/design-systems/vibrant/system/artifacts/deck.html new file mode 100644 index 000000000..dc51f3c08 --- /dev/null +++ b/design-systems/vibrant/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Vibrant - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Vibrant Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Vibrant, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/vibrant/system/artifacts/email.html b/design-systems/vibrant/system/artifacts/email.html new file mode 100644 index 000000000..d2fd49343 --- /dev/null +++ b/design-systems/vibrant/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Vibrant - Email + + + +
    +
    +
    +

    Email module

    +

    Vibrant Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Vibrant, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/vibrant/system/artifacts/form.html b/design-systems/vibrant/system/artifacts/form.html new file mode 100644 index 000000000..f82498d9b --- /dev/null +++ b/design-systems/vibrant/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Vibrant - Form page + + + +
    +
    +
    +

    Form module

    +

    Vibrant Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Vibrant, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/vibrant/system/artifacts/landing.html b/design-systems/vibrant/system/artifacts/landing.html new file mode 100644 index 000000000..a117b3f33 --- /dev/null +++ b/design-systems/vibrant/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Vibrant - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Vibrant Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Vibrant, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/vibrant/system/artifacts/newsletter.html b/design-systems/vibrant/system/artifacts/newsletter.html new file mode 100644 index 000000000..ba4932609 --- /dev/null +++ b/design-systems/vibrant/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Vibrant - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Vibrant Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Vibrant, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/vibrant/system/artifacts/poster.html b/design-systems/vibrant/system/artifacts/poster.html new file mode 100644 index 000000000..083cfdb42 --- /dev/null +++ b/design-systems/vibrant/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Vibrant - Poster + + + +
    +
    +
    +

    Poster module

    +

    Vibrant Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Vibrant, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/vibrant/system/index.html b/design-systems/vibrant/system/index.html new file mode 100644 index 000000000..b82d8a118 --- /dev/null +++ b/design-systems/vibrant/system/index.html @@ -0,0 +1,128 @@ + + + + + + Vibrant - system assets + + + +
    +

    Bold & Expressive

    +

    Vibrant system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/vibrant/system/kit.dark.html b/design-systems/vibrant/system/kit.dark.html new file mode 100644 index 000000000..9ee2d9183 --- /dev/null +++ b/design-systems/vibrant/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Vibrant - dark component kit + + + +
    +
    +
    +

    Bold & Expressive system

    +

    Vibrant component kit

    +

    Bundled Open Design package for Vibrant, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/vibrant/system/kit.html b/design-systems/vibrant/system/kit.html new file mode 100644 index 000000000..44b064247 --- /dev/null +++ b/design-systems/vibrant/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Vibrant - component kit + + + +
    +
    +
    +

    Bold & Expressive system

    +

    Vibrant component kit

    +

    Bundled Open Design package for Vibrant, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/vibrant/system/tokens.default.json b/design-systems/vibrant/system/tokens.default.json new file mode 100644 index 000000000..9dc195c87 --- /dev/null +++ b/design-systems/vibrant/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#ff6b00", + "colorPrimaryBg": "#ffef9f", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/vintage/system/artifacts/deck.html b/design-systems/vintage/system/artifacts/deck.html new file mode 100644 index 000000000..de6aa7c3c --- /dev/null +++ b/design-systems/vintage/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Vintage - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Vintage Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Vintage, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/vintage/system/artifacts/email.html b/design-systems/vintage/system/artifacts/email.html new file mode 100644 index 000000000..5cbfd90d8 --- /dev/null +++ b/design-systems/vintage/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Vintage - Email + + + +
    +
    +
    +

    Email module

    +

    Vintage Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Vintage, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/vintage/system/artifacts/form.html b/design-systems/vintage/system/artifacts/form.html new file mode 100644 index 000000000..c8d271ee7 --- /dev/null +++ b/design-systems/vintage/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Vintage - Form page + + + +
    +
    +
    +

    Form module

    +

    Vintage Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Vintage, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/vintage/system/artifacts/landing.html b/design-systems/vintage/system/artifacts/landing.html new file mode 100644 index 000000000..9652ab815 --- /dev/null +++ b/design-systems/vintage/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Vintage - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Vintage Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Vintage, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/vintage/system/artifacts/newsletter.html b/design-systems/vintage/system/artifacts/newsletter.html new file mode 100644 index 000000000..4242a4985 --- /dev/null +++ b/design-systems/vintage/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Vintage - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Vintage Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Vintage, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/vintage/system/artifacts/poster.html b/design-systems/vintage/system/artifacts/poster.html new file mode 100644 index 000000000..f952ede42 --- /dev/null +++ b/design-systems/vintage/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Vintage - Poster + + + +
    +
    +
    +

    Poster module

    +

    Vintage Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Vintage, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/vintage/system/index.html b/design-systems/vintage/system/index.html new file mode 100644 index 000000000..5f2863d98 --- /dev/null +++ b/design-systems/vintage/system/index.html @@ -0,0 +1,128 @@ + + + + + + Vintage - system assets + + + +
    +

    Retro & Nostalgic

    +

    Vintage system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/vintage/system/kit.dark.html b/design-systems/vintage/system/kit.dark.html new file mode 100644 index 000000000..f5d1fae4f --- /dev/null +++ b/design-systems/vintage/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Vintage - dark component kit + + + +
    +
    +
    +

    Retro & Nostalgic system

    +

    Vintage component kit

    +

    Bundled Open Design package for Vintage, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/vintage/system/kit.html b/design-systems/vintage/system/kit.html new file mode 100644 index 000000000..679ad768e --- /dev/null +++ b/design-systems/vintage/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Vintage - component kit + + + +
    +
    +
    +

    Retro & Nostalgic system

    +

    Vintage component kit

    +

    Bundled Open Design package for Vintage, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/vintage/system/tokens.default.json b/design-systems/vintage/system/tokens.default.json new file mode 100644 index 000000000..7a807d5f7 --- /dev/null +++ b/design-systems/vintage/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#8f5d24", + "colorPrimaryBg": "#efe0bd", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 17, + "borderRadius": 16 +} diff --git a/design-systems/vodafone/system/artifacts/deck.html b/design-systems/vodafone/system/artifacts/deck.html new file mode 100644 index 000000000..34d83af18 --- /dev/null +++ b/design-systems/vodafone/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Vodafone - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Vodafone Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Vodafone, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/vodafone/system/artifacts/email.html b/design-systems/vodafone/system/artifacts/email.html new file mode 100644 index 000000000..f57c036c7 --- /dev/null +++ b/design-systems/vodafone/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Vodafone - Email + + + +
    +
    +
    +

    Email module

    +

    Vodafone Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Vodafone, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/vodafone/system/artifacts/form.html b/design-systems/vodafone/system/artifacts/form.html new file mode 100644 index 000000000..c0c7fb94c --- /dev/null +++ b/design-systems/vodafone/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Vodafone - Form page + + + +
    +
    +
    +

    Form module

    +

    Vodafone Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Vodafone, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/vodafone/system/artifacts/landing.html b/design-systems/vodafone/system/artifacts/landing.html new file mode 100644 index 000000000..c4268fd11 --- /dev/null +++ b/design-systems/vodafone/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Vodafone - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Vodafone Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Vodafone, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/vodafone/system/artifacts/newsletter.html b/design-systems/vodafone/system/artifacts/newsletter.html new file mode 100644 index 000000000..baf7dbf71 --- /dev/null +++ b/design-systems/vodafone/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Vodafone - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Vodafone Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Vodafone, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/vodafone/system/artifacts/poster.html b/design-systems/vodafone/system/artifacts/poster.html new file mode 100644 index 000000000..c9539a159 --- /dev/null +++ b/design-systems/vodafone/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Vodafone - Poster + + + +
    +
    +
    +

    Poster module

    +

    Vodafone Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Vodafone, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/vodafone/system/index.html b/design-systems/vodafone/system/index.html new file mode 100644 index 000000000..d92791d9b --- /dev/null +++ b/design-systems/vodafone/system/index.html @@ -0,0 +1,128 @@ + + + + + + Vodafone - system assets + + + +
    +

    Media & Consumer

    +

    Vodafone system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/vodafone/system/kit.dark.html b/design-systems/vodafone/system/kit.dark.html new file mode 100644 index 000000000..2a8533277 --- /dev/null +++ b/design-systems/vodafone/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Vodafone - dark component kit + + + +
    +
    +
    +

    Media & Consumer system

    +

    Vodafone component kit

    +

    Bundled Open Design package for Vodafone, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/vodafone/system/kit.html b/design-systems/vodafone/system/kit.html new file mode 100644 index 000000000..62a8b8dbb --- /dev/null +++ b/design-systems/vodafone/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Vodafone - component kit + + + +
    +
    +
    +

    Media & Consumer system

    +

    Vodafone component kit

    +

    Bundled Open Design package for Vodafone, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/vodafone/system/tokens.default.json b/design-systems/vodafone/system/tokens.default.json new file mode 100644 index 000000000..3dbdc706c --- /dev/null +++ b/design-systems/vodafone/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#e60000", + "colorPrimaryBg": "#fff1f1", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 16 +} diff --git a/design-systems/voltagent/system/artifacts/deck.html b/design-systems/voltagent/system/artifacts/deck.html new file mode 100644 index 000000000..d4d76a5bb --- /dev/null +++ b/design-systems/voltagent/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + VoltAgent - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    VoltAgent Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for VoltAgent, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/voltagent/system/artifacts/email.html b/design-systems/voltagent/system/artifacts/email.html new file mode 100644 index 000000000..b9b194817 --- /dev/null +++ b/design-systems/voltagent/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + VoltAgent - Email + + + +
    +
    +
    +

    Email module

    +

    VoltAgent Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for VoltAgent, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/voltagent/system/artifacts/form.html b/design-systems/voltagent/system/artifacts/form.html new file mode 100644 index 000000000..40af7cbea --- /dev/null +++ b/design-systems/voltagent/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + VoltAgent - Form page + + + +
    +
    +
    +

    Form module

    +

    VoltAgent Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for VoltAgent, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/voltagent/system/artifacts/landing.html b/design-systems/voltagent/system/artifacts/landing.html new file mode 100644 index 000000000..97636c0c2 --- /dev/null +++ b/design-systems/voltagent/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + VoltAgent - Landing page + + + +
    +
    +
    +

    Landing module

    +

    VoltAgent Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for VoltAgent, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/voltagent/system/artifacts/newsletter.html b/design-systems/voltagent/system/artifacts/newsletter.html new file mode 100644 index 000000000..8c48a2e77 --- /dev/null +++ b/design-systems/voltagent/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + VoltAgent - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    VoltAgent Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for VoltAgent, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/voltagent/system/artifacts/poster.html b/design-systems/voltagent/system/artifacts/poster.html new file mode 100644 index 000000000..85d721223 --- /dev/null +++ b/design-systems/voltagent/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + VoltAgent - Poster + + + +
    +
    +
    +

    Poster module

    +

    VoltAgent Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for VoltAgent, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/voltagent/system/index.html b/design-systems/voltagent/system/index.html new file mode 100644 index 000000000..2060ce681 --- /dev/null +++ b/design-systems/voltagent/system/index.html @@ -0,0 +1,128 @@ + + + + + + VoltAgent - system assets + + + +
    +

    AI & LLM

    +

    VoltAgent system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/voltagent/system/kit.dark.html b/design-systems/voltagent/system/kit.dark.html new file mode 100644 index 000000000..155f02d71 --- /dev/null +++ b/design-systems/voltagent/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + VoltAgent - dark component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    VoltAgent component kit

    +

    Bundled Open Design package for VoltAgent, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/voltagent/system/kit.html b/design-systems/voltagent/system/kit.html new file mode 100644 index 000000000..6f760ad17 --- /dev/null +++ b/design-systems/voltagent/system/kit.html @@ -0,0 +1,149 @@ + + + + + + VoltAgent - component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    VoltAgent component kit

    +

    Bundled Open Design package for VoltAgent, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/voltagent/system/tokens.default.json b/design-systems/voltagent/system/tokens.default.json new file mode 100644 index 000000000..e56516af5 --- /dev/null +++ b/design-systems/voltagent/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#7cff6b", + "colorPrimaryBg": "#14281e", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 15, + "borderRadius": 12 +} diff --git a/design-systems/warm-editorial/system/artifacts/deck.html b/design-systems/warm-editorial/system/artifacts/deck.html new file mode 100644 index 000000000..8905a3700 --- /dev/null +++ b/design-systems/warm-editorial/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Warm Editorial - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Warm Editorial Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Warm Editorial, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/warm-editorial/system/artifacts/email.html b/design-systems/warm-editorial/system/artifacts/email.html new file mode 100644 index 000000000..0bf2efc73 --- /dev/null +++ b/design-systems/warm-editorial/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Warm Editorial - Email + + + +
    +
    +
    +

    Email module

    +

    Warm Editorial Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Warm Editorial, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/warm-editorial/system/artifacts/form.html b/design-systems/warm-editorial/system/artifacts/form.html new file mode 100644 index 000000000..75df5687e --- /dev/null +++ b/design-systems/warm-editorial/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Warm Editorial - Form page + + + +
    +
    +
    +

    Form module

    +

    Warm Editorial Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Warm Editorial, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/warm-editorial/system/artifacts/landing.html b/design-systems/warm-editorial/system/artifacts/landing.html new file mode 100644 index 000000000..646f954b4 --- /dev/null +++ b/design-systems/warm-editorial/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Warm Editorial - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Warm Editorial Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Warm Editorial, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/warm-editorial/system/artifacts/newsletter.html b/design-systems/warm-editorial/system/artifacts/newsletter.html new file mode 100644 index 000000000..6af6947f5 --- /dev/null +++ b/design-systems/warm-editorial/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Warm Editorial - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Warm Editorial Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Warm Editorial, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/warm-editorial/system/artifacts/poster.html b/design-systems/warm-editorial/system/artifacts/poster.html new file mode 100644 index 000000000..462c6c342 --- /dev/null +++ b/design-systems/warm-editorial/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Warm Editorial - Poster + + + +
    +
    +
    +

    Poster module

    +

    Warm Editorial Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Warm Editorial, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/warm-editorial/system/index.html b/design-systems/warm-editorial/system/index.html new file mode 100644 index 000000000..6e613ca50 --- /dev/null +++ b/design-systems/warm-editorial/system/index.html @@ -0,0 +1,128 @@ + + + + + + Warm Editorial - system assets + + + +
    +

    Starter

    +

    Warm Editorial system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/warm-editorial/system/kit.dark.html b/design-systems/warm-editorial/system/kit.dark.html new file mode 100644 index 000000000..ffefa373c --- /dev/null +++ b/design-systems/warm-editorial/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Warm Editorial - dark component kit + + + +
    +
    +
    +

    Starter system

    +

    Warm Editorial component kit

    +

    Bundled Open Design package for Warm Editorial, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/warm-editorial/system/kit.html b/design-systems/warm-editorial/system/kit.html new file mode 100644 index 000000000..d73c9e13c --- /dev/null +++ b/design-systems/warm-editorial/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Warm Editorial - component kit + + + +
    +
    +
    +

    Starter system

    +

    Warm Editorial component kit

    +

    Bundled Open Design package for Warm Editorial, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/warm-editorial/system/tokens.default.json b/design-systems/warm-editorial/system/tokens.default.json new file mode 100644 index 000000000..436d03f49 --- /dev/null +++ b/design-systems/warm-editorial/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#9b5b32", + "colorPrimaryBg": "#f1e3cf", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 17, + "borderRadius": 16 +} diff --git a/design-systems/warp/system/artifacts/deck.html b/design-systems/warp/system/artifacts/deck.html new file mode 100644 index 000000000..e0a4204e6 --- /dev/null +++ b/design-systems/warp/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Warp - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Warp Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Warp, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/warp/system/artifacts/email.html b/design-systems/warp/system/artifacts/email.html new file mode 100644 index 000000000..7b1a6f5c6 --- /dev/null +++ b/design-systems/warp/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Warp - Email + + + +
    +
    +
    +

    Email module

    +

    Warp Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Warp, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/warp/system/artifacts/form.html b/design-systems/warp/system/artifacts/form.html new file mode 100644 index 000000000..6c8752b03 --- /dev/null +++ b/design-systems/warp/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Warp - Form page + + + +
    +
    +
    +

    Form module

    +

    Warp Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Warp, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/warp/system/artifacts/landing.html b/design-systems/warp/system/artifacts/landing.html new file mode 100644 index 000000000..273da54fa --- /dev/null +++ b/design-systems/warp/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Warp - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Warp Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Warp, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/warp/system/artifacts/newsletter.html b/design-systems/warp/system/artifacts/newsletter.html new file mode 100644 index 000000000..754f5f70f --- /dev/null +++ b/design-systems/warp/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Warp - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Warp Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Warp, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/warp/system/artifacts/poster.html b/design-systems/warp/system/artifacts/poster.html new file mode 100644 index 000000000..5ee3c5fe7 --- /dev/null +++ b/design-systems/warp/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Warp - Poster + + + +
    +
    +
    +

    Poster module

    +

    Warp Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Warp, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/warp/system/index.html b/design-systems/warp/system/index.html new file mode 100644 index 000000000..be894f7c6 --- /dev/null +++ b/design-systems/warp/system/index.html @@ -0,0 +1,128 @@ + + + + + + Warp - system assets + + + +
    +

    Developer Tools

    +

    Warp system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/warp/system/kit.dark.html b/design-systems/warp/system/kit.dark.html new file mode 100644 index 000000000..a05966103 --- /dev/null +++ b/design-systems/warp/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Warp - dark component kit + + + +
    +
    +
    +

    Developer Tools system

    +

    Warp component kit

    +

    Bundled Open Design package for Warp, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/warp/system/kit.html b/design-systems/warp/system/kit.html new file mode 100644 index 000000000..487e5ca6d --- /dev/null +++ b/design-systems/warp/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Warp - component kit + + + +
    +
    +
    +

    Developer Tools system

    +

    Warp component kit

    +

    Bundled Open Design package for Warp, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/warp/system/tokens.default.json b/design-systems/warp/system/tokens.default.json new file mode 100644 index 000000000..99acb6d4d --- /dev/null +++ b/design-systems/warp/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#353534", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "#454545", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 18, + "borderRadius": 12 +} diff --git a/design-systems/webex/system/artifacts/deck.html b/design-systems/webex/system/artifacts/deck.html new file mode 100644 index 000000000..ff3017aad --- /dev/null +++ b/design-systems/webex/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Webex - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Webex Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Webex, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/webex/system/artifacts/email.html b/design-systems/webex/system/artifacts/email.html new file mode 100644 index 000000000..de83def78 --- /dev/null +++ b/design-systems/webex/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Webex - Email + + + +
    +
    +
    +

    Email module

    +

    Webex Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Webex, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/webex/system/artifacts/form.html b/design-systems/webex/system/artifacts/form.html new file mode 100644 index 000000000..cb01246a9 --- /dev/null +++ b/design-systems/webex/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Webex - Form page + + + +
    +
    +
    +

    Form module

    +

    Webex Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Webex, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/webex/system/artifacts/landing.html b/design-systems/webex/system/artifacts/landing.html new file mode 100644 index 000000000..5f8dbfd1f --- /dev/null +++ b/design-systems/webex/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Webex - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Webex Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Webex, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/webex/system/artifacts/newsletter.html b/design-systems/webex/system/artifacts/newsletter.html new file mode 100644 index 000000000..2b1563b81 --- /dev/null +++ b/design-systems/webex/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Webex - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Webex Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Webex, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/webex/system/artifacts/poster.html b/design-systems/webex/system/artifacts/poster.html new file mode 100644 index 000000000..fa9a13560 --- /dev/null +++ b/design-systems/webex/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Webex - Poster + + + +
    +
    +
    +

    Poster module

    +

    Webex Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Webex, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/webex/system/index.html b/design-systems/webex/system/index.html new file mode 100644 index 000000000..0204dfa9a --- /dev/null +++ b/design-systems/webex/system/index.html @@ -0,0 +1,128 @@ + + + + + + Webex - system assets + + + +
    +

    Productivity & SaaS

    +

    Webex system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/webex/system/kit.dark.html b/design-systems/webex/system/kit.dark.html new file mode 100644 index 000000000..954499f07 --- /dev/null +++ b/design-systems/webex/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Webex - dark component kit + + + +
    +
    +
    +

    Productivity & SaaS system

    +

    Webex component kit

    +

    Bundled Open Design package for Webex, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/webex/system/kit.html b/design-systems/webex/system/kit.html new file mode 100644 index 000000000..6488d73f1 --- /dev/null +++ b/design-systems/webex/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Webex - component kit + + + +
    +
    +
    +

    Productivity & SaaS system

    +

    Webex component kit

    +

    Bundled Open Design package for Webex, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/webex/system/tokens.default.json b/design-systems/webex/system/tokens.default.json new file mode 100644 index 000000000..316f988f1 --- /dev/null +++ b/design-systems/webex/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#00a3a6", + "colorPrimaryBg": "#eef8f6", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 18 +} diff --git a/design-systems/webflow/system/artifacts/deck.html b/design-systems/webflow/system/artifacts/deck.html new file mode 100644 index 000000000..8876d3819 --- /dev/null +++ b/design-systems/webflow/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Webflow - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Webflow Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Webflow, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/webflow/system/artifacts/email.html b/design-systems/webflow/system/artifacts/email.html new file mode 100644 index 000000000..23656812c --- /dev/null +++ b/design-systems/webflow/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Webflow - Email + + + +
    +
    +
    +

    Email module

    +

    Webflow Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Webflow, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/webflow/system/artifacts/form.html b/design-systems/webflow/system/artifacts/form.html new file mode 100644 index 000000000..5da55b2eb --- /dev/null +++ b/design-systems/webflow/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Webflow - Form page + + + +
    +
    +
    +

    Form module

    +

    Webflow Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Webflow, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/webflow/system/artifacts/landing.html b/design-systems/webflow/system/artifacts/landing.html new file mode 100644 index 000000000..83c29a0a0 --- /dev/null +++ b/design-systems/webflow/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Webflow - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Webflow Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Webflow, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/webflow/system/artifacts/newsletter.html b/design-systems/webflow/system/artifacts/newsletter.html new file mode 100644 index 000000000..fc1484620 --- /dev/null +++ b/design-systems/webflow/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Webflow - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Webflow Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Webflow, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/webflow/system/artifacts/poster.html b/design-systems/webflow/system/artifacts/poster.html new file mode 100644 index 000000000..1906be5f9 --- /dev/null +++ b/design-systems/webflow/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Webflow - Poster + + + +
    +
    +
    +

    Poster module

    +

    Webflow Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Webflow, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/webflow/system/index.html b/design-systems/webflow/system/index.html new file mode 100644 index 000000000..189aa53c4 --- /dev/null +++ b/design-systems/webflow/system/index.html @@ -0,0 +1,128 @@ + + + + + + Webflow - system assets + + + +
    +

    Design & Creative

    +

    Webflow system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/webflow/system/kit.dark.html b/design-systems/webflow/system/kit.dark.html new file mode 100644 index 000000000..16137a2fb --- /dev/null +++ b/design-systems/webflow/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Webflow - dark component kit + + + +
    +
    +
    +

    Design & Creative system

    +

    Webflow component kit

    +

    Bundled Open Design package for Webflow, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/webflow/system/kit.html b/design-systems/webflow/system/kit.html new file mode 100644 index 000000000..1bb4eca2c --- /dev/null +++ b/design-systems/webflow/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Webflow - component kit + + + +
    +
    +
    +

    Design & Creative system

    +

    Webflow component kit

    +

    Bundled Open Design package for Webflow, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/webflow/system/tokens.default.json b/design-systems/webflow/system/tokens.default.json new file mode 100644 index 000000000..0daa06581 --- /dev/null +++ b/design-systems/webflow/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#146ef5", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "#0055d4", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 4 +} diff --git a/design-systems/wechat/system/artifacts/deck.html b/design-systems/wechat/system/artifacts/deck.html new file mode 100644 index 000000000..249a622af --- /dev/null +++ b/design-systems/wechat/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + WeChat Design System - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    WeChat Design System Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for WeChat Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/wechat/system/artifacts/email.html b/design-systems/wechat/system/artifacts/email.html new file mode 100644 index 000000000..8568ae2d5 --- /dev/null +++ b/design-systems/wechat/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + WeChat Design System - Email + + + +
    +
    +
    +

    Email module

    +

    WeChat Design System Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for WeChat Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/wechat/system/artifacts/form.html b/design-systems/wechat/system/artifacts/form.html new file mode 100644 index 000000000..7362b74e6 --- /dev/null +++ b/design-systems/wechat/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + WeChat Design System - Form page + + + +
    +
    +
    +

    Form module

    +

    WeChat Design System Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for WeChat Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/wechat/system/artifacts/landing.html b/design-systems/wechat/system/artifacts/landing.html new file mode 100644 index 000000000..a8b16b9ad --- /dev/null +++ b/design-systems/wechat/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + WeChat Design System - Landing page + + + +
    +
    +
    +

    Landing module

    +

    WeChat Design System Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for WeChat Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/wechat/system/artifacts/newsletter.html b/design-systems/wechat/system/artifacts/newsletter.html new file mode 100644 index 000000000..15350efb3 --- /dev/null +++ b/design-systems/wechat/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + WeChat Design System - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    WeChat Design System Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for WeChat Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/wechat/system/artifacts/poster.html b/design-systems/wechat/system/artifacts/poster.html new file mode 100644 index 000000000..17f91a22c --- /dev/null +++ b/design-systems/wechat/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + WeChat Design System - Poster + + + +
    +
    +
    +

    Poster module

    +

    WeChat Design System Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for WeChat Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/wechat/system/index.html b/design-systems/wechat/system/index.html new file mode 100644 index 000000000..fd023b4b2 --- /dev/null +++ b/design-systems/wechat/system/index.html @@ -0,0 +1,128 @@ + + + + + + WeChat Design System - system assets + + + +
    +

    Social & Messaging

    +

    WeChat Design System system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/wechat/system/kit.dark.html b/design-systems/wechat/system/kit.dark.html new file mode 100644 index 000000000..850de8d23 --- /dev/null +++ b/design-systems/wechat/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + WeChat Design System - dark component kit + + + +
    +
    +
    +

    Social & Messaging system

    +

    WeChat Design System component kit

    +

    Bundled Open Design package for WeChat Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/wechat/system/kit.html b/design-systems/wechat/system/kit.html new file mode 100644 index 000000000..041cdb07b --- /dev/null +++ b/design-systems/wechat/system/kit.html @@ -0,0 +1,149 @@ + + + + + + WeChat Design System - component kit + + + +
    +
    +
    +

    Social & Messaging system

    +

    WeChat Design System component kit

    +

    Bundled Open Design package for WeChat Design System, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/wechat/system/tokens.default.json b/design-systems/wechat/system/tokens.default.json new file mode 100644 index 000000000..e8915afa2 --- /dev/null +++ b/design-systems/wechat/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#07c160", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "#10b160", + "colorPrimaryActive": "#059050", + "fontSize": 15, + "borderRadius": 8 +} diff --git a/design-systems/wired/system/artifacts/deck.html b/design-systems/wired/system/artifacts/deck.html new file mode 100644 index 000000000..2cc04981c --- /dev/null +++ b/design-systems/wired/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + WIRED - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    WIRED Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for WIRED, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/wired/system/artifacts/email.html b/design-systems/wired/system/artifacts/email.html new file mode 100644 index 000000000..18158bf82 --- /dev/null +++ b/design-systems/wired/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + WIRED - Email + + + +
    +
    +
    +

    Email module

    +

    WIRED Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for WIRED, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/wired/system/artifacts/form.html b/design-systems/wired/system/artifacts/form.html new file mode 100644 index 000000000..0120783d8 --- /dev/null +++ b/design-systems/wired/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + WIRED - Form page + + + +
    +
    +
    +

    Form module

    +

    WIRED Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for WIRED, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/wired/system/artifacts/landing.html b/design-systems/wired/system/artifacts/landing.html new file mode 100644 index 000000000..9e1ca765d --- /dev/null +++ b/design-systems/wired/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + WIRED - Landing page + + + +
    +
    +
    +

    Landing module

    +

    WIRED Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for WIRED, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/wired/system/artifacts/newsletter.html b/design-systems/wired/system/artifacts/newsletter.html new file mode 100644 index 000000000..39ecbca71 --- /dev/null +++ b/design-systems/wired/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + WIRED - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    WIRED Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for WIRED, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/wired/system/artifacts/poster.html b/design-systems/wired/system/artifacts/poster.html new file mode 100644 index 000000000..c0e22ffee --- /dev/null +++ b/design-systems/wired/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + WIRED - Poster + + + +
    +
    +
    +

    Poster module

    +

    WIRED Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for WIRED, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/wired/system/index.html b/design-systems/wired/system/index.html new file mode 100644 index 000000000..8f290c6ab --- /dev/null +++ b/design-systems/wired/system/index.html @@ -0,0 +1,128 @@ + + + + + + WIRED - system assets + + + +
    +

    Media & Consumer

    +

    WIRED system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/wired/system/kit.dark.html b/design-systems/wired/system/kit.dark.html new file mode 100644 index 000000000..c960459e3 --- /dev/null +++ b/design-systems/wired/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + WIRED - dark component kit + + + +
    +
    +
    +

    Media & Consumer system

    +

    WIRED component kit

    +

    Bundled Open Design package for WIRED, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/wired/system/kit.html b/design-systems/wired/system/kit.html new file mode 100644 index 000000000..a9525d2fb --- /dev/null +++ b/design-systems/wired/system/kit.html @@ -0,0 +1,149 @@ + + + + + + WIRED - component kit + + + +
    +
    +
    +

    Media & Consumer system

    +

    WIRED component kit

    +

    Bundled Open Design package for WIRED, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/wired/system/tokens.default.json b/design-systems/wired/system/tokens.default.json new file mode 100644 index 000000000..6afa099e8 --- /dev/null +++ b/design-systems/wired/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#e10600", + "colorPrimaryBg": "#fff0f0", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 17, + "borderRadius": 0 +} diff --git a/design-systems/wise/system/artifacts/deck.html b/design-systems/wise/system/artifacts/deck.html new file mode 100644 index 000000000..41f5aa8c7 --- /dev/null +++ b/design-systems/wise/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Wise - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Wise Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Wise, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/wise/system/artifacts/email.html b/design-systems/wise/system/artifacts/email.html new file mode 100644 index 000000000..bdaf5968e --- /dev/null +++ b/design-systems/wise/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Wise - Email + + + +
    +
    +
    +

    Email module

    +

    Wise Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Wise, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/wise/system/artifacts/form.html b/design-systems/wise/system/artifacts/form.html new file mode 100644 index 000000000..bb5c31d64 --- /dev/null +++ b/design-systems/wise/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Wise - Form page + + + +
    +
    +
    +

    Form module

    +

    Wise Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Wise, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/wise/system/artifacts/landing.html b/design-systems/wise/system/artifacts/landing.html new file mode 100644 index 000000000..e95f998f3 --- /dev/null +++ b/design-systems/wise/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Wise - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Wise Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Wise, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/wise/system/artifacts/newsletter.html b/design-systems/wise/system/artifacts/newsletter.html new file mode 100644 index 000000000..32683b7e1 --- /dev/null +++ b/design-systems/wise/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Wise - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Wise Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Wise, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/wise/system/artifacts/poster.html b/design-systems/wise/system/artifacts/poster.html new file mode 100644 index 000000000..2d636c922 --- /dev/null +++ b/design-systems/wise/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Wise - Poster + + + +
    +
    +
    +

    Poster module

    +

    Wise Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Wise, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/wise/system/index.html b/design-systems/wise/system/index.html new file mode 100644 index 000000000..816630d46 --- /dev/null +++ b/design-systems/wise/system/index.html @@ -0,0 +1,128 @@ + + + + + + Wise - system assets + + + +
    +

    Fintech & Crypto

    +

    Wise system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/wise/system/kit.dark.html b/design-systems/wise/system/kit.dark.html new file mode 100644 index 000000000..1303b97c4 --- /dev/null +++ b/design-systems/wise/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Wise - dark component kit + + + +
    +
    +
    +

    Fintech & Crypto system

    +

    Wise component kit

    +

    Bundled Open Design package for Wise, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/wise/system/kit.html b/design-systems/wise/system/kit.html new file mode 100644 index 000000000..dccaf9f4d --- /dev/null +++ b/design-systems/wise/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Wise - component kit + + + +
    +
    +
    +

    Fintech & Crypto system

    +

    Wise component kit

    +

    Bundled Open Design package for Wise, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/wise/system/tokens.default.json b/design-systems/wise/system/tokens.default.json new file mode 100644 index 000000000..e0eb9a06f --- /dev/null +++ b/design-systems/wise/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#9fe870", + "colorPrimaryBg": "var(--surface)", + "colorPrimaryHover": "#cdffad", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 12%)", + "fontSize": 18, + "borderRadius": 30 +} diff --git a/design-systems/x-ai/system/artifacts/deck.html b/design-systems/x-ai/system/artifacts/deck.html new file mode 100644 index 000000000..69b3427a4 --- /dev/null +++ b/design-systems/x-ai/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + xAI - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    xAI Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for xAI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/x-ai/system/artifacts/email.html b/design-systems/x-ai/system/artifacts/email.html new file mode 100644 index 000000000..9e4f017e0 --- /dev/null +++ b/design-systems/x-ai/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + xAI - Email + + + +
    +
    +
    +

    Email module

    +

    xAI Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for xAI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/x-ai/system/artifacts/form.html b/design-systems/x-ai/system/artifacts/form.html new file mode 100644 index 000000000..a62072cea --- /dev/null +++ b/design-systems/x-ai/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + xAI - Form page + + + +
    +
    +
    +

    Form module

    +

    xAI Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for xAI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/x-ai/system/artifacts/landing.html b/design-systems/x-ai/system/artifacts/landing.html new file mode 100644 index 000000000..734e5e1f6 --- /dev/null +++ b/design-systems/x-ai/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + xAI - Landing page + + + +
    +
    +
    +

    Landing module

    +

    xAI Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for xAI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/x-ai/system/artifacts/newsletter.html b/design-systems/x-ai/system/artifacts/newsletter.html new file mode 100644 index 000000000..f9990d4be --- /dev/null +++ b/design-systems/x-ai/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + xAI - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    xAI Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for xAI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/x-ai/system/artifacts/poster.html b/design-systems/x-ai/system/artifacts/poster.html new file mode 100644 index 000000000..b1dd6c92e --- /dev/null +++ b/design-systems/x-ai/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + xAI - Poster + + + +
    +
    +
    +

    Poster module

    +

    xAI Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for xAI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/x-ai/system/index.html b/design-systems/x-ai/system/index.html new file mode 100644 index 000000000..d354d6fa8 --- /dev/null +++ b/design-systems/x-ai/system/index.html @@ -0,0 +1,128 @@ + + + + + + xAI - system assets + + + +
    +

    AI & LLM

    +

    xAI system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/x-ai/system/kit.dark.html b/design-systems/x-ai/system/kit.dark.html new file mode 100644 index 000000000..0e8d8f5e7 --- /dev/null +++ b/design-systems/x-ai/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + xAI - dark component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    xAI component kit

    +

    Bundled Open Design package for xAI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/x-ai/system/kit.html b/design-systems/x-ai/system/kit.html new file mode 100644 index 000000000..e189f6e29 --- /dev/null +++ b/design-systems/x-ai/system/kit.html @@ -0,0 +1,149 @@ + + + + + + xAI - component kit + + + +
    +
    +
    +

    AI & LLM system

    +

    xAI component kit

    +

    Bundled Open Design package for xAI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/x-ai/system/tokens.default.json b/design-systems/x-ai/system/tokens.default.json new file mode 100644 index 000000000..37c596136 --- /dev/null +++ b/design-systems/x-ai/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#ffffff", + "colorPrimaryBg": "rgba(255, 255, 255, 0.05)", + "colorPrimaryHover": "rgba(255, 255, 255, 0.9)", + "colorPrimaryActive": "rgba(255, 255, 255, 0.8)", + "fontSize": 16, + "borderRadius": 0 +} diff --git a/design-systems/xiaohongshu/system/artifacts/deck.html b/design-systems/xiaohongshu/system/artifacts/deck.html new file mode 100644 index 000000000..dc8c81e33 --- /dev/null +++ b/design-systems/xiaohongshu/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Xiaohongshu - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Xiaohongshu Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Xiaohongshu, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/xiaohongshu/system/artifacts/email.html b/design-systems/xiaohongshu/system/artifacts/email.html new file mode 100644 index 000000000..c408e11c6 --- /dev/null +++ b/design-systems/xiaohongshu/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Xiaohongshu - Email + + + +
    +
    +
    +

    Email module

    +

    Xiaohongshu Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Xiaohongshu, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/xiaohongshu/system/artifacts/form.html b/design-systems/xiaohongshu/system/artifacts/form.html new file mode 100644 index 000000000..0262bd81b --- /dev/null +++ b/design-systems/xiaohongshu/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Xiaohongshu - Form page + + + +
    +
    +
    +

    Form module

    +

    Xiaohongshu Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Xiaohongshu, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/xiaohongshu/system/artifacts/landing.html b/design-systems/xiaohongshu/system/artifacts/landing.html new file mode 100644 index 000000000..f0ee89f7b --- /dev/null +++ b/design-systems/xiaohongshu/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Xiaohongshu - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Xiaohongshu Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Xiaohongshu, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/xiaohongshu/system/artifacts/newsletter.html b/design-systems/xiaohongshu/system/artifacts/newsletter.html new file mode 100644 index 000000000..0efa1fe1f --- /dev/null +++ b/design-systems/xiaohongshu/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Xiaohongshu - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Xiaohongshu Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Xiaohongshu, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/xiaohongshu/system/artifacts/poster.html b/design-systems/xiaohongshu/system/artifacts/poster.html new file mode 100644 index 000000000..80da32217 --- /dev/null +++ b/design-systems/xiaohongshu/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Xiaohongshu - Poster + + + +
    +
    +
    +

    Poster module

    +

    Xiaohongshu Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Xiaohongshu, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/xiaohongshu/system/index.html b/design-systems/xiaohongshu/system/index.html new file mode 100644 index 000000000..b9f20f0ec --- /dev/null +++ b/design-systems/xiaohongshu/system/index.html @@ -0,0 +1,128 @@ + + + + + + Xiaohongshu - system assets + + + +
    +

    Media & Consumer

    +

    Xiaohongshu system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/xiaohongshu/system/kit.dark.html b/design-systems/xiaohongshu/system/kit.dark.html new file mode 100644 index 000000000..8d2d7a1dd --- /dev/null +++ b/design-systems/xiaohongshu/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Xiaohongshu - dark component kit + + + +
    +
    +
    +

    Media & Consumer system

    +

    Xiaohongshu component kit

    +

    Bundled Open Design package for Xiaohongshu, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/xiaohongshu/system/kit.html b/design-systems/xiaohongshu/system/kit.html new file mode 100644 index 000000000..c6b9375c1 --- /dev/null +++ b/design-systems/xiaohongshu/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Xiaohongshu - component kit + + + +
    +
    +
    +

    Media & Consumer system

    +

    Xiaohongshu component kit

    +

    Bundled Open Design package for Xiaohongshu, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/xiaohongshu/system/tokens.default.json b/design-systems/xiaohongshu/system/tokens.default.json new file mode 100644 index 000000000..82a4cf667 --- /dev/null +++ b/design-systems/xiaohongshu/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#ff2442", + "colorPrimaryBg": "#fafafa", + "colorPrimaryHover": "#ff2e4d", + "colorPrimaryActive": "#e6203a", + "fontSize": 16, + "borderRadius": 12 +} diff --git a/design-systems/zapier/system/artifacts/deck.html b/design-systems/zapier/system/artifacts/deck.html new file mode 100644 index 000000000..f1372a8ed --- /dev/null +++ b/design-systems/zapier/system/artifacts/deck.html @@ -0,0 +1,137 @@ + + + + + + Zapier - Pitch deck + + + +
    +
    +
    +

    Deck module

    +

    Zapier Executive deck

    +

    Slide-scale title, metric, and section patterns for presentation work.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Pitch deck

    +

    Bundled Open Design package for Zapier, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/zapier/system/artifacts/email.html b/design-systems/zapier/system/artifacts/email.html new file mode 100644 index 000000000..3a1ac2efc --- /dev/null +++ b/design-systems/zapier/system/artifacts/email.html @@ -0,0 +1,137 @@ + + + + + + Zapier - Email + + + +
    +
    +
    +

    Email module

    +

    Zapier Email module

    +

    Transactional header, body copy, and primary call-to-action treatment.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Email

    +

    Bundled Open Design package for Zapier, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/zapier/system/artifacts/form.html b/design-systems/zapier/system/artifacts/form.html new file mode 100644 index 000000000..e7fe16465 --- /dev/null +++ b/design-systems/zapier/system/artifacts/form.html @@ -0,0 +1,137 @@ + + + + + + Zapier - Form page + + + +
    +
    +
    +

    Form module

    +

    Zapier Capture form

    +

    Input, selection, helper text, and submission states in one focused page.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Form page

    +

    Bundled Open Design package for Zapier, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/zapier/system/artifacts/landing.html b/design-systems/zapier/system/artifacts/landing.html new file mode 100644 index 000000000..3ee27a5ad --- /dev/null +++ b/design-systems/zapier/system/artifacts/landing.html @@ -0,0 +1,137 @@ + + + + + + Zapier - Landing page + + + +
    +
    +
    +

    Landing module

    +

    Zapier Launch narrative

    +

    Hero, proof points, and conversion actions composed from the design system tokens.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Landing page

    +

    Bundled Open Design package for Zapier, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/zapier/system/artifacts/newsletter.html b/design-systems/zapier/system/artifacts/newsletter.html new file mode 100644 index 000000000..bdc730698 --- /dev/null +++ b/design-systems/zapier/system/artifacts/newsletter.html @@ -0,0 +1,137 @@ + + + + + + Zapier - Newsletter + + + +
    +
    +
    +

    Newsletter module

    +

    Zapier Editorial issue

    +

    Readable long-form layout with heading hierarchy and compact story modules.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Newsletter

    +

    Bundled Open Design package for Zapier, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/zapier/system/artifacts/poster.html b/design-systems/zapier/system/artifacts/poster.html new file mode 100644 index 000000000..0c8334ff2 --- /dev/null +++ b/design-systems/zapier/system/artifacts/poster.html @@ -0,0 +1,137 @@ + + + + + + Zapier - Poster + + + +
    +
    +
    +

    Poster module

    +

    Zapier Campaign poster

    +

    High-impact display composition using the system color, type, and spacing rhythm.

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    Poster

    +

    Bundled Open Design package for Zapier, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/design-systems/zapier/system/index.html b/design-systems/zapier/system/index.html new file mode 100644 index 000000000..34584580b --- /dev/null +++ b/design-systems/zapier/system/index.html @@ -0,0 +1,128 @@ + + + + + + Zapier - system assets + + + +
    +

    Productivity & SaaS

    +

    Zapier system assets

    +

    Generated preview modules for bundled official presets.

    +

    Component kit

    kit.html

     +

    Dark component kit

    kit.dark.html

     +

    Landing page

    artifacts/landing.html

     +

    Pitch deck

    artifacts/deck.html

     +

    Poster

    artifacts/poster.html

     +

    Email

    artifacts/email.html

     +

    Newsletter

    artifacts/newsletter.html

     +

    Form page

    artifacts/form.html

    +
    + + diff --git a/design-systems/zapier/system/kit.dark.html b/design-systems/zapier/system/kit.dark.html new file mode 100644 index 000000000..9626bea13 --- /dev/null +++ b/design-systems/zapier/system/kit.dark.html @@ -0,0 +1,149 @@ + + + + + + Zapier - dark component kit + + + +
    +
    +
    +

    Productivity & SaaS system

    +

    Zapier component kit

    +

    Bundled Open Design package for Zapier, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/zapier/system/kit.html b/design-systems/zapier/system/kit.html new file mode 100644 index 000000000..bc6f626ca --- /dev/null +++ b/design-systems/zapier/system/kit.html @@ -0,0 +1,149 @@ + + + + + + Zapier - component kit + + + +
    +
    +
    +

    Productivity & SaaS system

    +

    Zapier component kit

    +

    Bundled Open Design package for Zapier, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + diff --git a/design-systems/zapier/system/tokens.default.json b/design-systems/zapier/system/tokens.default.json new file mode 100644 index 000000000..a4d552b20 --- /dev/null +++ b/design-systems/zapier/system/tokens.default.json @@ -0,0 +1,8 @@ +{ + "colorPrimary": "#ff4f00", + "colorPrimaryBg": "#ffedd5", + "colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)", + "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)", + "fontSize": 16, + "borderRadius": 12 +} diff --git a/design-templates/wireframe-annotated/SKILL.md b/design-templates/wireframe-annotated/SKILL.md new file mode 100644 index 000000000..ecd068b24 --- /dev/null +++ b/design-templates/wireframe-annotated/SKILL.md @@ -0,0 +1,89 @@ +--- +name: wireframe-annotated +description: | + An annotated / redline lo-fi wireframe — a desktop landing/marketing page + drawn as flat greyboxes inside a browser chrome frame, overlaid with numbered + annotation pins (①②③④⑤) in a single accent color, paired with a right-hand + SPEC PANEL that lists each numbered pin with a short engineering / UX note. + This is the "wireframe + redline spec" style — clean, flat, low-fidelity, NOT + hand-drawn. Use when the brief asks for "annotated wireframe", "redline + wireframe", "wireframe with spec", "lo-fi landing wireframe", "low fidelity", + "线框图", "标注线框", or "redline". +triggers: + - "annotated wireframe" + - "redline" + - "wireframe spec" + - "lo-fi landing" + - "wireframe" + - "low fidelity" + - "标注线框图" + - "redline 标注" +od: + mode: prototype + platform: desktop + scenario: design + fidelity: wireframe + preview: + type: html + entry: index.html + design_system: + requires: false + sections: [color, typography, layout, components] + example_prompt: "Draw an annotated redline wireframe for a desktop landing page — greybox nav, hero, logo strip, 3-up feature grid and footer, numbered pins ①–⑤ and a right-hand spec panel with one engineering note per pin." +--- + +# Wireframe Annotated Skill + +Produce a single flat, low-fidelity landing-page wireframe with a redline spec. +The whole point is "structure + handoff notes, not pixels" — greyboxes carry +the layout, numbered pins call out regions, and a right-hand spec panel turns +each pin into a short engineering / UX note. Keep it clean and flat; never +hand-drawn or scribbly. + +## Workflow + +1. **Skip finished UI.** This skill explicitly wants a low-fidelity greybox + look. Honor type tokens only loosely (one clean sans like Inter / system-ui + for labels, one mono like IBM Plex Mono for the spec notes and pin numbers). + Use medium-grey fills with defined darker borders so the page reads as a + thumbnail — avoid near-white-on-white, which renders blank. + +2. **Set the two-column shell.** LEFT is the wireframe canvas: a browser-chrome + framed greybox page. RIGHT is a narrow "ANNOTATIONS / SPEC" panel. Pick ONE + accent color (coral or blue) and use it ONLY for the numbered pins and the + matching spec numbers — everything else stays greyscale. + +3. **Lay out the canvas**, top to bottom, each block a greybox with a numbered + pin absolutely positioned on it: + - **Top nav** — logo greybox + nav lorem-bars + a primary button block. Pin ①. + - **Hero** — big headline lorem bars + subhead + two CTA button blocks on the + left; a large image placeholder (rect with a diagonal X) on the right. Pin ②. + - **Logo strip** — a row of 5 small greybox partner logos. Pin ③. + - **Feature grid** — 3 cards, each an icon square + title bar + 2 text bars. Pin ④. + - **Footer** — columns of lorem link-bars. Pin ⑤. + +4. **Mirror every pin in the spec panel.** Each spec row = the circled number in + the accent color + a short mono/sans note, e.g. "① Sticky nav, 64px, condenses + on scroll", "② Hero H1 48/56, CTA pair primary+ghost", "③ 5 partner logos, + greyscale", "④ 3-up at ≥960px → 1-up mobile", "⑤ 4-col footer, legal row". + Mark the panel and each row with `data-od-id`. + +5. **Self-check**: + - Every numbered pin on the canvas has exactly one matching spec row. + - The accent color appears ONLY on pins + spec numbers; the rest is greyscale. + - The page should read clearly at thumbnail size; if blocks vanish into the + background, darken the fills/borders. + - It must NOT look pixel-perfect or hand-drawn — flat greyboxes only. + +## Output contract + +Emit between `` tags: + +``` + + +... + +``` + +One sentence before the artifact, nothing after. diff --git a/design-templates/wireframe-annotated/example.html b/design-templates/wireframe-annotated/example.html new file mode 100644 index 000000000..3ee476898 --- /dev/null +++ b/design-templates/wireframe-annotated/example.html @@ -0,0 +1,252 @@ + + + + + + Acme Landing — Annotated Wireframe (Redline) + + + + + + +
    +
    +
    +

    Acme · Marketing Landing

    +
    + WIREFRAME · REDLINE +
    DEVICE DESKTOP 1280 · FIDELITY LOW · REV A
    +
    + +
    + +
    +
    +
    +
    acme.example / home
    +
    + +
    + +
    + ① +
    + +
    +
    +
    +
    +
    +
    + + +
    + ② +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + + +
    + ③ +
    +
    +
    +
    + + +
    + ④ +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + +
    + ⑤ +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    + + diff --git a/design-templates/wireframe-greybox/SKILL.md b/design-templates/wireframe-greybox/SKILL.md new file mode 100644 index 000000000..e8d8f31f3 --- /dev/null +++ b/design-templates/wireframe-greybox/SKILL.md @@ -0,0 +1,89 @@ +--- +name: wireframe-greybox +description: | + A crisp greybox / blueprint lo-fi wireframe — neutral grey blocks on a + pale page, image placeholders drawn as a rectangle with a diagonal X, + text shown as solid "lorem bars" of varying widths, sharp 1.5–2px + borders, and a single monospace redline accent for annotations. Reads + like a structural blueprint before any visual design is applied. Use + when the brief asks for "greybox", "blueprint wireframe", "lo-fi + dashboard", "low fidelity", "线框图", or "灰盒原型". +triggers: + - "greybox" + - "grey box wireframe" + - "blueprint wireframe" + - "lo-fi dashboard" + - "low fidelity" + - "wireframe" + - "线框图" + - "灰盒" +od: + mode: prototype + platform: desktop + scenario: design + fidelity: wireframe + preview: + type: html + entry: index.html + design_system: + requires: false + sections: [color, typography, layout, components] + example_prompt: "Greybox a lo-fi blueprint wireframe for a desktop SaaS dashboard — app bar, sidebar nav, a 4-up KPI row, a schematic chart panel, and a list/table with image-placeholder thumbnails, all in neutral grey with monospace redline annotations." +--- + +# Wireframe Greybox Skill + +Produce a single crisp greybox wireframe page. The whole point is +*structure, not skin* — communicate hierarchy and layout with neutral +grey blocks, never with real color, copy, or imagery. Everything is a +placeholder: text is grey "lorem bars", images are rectangles with a +diagonal cross, numbers are big solid blocks. The only color on the page +is the single redline accent reserved for monospace annotations. + +## Workflow + +1. **Stay structural.** Ignore any DESIGN.md that pushes finished UI — + this is deliberately low fidelity. Use a clean system sans (Inter / + system-ui) for shape and a mono (IBM Plex Mono / JetBrains Mono) for + the redline annotations only. No hand-drawn fonts, no brand color. +2. **Set the greybox palette.** Page is a pale neutral (`#f7f7f8`), + blocks are medium grey (`#e3e3e6`), borders are crisp and defined + (`#c9c9cf` for soft edges, `#1c1b1a` for emphasis), and exactly one + accent (a blue or coral redline) carries every monospace annotation. + Keep contrast high enough to read as a small thumbnail — never + near-white-on-white. +3. **Lay out the dashboard**, in order, each on its own `data-od-id`: + - **App bar** — a logo greybox, a row of nav lorem-bars, and an + avatar circle on the right. + - **Sidebar nav** — icon squares + lorem-bar labels; mark one item + active with a filled/inverted block. + - **KPI row** — four greyboxes, each a small label bar above a big + solid "number" bar. + - **Chart panel** — an inline SVG greybox: axes plus a few + hatched/grey bars or a schematic line. No real data. + - **List / table panel** — a header row plus ~5 rows of lorem bars, + with one column of image-placeholders drawn as a box with a + diagonal X. + - **Annotations** — one or two small monospace redlines pinned to the + canvas (e.g. `01 · 12-col grid`, `max-width 1280`). +4. **Write** one self-contained HTML document — `` + through ``, CSS inline, no external JS or images. SVG and CSS + draw every placeholder. A `max-width` container plus a media query + collapses columns under ~1000px. +5. **Self-check.** It should read as a blueprint at thumbnail size: grey + blocks, X-crossed image boxes, lorem bars, and exactly one accent + color on the monospace redlines. If any greybox is missing, the page + looks colored, or it disappears as a blank thumbnail, fix it. + +## Output contract + +Emit between `` tags: + +``` + + +... + +``` + +One sentence before the artifact, nothing after. diff --git a/design-templates/wireframe-greybox/example.html b/design-templates/wireframe-greybox/example.html new file mode 100644 index 000000000..60c0b3500 --- /dev/null +++ b/design-templates/wireframe-greybox/example.html @@ -0,0 +1,280 @@ + + + + + + Acme Analytics — Greybox Wireframe + + + + + + +
    + + +
    + + +
    +
    + +
    max-width 1280
    + +
    + + + + +
    + + +
    +
    +
    +
    +
    +
    + + +
    +
    + +
    +
    + +
    + + +
    +
    + +
    +
    +
    + + + + + +
    + +
    + + + + + +
    +
    + + + + + +
    +
    + + + + + +
    +
    + + + + + +
    +
    + + + + + +
    +
    + + +
    + 01 · 12-col grid + 02 · gutter 16px + 03 · greybox / lo-fi · no color +
    + +
    +
    +
    + + diff --git a/design-templates/wireframe-mobile-flow/SKILL.md b/design-templates/wireframe-mobile-flow/SKILL.md new file mode 100644 index 000000000..b4242315b --- /dev/null +++ b/design-templates/wireframe-mobile-flow/SKILL.md @@ -0,0 +1,95 @@ +--- +name: wireframe-mobile-flow +description: | + A lo-fi multi-screen MOBILE flow wireframe — three or four phone frames + laid out in a row on a board, showing a connected user flow (Onboarding → + Home feed → Item detail → Confirm). Grey-box content inside each device, + dashed connector arrows + numbered step labels between screens, and a + couple of annotation callouts. Reads like an app flow pinned to a + whiteboard before any pixels are committed. Use when the brief asks for + "mobile wireframe", "app flow", "user flow wireframe", "lo-fi mobile", + "low fidelity", "线框图", "移动端线框", or "App 流程". +triggers: + - "mobile wireframe" + - "app flow" + - "user flow" + - "lo-fi mobile" + - "wireframe" + - "low fidelity" + - "移动端线框" + - "App 流程图" +od: + mode: prototype + platform: auto + scenario: design + fidelity: wireframe + preview: + type: html + entry: index.html + design_system: + requires: false + sections: [color, typography, layout, components] + example_prompt: "Wireframe a lo-fi mobile flow v0.1 — three phone frames in a row (Onboarding → Home feed → Item detail), grey-box screens, dashed step arrows between them, and two annotation callouts." +--- + +# Wireframe Mobile Flow Skill + +Produce a single board showing a mobile app's user flow as a row of lo-fi +phone frames. The point is the *flow* — how a user moves screen to screen — +not the polish of any one screen. Keep the screens clean grey-boxes (not +scribbly) but keep the connectors and annotations loose and informal. + +## Workflow + +1. **Skip the DESIGN.md** if it pushes for finished UI. This skill is + deliberately low-fidelity: greyboxes, placeholder rects, and bars stand in + for real content. Honor type tokens only loosely (system sans for the + board, mono for labels and datelines). +2. **Pick the flow steps** from the brief — typically 3–4 connected screens + like Onboarding → Home feed → Item detail → Confirm. Name each step so the + connector arrows can carry a numbered, verb-first label ("① tap Start", + "② open item", "③ add to cart"). +3. **Lay out the board**, in order: + - **Board header** — bold sans title with a pinned "WIREFRAME v0.1 · + MOBILE" tag (dashed border, slight rotation) and a mono dateline on the + right (date / device / fidelity). + - **Phone row** — 3–4 rounded device frames (~240–280px wide) in a + horizontal row, each with a notch / status bar. Inside each frame put + the greybox content for its step: hero image-placeholder (rect + X), + title/price bars, list cards (thumbnail X + 2 text bars), category + chips, a bottom tab bar, sticky CTA bars, a confirm checkmark — match the + screen's role. + - **Connectors** — dashed arrows between consecutive phones, each carrying + a small mono step label describing the tap that advances the flow. + - **Annotations** — 1–2 small sticky / callout notes pinned near a screen + to flag intent ("hero must sell value in 3s", "checkout = 1 screen"). +4. **Write** a single HTML document: + - `` through ``, CSS inline, no external JS, no + external images (CSS/SVG placeholders only). + - Use Inter / system-ui for the board and IBM Plex Mono for labels via + Google Fonts; a light marker font is allowed for annotations only. + - Defined dark device-frame borders, medium-grey content blocks on white + screens, and a single accent color for arrows and annotations so the + board reads clearly even as a small thumbnail. + - `data-od-id` on the header, each phone screen, the connectors, and the + annotations. +5. **Self-check**: + - The three main phones are visible in a ~1280px viewport; the flow reads + left-to-right. + - Screens are clean greyboxes (not scribbly); connectors and stickies are + the loose, informal parts. + - No near-white-on-white regions — every block has a visible grey fill or + border. If a screen renders blank as a thumbnail, raise the contrast. + +## Output contract + +Emit between `` tags: + +``` + + +... + +``` + +One sentence before the artifact, nothing after. diff --git a/design-templates/wireframe-mobile-flow/example.html b/design-templates/wireframe-mobile-flow/example.html new file mode 100644 index 000000000..c01a1ef1a --- /dev/null +++ b/design-templates/wireframe-mobile-flow/example.html @@ -0,0 +1,323 @@ + + + + + + Marketplace App — Mobile Flow Wireframe v0.1 + + + + + + +
    + +
    +
    +

    Marketplace App · Buy Flow + WIREFRAME v0.1 · MOBILE +

    +
    Lo-fi screen flow — first-launch onboarding through to a confirmed order. Greybox content only; copy and imagery come later.
    +
    +
    DATE 2026-06-23
    DEVICE IPHONE 390×844
    FIDELITY LOW · GREYBOX
    +
    + +
    + + +
    +
    +
    +
    +
    9:41
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    GET STARTED
    +
    Skip for now
    +
    +
    +
    +
    1 · Onboardingfirst launch
    +
    + + +
    +
    ① tap Start
    + +
    + + +
    +
    +
    +
    +
    9:41
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    2 · Home feedbrowse + search
    +
    + + +
    +
    ② open item
    + +
    + + +
    +
    +
    +
    +
    9:41
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    ADD TO CART
    +
    +
    +
    +
    3 · Item detailspecs + CTA
    +
    + + +
    +
    ③ add to cart
    + +
    + + +
    +
    +
    +
    +
    9:41
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    DONE
    +
    +
    +
    +
    4 · Confirmorder placed
    +
    + +
    + +
    + greybox content + primary action + flow step / annotation +
    + + +
    + + ↑ screen 1 + Hero must sell the value prop in 3s — image + one line. +
    +
    + screen 4 → + Keep checkout to ONE screen. No account wall before confirm. +
    + +
    + + diff --git a/e2e/tests/packaged-smoke-workflow.test.ts b/e2e/tests/packaged-smoke-workflow.test.ts index 6a417665d..175bac59b 100644 --- a/e2e/tests/packaged-smoke-workflow.test.ts +++ b/e2e/tests/packaged-smoke-workflow.test.ts @@ -18,6 +18,8 @@ const ciWorkflowPath = join(workspaceRoot, ".github", "workflows", "ci.yml"); const commentWorkflowPath = join(workspaceRoot, ".github", "workflows", "comment.atom.yml"); const autofixWorkflowPath = join(workspaceRoot, ".github", "workflows", "autofix.atom.yml"); const reportWorkflowPath = join(workspaceRoot, ".github", "workflows", "report.atom.yml"); +const bakePluginPreviewsWorkflowPath = join(workspaceRoot, ".github", "workflows", "bake-plugin-previews.yml"); +const bakePluginPreviewsPrWorkflowPath = join(workspaceRoot, ".github", "workflows", "bake-plugin-previews-pr.yml"); const dockerImageWorkflowPath = join(workspaceRoot, ".github", "workflows", "docker-image.yml"); const backportAutomergeWorkflowPath = join(workspaceRoot, ".github", "workflows", "backport-automerge.yml"); const handoffScriptPath = join(workspaceRoot, ".github", "scripts", "handoff.py"); @@ -375,6 +377,27 @@ describe("packaged smoke workflow", () => { } }); + it("[P2] keeps pull-request plugin preview baking secretless and read-only", async () => { + const [prWorkflow, postMergeWorkflow] = await Promise.all([ + readFile(bakePluginPreviewsPrWorkflowPath, "utf8"), + readFile(bakePluginPreviewsWorkflowPath, "utf8"), + ]); + + expect(prWorkflow).toContain("permissions:\n contents: read"); + expect(prWorkflow).toContain("Checkout PR head"); + expect(prWorkflow).toContain("ref: ${{ github.event.pull_request.head.sha }}"); + expect(prWorkflow).toContain("upload: 'false'"); + expect(prWorkflow).toContain("post-merge bake will publish clips and open the rolling manifest PR"); + expect(prWorkflow).not.toContain("contents: write"); + expect(prWorkflow).not.toContain("PREVIEW_BAKE_TOKEN"); + expect(prWorkflow).not.toContain("CLOUDFLARE_R2_REPOSITORY_ASSETS"); + expect(prWorkflow).not.toContain("git push"); + + expect(postMergeWorkflow).toContain("permissions:\n contents: write"); + expect(postMergeWorkflow).toContain("CLOUDFLARE_R2_REPOSITORY_ASSETS_AK"); + expect(postMergeWorkflow).toContain("PREVIEW_BAKE_TOKEN"); + }); + it("[P2] preserves beta linux AppImage smoke reports for platform publication", async () => { const workflow = await readFile(releaseBetaWorkflowPath, "utf8"); const linuxBuildStep = workflow.match(/- name: Build beta linux_x64\r?\n(?:.+\r?\n)+?(?=\r?\n - name: Write linux_x64 release report)/m); diff --git a/e2e/ui/amr-onboarding.test.ts b/e2e/ui/amr-onboarding.test.ts index 014ecfc5f..c540a70a5 100644 --- a/e2e/ui/amr-onboarding.test.ts +++ b/e2e/ui/amr-onboarding.test.ts @@ -40,12 +40,10 @@ test('[P0] @critical onboarding lets AMR Cloud sign in and complete setup after await gotoOnboarding(page); - // Signed-out cloud landing: the primary button reads "Sign in to Open Design - // Cloud" and IS the AMR sign-in trigger (it replaced the old "Sign in to - // continue" AMR-card CTA). + // Signed-out cloud landing: the primary button starts the AMR authorization flow. const primary = cloudPrimaryButton(page); await expect(primary).toBeVisible(); - await expect(primary).toHaveText(/Sign in to Open Design Cloud|登录 Open Design 云端/i); + await expect(primary).toHaveText(cloudSignInText()); const statusCallsBeforeLogin = await page.evaluate(() => window.__amrOnboardingStatusCalls ?? 0); await clickCloudPrimary(page); @@ -54,10 +52,10 @@ test('[P0] @critical onboarding lets AMR Cloud sign in and complete setup after .poll(() => page.evaluate(() => window.__amrOnboardingStatusCalls ?? 0)) .toBeGreaterThan(statusCallsBeforeLogin); // Login success lands on the About-you step; advance past newsletter to the - // final brand step that hosts Finish setup. + // final build step that hosts the "Go to home" / "Build a design system" actions. await expect(page.getByRole('heading', { name: /About you/i })).toBeVisible({ timeout: T.long }); await advanceFromAboutYouToBrand(page); - await expect(page.getByRole('button', { name: /Finish setup/i })).toBeVisible({ timeout: 10_000 }); + await expect(page.getByRole('button', { name: /Go to home/i })).toBeVisible({ timeout: 10_000 }); await expectOnboardingFinished(page); await pollStoredConfig(page).toMatchObject({ agentId: 'amr', @@ -75,15 +73,16 @@ test('[P0] onboarding signed-out AMR authorization cannot be skipped or bypassed await seedOnboardingConfig(page, config); await gotoOnboarding(page); - // The cloud landing offers no escape hatch: no Skip, no Continue, and no - // stepper to jump straight into About-you. Sign-in is the only forward path. + // The connect step offers no escape hatch: no Skip, no plain Continue, and + // no enabled stepper to jump straight into About-you. Sign-in is the only + // forward path. await expect(page.getByRole('button', { name: /Skip for now/i })).toHaveCount(0); await expect(page.getByRole('button', { name: /^Continue$/i })).toHaveCount(0); await expect(page.getByRole('button', { name: /About you|了解你/i })).toHaveCount(0); const primary = cloudPrimaryButton(page); await expect(primary).toBeVisible(); - await expect(primary).toHaveText(/Sign in to Open Design Cloud|登录 Open Design 云端/i); + await expect(primary).toHaveText(cloudSignInText()); await expect(page.getByText(/Optional details for better defaults/i)).toHaveCount(0); // Trigger sign-in: it stays pending (login never completes), so we remain on @@ -121,7 +120,7 @@ test('[P0] @critical onboarding Local CLI card lets the user pick an agent model // Expand the Local coding agent panel from the landing. Scanning auto-selects // the default agent (codex), so its live model picker is available; pick a // model and confirm the trigger reflects it. - await page.getByRole('button', { name: /Local coding agent/i }).click(); + await clickLocalRuntime(page); const localPanel = page.locator('.onboarding-view__setup-panel'); await expect(localPanel).toBeVisible(); await selectOnboardingOption(localPanel, 'Model', 'GLM 5'); @@ -140,15 +139,15 @@ test('[P0] onboarding Local CLI path stays gated when no local CLI is available' await seedOnboardingConfig(page, config); await gotoOnboarding(page); - await page.getByRole('button', { name: /Local coding agent/i }).click(); + await clickLocalRuntime(page); await expect(page.getByText('Local CLI')).toBeVisible(); await expect(page.getByText(/No agents detected|No local CLI detected/i)).toBeVisible(); const continueButton = page.getByRole('button', { name: /^Continue$/i }); - await expect(continueButton).toHaveAttribute('aria-disabled', 'true'); + await expect(continueButton).toBeDisabled(); // Still on the (expanded) Connect step — the Local panel header is showing // and the About-you fields never appeared. - await expect(page.getByRole('heading', { name: /Local coding agent/i })).toBeVisible(); + await expect(page.getByText('Local CLI')).toBeVisible(); await expect(page.getByText(/Optional details for better defaults/i)).toHaveCount(0); }); @@ -162,12 +161,12 @@ test('[P0] onboarding Local CLI path stays gated while local agent scan is still await seedOnboardingConfig(page, config); await gotoOnboarding(page); - await page.getByRole('button', { name: /Local coding agent/i }).click(); + await clickLocalRuntime(page); await expect(page.getByRole('button', { name: /Scanning|扫描中/i })).toBeVisible(); const continueButton = page.getByRole('button', { name: /^Continue$/i }); - await expect(continueButton).toHaveAttribute('aria-disabled', 'true'); - await expect(page.getByRole('heading', { name: /Local coding agent/i })).toBeVisible(); + await expect(continueButton).toBeDisabled(); + await expect(page.getByText('Local CLI')).toBeVisible(); await expect(page.getByText(/Optional details for better defaults/i)).toHaveCount(0); }); @@ -181,10 +180,8 @@ test('[P0] onboarding falls back to Local CLI when AMR is unavailable', async ({ await gotoOnboarding(page); - // No AMR runtime card exists anymore — the landing cloud button is the only - // AMR affordance, and there is no "AMR Cloud" named control. - await expect(page.getByRole('button', { name: /AMR Cloud/i })).toHaveCount(0); - await page.getByRole('button', { name: /Local coding agent/i }).click(); + await expect(connectLandingHeading(page)).toBeVisible(); + await clickLocalRuntime(page); await expect(page.getByText('Local CLI')).toBeVisible(); await expect(page.getByRole('button', { name: /^Continue$/i })).toBeVisible(); }); @@ -205,7 +202,7 @@ test('[P0] onboarding recovers from a transient AMR status failure and still con // Recovery lands on About you; step through newsletter to the final brand step. await expect(page.getByRole('button', { name: /^Continue$/i })).toBeVisible({ timeout: 12_000 }); await advanceFromAboutYouToBrand(page); - await expect(page.getByRole('button', { name: /Finish setup/i })).toBeVisible({ timeout: 12_000 }); + await expect(page.getByRole('button', { name: /Go to home/i })).toBeVisible({ timeout: 12_000 }); }); test('[P0] onboarding signed-in AMR status failure stays gated instead of bypassing Connect', async ({ page }) => { @@ -221,15 +218,15 @@ test('[P0] onboarding signed-in AMR status failure stays gated instead of bypass await expect .poll(() => page.evaluate(() => window.__amrOnboardingStatusCalls ?? 0)) .toBeGreaterThanOrEqual(1); - // The signed-in status never resolves (all polls fail), so the cloud landing - // can't show "Continue (signed in)" and falls back to the sign-in CTA. There - // is no Skip, no Continue, and no stepper to bypass the gate. + // The signed-in status never resolves (all polls fail), so the connect step + // can't show "Continue" and falls back to the sign-in CTA. There + // is no Skip, no Continue, and no enabled stepper to bypass the gate. await expect(page.getByRole('button', { name: /Skip for now/i })).toHaveCount(0); await expect(page.getByRole('button', { name: /^Continue$/i })).toHaveCount(0); await expect(page.getByRole('button', { name: /About you|了解你/i })).toHaveCount(0); const primary = cloudPrimaryButton(page); await expect(primary).toBeVisible(); - await expect(primary).toHaveText(/Sign in to Open Design Cloud|登录 Open Design 云端/i); + await expect(primary).toHaveText(cloudSignInText()); await expect(page.getByText(/Optional details for better defaults/i)).toHaveCount(0); await page.goto('/', { waitUntil: 'domcontentloaded' }); @@ -259,7 +256,7 @@ test('[P0] onboarding lets the user cancel an incomplete AMR sign-in and retry', await expect(cancelSignIn).toBeVisible(); await cancelSignIn.click(); - await expect(primary).toHaveText(/Sign in to Open Design Cloud|登录 Open Design 云端/i); + await expect(primary).toHaveText(cloudSignInText()); await expect(page.getByRole('button', { name: /Cancel sign-in/i })).toHaveCount(0); await expect.poll(() => page.evaluate(() => window.__amrOnboardingCancelCalls ?? 0)).toBe(1); await expect.poll(() => page.evaluate(() => window.__amrOnboardingLoginCalls ?? 0)).toBe(1); @@ -295,7 +292,7 @@ test('[P0] onboarding cancel during a slow AMR status check does not start login await cancelSignIn.click(); const primary = cloudPrimaryButton(page); - await expect(primary).toHaveText(/Sign in to Open Design Cloud|登录 Open Design 云端/i); + await expect(primary).toHaveText(cloudSignInText()); await expect.poll(() => page.evaluate(() => window.__amrOnboardingCancelCalls ?? 0)).toBe(1); await expect .poll(() => page.evaluate(() => window.__amrOnboardingSlowStatusResolved ?? false)) @@ -305,12 +302,10 @@ test('[P0] onboarding cancel during a slow AMR status check does not start login await expect.poll(() => page.evaluate(() => window.__amrOnboardingLoginCalls ?? 0)).toBe(0); }); -// The AMR runtime card and its per-runtime model picker on the connect step -// were removed in the redesign — AMR now signs in straight from the cloud -// landing and exposes no model picker there. This test preserves the still-valid -// slice of the old coverage: a signed-in user advancing from the cloud landing -// pins the AMR runtime (agentId: 'amr') as the connect selection. -test('[P0] onboarding signed-in cloud landing pins the AMR runtime when continuing', async ({ page }) => { +// AMR now signs in from the selected runtime card and exposes no connect-step +// model picker. This test preserves the still-valid coverage: a signed-in user +// advancing from the AMR selection pins the AMR runtime (agentId: 'amr'). +test('[P0] onboarding signed-in AMR selection pins the AMR runtime when continuing', async ({ page }) => { const config = await wireOnboardingMocks(page, { amrAvailable: true, initialLoggedIn: true, @@ -326,7 +321,7 @@ test('[P0] onboarding signed-in cloud landing pins the AMR runtime when continui await gotoOnboarding(page); const primary = cloudPrimaryButton(page); - await expect(primary).toHaveText(/Continue \(signed in\)|继续（已登录）/i); + await expect(primary).toHaveText(/^(Continue(?: \(signed in\))?|继续(?:（已登录）)?)$/i); await clickCloudPrimary(page); // Advancing to About-you confirms the connect gate cleared, and the runtime @@ -341,7 +336,7 @@ test('[P0] onboarding signed-in cloud landing pins the AMR runtime when continui // The AMR card + per-runtime model picker on the connect step were removed, // so the model-selection portion of the old test is retired. The still-valid -// coverage — a signed-in AMR user advances from the landing through both steps +// coverage — a signed-in AMR user advances from the connect step through both steps // and completes setup with agentId 'amr' — is preserved. test('[P0] @critical onboarding signed-in AMR path finishes setup with the AMR runtime', async ({ page }) => { const config = await wireOnboardingMocks(page, { @@ -353,12 +348,12 @@ test('[P0] @critical onboarding signed-in AMR path finishes setup with the AMR r await gotoOnboarding(page); const primary = cloudPrimaryButton(page); - await expect(primary).toHaveText(/Continue \(signed in\)|继续（已登录）/i); + await expect(primary).toHaveText(/^(Continue(?: \(signed in\))?|继续(?:（已登录）)?)$/i); await clickCloudPrimary(page); await expect(page.getByText(/Optional details for better defaults/i)).toBeVisible(); await advanceFromAboutYouToBrand(page); - await page.getByRole('button', { name: /Finish setup/i }).click(); + await page.getByRole('button', { name: /Go to home/i }).click(); await expect(page).not.toHaveURL(/\/onboarding$/); await pollStoredConfig(page).toMatchObject({ @@ -381,7 +376,7 @@ test('[P0] onboarding AMR runtime selection carries into the first Home run requ await clickCloudPrimary(page); await advanceFromAboutYouToBrand(page); - await page.getByRole('button', { name: /Finish setup/i }).click(); + await page.getByRole('button', { name: /Go to home/i }).click(); await expectOnboardingFinished(page); let runBody: Record | null = null; @@ -472,23 +467,23 @@ test('[P0] onboarding visited steps become locked again when the Connect runtime await seedOnboardingConfig(page, config); await gotoOnboarding(page); - // Signed in: the cloud landing advances to About-you, proving the connect + // Signed in: the AMR selection advances to About-you, proving the connect // gate was satisfied by the AMR sign-in. await clickCloudPrimary(page); await expect(page.getByText(/Optional details for better defaults/i)).toBeVisible(); - // Step back to the connect landing, then switch the runtime to an unverified - // BYOK provider. The connect gate must re-lock: Continue goes aria-disabled + // Step back to the connect step, then switch the runtime to an unverified + // BYOK provider. The connect gate must re-lock: Continue becomes disabled // and About-you is no longer reachable. await page.getByRole('button', { name: /^Back$/i }).click(); await expect(connectLandingHeading(page)).toBeVisible(); await page.getByRole('button', { name: /Bring your own key/i }).click(); - await expect(page.getByText('BYOK')).toBeVisible(); + const byokPanel = byokSetupPanel(page); + await expect(byokPanel).toBeVisible(); const continueButton = page.getByRole('button', { name: /^Continue$/i }); - await expect(continueButton).toHaveAttribute('aria-disabled', 'true'); - await expect(page.getByRole('heading', { name: /Bring your own key|自己的模型 Key/i })).toBeVisible(); + await expect(continueButton).toBeDisabled(); await expect(page.getByText(/Optional details for better defaults/i)).toHaveCount(0); }); @@ -501,27 +496,40 @@ test('[P0] onboarding about-you step accepts profile selections and completes se await seedOnboardingConfig(page, config); await gotoOnboarding(page); - // Signed-in cloud landing advances straight to About-you. + // Signed-in AMR selection advances straight to About-you. await clickCloudPrimary(page); await expect(page.getByText(/Optional details for better defaults/i)).toBeVisible(); - // Profile fields are now chip rows, not dropdowns: each pick is a single - // chip click, and the chosen chip reports aria-pressed. await selectOnboardingChip(page, 'Your role', 'Engineer'); await selectOnboardingChip(page, 'Organization size', 'Growth company'); await selectOnboardingChip(page, 'Use case', 'Product design'); await selectOnboardingChip(page, 'Use case', 'Prototype / app UI'); await selectOnboardingChip(page, 'Where did you hear about us?', 'Search'); - await expect(expectOnboardingChip(page, 'Your role', 'Engineer')).toHaveAttribute('aria-pressed', 'true'); - await expect(expectOnboardingChip(page, 'Organization size', 'Growth company')).toHaveAttribute('aria-pressed', 'true'); - await expect(expectOnboardingChip(page, 'Use case', 'Product design')).toHaveAttribute('aria-pressed', 'true'); - await expect(expectOnboardingChip(page, 'Use case', 'Prototype / app UI')).toHaveAttribute('aria-pressed', 'true'); - await expect(expectOnboardingChip(page, 'Where did you hear about us?', 'Search')).toHaveAttribute('aria-pressed', 'true'); + await expect(expectOnboardingChip(page, 'Your role', 'Engineer')).toHaveAttribute( + 'aria-pressed', + 'true', + ); + await expect(expectOnboardingChip(page, 'Organization size', 'Growth company')).toHaveAttribute( + 'aria-pressed', + 'true', + ); + await expect(expectOnboardingChip(page, 'Use case', 'Product design')).toHaveAttribute( + 'aria-pressed', + 'true', + ); + await expect(expectOnboardingChip(page, 'Use case', 'Prototype / app UI')).toHaveAttribute( + 'aria-pressed', + 'true', + ); + await expect(expectOnboardingChip(page, 'Where did you hear about us?', 'Search')).toHaveAttribute( + 'aria-pressed', + 'true', + ); // About you is no longer the final step; advance through newsletter before finishing. await advanceFromAboutYouToBrand(page); - await page.getByRole('button', { name: /Finish setup/i }).click(); + await page.getByRole('button', { name: /Go to home/i }).click(); await expectOnboardingFinished(page); await pollStoredConfig(page).toMatchObject({ @@ -546,8 +554,8 @@ test('[P0] onboarding newsletter email is optional and blank email can finish se await expect(page.getByPlaceholder('you@studio.com')).toHaveValue(''); await page.getByRole('button', { name: /^Continue$/i }).click(); - await expect(page.getByRole('heading', { name: /Extract your design system/i })).toBeVisible(); - await page.getByRole('button', { name: /Finish setup/i }).click(); + await expect(page.getByRole('heading', { name: /Create once, build everywhere/i })).toBeVisible(); + await page.getByRole('button', { name: /Go to home/i }).click(); await expectOnboardingFinished(page); await expect.poll(() => newsletterCalls).toBe(0); @@ -573,8 +581,8 @@ test('[P0] onboarding newsletter malformed email does not block finishing setup' await page.getByPlaceholder('you@studio.com').fill('not-an-email'); await page.getByRole('button', { name: /^Continue$/i }).click(); - await expect(page.getByRole('heading', { name: /Extract your design system/i })).toBeVisible(); - await page.getByRole('button', { name: /Finish setup/i }).click(); + await expect(page.getByRole('heading', { name: /Create once, build everywhere/i })).toBeVisible(); + await page.getByRole('button', { name: /Go to home/i }).click(); await expectOnboardingFinished(page); await expect.poll(() => newsletterCalls).toBe(0); @@ -618,8 +626,8 @@ test('[P0] @critical onboarding BYOK path can fetch models, test the provider, a await gotoOnboarding(page); await page.getByRole('button', { name: /Bring your own key/i }).click(); - await expect(page.getByText('BYOK')).toBeVisible(); - const byokPanel = page.locator('.onboarding-view__setup-panel').filter({ hasText: /BYOK/ }); + const byokPanel = byokSetupPanel(page); + await expect(byokPanel).toBeVisible(); await fillInlineField(page, 'API key', 'test-api-key'); await fillInlineField(page, 'Base URL', 'https://api.anthropic.com'); @@ -634,7 +642,7 @@ test('[P0] @critical onboarding BYOK path can fetch models, test the provider, a await expect(page.getByText(/Optional details for better defaults/i)).toBeVisible(); // Advance from About you through newsletter to the brand step, then finish. await advanceFromAboutYouToBrand(page); - await page.getByRole('button', { name: /Finish setup/i }).click(); + await page.getByRole('button', { name: /Go to home/i }).click(); await expectOnboardingFinished(page); await pollStoredConfig(page).toMatchObject({ @@ -686,29 +694,29 @@ test('[P0] onboarding BYOK path cannot continue before a successful connection t await gotoOnboarding(page); await page.getByRole('button', { name: /Bring your own key/i }).click(); - await expect(page.getByText('BYOK')).toBeVisible(); - const byokPanel = page.locator('.onboarding-view__setup-panel').filter({ hasText: /BYOK/ }); + const byokPanel = byokSetupPanel(page); + await expect(byokPanel).toBeVisible(); const continueButton = page.getByRole('button', { name: /^Continue$/i }); - await expect(continueButton).toHaveAttribute('aria-disabled', 'true'); - await expect(page.getByRole('heading', { name: /Bring your own key|自己的模型 Key/i })).toBeVisible(); + await expect(continueButton).toBeDisabled(); + await expect(byokPanel).toBeVisible(); await fillInlineField(page, 'API key', 'bad-api-key'); await fillInlineField(page, 'Base URL', 'https://api.anthropic.com'); await page.getByRole('button', { name: /Fetch models/i }).click(); await expect(page.getByText(/Fetched 1 model/)).toBeVisible(); await selectOnboardingOption(byokPanel, 'Model', 'Claude Sonnet 4.5'); - await expect(continueButton).toHaveAttribute('aria-disabled', 'true'); + await expect(continueButton).toBeDisabled(); await page.getByRole('button', { name: /^Test$/i }).click(); await expect(page.getByText(/Invalid API key|Connection failed|failed/i)).toBeVisible(); - await expect(continueButton).toHaveAttribute('aria-disabled', 'true'); + await expect(continueButton).toBeDisabled(); connectionOk = true; await fillInlineField(page, 'API key', 'good-api-key'); await page.getByRole('button', { name: /^Test$/i }).click(); await expectProviderConnectionSuccess(page); - await expect(continueButton).not.toHaveAttribute('aria-disabled', 'true'); + await expect(continueButton).toBeEnabled(); }); test('[P0] onboarding BYOK successful test is invalidated when connection settings change', async ({ page }) => { @@ -743,7 +751,8 @@ test('[P0] onboarding BYOK successful test is invalidated when connection settin await gotoOnboarding(page); await page.getByRole('button', { name: /Bring your own key/i }).click(); - const byokPanel = page.locator('.onboarding-view__setup-panel').filter({ hasText: /BYOK/ }); + const byokPanel = byokSetupPanel(page); + await expect(byokPanel).toBeVisible(); const continueButton = page.getByRole('button', { name: /^Continue$/i }); await fillInlineField(page, 'API key', 'valid-api-key'); @@ -753,12 +762,12 @@ test('[P0] onboarding BYOK successful test is invalidated when connection settin await selectOnboardingOption(byokPanel, 'Model', 'Claude Sonnet 4.5'); await page.getByRole('button', { name: /^Test$/i }).click(); await expectProviderConnectionSuccess(page); - await expect(continueButton).not.toHaveAttribute('aria-disabled', 'true'); + await expect(continueButton).toBeEnabled(); await fillInlineField(page, 'API key', 'changed-api-key'); - await expect(continueButton).toHaveAttribute('aria-disabled', 'true'); - await expect(page.getByRole('heading', { name: /Bring your own key|自己的模型 Key/i })).toBeVisible(); + await expect(continueButton).toBeDisabled(); + await expect(byokPanel).toBeVisible(); await expect(page.getByText(/Optional details for better defaults/i)).toHaveCount(0); }); @@ -797,7 +806,8 @@ test('[P0] onboarding BYOK successful test is invalidated when Base URL or model await gotoOnboarding(page); await page.getByRole('button', { name: /Bring your own key/i }).click(); - const byokPanel = page.locator('.onboarding-view__setup-panel').filter({ hasText: /BYOK/ }); + const byokPanel = byokSetupPanel(page); + await expect(byokPanel).toBeVisible(); const continueButton = page.getByRole('button', { name: /^Continue$/i }); await fillInlineField(page, 'API key', 'valid-api-key'); @@ -810,19 +820,19 @@ test('[P0] onboarding BYOK successful test is invalidated when Base URL or model await selectOnboardingOption(byokPanel, 'Model', 'Claude Sonnet 4.5'); await page.getByRole('button', { name: /^Test$/i }).click(); await expectProviderConnectionSuccess(page); - await expect(continueButton).not.toHaveAttribute('aria-disabled', 'true'); + await expect(continueButton).toBeEnabled(); await fillInlineField(page, 'Base URL', 'https://api.changed.example'); - await expect(continueButton).toHaveAttribute('aria-disabled', 'true'); + await expect(continueButton).toBeDisabled(); await fillInlineField(page, 'Base URL', 'https://api.anthropic.com'); await page.getByRole('button', { name: /^Test$/i }).click(); await expectProviderConnectionSuccess(page); - await expect(continueButton).not.toHaveAttribute('aria-disabled', 'true'); + await expect(continueButton).toBeEnabled(); await selectOnboardingOption(byokPanel, 'Model', 'Claude Opus 4.8'); - await expect(continueButton).toHaveAttribute('aria-disabled', 'true'); - await expect(page.getByRole('heading', { name: /Bring your own key|自己的模型 Key/i })).toBeVisible(); + await expect(continueButton).toBeDisabled(); + await expect(byokPanel).toBeVisible(); await expect(page.getByText(/Optional details for better defaults/i)).toHaveCount(0); }); @@ -1019,30 +1029,33 @@ async function gotoOnboarding(page: Page) { await page.goto('/onboarding', { waitUntil: 'domcontentloaded' }); await waitForLoadingToClear(page); await dismissPrivacyDialog(page); - // The runtime-picker "Choose a runtime" heading was removed. The Connect - // step now opens on a centered Open Design Cloud sign-in landing whose - // heading is the stable marker that onboarding has rendered. - await expect( - page.getByRole('heading', { name: /Sign in to Open Design|登录 Open Design/i }), - ).toBeVisible(); + // The Connect step opens on the cloud sign-in landing. + await expect(connectLandingHeading(page)).toBeVisible(); } -// The landing's primary cloud button is the AMR/cloud sign-in trigger. Its -// accessible name varies by state (sign-in / continue / signing-in / loading), -// so target it by class and wait for it to settle out of the mount-time -// "Loading…" state before interacting. +// The cloud landing's primary button is the AMR sign-in trigger when signed out, +// and advances directly when already signed in. function cloudPrimaryButton(page: Page): Locator { return page.locator('.onboarding-cloud__primary'); } +function cloudSignInText(): RegExp { + return /Sign in to Open Design Cloud|登录 Open Design 云端/i; +} + async function clickCloudPrimary(page: Page) { const primary = cloudPrimaryButton(page); await expect(primary).toBeEnabled(); await primary.click(); } -// The connect landing heading — the stable "we're still on the cloud sign-in -// landing" marker that replaced the old "Choose a runtime" heading. +async function clickLocalRuntime(page: Page) { + const local = page.getByRole('button', { name: /Local coding agent/i }); + await expect(local).toBeVisible(); + await local.click({ force: true }); +} + +// The connect step heading — the stable "we're still on Connect" marker. function connectLandingHeading(page: Page): Locator { return page.getByRole('heading', { name: /Sign in to Open Design|登录 Open Design/i }); } @@ -1056,12 +1069,15 @@ async function seedOnboardingConfig(page: Page, config: OnboardingConfig) { async function expectOnboardingFinished(page: Page) { await dismissPrivacyDialog(page); - const finishSetup = page.getByRole('button', { name: /Finish setup/i }); - if (await finishSetup.isVisible().catch(() => false)) { - await finishSetup.click(); + // The final build step completes onboarding via "Go to home" (lands on the + // home view) — the branch's build panel replaced the old "Finish setup" CTA. + const goToHome = page.getByRole('button', { name: /Go to home/i }); + if (await goToHome.isVisible().catch(() => false)) { + await goToHome.click(); } await expect(page).not.toHaveURL(/\/onboarding$/); - await expect(page.getByText('What do you want to design?')).toBeVisible(); + await expect(page.getByTestId('home-hero')).toBeVisible(); + await expect(page.getByTestId('home-hero-input')).toBeVisible(); } async function advanceFromAboutYouToBrand(page: Page) { @@ -1072,10 +1088,10 @@ async function advanceFromAboutYouToBrand(page: Page) { await expect(page.getByRole('heading', { name: /Stay in the loop/i })).toBeVisible(); await continueButton.scrollIntoViewIfNeeded(); await continueButton.click(); - await expect(page.getByRole('heading', { name: /Extract your design system/i })).toBeVisible(); + await expect(page.getByRole('heading', { name: /Create once, build everywhere/i })).toBeVisible(); } -// Drive from the signed-in cloud landing through About-you to the Newsletter +// Drive from the signed-in AMR selection through About-you to the Newsletter // step. The landing primary advances a signed-in user to About-you; the first // bottom Continue then advances to the Newsletter. async function advanceToNewsletterStep(page: Page) { @@ -1108,22 +1124,21 @@ function expectOnboardingTrigger(root: OnboardingLocatorRoot, label: string) { } async function selectOnboardingOption(root: OnboardingLocatorRoot, label: string, option: string) { + const page = pageForOnboardingRoot(root); + await page.keyboard.press('Escape'); const field = onboardingField(root, label); const listbox = field.getByRole('listbox', { name: new RegExp(label, 'i') }); if (!(await listbox.isVisible().catch(() => false))) { - await field.getByRole('button').click(); + await field.getByRole('button').first().click(); } await listbox.getByRole('option').filter({ hasText: new RegExp(option, 'i') }).first().click(); + await page.keyboard.press('Escape'); } async function fillInlineField(page: Page, label: string, value: string) { await onboardingField(page, label).locator('input').fill(value); } -// About-you profile fields render as flat chip rows (`OnboardingChipField`), -// not dropdowns: each `.onboarding-chip-field` carries its label text plus a -// row of `button.onboarding-chip` options. Scope to the field by its label, -// then click the chip whose text matches the option. function onboardingChipField(page: Page, label: string): Locator { return page .locator('.onboarding-chip-field') @@ -1145,3 +1160,11 @@ function expectOnboardingChip(page: Page, label: string, option: string): Locato .filter({ hasText: new RegExp(option, 'i') }) .first(); } + +function pageForOnboardingRoot(root: OnboardingLocatorRoot): Page { + return 'keyboard' in root ? root : root.page(); +} + +function byokSetupPanel(page: Page): Locator { + return page.locator('.onboarding-view__setup-panel').filter({ hasText: /BYOK|Bring your own key/i }); +} diff --git a/e2e/ui/app-manual-edit.test.ts b/e2e/ui/app-manual-edit.test.ts index 4e8e29570..ee5a6fb58 100644 --- a/e2e/ui/app-manual-edit.test.ts +++ b/e2e/ui/app-manual-edit.test.ts @@ -664,7 +664,7 @@ async function seedDeckArtifact( title, entry: fileName, renderer: 'deck-html', - exports: ['html', 'pptx'], + exports: ['html', 'pdf'], }, }, timeout: 15_000, diff --git a/e2e/ui/app-restoration.test.ts b/e2e/ui/app-restoration.test.ts index 3fe678d33..c5f19a0b7 100644 --- a/e2e/ui/app-restoration.test.ts +++ b/e2e/ui/app-restoration.test.ts @@ -2772,52 +2772,6 @@ test('[P1] Browser Inspiration page_info carries a loaded page title into the ne expect(runBodies[0]?.message).toContain('- title: Browser Fixture Title'); }); -test('[P0] composer session mode switch is carried into the next daemon run request', async ({ page }) => { - await routeMockAgents(page); - - const runBodies: Array> = []; - await page.route('**/api/runs', async (route) => { - const raw = route.request().postData(); - if (raw) runBodies.push(JSON.parse(raw) as Record); - await route.fulfill({ - status: 202, - contentType: 'application/json', - body: '{"runId":"session-mode-run"}', - }); - }); - await page.route('**/api/runs/*/events', async (route) => { - await route.fulfill({ - status: 200, - headers: { - 'content-type': 'text/event-stream', - 'cache-control': 'no-cache', - }, - body: [ - 'event: start', - 'data: {"bin":"mock-agent"}', - '', - 'event: end', - 'data: {"code":0,"status":"succeeded"}', - '', - '', - ].join('\n'), - }); - }); - - await createEmptyProject(page, 'Composer session mode payload context'); - await expectWorkspaceReady(page); - - await page.getByTestId('session-mode-trigger').click(); - await page.getByRole('menuitemradio', { name: 'Ask mode' }).click(); - await expect(page.getByTestId('session-mode-trigger')).toContainText('Ask'); - - await page.getByTestId('chat-composer-input').fill('Explain what changed in this artifact.'); - await page.getByTestId('chat-send').click(); - - expect(runBodies[0]?.message).toContain('Explain what changed in this artifact.'); - expect(runBodies[0]?.sessionMode).toBe('chat'); -}); - test('[P1] questions tab Skip all sends structured skipped answers into the next run request', async ({ page }) => { await routeMockAgents(page); @@ -3611,7 +3565,7 @@ async function seedDeckArtifact( title, entry: fileName, renderer: 'deck-html', - exports: ['html', 'pptx'], + exports: ['html', 'pdf'], }, ); } diff --git a/e2e/ui/app.test.ts b/e2e/ui/app.test.ts index a70d673e8..75ca0e529 100644 --- a/e2e/ui/app.test.ts +++ b/e2e/ui/app.test.ts @@ -1217,7 +1217,7 @@ async function seedDeckArtifact( title, entry: fileName, renderer: 'deck-html', - exports: ['html', 'pptx'], + exports: ['html', 'pdf'], }, ); } diff --git a/e2e/ui/entry-chrome-flows.test.ts b/e2e/ui/entry-chrome-flows.test.ts index bbee9de5f..c03e379ef 100644 --- a/e2e/ui/entry-chrome-flows.test.ts +++ b/e2e/ui/entry-chrome-flows.test.ts @@ -92,7 +92,8 @@ test('[P0] @critical entry chrome exposes the primary home creation surface and await expect(page.locator('.entry-brand')).toHaveCount(0); await expect(page.getByTestId('home-hero-input')).toBeVisible(); await expect(page.getByTestId('home-hero-plus-trigger')).toBeVisible(); - await expect(page.getByTestId('home-hero-submit')).toBeDisabled(); + // Empty input can still run the active placeholder-carousel suggestion. + await expect(page.getByTestId('home-hero-submit')).toBeEnabled(); const createTabs = page.getByTestId('home-hero-type-tabs'); await expect(createTabs).toBeVisible(); await expect(page.getByTestId('home-hero-rail-prototype')).toBeVisible(); @@ -274,6 +275,9 @@ test('[P1] design systems page is reachable from entry nav and supports search, await expect(page.getByTestId('design-system-card-agentic')).toHaveCount(0); await page.getByTestId('design-systems-surface-all').click(); + // Master-detail: selecting a list row renders that system in the right + // preview pane, where the full-preview and "set as default" actions live. + await page.getByTestId('design-system-card-airbnb').click(); await page.getByTestId('design-system-preview-airbnb').click(); const preview = page.getByRole('dialog', { name: /Airbnb preview/i }); await expect(preview).toBeVisible(); @@ -1162,12 +1166,15 @@ test('[P0] @critical required home plugin prompt parameters gate submit and bind expect(applyBodies.at(-1)?.inputs).toMatchObject(body.pluginInputs ?? {}); }); -test('[P0] @critical home Ask mode creates a chat conversation without the default design router plugin', async ({ page }) => { +test('[P0] @critical home composer can route free-form Ask mode without the design router', async ({ page }) => { await gotoEntryHome(page); - await page.getByTestId('session-mode-trigger').click(); - await page.getByRole('menuitemradio', { name: 'Ask mode' }).click(); - await expect(page.getByTestId('session-mode-trigger')).toContainText('Ask'); + const modeTrigger = page.getByTestId('session-mode-trigger'); + await expect(modeTrigger).toBeVisible(); + await expect(modeTrigger).toContainText('Design'); + await modeTrigger.click(); + await page.getByRole('menuitemradio', { name: /Ask mode/i }).click(); + await expect(modeTrigger).toContainText('Ask'); const input = page.getByTestId('home-hero-input'); const prompt = @@ -1188,7 +1195,7 @@ test('[P0] @critical home Ask mode creates a chat conversation without the defau expect(body.name).toBe('Infographic 5 Habits Effective Code Reviewers'); expect(body.pendingPrompt).toBe(prompt); expect(body.conversationMode).toBe('chat'); - expect(body.pluginId).toBeUndefined(); + expect(body.pluginId ?? null).toBeNull(); expect(body.metadata?.kind).toBe('other'); }); @@ -1293,7 +1300,7 @@ test('[P0] @critical home hero input keeps Shift+Enter as a newline and submits const input = page.getByTestId('home-hero-input'); const submit = page.getByTestId('home-hero-submit'); - await expect(submit).toBeDisabled(); + await expect(submit).toBeEnabled(); await input.click(); await input.fill('Line one'); await input.press('Shift+Enter'); @@ -1351,7 +1358,7 @@ test('[P0] @critical home hero attachment input stages files, enables submit, an const input = page.getByTestId('home-hero-file-input'); const submit = page.getByTestId('home-hero-submit'); - await expect(submit).toBeDisabled(); + await expect(submit).toBeEnabled(); await input.setInputFiles({ name: 'brief.txt', @@ -1366,7 +1373,7 @@ test('[P0] @critical home hero attachment input stages files, enables submit, an await page.getByRole('button', { name: /Remove brief\.txt/i }).click(); await expect(staged).toHaveCount(0); - await expect(submit).toBeDisabled(); + await expect(submit).toBeEnabled(); }); test('[P0] @critical home hero attachment-only submit uploads the file and sends it with the first message', async ({ page }) => { diff --git a/e2e/ui/project-management-flows.test.ts b/e2e/ui/project-management-flows.test.ts index d0e4524ae..b8ea48806 100644 --- a/e2e/ui/project-management-flows.test.ts +++ b/e2e/ui/project-management-flows.test.ts @@ -456,23 +456,6 @@ test('[P1] project detail composer working directory picker opens without leavin await expect(composer.getByTestId('working-dir-pick')).toBeVisible(); }); -test('[P1] project detail composer session mode switches between Design and Ask', async ({ page }) => { - await page.goto('/'); - await createProject(page, 'Composer session mode switch'); - await expectWorkspaceReady(page); - - const composer = page.getByTestId('chat-composer'); - const trigger = composer.getByTestId('session-mode-trigger'); - await expect(trigger).toContainText(/Design/i); - await trigger.click(); - await page.getByRole('menuitemradio', { name: /Ask mode/i }).click(); - await expect(trigger).toContainText(/Ask/i); - - await trigger.click(); - await page.getByRole('menuitemradio', { name: /Design mode/i }).click(); - await expect(trigger).toContainText(/Design/i); -}); - test('[P1] project detail composer plus menu exposes attachment, connector, plugin, and MCP entries', async ({ page }) => { await routeComposerPlusFixtures(page); await page.goto('/'); diff --git a/e2e/ui/visual-entry.test.ts b/e2e/ui/visual-entry.test.ts index 1bd1e2bf7..a0d3a854b 100644 --- a/e2e/ui/visual-entry.test.ts +++ b/e2e/ui/visual-entry.test.ts @@ -21,16 +21,14 @@ test('[P2] captures the onboarding cloud sign-in surface', async ({ page }) => { }); await page.goto('/onboarding', { waitUntil: 'domcontentloaded' }); - // The connect step is now the centered Open Design Cloud sign-in landing. + // The connect step opens on the cloud sign-in landing. Local CLI and BYOK + // remain available as secondary paths from the same first screen. await expect( page.getByRole('heading', { name: /Sign in to Open Design|登录 Open Design/i }), ).toBeVisible(); - // vela/status is mocked signed-out, so the primary CTA resolves to the - // signed-out cloud sign-in copy (past the transient loading state). await expect( page.getByRole('button', { name: /Sign in to Open Design Cloud|登录 Open Design 云端/i }), ).toBeVisible(); - // The secondary runtime links remain available beneath the cloud CTA. await expect( page.getByRole('button', { name: /Local coding agent|本地 Coding Agent/i }), ).toBeVisible(); diff --git a/e2e/ui/visual-navigation.test.ts b/e2e/ui/visual-navigation.test.ts index 06a6e2272..8094d8440 100644 --- a/e2e/ui/visual-navigation.test.ts +++ b/e2e/ui/visual-navigation.test.ts @@ -60,9 +60,11 @@ test('[P2] captures the design system detail preview surface', async ({ page }) await ensureRailOpen(page); await page.getByTestId('entry-nav-design-systems').click(); await page.getByRole('tab', { name: 'Official presets' }).click(); - await page.getByTestId('design-system-preview-agentic').click(); - await expect(page.getByRole('dialog', { name: /Agentic/i })).toBeVisible(); - await expect(page.locator('.ds-modal-stage-iframe-scaler iframe')).toBeVisible(); + await page.getByTestId('design-system-card-agentic').click(); + const detail = page.getByTestId('design-system-detail-agentic'); + await expect(detail).toBeVisible(); + await expect(detail.getByTestId('design-kit-view-agentic')).toBeVisible(); + await expect(detail.getByTestId('design-kit-logo-section')).toBeVisible(); await waitForVisualFonts(page); await captureVisual(page, 'visual-design-system-detail'); diff --git a/e2e/ui/workspace-keyboard-flows.test.ts b/e2e/ui/workspace-keyboard-flows.test.ts index 7ab4e50f7..de05e56ae 100644 --- a/e2e/ui/workspace-keyboard-flows.test.ts +++ b/e2e/ui/workspace-keyboard-flows.test.ts @@ -109,7 +109,13 @@ test('[P0] workspace tab launcher creates a Browser tab on the reference board h await page.getByTestId('workspace-add-tab').click(); await expect(page.getByTestId('tab-launcher-menu')).toBeVisible(); await expect(page.getByTestId('tab-launcher-search')).toBeFocused(); - await page.getByRole('button', { name: /New Browser/i }).click(); + // Scope to the launcher menu: the reference-board home now also renders a + // "New Browser" empty-state CTA (design-files-empty-open-browser), so an + // unscoped /New Browser/i matches two buttons. + await page + .getByTestId('tab-launcher-menu') + .getByRole('button', { name: /New Browser/i }) + .click(); const browserTab = page.getByTestId('file-workspace').getByRole('tab', { name: /^Browser\b/i }); await expect(browserTab).toBeVisible(); diff --git a/figma-plugin/IR.md b/figma-plugin/IR.md new file mode 100644 index 000000000..70626376d --- /dev/null +++ b/figma-plugin/IR.md @@ -0,0 +1,115 @@ +# OD Figma capture IR + +The intermediate representation produced by the **OD Clipper** (`clipper/capture.js`) +and exported by the **OD Library** (`/api/library/assets/:id/figma`), consumed by the +**OD Figma Import** plugin (`code.js`). This file is the canonical contract; the clipper +producer and the plugin consumer must stay in sync with it. + +A native binary `.fig` cannot be produced outside Figma, so the capture is a structured +JSON node-tree that the plugin rebuilds into editable Figma layers via the Plugin API. + +## Top level + +```jsonc +{ + "version": 1, + "source": { + "url": "https://example.com/", + "title": "Example", + "capturedAt": 1718524800000, // Unix ms + "viewport": { "width": 1280, "height": 800 }, + "dpr": 2 + }, + "fonts": [ + { "family": "Inter", "styles": ["Regular", "Bold"] } + ], + "root": { /* Node — see below */ } +} +``` + +`fonts` lists every (family, styles) pair the TEXT nodes reference, so the plugin can +`loadFontAsync` them up front. Unavailable fonts fall back to `Inter Regular`. + +## Node + +Coordinates `x`/`y` are **absolute document pixels** (page top-left origin). The plugin +converts them to parent-relative positions when nesting. `width`/`height` are CSS pixels. + +Discriminated by `type`: + +### `FRAME` (an element box) +```jsonc +{ + "type": "FRAME", + "name": "div#hero", + "x": 0, "y": 0, "width": 1280, "height": 640, + "fills": [Paint, ...], // optional: SOLID background or IMAGE + "strokes": [Paint, ...], // optional: uniform border only + "strokeWeight": 1, // optional, with strokes + "cornerRadius": 8, // optional: uniform radius + "rectangleCornerRadii": { // optional: non-uniform radii (mutually exclusive) + "topLeft": 8, "topRight": 8, "bottomRight": 0, "bottomLeft": 0 + }, + "effects": [Effect, ...], // optional: drop shadows + "opacity": 0.9, // optional: < 1 only + "clipsContent": true, // optional: overflow:hidden + "children": [Node, ...] // optional +} +``` + +### `TEXT` (a run of text) +```jsonc +{ + "type": "TEXT", + "name": "Hello world", // first 40 chars, for the layer name + "x": 24, "y": 24, "width": 200, "height": 28, + "characters": "Hello world", + "fontFamily": "Inter", + "fontStyle": "Bold", // Figma style name (Regular/Medium/Bold/…/Italic) + "fontSize": 20, + "lineHeight": 28, // optional, PIXELS + "letterSpacing": 0.2, // optional, PIXELS + "textAlign": "LEFT", // LEFT | CENTER | RIGHT | JUSTIFIED + "color": { "r": 0.1, "g": 0.1, "b": 0.1 }, + "opacity": 1 +} +``` + +### `RECTANGLE` (a leaf box, no children) +Same box properties as `FRAME` but never has `children`. Emitted for leaf image boxes. + +## Paint + +```jsonc +{ "type": "SOLID", "color": { "r": 1, "g": 1, "b": 1 }, "opacity": 1 } +``` +```jsonc +// In the stored/exported IR, image fills carry an inlined data URI: +{ "type": "IMAGE", "scaleMode": "FILL", "dataUri": "data:image/png;base64,…" } +``` +> The clipper emits image fills with a `url` placeholder; the clipper's service worker +> fetches the bytes and rewrites `url` → `dataUri` before the IR is stored or downloaded. +> The plugin only ever sees `dataUri`. +> +> The `dataUri` may carry any web image format the page used (PNG, JPEG, **SVG, WebP, +> GIF, AVIF, …**). `figma.createImage()` only decodes PNG and JPEG, so the plugin UI +> (`ui.html`, a Chromium iframe) re-encodes every non-PNG/JPEG fill to PNG — vectors +> rasterized at 2× their box, rasters at their own pixel size — before the IR reaches +> the main thread. A fill whose bytes can't be decoded is dropped rather than aborting +> the import. Producers therefore do **not** need to pre-convert formats. + +`r`/`g`/`b`/`a` are 0–1 floats. + +## Effect + +```jsonc +{ + "type": "DROP_SHADOW", + "color": { "r": 0, "g": 0, "b": 0, "a": 0.2 }, + "offset": { "x": 0, "y": 2 }, + "radius": 8, + "spread": 0 +} +``` + +Inset shadows are skipped in v1. diff --git a/figma-plugin/README.md b/figma-plugin/README.md new file mode 100644 index 000000000..705c08bbc --- /dev/null +++ b/figma-plugin/README.md @@ -0,0 +1,64 @@ +# OD Figma Import (Figma plugin) + +Rebuilds an **OD Figma capture** — the JSON node-tree the OD Clipper produces from a live +web page — into editable Figma layers (frames, text, images, fills, strokes, corner radii, +shadows). + +> ### ⚠️ You cannot open `.od-figma.json` by dragging it into Figma +> +> Figma's file importer only accepts its own binary `.fig` / `.jam` files. Dragging an +> `.od-figma.json` into Figma (or into **Drafts**) shows **“Unsupported file format”** — +> that is expected, not a bug. A native `.fig` can't be produced outside Figma, so the +> capture is a JSON node-tree that **this plugin** rebuilds through the Figma Plugin API. +> +> The flow is two steps: **(1) install this plugin once** (below), then **(2) open the +> `.od-figma.json` from inside the plugin**. This is the same model as web-to-figma / +> BuilderIO figma-html / html.to.design — they are all plugins, for the same reason. + +This is a **standalone subproject** — intentionally *not* part of the pnpm workspace and +with **no build step**. The files load directly as a Figma development plugin. + +## 1. Get a capture file + +Produce an `.od-figma.json` either way: + +- **OD Clipper** popup → *Download Figma (.json)* — captures the current page and downloads + the file directly. +- **OD Library** → open an `html` asset captured with the clipper → *Download Figma JSON* + (or the CLI: `od library figma --out page.od-figma.json`). + +## 2. Install the plugin (one time) + +You only do this once per machine. It requires the Figma **desktop** app — development +plugins do not work in the browser. + +1. Open the Figma **desktop** app and open (or create) any file. +2. Menu → **Plugins → Development → Import plugin from manifest…** +3. Select this folder's **`manifest.json`** + (this repo: `figma-plugin/manifest.json`). + +The plugin now appears under **Plugins → Development → OD Figma Import** in every file. + +## 3. Import a capture + +1. Run **Plugins → Development → OD Figma Import**. +2. In the plugin window, **drop or choose** the `.od-figma.json` file — or paste the JSON. +3. Click **Import**. + +The capture is rebuilt as a single frame named after the page, selected and zoomed into +view. After the first install, importing future captures is just this step 3. + +## Fidelity notes + +- Layout uses the page's live geometry, so positions/sizes match what was captured. +- Fonts are loaded when available and otherwise fall back to **Inter Regular**. +- Best-effort: complex CSS (gradients beyond the first layer, blend modes, transforms, + pseudo-elements, SVG internals) is simplified; tainted/cross-origin images that the + clipper couldn't inline are dropped. +- Images in any web format (SVG, WebP, GIF, AVIF, …) are supported: Figma's image API + only accepts PNG/JPEG, so the plugin re-encodes the rest to PNG on import (SVGs are + rasterized, not kept as editable vectors). The status line reports how many were + converted. + +The capture schema is documented in [`IR.md`](./IR.md) and must stay in sync with +`clipper/capture.js`. diff --git a/figma-plugin/code.js b/figma-plugin/code.js new file mode 100644 index 000000000..2a1565bb6 Binary files /dev/null and b/figma-plugin/code.js differ diff --git a/figma-plugin/manifest.json b/figma-plugin/manifest.json new file mode 100644 index 000000000..62883b5c7 --- /dev/null +++ b/figma-plugin/manifest.json @@ -0,0 +1,11 @@ +{ + "name": "OD Figma Import", + "id": "open-design-figma-import", + "api": "1.0.0", + "main": "code.js", + "ui": "ui.html", + "editorType": ["figma"], + "networkAccess": { + "allowedDomains": ["none"] + } +} diff --git a/figma-plugin/ui.html b/figma-plugin/ui.html new file mode 100644 index 000000000..1847f7ea0 --- /dev/null +++ b/figma-plugin/ui.html @@ -0,0 +1,273 @@ + + + + + + + +

    OD Figma Import

    +

    + Load an .od-figma.json capture from the OD Clipper or the OD Library + (“Download Figma”) to rebuild it as editable layers. +

    + + + +
    — or paste the JSON —
    + + +
    + + +
    +
    + + + + diff --git a/nix/pnpm-deps.nix b/nix/pnpm-deps.nix index f3bc6dbf6..81255402b 100644 --- a/nix/pnpm-deps.nix +++ b/nix/pnpm-deps.nix @@ -9,6 +9,6 @@ # 1. Temporarily set the consuming `hash = lib.fakeHash;` # 2. Run the relevant nix build/flake check # 3. Copy the expected hash printed by Nix into the matching field below - daemonHash = "sha256-8d55NA1pncKzLYsO0EByXRxPxqrDZM/yENeWnZDHXmg="; - webHash = "sha256-2xyPtjKzMkoR2wqN26YehhzTyMIaHW7c6jwEZnjEADk="; + daemonHash = "sha256-ucVnjvGC3BbcZRFakkky9gzoBPieEGRe79vx9uAggnM="; + webHash = "sha256-b7bG0AW2m2oDIil4cnnr7xns0X1qxtSeOXS77Ks8m8s="; } diff --git a/packages/components/src/button.module.css b/packages/components/src/button.module.css index a74bd40e3..7baa1ba57 100644 --- a/packages/components/src/button.module.css +++ b/packages/components/src/button.module.css @@ -1,4 +1,10 @@ .button { + /* Center icon + label on one line so a button with an child reads as + vertically aligned instead of baseline-offset. */ + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px; font: inherit; color: var(--text); background: var(--bg-panel); diff --git a/packages/contracts/src/analytics/events.ts b/packages/contracts/src/analytics/events.ts index f162e5dc9..9364e6331 100644 --- a/packages/contracts/src/analytics/events.ts +++ b/packages/contracts/src/analytics/events.ts @@ -236,7 +236,6 @@ export type TrackingArtifactKind = // tracked exclusively by artifact_deploy_result (see TrackingDeployProvider). export type TrackingExportFormat = | 'pdf' - | 'pptx' | 'zip' | 'html' | 'image' @@ -472,8 +471,8 @@ export type TrackingChatPanelPageViewSource = // // CSV row "Onboarding / page_view". Fires once per step exposure inside the // welcome flow. The current first-run flow is Connect → About you → -// Newsletter → Brand extraction; the design-system and generation literals -// remain in the contract for historical rows and a future reintroduction. +// Newsletter → Design system CTA. The legacy brand-extraction literal remains +// in the contract for historical rows only. // Each step's `step_index` / `step_name` must match the enum pairs below. // `onboarding_session_id` is generated once per session so dashboards can // stitch the funnel. @@ -481,8 +480,9 @@ export type TrackingOnboardingArea = | 'runtime' | 'about_you' | 'newsletter' - | 'brand' | 'design_system' + /** @deprecated legacy onboarding final-step area; use `design_system`. */ + | 'brand' | 'generation_progress'; // Mixed string enum: numeric steps render as the strings `'1' | '2' | '3' | '4'` @@ -493,8 +493,9 @@ export type TrackingOnboardingStepName = | 'connect' | 'about_you' | 'newsletter' - | 'brand_extract' | 'design_system' + /** @deprecated legacy onboarding final-step name; use `design_system`. */ + | 'brand_extract' | 'generation'; // How the user chose to connect to a model provider. `amr_cloud` is the @@ -507,7 +508,7 @@ export type TrackingOnboardingStepName = export type TrackingOnboardingRuntimeType = TrackingRuntimeType; // What kind of source material the user pinned in the design-system -// step. `text` covers the brand description textarea; `mixed` is +// step. `text` covers the freeform design-system description; `mixed` is // reserved for batches that combined more than one type. export type TrackingOnboardingSourceType = | 'text' @@ -626,8 +627,8 @@ export type TrackingOnboardingClickAction = // ride along on About-you clicks AND on the `about_you_submit` snapshot // click. `source_type`/`has_brand_description`/`source_count` only on // Design-system source clicks. `runtime_type`/`is_recommended` only on -// Connect clicks. Doc explicitly forbids brand text, GitHub URL, file -// name, or path values — all enum + bool + count, no free-text. +// Connect clicks. Doc explicitly forbids freeform design-system description, +// GitHub URL, file name, or path values — all enum + bool + count, no free-text. export interface OnboardingClickProps { page_name: 'onboarding'; area: TrackingOnboardingArea; @@ -732,6 +733,7 @@ export type TrackingDesignSystemsEntryFrom = export type TrackingDesignSystemOrigin = | 'onboarding' | 'manual_create' + | 'source_url' | 'github_repo' | 'local_code' | 'fig' @@ -1157,6 +1159,12 @@ export interface HomeChatComposerClickProps { // composer's `element: 'attachment'` so the same dashboard counts // "user opened the file picker" across both surfaces. | 'attachment' + // Opening the "Import from library" picker from the home composer's "+" + // menu. Mirrors the chat_panel composer's `element: 'library'`. + | 'library' + // Opening the "Import from Figma" modal from the home composer's "+" menu + // (offline .fig decode). Mirrors the chat_panel composer's `figma_import`. + | 'figma_import' // Local-storage / working-dir picker under the home composer; `task_chip` // is the task-type rail (原型 / 幻灯片 / HyperFrames / 视频 / …). | 'working_dir' @@ -1178,6 +1186,11 @@ export interface HomeChatComposerClickProps { // task type; for plugin-preset cards `plugin_id` / `plugin_type` identify // the preset. The raw prompt text is never sent (free text / PII rule). | 'example_prompt' + // The "Open as project" action on an example card — one-click remix that + // creates and enters a project seeded from the example instead of only + // loading it into the composer. Same `chip_id` / `plugin_id` / `plugin_type` + // attribution as `example_prompt`. + | 'example_open_project' // The "+" menu on the home composer (same control as the in-project // composer's `plus_*` events): opening it, inserting a // connector/plugin/mcp mention (`resource_kind` + `resource_id`), or @@ -1550,7 +1563,8 @@ export interface DesignSystemsCreateClickProps { page_name: 'design_systems'; area: 'design_system_create'; element: - | 'github_repo_add' + | 'source_url_add' + | 'figma_url_add' | 'show_access_methods' | 'browse_folder' | 'upload_fig' @@ -1633,6 +1647,10 @@ export interface ChatPanelClickProps { | 'chat_input' | 'composer_settings' | 'attachment' + | 'library' + // Opening the "Import from Figma" modal from the chat composer's "+" menu + // (offline .fig decode). Sits beside `library` as a sibling import source. + | 'figma_import' | 'send' | 'mention_popover_trigger' | 'resources_popover_trigger'; @@ -1850,8 +1868,11 @@ export interface FileManagerClickProps { area: 'file_manager'; element: | 'new_sketch' + | 'new_browser' + | 'create_design_system' | 'paste' | 'upload' + | 'library' | 'select_all_on_page' | 'select_everything' | 'download_as_zip' diff --git a/packages/contracts/src/api/artifacts.ts b/packages/contracts/src/api/artifacts.ts index 533069afb..ba56b61d6 100644 --- a/packages/contracts/src/api/artifacts.ts +++ b/packages/contracts/src/api/artifacts.ts @@ -22,7 +22,7 @@ export type ArtifactRendererId = | 'mini-app' | 'design-system'; -export type ArtifactExportKind = 'html' | 'pdf' | 'zip' | 'pptx' | 'jsx' | 'md' | 'svg' | 'txt'; +export type ArtifactExportKind = 'html' | 'pdf' | 'zip' | 'jsx' | 'md' | 'svg' | 'txt'; export type ArtifactStatus = 'streaming' | 'complete' | 'error'; diff --git a/packages/contracts/src/api/brands.ts b/packages/contracts/src/api/brands.ts index b82d00864..98480a732 100644 --- a/packages/contracts/src/api/brands.ts +++ b/packages/contracts/src/api/brands.ts @@ -124,10 +124,21 @@ export interface BrandMeta { /** The `user:` design-system id this brand registered, so selecting the * brand in the composer applies it through the existing design-system flow. */ designSystemId?: string; + /** UI locale used when generating static brand.html preview copy. */ + locale?: string; /** Backing brand-generation project where extracted assets can be iterated. */ projectId?: string; /** Files generated by the deterministic brand system builder. */ systemFiles?: string[]; + /** True when the programmatic prefetch hit an anti-bot wall (Cloudflare, + * DataDome, …) and could not harvest the page. The web surfaces this to + * prompt the user to solve the challenge in the in-app browser tab and then + * re-extract from the rendered DOM. Persisted so a poll/restart still sees + * it; cleared on a successful extract-from-html or finalize. */ + blocked?: boolean; + /** Human-readable label for the wall that blocked extraction (e.g. + * "Cloudflare"). Set alongside `blocked`. */ + blockedReason?: string; } /** A brand as surfaced to the library list + detail page. */ @@ -149,21 +160,26 @@ export interface BrandDetailResponse { /** POST /api/brands request — start an agent-driven brand extraction. */ export interface BrandCreateRequest { - url: string; + /** Website/source URL. Optional when `designMd` is supplied directly. */ + url?: string; + /** Short brand/product context, used as voice + intro copy in the fast pass. */ + description?: string; + /** Pasted DESIGN.md content. Parsed locally before the AI enrichment pass. */ + designMd?: string; + /** UI locale used to generate the static brand.html preview copy. */ + locale?: string; } /** * POST /api/brands response. Extraction is two-phase: - * 1. PROGRAMMATIC-FIRST (synchronous): the daemon harvests the site - * deterministically (logo, palette, typography, one-line description, - * cover imagery, source URL), synthesizes a valid design system with NO - * LLM, and finalizes + registers it before responding — so the caller - * lands on a usable, applyable design system within seconds (the "aha"). - * 2. ASYNC AI ENRICHMENT: the backing `brand` project carries a seeded prompt - * the caller auto-sends; the agent re-measures precisely and re-finalizes - * in place (same `user:` design system), updating every artifact. - * A fully blocked / unreachable origin skips phase 1 and stays `extracting` - * for the agent to drive — with a human in the loop for anti-bot walls. + * 1. START: the daemon reserves the brand/project/conversation, persists the + * extracting `brand.html` skeleton, seeds real programmatic user/assistant + * messages, and returns immediately so the caller can navigate in. + * 2. BACKGROUND PROGRAMMATIC EXTRACTION: the daemon harvests the site or + * pasted DESIGN.md without an LLM, registers `user:` when successful, + * and updates the same assistant message with completion + produced files. + * A fully blocked / unreachable origin stays `extracting` for the agent/browser + * fallback — with a human in the loop for anti-bot walls. */ export interface BrandExtractStartResponse { /** The reserved brand id (status starts as `extracting`). */ @@ -174,6 +190,12 @@ export interface BrandExtractStartResponse { conversationId: string; /** The normalized source URL the browser tab was opened to. */ sourceUrl: string; + /** Current lifecycle at project creation time; normally `extracting`. */ + status: BrandStatus; + /** Present only for legacy callers/edge paths that already have a registered system. */ + designSystemId?: string; + /** Display name when already available. */ + brandName?: string; } /** @@ -198,6 +220,25 @@ export interface BrandFinalizeResponse { files: string[]; } +/** + * POST /api/brands/:id/extract-from-html request. When the programmatic + * prefetch is blocked by an anti-bot wall, the user solves the challenge in the + * in-app browser tab; the web then reads the already-rendered DOM out of the + * browser webview and posts it here so the daemon can run the same + * harvest → synthesize → finalize pipeline against the unblocked HTML (no fresh + * fetch). Reuses `BrandFinalizeResponse` on success. + */ +export interface BrandExtractFromHtmlRequest { + /** `document.documentElement.outerHTML` of the user-unblocked page. */ + html: string; + /** Concatenated stylesheet text + computed-style harvest collected from the + * rendered page. Optional — inline ` + + +
    +
    +
    +

    Acme · Marketing Landing

    +
    + WIREFRAME · REDLINE +
    DEVICE DESKTOP 1280 · FIDELITY LOW · REV A
    +
    + +
    + +
    +
    +
    +
    acme.example / home
    +
    + +
    + +
    + ① +
    + +
    +
    +
    +
    +
    +
    + + +
    + ② +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + + +
    + ③ +
    +
    +
    +
    + + +
    + ④ +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + +
    + ⑤ +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    + + diff --git a/plugins/_official/examples/wireframe-annotated/open-design.json b/plugins/_official/examples/wireframe-annotated/open-design.json new file mode 100644 index 000000000..6fad1bcbc --- /dev/null +++ b/plugins/_official/examples/wireframe-annotated/open-design.json @@ -0,0 +1,125 @@ +{ + "$schema": "https://open-design.ai/schemas/plugin.v1.json", + "specVersion": "1.0.0", + "name": "example-wireframe-annotated", + "title": "Wireframe Annotated", + "title_i18n": { + "zh-CN": "标注线框图", + "zh-TW": "標註線框圖", + "ja": "注釈付きワイヤーフレーム", + "ko": "주석 와이어프레임", + "de": "Annotiertes Wireframe", + "fr": "Wireframe Annoté", + "ru": "Аннотированный вайрфрейм", + "es": "Wireframe Anotado", + "pt-BR": "Wireframe Anotado", + "it": "Wireframe Annotato", + "vi": "Wireframe Chú Thích", + "pl": "Wireframe z Adnotacjami", + "id": "Wireframe Beranotasi", + "nl": "Geannoteerde Wireframe", + "ar": "إطار سلكي مشروح", + "tr": "Açıklamalı Wireframe", + "uk": "Анотований вайрфрейм", + "en": "Wireframe Annotated" + }, + "version": "0.1.0", + "description": "An annotated / redline lo-fi wireframe of a desktop landing page — greybox blocks inside a browser frame, numbered annotation pins (①–⑤), and a right-hand spec panel mapping each pin to a short engineering / UX note. Use when the brief asks for \"annotated wireframe\", \"redline\", \"wireframe spec\", \"lo-fi landing\", \"low fidelity\", \"线框图\", or \"标注线框\".", + "description_i18n": { + "zh-CN": "桌面落地页的标注/红线低保真线框图——浏览器框架内的灰盒区块、带编号的标注图钉（①–⑤），以及将每个图钉映射到简短工程/UX 说明的右侧规格面板。适用于「标注线框图」「红线」「线框规格」「低保真落地页」「低保真」「线框图」「标注线框」等需求。", + "zh-TW": "桌面著陸頁的標註/紅線低保真線框圖——瀏覽器框架內的灰盒區塊、帶編號的標註圖釘（①–⑤），以及將每個圖釘對應到簡短工程/UX 說明的右側規格面板。適用於「標註線框圖」「紅線」「線框規格」「低保真著陸頁」「低保真」「線框圖」「標註線框」等需求。", + "ja": "デスクトップのランディングページの注釈付き/レッドライン・ローファイ・ワイヤーフレーム。ブラウザフレーム内のグレーボックス、番号付きの注釈ピン（①–⑤）、各ピンを短いエンジニアリング/UX 注記に対応させる右側のスペックパネルを収録。「注釈付きワイヤーフレーム」「レッドライン」「ワイヤーフレーム仕様」「ローファイ・ランディング」「ローファイ」などの要件に最適。", + "ko": "데스크톱 랜딩 페이지의 주석/레드라인 로우파이 와이어프레임. 브라우저 프레임 안의 그레이박스 블록, 번호가 매겨진 주석 핀(①–⑤), 각 핀을 짧은 엔지니어링/UX 노트에 매핑하는 우측 스펙 패널을 포함. '주석 와이어프레임', '레드라인', '와이어프레임 스펙', '로우파이 랜딩', '로우파이' 등의 요구사항에 적합.", + "de": "Ein annotiertes/Redline-Lo-Fi-Wireframe einer Desktop-Landingpage — Greybox-Blöcke in einem Browser-Rahmen, nummerierte Anmerkungs-Pins (①–⑤) und ein rechtes Spec-Panel, das jeden Pin einer kurzen Engineering-/UX-Notiz zuordnet. Ideal für Anfragen nach annotiertem Wireframe, Redline, Wireframe-Spec, Lo-Fi-Landing oder Low-Fidelity.", + "fr": "Un wireframe lo-fi annoté/redline d'une page de destination desktop — blocs greybox dans un cadre de navigateur, pins d'annotation numérotés (①–⑤) et un panneau de spécifications à droite reliant chaque pin à une courte note ingénierie/UX. Idéal pour les demandes de wireframe annoté, redline, spec de wireframe, landing lo-fi ou basse fidélité.", + "ru": "Аннотированный/redline lo-fi вайрфрейм десктопной лендинг-страницы — серые блоки в рамке браузера, пронумерованные пины-аннотации (①–⑤) и правая панель спецификаций, связывающая каждый пин с короткой инженерной/UX-заметкой. Подходит для запросов «аннотированный вайрфрейм», «redline», «спецификация вайрфрейма», «lo-fi лендинг», «низкая детализация».", + "es": "Un wireframe lo-fi anotado/redline de una página de aterrizaje de escritorio — bloques greybox dentro de un marco de navegador, pines de anotación numerados (①–⑤) y un panel de especificaciones a la derecha que asocia cada pin con una breve nota de ingeniería/UX. Ideal para solicitudes de wireframe anotado, redline, especificación de wireframe, landing lo-fi o baja fidelidad.", + "pt-BR": "Um wireframe lo-fi anotado/redline de uma página de destino desktop — blocos greybox dentro de um quadro de navegador, pins de anotação numerados (①–⑤) e um painel de especificações à direita que associa cada pin a uma breve nota de engenharia/UX. Ideal para solicitações de wireframe anotado, redline, especificação de wireframe, landing lo-fi ou baixa fidelidade.", + "it": "Un wireframe lo-fi annotato/redline di una landing page desktop — blocchi greybox dentro una cornice browser, pin di annotazione numerati (①–⑤) e un pannello specifiche a destra che mappa ogni pin a una breve nota di ingegneria/UX. Ideale per richieste di wireframe annotato, redline, specifica di wireframe, landing lo-fi o bassa fedeltà.", + "vi": "Một wireframe lo-fi có chú thích/redline cho trang đích desktop — các khối greybox trong khung trình duyệt, các pin chú thích đánh số (①–⑤) và bảng đặc tả bên phải ánh xạ mỗi pin tới một ghi chú kỹ thuật/UX ngắn. Phù hợp cho yêu cầu wireframe chú thích, redline, đặc tả wireframe, landing lo-fi hoặc độ chi tiết thấp.", + "pl": "Adnotowany/redline wireframe lo-fi desktopowej strony docelowej — bloki greybox w ramce przeglądarki, numerowane pinezki adnotacji (①–⑤) oraz prawy panel specyfikacji mapujący każdą pinezkę na krótką notatkę inżynieryjną/UX. Idealny do zapytań o adnotowany wireframe, redline, specyfikację wireframe, landing lo-fi lub niską wierność.", + "id": "Wireframe lo-fi beranotasi/redline untuk halaman arahan desktop — blok greybox di dalam bingkai browser, pin anotasi bernomor (①–⑤), dan panel spesifikasi di kanan yang memetakan setiap pin ke catatan teknik/UX singkat. Cocok untuk permintaan wireframe beranotasi, redline, spesifikasi wireframe, landing lo-fi, atau fidelitas rendah.", + "nl": "Een geannoteerde/redline lo-fi wireframe van een desktop-landingspagina — greybox-blokken in een browserframe, genummerde annotatiepins (①–⑤) en een spec-paneel rechts dat elke pin koppelt aan een korte engineering-/UX-notitie. Ideaal voor verzoeken naar geannoteerde wireframe, redline, wireframe-spec, lo-fi landing of lage detaillering.", + "ar": "إطار سلكي منخفض الدقة مشروح/خط أحمر لصفحة هبوط على سطح المكتب — كتل رمادية داخل إطار متصفح، ودبابيس تعليق مرقمة (①–⑤)، ولوحة مواصفات على اليمين تربط كل دبوس بملاحظة هندسية/تجربة مستخدم قصيرة. مثالي لطلبات الإطار السلكي المشروح أو الخط الأحمر أو مواصفات الإطار السلكي أو صفحة الهبوط منخفضة الدقة.", + "tr": "Bir masaüstü açılış sayfasının açıklamalı/redline lo-fi wireframe'i — tarayıcı çerçevesi içinde greybox bloklar, numaralı açıklama pinleri (①–⑤) ve her pini kısa bir mühendislik/UX notuna eşleyen sağ taraftaki spec paneli. Açıklamalı wireframe, redline, wireframe spec, lo-fi landing veya düşük sadakat talepleri için ideal.", + "uk": "Анотований/redline lo-fi вайрфрейм десктопної лендинг-сторінки — сірі блоки в рамці браузера, пронумеровані пін-анотації (①–⑤) та права панель специфікацій, що зіставляє кожен пін із короткою інженерною/UX-нотаткою. Підходить для запитів «анотований вайрфрейм», «redline», «специфікація вайрфрейму», «lo-fi лендинг», «низька деталізація».", + "en": "An annotated / redline lo-fi wireframe of a desktop landing page — greybox blocks inside a browser frame, numbered annotation pins (①–⑤), and a right-hand spec panel mapping each pin to a short engineering / UX note. Use when the brief asks for \"annotated wireframe\", \"redline\", \"wireframe spec\", \"lo-fi landing\", \"low fidelity\", \"线框图\", or \"标注线框\"." + }, + "license": "MIT", + "author": { + "name": "Open Design", + "url": "https://github.com/nexu-io" + }, + "homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/wireframe-annotated", + "tags": [ + "example", + "first-party", + "prototype", + "design", + "web", + "desktop", + "wireframe", + "annotated-wireframe", + "redline", + "wireframe-spec", + "lo-fi-landing", + "low-fidelity", + "untitled" + ], + "compat": { + "agentSkills": [ + { + "path": "./SKILL.md" + } + ] + }, + "od": { + "kind": "scenario", + "taskKind": "new-generation", + "mode": "prototype", + "platform": "desktop", + "scenario": "design", + "surface": "web", + "preview": { + "type": "html", + "entry": "./example.html" + }, + "useCase": { + "query": { + "en": "Lay out an annotated redline wireframe of a landing page — greybox nav, hero, logo strip, feature grid, and footer with numbered annotation pins and a right-hand spec panel of engineering notes.", + "zh-CN": "使用这个插件完成以下任务：排布一个落地页的标注红线线框图——灰盒导航、主视觉、Logo 横条、功能网格和页脚，配上带编号的标注图钉，以及右侧的工程说明规格面板。" + }, + "exampleOutputs": [ + { + "path": "./example.html", + "title": "Wireframe Annotated" + } + ] + }, + "context": { + "skills": [ + { + "path": "./SKILL.md" + } + ], + "assets": [ + "./example.html" + ] + }, + "pipeline": { + "stages": [ + { + "id": "generate", + "atoms": [ + "file-write", + "live-artifact" + ] + } + ] + }, + "capabilities": [ + "prompt:inject", + "fs:write" + ] + } +} diff --git a/plugins/_official/examples/wireframe-greybox/SKILL.md b/plugins/_official/examples/wireframe-greybox/SKILL.md new file mode 100644 index 000000000..e8d8f31f3 --- /dev/null +++ b/plugins/_official/examples/wireframe-greybox/SKILL.md @@ -0,0 +1,89 @@ +--- +name: wireframe-greybox +description: | + A crisp greybox / blueprint lo-fi wireframe — neutral grey blocks on a + pale page, image placeholders drawn as a rectangle with a diagonal X, + text shown as solid "lorem bars" of varying widths, sharp 1.5–2px + borders, and a single monospace redline accent for annotations. Reads + like a structural blueprint before any visual design is applied. Use + when the brief asks for "greybox", "blueprint wireframe", "lo-fi + dashboard", "low fidelity", "线框图", or "灰盒原型". +triggers: + - "greybox" + - "grey box wireframe" + - "blueprint wireframe" + - "lo-fi dashboard" + - "low fidelity" + - "wireframe" + - "线框图" + - "灰盒" +od: + mode: prototype + platform: desktop + scenario: design + fidelity: wireframe + preview: + type: html + entry: index.html + design_system: + requires: false + sections: [color, typography, layout, components] + example_prompt: "Greybox a lo-fi blueprint wireframe for a desktop SaaS dashboard — app bar, sidebar nav, a 4-up KPI row, a schematic chart panel, and a list/table with image-placeholder thumbnails, all in neutral grey with monospace redline annotations." +--- + +# Wireframe Greybox Skill + +Produce a single crisp greybox wireframe page. The whole point is +*structure, not skin* — communicate hierarchy and layout with neutral +grey blocks, never with real color, copy, or imagery. Everything is a +placeholder: text is grey "lorem bars", images are rectangles with a +diagonal cross, numbers are big solid blocks. The only color on the page +is the single redline accent reserved for monospace annotations. + +## Workflow + +1. **Stay structural.** Ignore any DESIGN.md that pushes finished UI — + this is deliberately low fidelity. Use a clean system sans (Inter / + system-ui) for shape and a mono (IBM Plex Mono / JetBrains Mono) for + the redline annotations only. No hand-drawn fonts, no brand color. +2. **Set the greybox palette.** Page is a pale neutral (`#f7f7f8`), + blocks are medium grey (`#e3e3e6`), borders are crisp and defined + (`#c9c9cf` for soft edges, `#1c1b1a` for emphasis), and exactly one + accent (a blue or coral redline) carries every monospace annotation. + Keep contrast high enough to read as a small thumbnail — never + near-white-on-white. +3. **Lay out the dashboard**, in order, each on its own `data-od-id`: + - **App bar** — a logo greybox, a row of nav lorem-bars, and an + avatar circle on the right. + - **Sidebar nav** — icon squares + lorem-bar labels; mark one item + active with a filled/inverted block. + - **KPI row** — four greyboxes, each a small label bar above a big + solid "number" bar. + - **Chart panel** — an inline SVG greybox: axes plus a few + hatched/grey bars or a schematic line. No real data. + - **List / table panel** — a header row plus ~5 rows of lorem bars, + with one column of image-placeholders drawn as a box with a + diagonal X. + - **Annotations** — one or two small monospace redlines pinned to the + canvas (e.g. `01 · 12-col grid`, `max-width 1280`). +4. **Write** one self-contained HTML document — `` + through ``, CSS inline, no external JS or images. SVG and CSS + draw every placeholder. A `max-width` container plus a media query + collapses columns under ~1000px. +5. **Self-check.** It should read as a blueprint at thumbnail size: grey + blocks, X-crossed image boxes, lorem bars, and exactly one accent + color on the monospace redlines. If any greybox is missing, the page + looks colored, or it disappears as a blank thumbnail, fix it. + +## Output contract + +Emit between `` tags: + +``` + + +... + +``` + +One sentence before the artifact, nothing after. diff --git a/plugins/_official/examples/wireframe-greybox/example.html b/plugins/_official/examples/wireframe-greybox/example.html new file mode 100644 index 000000000..60c0b3500 --- /dev/null +++ b/plugins/_official/examples/wireframe-greybox/example.html @@ -0,0 +1,280 @@ + + + + + + Acme Analytics — Greybox Wireframe + + + + + + +
    + + +
    + + +
    +
    + +
    max-width 1280
    + +
    + + + + +
    + + +
    +
    +
    +
    +
    +
    + + +
    +
    + +
    +
    + +
    + + +
    +
    + +
    +
    +
    + + + + + +
    + +
    + + + + + +
    +
    + + + + + +
    +
    + + + + + +
    +
    + + + + + +
    +
    + + + + + +
    +
    + + +
    + 01 · 12-col grid + 02 · gutter 16px + 03 · greybox / lo-fi · no color +
    + +
    +
    +
    + + diff --git a/plugins/_official/examples/wireframe-greybox/open-design.json b/plugins/_official/examples/wireframe-greybox/open-design.json new file mode 100644 index 000000000..261b5b41e --- /dev/null +++ b/plugins/_official/examples/wireframe-greybox/open-design.json @@ -0,0 +1,124 @@ +{ + "$schema": "https://open-design.ai/schemas/plugin.v1.json", + "specVersion": "1.0.0", + "name": "example-wireframe-greybox", + "title": "Wireframe Greybox", + "title_i18n": { + "zh-CN": "灰盒线框图", + "zh-TW": "灰盒線框圖", + "ja": "グレーボックスワイヤーフレーム", + "ko": "그레이박스 와이어프레임", + "de": "Greybox-Wireframe", + "fr": "Wireframe Greybox", + "ru": "Грейбокс-вайрфрейм", + "es": "Wireframe Greybox", + "pt-BR": "Wireframe Greybox", + "it": "Wireframe Greybox", + "vi": "Wireframe Hộp Xám", + "pl": "Wireframe Greybox", + "id": "Wireframe Greybox", + "nl": "Greybox Wireframe", + "ar": "إطار سلكي Greybox", + "tr": "Greybox Wireframe", + "uk": "Грейбокс-вайрфрейм", + "en": "Wireframe Greybox" + }, + "version": "0.1.0", + "description": "A crisp greybox / blueprint lo-fi wireframe of a desktop SaaS dashboard — neutral grey blocks, image placeholders with a diagonal-cross X, lorem-bar text, a schematic chart panel, and monospace redline annotations on a 12-column grid. Use when the brief asks for \"greybox\", \"blueprint wireframe\", \"lo-fi dashboard\", \"low fidelity\", \"线框图\", or \"灰盒原型\".", + "description_i18n": { + "zh-CN": "桌面端 SaaS 仪表盘的清晰灰盒/蓝图低保真线框图——中性灰色块、带对角叉号的图片占位符、lorem 文本条、示意图表面板，以及 12 栏栅格上的等宽标注。适用于「灰盒」「蓝图线框」「低保真仪表盘」「低保真」「线框图」「灰盒原型」等需求。", + "zh-TW": "桌面端 SaaS 儀表板的清晰灰盒/藍圖低保真線框圖——中性灰色塊、帶對角叉號的圖片佔位符、lorem 文字條、示意圖表面板，以及 12 欄柵格上的等寬標註。適用於「灰盒」「藍圖線框」「低保真儀表板」「低保真」「線框圖」「灰盒原型」等需求。", + "ja": "デスクトップ SaaS ダッシュボードの精緻なグレーボックス/設計図ローファイワイヤーフレーム。中性的なグレーのブロック、対角クロス X 付き画像プレースホルダー、lorem バーのテキスト、模式的なチャートパネル、12 カラムグリッド上の等幅レッドライン注釈。「グレーボックス」「設計図ワイヤーフレーム」「ローファイダッシュボード」「低忠実度」などの要件に最適。", + "ko": "데스크톱 SaaS 대시보드의 선명한 그레이박스/청사진 로우파이 와이어프레임. 중성 회색 블록, 대각선 십자 X 이미지 플레이스홀더, lorem 바 텍스트, 도식적 차트 패널, 12열 그리드의 등폭 레드라인 주석. '그레이박스', '청사진 와이어프레임', '로우파이 대시보드', '저충실도' 등의 요구사항에 적합.", + "de": "Ein klares Greybox-/Blueprint-Lo-Fi-Wireframe eines Desktop-SaaS-Dashboards — neutrale graue Blöcke, Bildplatzhalter mit Diagonalkreuz, Lorem-Balken-Text, ein schematisches Diagrammpanel und Monospace-Redline-Anmerkungen auf einem 12-Spalten-Raster. Ideal für Anfragen nach Greybox, Blueprint-Wireframe, Lo-Fi-Dashboard oder Low Fidelity.", + "fr": "Un wireframe greybox / blueprint lo-fi épuré d'un tableau de bord SaaS desktop — blocs gris neutres, espaces réservés d'image avec une croix diagonale, texte en barres lorem, panneau de graphique schématique et annotations redline monospace sur une grille à 12 colonnes. Idéal pour les demandes de greybox, wireframe blueprint, dashboard lo-fi ou basse fidélité.", + "ru": "Чёткий грейбокс/блюпринт lo-fi вайрфрейм десктопного SaaS-дашборда — нейтральные серые блоки, плейсхолдеры изображений с диагональным крестом, текст в виде lorem-полос, схематичная панель графика и моноширинные redline-аннотации на 12-колоночной сетке. Подходит для запросов «грейбокс», «блюпринт-вайрфрейм», «lo-fi дашборд», «низкая детализация».", + "es": "Un wireframe greybox / blueprint lo-fi nítido de un panel SaaS de escritorio — bloques grises neutros, marcadores de imagen con una cruz diagonal, texto en barras lorem, un panel de gráfico esquemático y anotaciones redline monoespaciadas en una cuadrícula de 12 columnas. Ideal para solicitudes de greybox, wireframe blueprint, dashboard lo-fi o baja fidelidad.", + "pt-BR": "Um wireframe greybox / blueprint lo-fi nítido de um dashboard SaaS desktop — blocos cinza neutros, placeholders de imagem com um X diagonal, texto em barras lorem, um painel de gráfico esquemático e anotações redline monoespaçadas em uma grade de 12 colunas. Ideal para solicitações de greybox, wireframe blueprint, dashboard lo-fi ou baixa fidelidade.", + "it": "Un wireframe greybox / blueprint lo-fi nitido di una dashboard SaaS desktop — blocchi grigi neutri, segnaposto immagine con una croce diagonale, testo a barre lorem, un pannello grafico schematico e annotazioni redline monospace su una griglia a 12 colonne. Ideale per richieste di greybox, wireframe blueprint, dashboard lo-fi o bassa fedeltà.", + "vi": "Một wireframe greybox / blueprint lo-fi gọn gàng cho bảng điều khiển SaaS desktop — khối xám trung tính, ô giữ chỗ hình ảnh với dấu chéo X, văn bản dạng thanh lorem, bảng biểu đồ sơ đồ và chú thích redline đơn cách trên lưới 12 cột. Phù hợp cho yêu cầu greybox, wireframe blueprint, dashboard lo-fi hoặc độ trung thực thấp.", + "pl": "Wyrazisty greybox / blueprint lo-fi wireframe pulpitu SaaS na desktop — neutralne szare bloki, placeholdery obrazów z przekątnym krzyżem X, tekst w paskach lorem, schematyczny panel wykresu i monospace'owe adnotacje redline na siatce 12-kolumnowej. Idealny do zapytań o greybox, wireframe blueprint, dashboard lo-fi lub niską wierność.", + "id": "Wireframe greybox / blueprint lo-fi yang tajam untuk dashboard SaaS desktop — blok abu-abu netral, placeholder gambar dengan tanda silang diagonal, teks bilah lorem, panel grafik skematik, dan anotasi redline monospace pada grid 12 kolom. Cocok untuk permintaan greybox, wireframe blueprint, dashboard lo-fi, atau fidelitas rendah.", + "nl": "Een strak greybox / blueprint lo-fi wireframe van een desktop SaaS-dashboard — neutrale grijze blokken, afbeeldingplaceholders met een diagonaal kruis, lorem-balk tekst, een schematisch grafiekpaneel en monospace redline-annotaties op een 12-koloms raster. Ideaal voor verzoeken naar greybox, blueprint-wireframe, lo-fi dashboard of low fidelity.", + "ar": "إطار سلكي greybox / مخطط أزرق منخفض الدقة وواضح للوحة معلومات SaaS لسطح المكتب — كتل رمادية محايدة، عناصر نائبة للصور مع علامة X قطرية، نص بأشرطة lorem، لوحة مخطط تخطيطية، وتعليقات redline أحادية المسافة على شبكة من 12 عمودًا. مثالي لطلبات greybox أو الإطار السلكي المخطط أو لوحة المعلومات منخفضة الدقة أو الدقة المنخفضة.", + "tr": "Bir masaüstü SaaS panosunun keskin bir greybox / blueprint lo-fi wireframe'i — nötr gri bloklar, çapraz X işaretli görsel yer tutucuları, lorem çubuğu metin, şematik bir grafik paneli ve 12 sütunlu ızgarada tek aralıklı redline açıklamaları. Greybox, blueprint wireframe, lo-fi pano veya düşük çözünürlük talepleri için ideal.", + "uk": "Чіткий грейбокс/блюпринт lo-fi вайрфрейм десктопної SaaS-панелі — нейтральні сірі блоки, плейсхолдери зображень із діагональним хрестом, текст у вигляді lorem-смуг, схематична панель графіка та моноширинні redline-анотації на 12-колонковій сітці. Підходить для запитів «грейбокс», «блюпринт-вайрфрейм», «lo-fi панель», «низька деталізація».", + "en": "A crisp greybox / blueprint lo-fi wireframe of a desktop SaaS dashboard — neutral grey blocks, image placeholders with a diagonal-cross X, lorem-bar text, a schematic chart panel, and monospace redline annotations on a 12-column grid. Use when the brief asks for \"greybox\", \"blueprint wireframe\", \"lo-fi dashboard\", \"low fidelity\", \"线框图\", or \"灰盒原型\"." + }, + "license": "MIT", + "author": { + "name": "Open Design", + "url": "https://github.com/nexu-io" + }, + "homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/wireframe-greybox", + "tags": [ + "example", + "first-party", + "prototype", + "design", + "web", + "desktop", + "wireframe", + "greybox", + "blueprint-wireframe", + "lo-fi-dashboard", + "low-fidelity", + "untitled" + ], + "compat": { + "agentSkills": [ + { + "path": "./SKILL.md" + } + ] + }, + "od": { + "kind": "scenario", + "taskKind": "new-generation", + "mode": "prototype", + "platform": "desktop", + "scenario": "design", + "surface": "web", + "preview": { + "type": "html", + "entry": "./example.html" + }, + "useCase": { + "query": { + "en": "Lay out a greybox lo-fi wireframe of a SaaS dashboard — sidebar nav, a 4-up KPI row, a schematic chart panel, and a list table, with monospace redline annotations on a 12-column grid.", + "zh-CN": "使用这个插件完成以下任务：布局一个 SaaS 仪表盘的灰盒低保真线框图——侧边栏导航、4 个一组的 KPI 行、示意图表面板和列表表格，并在 12 栏栅格上配以等宽 redline 标注。" + }, + "exampleOutputs": [ + { + "path": "./example.html", + "title": "Wireframe Greybox" + } + ] + }, + "context": { + "skills": [ + { + "path": "./SKILL.md" + } + ], + "assets": [ + "./example.html" + ] + }, + "pipeline": { + "stages": [ + { + "id": "generate", + "atoms": [ + "file-write", + "live-artifact" + ] + } + ] + }, + "capabilities": [ + "prompt:inject", + "fs:write" + ] + } +} diff --git a/plugins/_official/examples/wireframe-mobile-flow/SKILL.md b/plugins/_official/examples/wireframe-mobile-flow/SKILL.md new file mode 100644 index 000000000..b4242315b --- /dev/null +++ b/plugins/_official/examples/wireframe-mobile-flow/SKILL.md @@ -0,0 +1,95 @@ +--- +name: wireframe-mobile-flow +description: | + A lo-fi multi-screen MOBILE flow wireframe — three or four phone frames + laid out in a row on a board, showing a connected user flow (Onboarding → + Home feed → Item detail → Confirm). Grey-box content inside each device, + dashed connector arrows + numbered step labels between screens, and a + couple of annotation callouts. Reads like an app flow pinned to a + whiteboard before any pixels are committed. Use when the brief asks for + "mobile wireframe", "app flow", "user flow wireframe", "lo-fi mobile", + "low fidelity", "线框图", "移动端线框", or "App 流程". +triggers: + - "mobile wireframe" + - "app flow" + - "user flow" + - "lo-fi mobile" + - "wireframe" + - "low fidelity" + - "移动端线框" + - "App 流程图" +od: + mode: prototype + platform: auto + scenario: design + fidelity: wireframe + preview: + type: html + entry: index.html + design_system: + requires: false + sections: [color, typography, layout, components] + example_prompt: "Wireframe a lo-fi mobile flow v0.1 — three phone frames in a row (Onboarding → Home feed → Item detail), grey-box screens, dashed step arrows between them, and two annotation callouts." +--- + +# Wireframe Mobile Flow Skill + +Produce a single board showing a mobile app's user flow as a row of lo-fi +phone frames. The point is the *flow* — how a user moves screen to screen — +not the polish of any one screen. Keep the screens clean grey-boxes (not +scribbly) but keep the connectors and annotations loose and informal. + +## Workflow + +1. **Skip the DESIGN.md** if it pushes for finished UI. This skill is + deliberately low-fidelity: greyboxes, placeholder rects, and bars stand in + for real content. Honor type tokens only loosely (system sans for the + board, mono for labels and datelines). +2. **Pick the flow steps** from the brief — typically 3–4 connected screens + like Onboarding → Home feed → Item detail → Confirm. Name each step so the + connector arrows can carry a numbered, verb-first label ("① tap Start", + "② open item", "③ add to cart"). +3. **Lay out the board**, in order: + - **Board header** — bold sans title with a pinned "WIREFRAME v0.1 · + MOBILE" tag (dashed border, slight rotation) and a mono dateline on the + right (date / device / fidelity). + - **Phone row** — 3–4 rounded device frames (~240–280px wide) in a + horizontal row, each with a notch / status bar. Inside each frame put + the greybox content for its step: hero image-placeholder (rect + X), + title/price bars, list cards (thumbnail X + 2 text bars), category + chips, a bottom tab bar, sticky CTA bars, a confirm checkmark — match the + screen's role. + - **Connectors** — dashed arrows between consecutive phones, each carrying + a small mono step label describing the tap that advances the flow. + - **Annotations** — 1–2 small sticky / callout notes pinned near a screen + to flag intent ("hero must sell value in 3s", "checkout = 1 screen"). +4. **Write** a single HTML document: + - `` through ``, CSS inline, no external JS, no + external images (CSS/SVG placeholders only). + - Use Inter / system-ui for the board and IBM Plex Mono for labels via + Google Fonts; a light marker font is allowed for annotations only. + - Defined dark device-frame borders, medium-grey content blocks on white + screens, and a single accent color for arrows and annotations so the + board reads clearly even as a small thumbnail. + - `data-od-id` on the header, each phone screen, the connectors, and the + annotations. +5. **Self-check**: + - The three main phones are visible in a ~1280px viewport; the flow reads + left-to-right. + - Screens are clean greyboxes (not scribbly); connectors and stickies are + the loose, informal parts. + - No near-white-on-white regions — every block has a visible grey fill or + border. If a screen renders blank as a thumbnail, raise the contrast. + +## Output contract + +Emit between `` tags: + +``` + + +... + +``` + +One sentence before the artifact, nothing after. diff --git a/plugins/_official/examples/wireframe-mobile-flow/example.html b/plugins/_official/examples/wireframe-mobile-flow/example.html new file mode 100644 index 000000000..c01a1ef1a --- /dev/null +++ b/plugins/_official/examples/wireframe-mobile-flow/example.html @@ -0,0 +1,323 @@ + + + + + + Marketplace App — Mobile Flow Wireframe v0.1 + + + + + + +
    + +
    +
    +

    Marketplace App · Buy Flow + WIREFRAME v0.1 · MOBILE +

    +
    Lo-fi screen flow — first-launch onboarding through to a confirmed order. Greybox content only; copy and imagery come later.
    +
    +
    DATE 2026-06-23
    DEVICE IPHONE 390×844
    FIDELITY LOW · GREYBOX
    +
    + +
    + + +
    +
    +
    +
    +
    9:41
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    GET STARTED
    +
    Skip for now
    +
    +
    +
    +
    1 · Onboardingfirst launch
    +
    + + +
    +
    ① tap Start
    + +
    + + +
    +
    +
    +
    +
    9:41
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    2 · Home feedbrowse + search
    +
    + + +
    +
    ② open item
    + +
    + + +
    +
    +
    +
    +
    9:41
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    ADD TO CART
    +
    +
    +
    +
    3 · Item detailspecs + CTA
    +
    + + +
    +
    ③ add to cart
    + +
    + + +
    +
    +
    +
    +
    9:41
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    DONE
    +
    +
    +
    +
    4 · Confirmorder placed
    +
    + +
    + +
    + greybox content + primary action + flow step / annotation +
    + + +
    + + ↑ screen 1 + Hero must sell the value prop in 3s — image + one line. +
    +
    + screen 4 → + Keep checkout to ONE screen. No account wall before confirm. +
    + +
    + + diff --git a/plugins/_official/examples/wireframe-mobile-flow/open-design.json b/plugins/_official/examples/wireframe-mobile-flow/open-design.json new file mode 100644 index 000000000..7238be865 --- /dev/null +++ b/plugins/_official/examples/wireframe-mobile-flow/open-design.json @@ -0,0 +1,125 @@ +{ + "$schema": "https://open-design.ai/schemas/plugin.v1.json", + "specVersion": "1.0.0", + "name": "example-wireframe-mobile-flow", + "title": "Wireframe Mobile Flow", + "title_i18n": { + "zh-CN": "移动端线框流程", + "zh-TW": "行動端線框流程", + "ja": "モバイルフロー・ワイヤーフレーム", + "ko": "모바일 플로우 와이어프레임", + "de": "Mobile-Flow-Wireframe", + "fr": "Wireframe de Flux Mobile", + "ru": "Вайрфрейм мобильного флоу", + "es": "Wireframe de Flujo Móvil", + "pt-BR": "Wireframe de Fluxo Mobile", + "it": "Wireframe Flusso Mobile", + "vi": "Wireframe Luồng Mobile", + "pl": "Wireframe Przepływu Mobilnego", + "id": "Wireframe Alur Mobile", + "nl": "Mobiele Flow-Wireframe", + "ar": "إطار سلكي لتدفق الموبايل", + "tr": "Mobil Akış Wireframe", + "uk": "Вайрфрейм мобільного флоу", + "en": "Wireframe Mobile Flow" + }, + "version": "0.1.0", + "description": "A lo-fi mobile app flow wireframe — three to four phone frames in a row (onboarding → home feed → item detail → confirm), greybox content inside each device, dashed connector arrows with numbered step labels, and sticky-note annotations. Use when the brief asks for \"mobile wireframe\", \"app flow\", \"user flow\", \"lo-fi mobile\", \"low fidelity\", \"移动端线框\", or \"App 流程图\".", + "description_i18n": { + "zh-CN": "低保真移动端应用流程线框图，将三到四个手机屏幕排成一行（引导 → 首页信息流 → 商品详情 → 确认），每个设备内为灰盒占位内容，屏幕间用带编号步骤标签的虚线箭头连接，并配有便签注释。适用于「移动端线框」「App 流程」「用户流程」「低保真移动端」「低保真」「移动端线框」「App 流程图」等需求。", + "zh-TW": "低保真行動端應用流程線框圖，將三到四個手機螢幕排成一行（引導 → 首頁資訊流 → 商品詳情 → 確認），每個裝置內為灰盒佔位內容，螢幕間以帶編號步驟標籤的虛線箭頭連接，並附便利貼註解。適用於「行動端線框」「App 流程」「使用者流程」「低保真行動端」「低保真」等需求。", + "ja": "ローファイなモバイルアプリのフローワイヤーフレーム。3〜4枚のスマホ画面を横一列に並べ（オンボーディング → ホームフィード → 詳細 → 確認）、各端末内はグレーボックスのプレースホルダー、画面間は番号付きステップラベルの破線矢印でつなぎ、付箋メモを添える。「モバイルワイヤーフレーム」「アプリフロー」「ユーザーフロー」「ローファイモバイル」などの要件に最適。", + "ko": "로우파이 모바일 앱 플로우 와이어프레임. 3~4개의 폰 화면을 가로로 한 줄로 배치하고(온보딩 → 홈 피드 → 상세 → 확인), 각 기기 안은 그레이박스 플레이스홀더, 화면 사이는 번호가 매겨진 단계 레이블의 점선 화살표로 연결하며 포스트잇 주석을 더한다. '모바일 와이어프레임', '앱 플로우', '사용자 흐름', '로우파이 모바일' 등의 요구사항에 적합.", + "de": "Lo-Fi-Wireframe eines mobilen App-Flows — drei bis vier Telefonrahmen in einer Reihe (Onboarding → Home-Feed → Detail → Bestätigung), Graybox-Inhalte in jedem Gerät, gestrichelte Verbindungspfeile mit nummerierten Schritt-Labels und Haftnotiz-Anmerkungen. Ideal für Anfragen nach Mobile-Wireframe, App-Flow, User-Flow oder Lo-Fi-Mobile.", + "fr": "Wireframe lo-fi d'un flux d'application mobile — trois à quatre cadres de téléphone alignés (onboarding → fil d'accueil → détail → confirmation), contenu en greybox dans chaque appareil, flèches de connexion en pointillés avec étiquettes d'étape numérotées et annotations en post-it. Idéal pour les demandes de wireframe mobile, app flow, user flow ou lo-fi mobile.", + "ru": "Лоу-фай вайрфрейм флоу мобильного приложения — три-четыре рамки телефона в ряд (онбординг → лента → детали → подтверждение), серый плейсхолдер-контент в каждом устройстве, пунктирные стрелки-связи с нумерованными метками шагов и стикеры с заметками. Подходит для запросов «мобильный вайрфрейм», «app flow», «user flow», «lo-fi mobile».", + "es": "Wireframe lo-fi del flujo de una app móvil — de tres a cuatro marcos de teléfono en fila (onboarding → feed de inicio → detalle → confirmación), contenido greybox dentro de cada dispositivo, flechas conectoras punteadas con etiquetas de paso numeradas y notas adhesivas. Ideal para solicitudes de wireframe móvil, app flow, user flow o lo-fi mobile.", + "pt-BR": "Wireframe lo-fi do fluxo de um app mobile — três a quatro molduras de telefone em fila (onboarding → feed inicial → detalhe → confirmação), conteúdo greybox dentro de cada dispositivo, setas conectoras pontilhadas com rótulos de passo numerados e notas adesivas. Ideal para solicitações de wireframe mobile, app flow, user flow ou lo-fi mobile.", + "it": "Wireframe lo-fi del flusso di un'app mobile — da tre a quattro cornici di telefono in fila (onboarding → feed home → dettaglio → conferma), contenuto greybox in ogni dispositivo, frecce di connessione tratteggiate con etichette di passo numerate e annotazioni su post-it. Ideale per richieste di wireframe mobile, app flow, user flow o lo-fi mobile.", + "vi": "Wireframe lo-fi cho luồng ứng dụng di động — ba đến bốn khung điện thoại xếp hàng ngang (onboarding → bảng tin → chi tiết → xác nhận), nội dung greybox trong mỗi thiết bị, mũi tên nối nét đứt kèm nhãn bước được đánh số và ghi chú giấy nhớ. Phù hợp cho yêu cầu wireframe mobile, app flow, user flow hoặc lo-fi mobile.", + "pl": "Lo-fi wireframe przepływu aplikacji mobilnej — trzy do czterech ramek telefonów w rzędzie (onboarding → feed główny → szczegóły → potwierdzenie), zawartość greybox w każdym urządzeniu, przerywane strzałki łączące z numerowanymi etykietami kroków i notatki na karteczkach. Idealny do zapytań o wireframe mobilny, app flow, user flow lub lo-fi mobile.", + "id": "Wireframe lo-fi alur aplikasi mobile — tiga sampai empat bingkai ponsel dalam satu baris (onboarding → feed beranda → detail → konfirmasi), konten greybox di dalam setiap perangkat, panah penghubung putus-putus dengan label langkah bernomor, dan catatan tempel. Cocok untuk permintaan wireframe mobile, app flow, user flow, atau lo-fi mobile.", + "nl": "Lo-fi wireframe van een mobiele app-flow — drie tot vier telefoonframes op een rij (onboarding → home-feed → detail → bevestiging), greybox-inhoud in elk apparaat, gestippelde verbindingspijlen met genummerde stap-labels en plaknotities. Ideaal voor verzoeken naar mobiele wireframe, app flow, user flow of lo-fi mobile.", + "ar": "إطار سلكي منخفض الدقة لتدفق تطبيق موبايل — من ثلاثة إلى أربعة إطارات هواتف في صف واحد (الإعداد → الخلاصة الرئيسية → التفاصيل → التأكيد)، محتوى رمادي نائب داخل كل جهاز، أسهم ربط متقطعة مع تسميات خطوات مرقمة وملاحظات لاصقة. مثالي لطلبات wireframe الموبايل أو app flow أو user flow أو lo-fi mobile.", + "tr": "Lo-fi mobil uygulama akış wireframe'i — bir sırada üç ila dört telefon çerçevesi (onboarding → ana akış → detay → onay), her cihazın içinde greybox içerik, numaralı adım etiketli kesik çizgili bağlantı okları ve yapışkan not açıklamaları. Mobil wireframe, app flow, user flow veya lo-fi mobile talepleri için ideal.", + "uk": "Лоу-фай вайрфрейм флоу мобільного застосунку — три-чотири рамки телефонів у ряд (онбординг → стрічка → деталі → підтвердження), сірий плейсхолдер-контент у кожному пристрої, пунктирні стрілки-зв'язки з нумерованими мітками кроків та стікери із замітками. Підходить для запитів «мобільний вайрфрейм», «app flow», «user flow», «lo-fi mobile».", + "en": "A lo-fi mobile app flow wireframe — three to four phone frames in a row (onboarding → home feed → item detail → confirm), greybox content inside each device, dashed connector arrows with numbered step labels, and sticky-note annotations. Use when the brief asks for \"mobile wireframe\", \"app flow\", \"user flow\", \"lo-fi mobile\", \"low fidelity\", \"移动端线框\", or \"App 流程图\"." + }, + "license": "MIT", + "author": { + "name": "Open Design", + "url": "https://github.com/nexu-io" + }, + "homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/wireframe-mobile-flow", + "tags": [ + "example", + "first-party", + "prototype", + "design", + "mobile", + "app", + "wireframe", + "mobile-wireframe", + "app-flow", + "user-flow", + "lo-fi-mobile", + "low-fidelity", + "untitled" + ], + "compat": { + "agentSkills": [ + { + "path": "./SKILL.md" + } + ] + }, + "od": { + "kind": "scenario", + "taskKind": "new-generation", + "mode": "prototype", + "platform": "auto", + "scenario": "design", + "surface": "web", + "preview": { + "type": "html", + "entry": "./example.html" + }, + "useCase": { + "query": { + "en": "Sketch a lo-fi mobile app flow wireframe — four phone frames (onboarding, home feed, item detail, confirm) with greybox content, dashed connector arrows, and numbered step labels.", + "zh-CN": "使用这个插件完成以下任务：绘制一个低保真移动端应用流程线框图 —— 四个手机屏幕（引导、首页信息流、商品详情、确认），灰盒占位内容、虚线连接箭头和带编号的步骤标签。" + }, + "exampleOutputs": [ + { + "path": "./example.html", + "title": "Wireframe Mobile Flow" + } + ] + }, + "context": { + "skills": [ + { + "path": "./SKILL.md" + } + ], + "assets": [ + "./example.html" + ] + }, + "pipeline": { + "stages": [ + { + "id": "generate", + "atoms": [ + "file-write", + "live-artifact" + ] + } + ] + }, + "capabilities": [ + "prompt:inject", + "fs:write" + ] + } +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e77e456d3..3c3d5cfdd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -101,6 +101,9 @@ importers: jszip: specifier: 3.10.1 version: 3.10.1 + kiwi-schema: + specifier: 0.5.0 + version: 0.5.0 multer: specifier: 2.1.1 version: 2.1.1 @@ -330,6 +333,9 @@ importers: '@xterm/xterm': specifier: 5.5.0 version: 5.5.0 + jspdf: + specifier: 4.2.1 + version: 4.2.1 lexical: specifier: 0.36.2 version: 0.36.2 @@ -2421,6 +2427,9 @@ packages: '@types/node@24.12.2': resolution: {integrity: sha512-A1sre26ke7HDIuY/M23nd9gfB+nrmhtYyMINbjI1zHJxYteKR6qSMX56FsmjMcDb3SMcjJg5BiRRgOCC/yBD0g==} + '@types/pako@2.0.4': + resolution: {integrity: sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==} + '@types/plist@3.0.5': resolution: {integrity: sha512-E6OCaRmAe4WDmWNsL/9RMqdkkzDCY1etutkflWk4c+AcjDU07Pcz1fQwTX0TQz+Pxqn9i4L1TU3UFpjnrcDgxA==} @@ -2433,6 +2442,9 @@ packages: '@types/qs@6.15.0': resolution: {integrity: sha512-JawvT8iBVWpzTrz3EGw9BTQFg3BQNmwERdKE22vlTxawwtbyUSlMppvZYKLZzB5zgACXdXxbD3m1bXaMqP/9ow==} + '@types/raf@3.4.3': + resolution: {integrity: sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==} + '@types/range-parser@1.2.7': resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==} @@ -2680,6 +2692,10 @@ packages: resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==} engines: {node: 18 || 20 || >=22} + base64-arraybuffer@1.0.2: + resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==} + engines: {node: '>= 0.6.0'} + base64-js@1.5.1: resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==} @@ -2772,6 +2788,10 @@ packages: caniuse-lite@1.0.30001791: resolution: {integrity: sha512-yk0l/YSrOnFZk3UROpDLQD9+kC1l4meK/wed583AXrzoarMGJcbRi2Q4RaUYbKxYAsZ8sWmaSa/DsLmdBeI1vQ==} + canvg@3.0.11: + resolution: {integrity: sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==} + engines: {node: '>=10.0.0'} + ccount@2.0.1: resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==} @@ -2936,6 +2956,9 @@ packages: crossws@0.3.5: resolution: {integrity: sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA==} + css-line-break@2.1.0: + resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==} + css-select@5.2.2: resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==} @@ -3261,6 +3284,9 @@ packages: fast-json-stable-stringify@2.1.0: resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==} + fast-png@6.4.0: + resolution: {integrity: sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q==} + fast-string-truncated-width@3.0.3: resolution: {integrity: sha512-0jjjIEL6+0jag3l2XWWizO64/aZVtpiGE3t0Zgqxv0DPuxiMjvB3M24fCyhZUO4KomJQPj3LTSUnDP3GpdwC0g==} @@ -3299,6 +3325,9 @@ packages: fflate@0.4.8: resolution: {integrity: sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==} + fflate@0.8.3: + resolution: {integrity: sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==} + file-uri-to-path@1.0.0: resolution: {integrity: sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==} @@ -3511,6 +3540,10 @@ packages: html-void-elements@3.0.0: resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==} + html2canvas@1.4.1: + resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==} + engines: {node: '>=8.0.0'} + htmlparser2@10.1.0: resolution: {integrity: sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ==} @@ -3565,6 +3598,9 @@ packages: ini@1.3.8: resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==} + iobuffer@5.4.0: + resolution: {integrity: sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA==} + ip-address@10.2.0: resolution: {integrity: sha512-/+S6j4E9AHvW9SWMSEY9Xfy66O5PWvVEJ08O0y5JGyEKQpojb0K0GKpz/v5HJ/G0vi3D2sjGK78119oXZeE0qA==} engines: {node: '>= 12'} @@ -3694,12 +3730,19 @@ packages: jsonfile@6.2.1: resolution: {integrity: sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q==} + jspdf@4.2.1: + resolution: {integrity: sha512-YyAXyvnmjTbR4bHQRLzex3CuINCDlQnBqoSYyjJwTP2x9jDLuKDzy7aKUl0hgx3uhcl7xzg32agn5vlie6HIlQ==} + jszip@3.10.1: resolution: {integrity: sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==} keyv@4.5.4: resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==} + kiwi-schema@0.5.0: + resolution: {integrity: sha512-X+FpfU0yTEtc6aTHS7VwbOpvQwRt70+pXXWRI5fd6CvWhe7pSVC854TVo4Zo0x5/wwcWj+/9KUlXpdcP0dY9AA==} + hasBin: true + kleur@4.1.5: resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==} engines: {node: '>=6'} @@ -4256,6 +4299,9 @@ packages: pako@1.0.11: resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==} + pako@2.1.0: + resolution: {integrity: sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==} + parse-latin@7.0.0: resolution: {integrity: sha512-mhHgobPPua5kZ98EF4HWiH167JWBfl4pvAIXXdbaVohtK7a6YBOy56kvhCqduqyo/f3yrHFWmqmiMg/BkBkYYQ==} @@ -4303,6 +4349,9 @@ packages: pend@1.2.0: resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==} + performance-now@2.1.0: + resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==} + piccolore@0.1.3: resolution: {integrity: sha512-o8bTeDWjE086iwKrROaDf31K0qC/BENdm15/uH9usSC/uZjJOKb2YGiVHfLY4GhwsERiPI1jmwI2XrA7ACOxVw==} @@ -4444,6 +4493,9 @@ packages: radix3@1.1.2: resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==} + raf@3.4.1: + resolution: {integrity: sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==} + range-parser@1.2.1: resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==} engines: {node: '>= 0.6'} @@ -4492,6 +4544,9 @@ packages: resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==} engines: {node: '>= 20.19.0'} + regenerator-runtime@0.13.11: + resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==} + regex-recursion@6.0.2: resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==} @@ -4572,6 +4627,10 @@ packages: resolution: {integrity: sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==} engines: {node: '>= 4'} + rgbcolor@1.0.1: + resolution: {integrity: sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==} + engines: {node: '>= 0.8.15'} + rimraf@2.6.3: resolution: {integrity: sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==} deprecated: Rimraf versions prior to v4 are no longer supported @@ -4739,6 +4798,10 @@ packages: stackback@0.0.2: resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==} + stackblur-canvas@2.7.0: + resolution: {integrity: sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==} + engines: {node: '>=0.1.14'} + stat-mode@1.0.0: resolution: {integrity: sha512-jH9EhtKIjuXZ2cWxmXS8ZP80XyC3iasQxMDV8jzhNJpfDb7VbQLVW4Wvsxz9QZvzV+G4YoSfBUVKDOyxLzi/sg==} engines: {node: '>= 6'} @@ -4802,6 +4865,10 @@ packages: resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==} engines: {node: '>=8'} + svg-pathdata@6.0.3: + resolution: {integrity: sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==} + engines: {node: '>=12.0.0'} + svgo@4.0.1: resolution: {integrity: sha512-XDpWUOPC6FEibaLzjfe0ucaV0YrOjYotGJO1WpF0Zd+n6ZGEQUsSugaoLq9QkEZtAfQIxT42UChcssDVPP3+/w==} engines: {node: '>=16'} @@ -4841,6 +4908,9 @@ packages: resolution: {integrity: sha512-yYrrsWnrXMcdsnu/7YMYAofM1ktpL5By7vZhf15CrXijWWrEYZks5AXBudalfSWJLlnen/QUJUB5aoB0kqZUGA==} engines: {node: '>=6.0.0'} + text-segmentation@1.0.3: + resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==} + tiny-async-pool@1.3.0: resolution: {integrity: sha512-01EAw5EDrcVrdgyCLgoSPvqznC0sVxDSVeiOz09FUpjh71G79VCqneOr+xvt7T1r76CF6ZZfPjHorN2+d+3mqA==} @@ -5091,6 +5161,9 @@ packages: util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} + utrie@1.0.2: + resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==} + vary@1.1.2: resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==} engines: {node: '>= 0.8'} @@ -7109,6 +7182,8 @@ snapshots: dependencies: undici-types: 7.16.0 + '@types/pako@2.0.4': {} + '@types/plist@3.0.5': dependencies: '@types/node': 24.12.2 @@ -7123,6 +7198,9 @@ snapshots: '@types/qs@6.15.0': {} + '@types/raf@3.4.3': + optional: true + '@types/range-parser@1.2.7': {} '@types/react-dom@18.3.7(@types/react@18.3.28)': @@ -7508,6 +7586,9 @@ snapshots: balanced-match@4.0.4: {} + base64-arraybuffer@1.0.2: + optional: true + base64-js@1.5.1: {} baseline-browser-mapping@2.10.23: {} @@ -7629,6 +7710,18 @@ snapshots: caniuse-lite@1.0.30001791: {} + canvg@3.0.11: + dependencies: + '@babel/runtime': 7.29.2 + '@types/raf': 3.4.3 + core-js: 3.49.0 + raf: 3.4.1 + regenerator-runtime: 0.13.11 + rgbcolor: 1.0.1 + stackblur-canvas: 2.7.0 + svg-pathdata: 6.0.3 + optional: true + ccount@2.0.1: {} chai@6.2.2: {} @@ -7781,6 +7874,11 @@ snapshots: dependencies: uncrypto: 0.1.3 + css-line-break@2.1.0: + dependencies: + utrie: 1.0.2 + optional: true + css-select@5.2.2: dependencies: boolbase: 1.0.0 @@ -8204,6 +8302,12 @@ snapshots: fast-json-stable-stringify@2.1.0: {} + fast-png@6.4.0: + dependencies: + '@types/pako': 2.0.4 + iobuffer: 5.4.0 + pako: 2.1.0 + fast-string-truncated-width@3.0.3: {} fast-string-width@3.0.2: @@ -8246,6 +8350,8 @@ snapshots: fflate@0.4.8: {} + fflate@0.8.3: {} + file-uri-to-path@1.0.0: {} filelist@1.0.6: @@ -8551,6 +8657,12 @@ snapshots: html-void-elements@3.0.0: {} + html2canvas@1.4.1: + dependencies: + css-line-break: 2.1.0 + text-segmentation: 1.0.3 + optional: true + htmlparser2@10.1.0: dependencies: domelementtype: 2.3.0 @@ -8618,6 +8730,8 @@ snapshots: ini@1.3.8: {} + iobuffer@5.4.0: {} + ip-address@10.2.0: {} ipaddr.js@1.9.1: {} @@ -8727,6 +8841,17 @@ snapshots: optionalDependencies: graceful-fs: 4.2.11 + jspdf@4.2.1: + dependencies: + '@babel/runtime': 7.29.2 + fast-png: 6.4.0 + fflate: 0.8.3 + optionalDependencies: + canvg: 3.0.11 + core-js: 3.49.0 + dompurify: 3.4.2 + html2canvas: 1.4.1 + jszip@3.10.1: dependencies: lie: 3.3.0 @@ -8738,6 +8863,8 @@ snapshots: dependencies: json-buffer: 3.0.1 + kiwi-schema@0.5.0: {} + kleur@4.1.5: {} lazy-val@1.0.5: {} @@ -9394,6 +9521,8 @@ snapshots: pako@1.0.11: {} + pako@2.1.0: {} + parse-latin@7.0.0: dependencies: '@types/nlcst': 2.0.3 @@ -9438,6 +9567,9 @@ snapshots: pend@1.2.0: {} + performance-now@2.1.0: + optional: true + piccolore@0.1.3: {} picocolors@1.1.1: {} @@ -9583,6 +9715,11 @@ snapshots: radix3@1.1.2: {} + raf@3.4.1: + dependencies: + performance-now: 2.1.0 + optional: true + range-parser@1.2.1: {} raw-body@3.0.2: @@ -9641,6 +9778,9 @@ snapshots: readdirp@5.0.0: {} + regenerator-runtime@0.13.11: + optional: true + regex-recursion@6.0.2: dependencies: regex-utilities: 2.3.0 @@ -9764,6 +9904,9 @@ snapshots: retry@0.12.0: {} + rgbcolor@1.0.1: + optional: true + rimraf@2.6.3: dependencies: glob: 7.2.3 @@ -10023,6 +10166,9 @@ snapshots: stackback@0.0.2: {} + stackblur-canvas@2.7.0: + optional: true + stat-mode@1.0.0: {} statuses@2.0.2: {} @@ -10075,6 +10221,9 @@ snapshots: dependencies: has-flag: 4.0.0 + svg-pathdata@6.0.3: + optional: true + svgo@4.0.1: dependencies: commander: 11.1.0 @@ -10130,6 +10279,11 @@ snapshots: mkdirp: 0.5.6 rimraf: 2.6.3 + text-segmentation@1.0.3: + dependencies: + utrie: 1.0.2 + optional: true + tiny-async-pool@1.3.0: dependencies: semver: 5.7.2 @@ -10320,6 +10474,11 @@ snapshots: util-deprecate@1.0.2: {} + utrie@1.0.2: + dependencies: + base64-arraybuffer: 1.0.2 + optional: true + vary@1.1.2: {} verror@1.10.1: diff --git a/scripts/generate-design-system-system-assets.ts b/scripts/generate-design-system-system-assets.ts new file mode 100644 index 000000000..c8b2f865d --- /dev/null +++ b/scripts/generate-design-system-system-assets.ts @@ -0,0 +1,379 @@ +import { mkdir, readFile, readdir, writeFile } from "node:fs/promises"; +import path from "node:path"; + +type Manifest = { + id?: string; + name?: string; + category?: string; + description?: string; + files?: { + design?: string; + tokens?: string; + designTokens?: string; + }; +}; + +type TokenMap = Map; + +type AssetSpec = { + file: string; + label: string; + title: string; + eyebrow: string; + body: string; +}; + +const repoRoot = path.resolve(import.meta.dirname, ".."); +const designSystemsRoot = path.join(repoRoot, "design-systems"); + +const assetSpecs: AssetSpec[] = [ + { + file: "landing.html", + label: "Landing page", + title: "Launch narrative", + eyebrow: "Landing", + body: "Hero, proof points, and conversion actions composed from the design system tokens.", + }, + { + file: "deck.html", + label: "Pitch deck", + title: "Executive deck", + eyebrow: "Deck", + body: "Slide-scale title, metric, and section patterns for presentation work.", + }, + { + file: "poster.html", + label: "Poster", + title: "Campaign poster", + eyebrow: "Poster", + body: "High-impact display composition using the system color, type, and spacing rhythm.", + }, + { + file: "email.html", + label: "Email", + title: "Email module", + eyebrow: "Email", + body: "Transactional header, body copy, and primary call-to-action treatment.", + }, + { + file: "newsletter.html", + label: "Newsletter", + title: "Editorial issue", + eyebrow: "Newsletter", + body: "Readable long-form layout with heading hierarchy and compact story modules.", + }, + { + file: "form.html", + label: "Form page", + title: "Capture form", + eyebrow: "Form", + body: "Input, selection, helper text, and submission states in one focused page.", + }, +]; + +function escapeHtml(value: string): string { + return value + .replace(/&/g, "&") + .replace(//g, ">") + .replace(/"/g, """); +} + +function token(tokens: TokenMap, names: string[], fallback: string): string { + for (const name of names) { + const value = tokens.get(name); + if (value) return value; + } + return fallback; +} + +function tokenNumber(tokens: TokenMap, names: string[], fallback: number): number { + const raw = token(tokens, names, ""); + const match = raw.match(/-?\d+(?:\.\d+)?/); + if (!match) return fallback; + return Number(match[0]); +} + +function firstHex(tokens: TokenMap, fallback: string): string { + for (const value of tokens.values()) { + const match = value.match(/#[0-9a-fA-F]{6}\b/); + if (match) return match[0]; + } + return fallback; +} + +function parseCssTokens(css: string): TokenMap { + const out = new Map(); + const re = /(--[a-zA-Z0-9_-]+)\s*:\s*([^;]+);/g; + for (const match of css.matchAll(re)) { + out.set(match[1]!, match[2]!.trim()); + } + return out; +} + +function parseDesignTokensJson(raw: string): TokenMap { + const out = new Map(); + try { + const parsed = JSON.parse(raw) as { tokens?: Array<{ name?: unknown; value?: unknown }> }; + for (const item of parsed.tokens ?? []) { + if (typeof item.name === "string" && typeof item.value === "string") { + out.set(item.name, item.value); + } + } + } catch { + return out; + } + return out; +} + +function mergeTokens(primary: TokenMap, fallback: TokenMap): TokenMap { + const out = new Map(fallback); + for (const [key, value] of primary) out.set(key, value); + return out; +} + +function tokenSubset(tokens: TokenMap): Record { + const primary = token(tokens, ["--accent", "--primary", "--color-primary"], firstHex(tokens, "#2563eb")); + return { + colorPrimary: primary, + colorPrimaryBg: token(tokens, ["--accent-bg", "--surface-warm", "--surface"], "#f8fafc"), + colorPrimaryHover: token(tokens, ["--accent-hover", "--accent"], primary), + colorPrimaryActive: token(tokens, ["--accent-active", "--accent"], primary), + fontSize: tokenNumber(tokens, ["--text-base", "--font-size-base"], 14), + borderRadius: tokenNumber(tokens, ["--radius-md", "--radius", "--border-radius"], 8), + }; +} + +function cssVars(tokens: TokenMap): string { + const lines = Array.from(tokens.entries()) + .filter(([name]) => /^--[a-zA-Z0-9_-]+$/.test(name)) + .sort(([a], [b]) => a.localeCompare(b)) + .map(([name, value]) => ` ${name}: ${value};`); + return [":root {", ...lines, "}"].join("\n"); +} + +function baseStyle(tokens: TokenMap, mode: "light" | "dark"): string { + const bg = mode === "dark" ? "#0f1115" : token(tokens, ["--bg", "--surface"], "#ffffff"); + const surface = mode === "dark" ? "#171a21" : token(tokens, ["--surface", "--bg"], "#ffffff"); + const fg = mode === "dark" ? "#f8fafc" : token(tokens, ["--fg", "--text"], "#111827"); + const muted = mode === "dark" ? "#a7adba" : token(tokens, ["--muted", "--fg-2"], "#6b7280"); + const border = mode === "dark" ? "#2a2f3a" : token(tokens, ["--border"], "#e5e7eb"); + const accent = token(tokens, ["--accent", "--primary"], firstHex(tokens, "#2563eb")); + const fontBody = token(tokens, ["--font-body", "--font-display"], "Inter, system-ui, sans-serif"); + const fontDisplay = token(tokens, ["--font-display", "--font-body"], fontBody); + const radius = token(tokens, ["--radius-md", "--radius"], "12px"); + return ` +${cssVars(tokens)} +:root { + --od-page-bg: ${bg}; + --od-surface: ${surface}; + --od-text: ${fg}; + --od-muted: ${muted}; + --od-border: ${border}; + --od-accent: ${accent}; + --od-radius: ${radius}; + --od-font-body: ${fontBody}; + --od-font-display: ${fontDisplay}; +} +* { box-sizing: border-box; } +body { + margin: 0; + min-height: 100vh; + background: var(--od-page-bg); + color: var(--od-text); + font-family: var(--od-font-body); + -webkit-font-smoothing: antialiased; +} +a { color: inherit; } +.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; } +.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; } +.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; } +h1, h2, h3, p { margin: 0; } +h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; } +h1 { margin-top: 12px; font-size: 64px; } +h2 { font-size: 40px; } +h3 { font-size: 22px; } +.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; } +.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } +.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); } +.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: ${mode === "dark" ? "#0b0b0b" : "#ffffff"}; } +.button.secondary { background: var(--od-surface); } +.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); } +.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, ${mode === "dark" ? "0.32" : "0.08"}); } +.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; } +.metric, .card { padding: 18px; } +.metric strong { display: block; font-size: 30px; line-height: 1; } +.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; } +.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } +.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); } +input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; } +label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; } +@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } } +`; +} + +function renderKitHtml(manifest: Required> & Manifest, tokens: TokenMap, mode: "light" | "dark"): string { + const name = escapeHtml(manifest.name); + const description = escapeHtml(manifest.description ?? `${manifest.name} reference component kit.`); + return ` + + + + + ${name} - ${mode === "dark" ? "dark " : ""}component kit + + + +
    +
    +
    +

    ${escapeHtml(manifest.category)} system

    +

    ${name} component kit

    +

    ${description}

    +
    + Primary + Default + Dashed +
    +
    +
    +

    Reference module

    +

    Token-driven surface

    +
    +
    12Components
    +
    4States
    +
    1Token contract
    +
    +
    + Hover + Focus + Active + Disabled +
    +
    +
    +
    +

    Buttons

    Primary, secondary, text, and destructive treatments resolve through shared color tokens.

    +

    Inputs

    Labels, helper text, and focus state use the same spacing and radius scale.

    +

    Cards

    Information modules keep elevation, border, and padding consistent across breakpoints.

    +
    +
    + + +`; +} + +function renderIndexHtml(manifest: Required> & Manifest, tokens: TokenMap): string { + const name = escapeHtml(manifest.name); + const links = [ + ["kit.html", "Component kit"], + ["kit.dark.html", "Dark component kit"], + ["artifacts/landing.html", "Landing page"], + ["artifacts/deck.html", "Pitch deck"], + ["artifacts/poster.html", "Poster"], + ["artifacts/email.html", "Email"], + ["artifacts/newsletter.html", "Newsletter"], + ["artifacts/form.html", "Form page"], + ].map(([href, label]) => `

    ${label}

    ${href}

    `).join("\n"); + return ` + + + + + ${name} - system assets + + + +
    +

    ${escapeHtml(manifest.category)}

    +

    ${name} system assets

    +

    Generated preview modules for bundled official presets.

    +
    ${links}
    +
    + + +`; +} + +function renderAssetHtml(manifest: Required> & Manifest, tokens: TokenMap, spec: AssetSpec): string { + const name = escapeHtml(manifest.name); + return ` + + + + + ${name} - ${escapeHtml(spec.label)} + + + +
    +
    +
    +

    ${escapeHtml(spec.eyebrow)} module

    +

    ${name} ${escapeHtml(spec.title)}

    +

    ${escapeHtml(spec.body)}

    +
    + Continue + View details +
    +
    +
    +

    Preview

    +

    ${escapeHtml(spec.label)}

    +

    ${escapeHtml(manifest.description ?? `${manifest.name} official preset module.`)}

    +
    +
    +
    +
    +
    +
    +
    + + +`; +} + +async function readTokens(systemDir: string, manifest: Manifest): Promise { + const tokensCssPath = manifest.files?.tokens ?? "tokens.css"; + const designTokensPath = manifest.files?.designTokens ?? "design-tokens.json"; + const [cssRaw, jsonRaw] = await Promise.all([ + readFile(path.join(systemDir, tokensCssPath), "utf8").catch(() => ""), + readFile(path.join(systemDir, designTokensPath), "utf8").catch(() => ""), + ]); + return mergeTokens(parseDesignTokensJson(jsonRaw), parseCssTokens(cssRaw)); +} + +async function generateForDir(systemDir: string): Promise { + const manifestPath = path.join(systemDir, "manifest.json"); + const raw = await readFile(manifestPath, "utf8").catch(() => null); + if (!raw) return false; + const parsed = JSON.parse(raw) as Manifest; + if (!parsed.id || !parsed.name || !parsed.category) return false; + + const manifest = parsed as Required> & Manifest; + const tokens = await readTokens(systemDir, manifest); + const outDir = path.join(systemDir, "system"); + const artifactsDir = path.join(outDir, "artifacts"); + await mkdir(artifactsDir, { recursive: true }); + + await Promise.all([ + writeFile(path.join(outDir, "kit.html"), renderKitHtml(manifest, tokens, "light"), "utf8"), + writeFile(path.join(outDir, "kit.dark.html"), renderKitHtml(manifest, tokens, "dark"), "utf8"), + writeFile(path.join(outDir, "index.html"), renderIndexHtml(manifest, tokens), "utf8"), + writeFile(path.join(outDir, "tokens.default.json"), `${JSON.stringify(tokenSubset(tokens), null, 2)}\n`, "utf8"), + ...assetSpecs.map((spec) => writeFile(path.join(artifactsDir, spec.file), renderAssetHtml(manifest, tokens, spec), "utf8")), + ]); + return true; +} + +async function main(): Promise { + const entries = await readdir(designSystemsRoot, { withFileTypes: true }); + let count = 0; + for (const entry of entries) { + if (!entry.isDirectory() || entry.name === "_schema") continue; + if (await generateForDir(path.join(designSystemsRoot, entry.name))) count++; + } + console.log(`Generated system assets for ${count} design systems.`); +} + +await main(); diff --git a/scripts/guard.ts b/scripts/guard.ts index 31c8be2e7..ef606a725 100644 --- a/scripts/guard.ts +++ b/scripts/guard.ts @@ -157,6 +157,16 @@ const residualAllowedPathPrefixes = [ "mocks/lib/", "mocks/mock-agent.mjs", "mocks/scripts/", + // OD Clipper - a standalone Chrome MV3 extension subproject (not a pnpm + // workspace package, no build step). It ships hand-written browser-loadable + // JavaScript (service worker, content script, popup) the same way as the + // web notifications service worker; it must not be retypecast to TypeScript. + "clipper/", + // OD Figma Import - a standalone Figma plugin subproject (no build step, + // not a pnpm workspace package). Figma plugins load hand-written + // browser-loadable JavaScript (`code.js` sandbox + `ui.html`); same + // precedent as the clipper, and it must not be retypecast to TypeScript. + "figma-plugin/", "test-results/", "vendor/", ]; diff --git a/skills/brand-extract/templates/brand-kit.html b/skills/brand-extract/templates/brand-kit.html index 738982e2c..f297d28e5 100644 --- a/skills/brand-extract/templates/brand-kit.html +++ b/skills/brand-extract/templates/brand-kit.html @@ -1,9 +1,9 @@ - + -Brand Kit +__OD_BRAND_TITLE__