{"_id":"@deriv-com/dds-marketing","_rev":"2-830a7887536bdc133eb9edd92c4e57d8","name":"@deriv-com/dds-marketing","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@deriv-com/dds-marketing","version":"0.1.0","keywords":["design-system","deriv","react","components","design-tokens"],"license":"UNLICENSED","_id":"@deriv-com/dds-marketing@0.1.0","maintainers":[{"name":"deriv-web","email":"web-access@deriv.com"}],"homepage":"https://github.com/deriv-com/deriv-design-system/tree/main/packages/marketing#readme","bugs":{"url":"https://github.com/deriv-com/deriv-design-system/issues"},"dist":{"shasum":"132d5810797daea74c10c7ca67158556bc1cc640","tarball":"https://registry.npmjs.org/@deriv-com/dds-marketing/-/dds-marketing-0.1.0.tgz","fileCount":5,"integrity":"sha512-hdJBqSDDaw1JCAeoDqa3eqq5yQV9PisUgv7KeiB9RT1uQW0HXYeQC4JW4vRnVdYyZNaavBrKpjWzO4Hljrct9Q==","signatures":[{"sig":"MEUCIQCDipMOjtJGyLKWvjArH0i4JN1Ohn9P/X1EjFw6k9zCBgIgHF/GlbVLBpd3Inis2gCWo8Ov/AgEi+5s5zpyPMegR18=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15725},"main":"./dist/components/index.js","type":"module","types":"./dist/components/index.d.ts","exports":{".":{"types":"./dist/components/index.d.ts","default":"./dist/components/index.js"},"./package.json":"./package.json","./marketing.css":"./dist/marketing.css"},"gitHead":"e18530be9b4a18aedde786d5241187f03ac64341","scripts":{"test":"vitest run","build":"node --import tsx ../../src/generate/build.ts --package-root .","check":"node --import tsx ../../src/check/cli.ts --package-root .","clean":"node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"","ratify":"node --import tsx ../../src/ratify/cli.ts --package-root .","prepack":"npm run clean && npm run build:tokens && npm run build:package","typecheck":"tsc --noEmit -p tsconfig.build.json","build:tokens":"node --import tsx ../../src/tokens/build.ts --package-root .","build:package":"tsc -p tsconfig.build.json && node --import tsx scripts/copy-css.ts","push:marketing":"node --env-file=../../.env --import tsx ../../src/figma/push-variables.ts marketing-spike --package-root .","promote:marketing":"node --env-file=../../.env --import tsx ../../src/figma/promote-cli.ts marketing --package-root ."},"_npmUser":{"name":"deriv-web","email":"web-access@deriv.com"},"repository":{"url":"git+https://github.com/deriv-com/deriv-design-system.git","type":"git","directory":"packages/marketing"},"_npmVersion":"11.19.0","description":"Deriv Design System — components and tokens for marketing sites (landing pages, pricing, sign-up).","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"26.8.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=19","react-dom":">=19","@deriv-com/quill-icons-web":"~1.0.10"},"_npmOperationalInternal":{"tmp":"tmp/dds-marketing_0.1.0_1788360295774_0.26602214639455557","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"_id":"@deriv-com/dds-marketing@0.2.0","dds":{"modes":["light"]},"bugs":{"url":"https://github.com/deriv-com/deriv-design-system/issues"},"dist":{"shasum":"37e00e4d144c89a20b2a05e5a662262883422992","tarball":"https://registry.npmjs.org/@deriv-com/dds-marketing/-/dds-marketing-0.2.0.tgz","fileCount":460,"integrity":"sha512-O2TH0W1PjLw6OC3iHg01Z5S3ODRvzEfe7UfaAi2ROl3tVJgyLnRp5vl54+xejnlnVgBNTwiaTSkGg/ldJ1zupg==","signatures":[{"sig":"MEYCIQCtiAyaGY8JNZ/NFJ169L6Nu36xNsgD9SV9BgJ2ASqX5gIhALPwfej2Te6UYNRnyT67gUqt8x6Y2/Rk1CIGqtXGx1sY","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQClEyzY/uWq+plOma6Z7a2mNjF6jm6XZE5gHV1Pe32NuQIgFozw62UWIY8tEyt1qD4zf3tukaOKeHoT85X7vlWvicw="}],"unpackedSize":3484297},"main":"./dist/components/index.js","name":"@deriv-com/dds-marketing","type":"module","types":"./dist/components/index.d.ts","author":{"name":"Deriv.com Limited"},"exports":{".":{"types":"./dist/components/index.d.ts","default":"./dist/components/index.js"},"./fonts.css":"./dist/fonts/fonts.css","./package.json":"./package.json","./marketing.css":"./dist/marketing.css"},"gitHead":"0d4d5a598bbf5a9650daa57079b69f8bf75a56ae","license":"MIT","scripts":{"test":"vitest run","build":"node --import tsx ../../src/generate/build.ts --package-root .","check":"node --import tsx ../../src/check/cli.ts --package-root .","clean":"node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"","ratify":"node --import tsx ../../src/ratify/cli.ts --package-root .","prepack":"npm run clean && npm run build:tokens && npm run build:package","typecheck":"tsc --noEmit -p tsconfig.build.json","build:tokens":"node --import tsx ../../src/tokens/build.ts --package-root .","build:package":"tsc -p tsconfig.build.json && node --import tsx scripts/copy-css.ts","push:marketing":"node --env-file=../../.env --import tsx ../../src/figma/push-variables.ts marketing-spike --package-root .","promote:marketing":"node --env-file=../../.env --import tsx ../../src/figma/promote-cli.ts marketing --package-root .","push:styles:marketing":"node --env-file=../../.env --import tsx ../../src/figma/push-styles.ts marketing-spike --package-root .","push:components:marketing":"node --env-file=../../.env --import tsx ../../src/figma/push-components.ts marketing-spike --package-root ."},"version":"0.2.0","_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"f550b12a-5a9c-48ad-a6ce-715210730fdc"}},"homepage":"https://github.com/deriv-com/deriv-design-system/tree/main/packages/marketing#readme","keywords":["design-system","deriv","react","components","design-tokens"],"repository":{"url":"git+https://github.com/deriv-com/deriv-design-system.git","type":"git","directory":"packages/marketing"},"_npmVersion":"12.1.0","description":"Deriv Design System — components and tokens for marketing sites (landing pages, pricing, sign-up).","directories":{},"maintainers":[{"name":"deriv-web","email":"web-access@deriv.com"}],"sideEffects":["**/*.css"],"_nodeVersion":"24.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=19","react-dom":">=19","@deriv-com/quill-icons-web":"~2.0.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dds-marketing_0.2.0_1790665544598_0.24336472369987705"}}},"time":{"created":"2026-09-02T14:44:55.592Z","modified":"2026-09-29T07:05:44.966Z","0.1.0":"2026-09-02T14:44:55.905Z","0.2.0":"2026-09-29T07:05:44.737Z"},"bugs":{"url":"https://github.com/deriv-com/deriv-design-system/issues"},"license":"MIT","homepage":"https://github.com/deriv-com/deriv-design-system/tree/main/packages/marketing#readme","keywords":["design-system","deriv","react","components","design-tokens"],"repository":{"url":"git+https://github.com/deriv-com/deriv-design-system.git","type":"git","directory":"packages/marketing"},"description":"Deriv Design System — components and tokens for marketing sites (landing pages, pricing, sign-up).","maintainers":[{"name":"deriv-web","email":"web-access@deriv.com"}],"readme":"# @deriv-com/dds-marketing\n\nComponents and design tokens from the Deriv Design System, for marketing sites — landing\npages, pricing, sign-up.\n\n**Working with an AI agent?** Point it at [`AGENTS.md`](./AGENTS.md) in this package. It is\nthe short version of everything below and says which of the `.llm/` documents to open.\n\n> **This package has no components yet.** Its tokens are real and its stylesheet is\n> complete; the component surface is still being authored. Until it lands, installing this\n> gets you the marketing token layer and an empty barrel. Product apps want\n> [`@deriv-com/dds-product`](https://www.npmjs.com/package/@deriv-com/dds-product).\n\n## Install\n\n```bash\nnpm install @deriv-com/dds-marketing\n```\n\nReact 19 and the Quill icon set are peer dependencies, so install them alongside it if\nyour app does not already have them:\n\n```bash\nnpm install react react-dom @deriv-com/quill-icons-web\n```\n\n## Use\n\nImport the stylesheet once, at the root of your app:\n\n```tsx\nimport '@deriv-com/dds-marketing/marketing.css'\n```\n\nThat is the whole of the setup, and today it is the whole of the package: the token layer\nis complete and the barrel is empty, so there is nothing yet to import by name. When\ncomponents land, each will bring its own stylesheet with it and nothing else will need\nimporting.\n\nProduct apps want [`@deriv-com/dds-product`](https://www.npmjs.com/package/@deriv-com/dds-product),\nwhich has the components.\n\n## Fonts\n\nThe system is designed for [Inter](https://rsms.me/inter/) (all text) and\n[Red Hat Mono](https://github.com/RedHatOfficial/RedHatFont) (code).\n`marketing.css` names them but cannot carry them — if nothing loads the fonts, every role\nsilently falls back to the system typeface, and any weight the page is missing gets faked\nby the browser. Pick one of the two paths:\n\n**Let the package supply them.** One import next to `marketing.css`:\n\n```tsx\nimport '@deriv-com/dds-marketing/fonts.css'\nimport '@deriv-com/dds-marketing/marketing.css'\n```\n\nThis self-hosts both faces from the package (variable-weight WOFF2, subset per script,\n~260 KB total across all scripts — a page only downloads the subsets its text uses). Both\nfonts are under the SIL Open Font License; the licenses ship in `dist/fonts/`.\n\n**Load them yourself.** If your app already hosts the fonts — `next/font`, Fontsource, or\nyour own `@font-face` — skip `fonts.css` and point the two family variables at what you\nloaded:\n\n```css\n:root {\n  --font-family-sans: var(--your-inter-variable), system-ui, sans-serif;\n  --font-family-mono: var(--your-mono-variable), ui-monospace, monospace;\n}\n```\n\nEvery type role reads its family from these two variables, so this redirects the whole\nsystem at once. Load weights 400–700 for Inter (a variable font covers this in one file);\na missing weight does not fall back visibly — the browser synthesises a faux bold instead.\n\n## One theme, and a viewport axis\n\n`marketing.css` ships light only. It contains no `[data-theme=\"dark\"]` block, so setting\nthat attribute — anywhere, including on `<html>` for the rest of your app — leaves these\ncomponents light. There is nothing to configure and nothing to guard against.\n\nA dark palette is authored in the token source and held to the same role names as light,\nso turning it on later is a decision rather than a rewrite. The package states what it\npublishes in its own manifest:\n\n```json\n\"dds\": { \"modes\": [\"light\"] }\n```\n\nMarketing does carry a mobile viewport axis: seven roles take different values below\n768px, applied automatically and overridable with `data-dds-viewport=\"mobile\"` or\n`\"desktop\"` when a page renders a device frame inside a wider window.\n\n## Documentation\n\n- [`AGENTS.md`](./AGENTS.md) — the front door: setup, the rules that span components, and\n  what this package currently has.\n- `.llm/rules.md` — the constraints no single component can state.\n- `.llm/tokens.md` — the token vocabulary, including the mobile viewport axis above.\n\n## Versioning\n\nPre-1.0. Minor versions may contain breaking changes while the component surface settles;\npin an exact version if that matters to you.\n","readmeFilename":"README.md","author":{"name":"Deriv.com Limited"}}