{"_id":"@1440-media/design","_rev":"8-a55db743114b8f61130477a5f2ef06c4","name":"@1440-media/design","dist-tags":{"latest":"2.3.1"},"versions":{"2.0.0":{"name":"@1440-media/design","version":"2.0.0","keywords":["design-tokens","css-variables","tailwind"],"_id":"@1440-media/design@2.0.0","maintainers":[{"name":"sam1440","email":"sam@join1440.com"}],"homepage":"https://github.com/1440-Media/design#readme","bugs":{"url":"https://github.com/1440-Media/design/issues"},"dist":{"shasum":"eee4361e67dea7d83a6fb180049e9d914ee94971","tarball":"https://registry.npmjs.org/@1440-media/design/-/design-2.0.0.tgz","fileCount":4,"integrity":"sha512-R3u6sXmI3PSDCvBVhy04SiD947Gh9Yhw1w8S8s6N22L9CqBIq5GE5riC7600uOusFdA93CWIMh1d7z91fJAUPA==","signatures":[{"sig":"MEYCIQDfnY9zZtTlZNirMnBUR1OPW0e+A9xOTfJ/Ue9Vvs829wIhAK521gkN4jZilfe1NnTwCNbCnJs9mbN3KbQlt9jsIijF","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14156},"main":"./dist/variables.css","type":"module","exports":{".":"./dist/variables.css","./tailwind":"./dist/tailwind-theme.css","./variables":"./dist/variables.css"},"gitHead":"d9725458d5ddf8281e6ef7ad5ce94c17a7d7ccf8","_npmUser":{"name":"sam1440","email":"sam@join1440.com"},"repository":{"url":"git+ssh://git@github.com/1440-Media/design.git","type":"git"},"_npmVersion":"10.8.2","description":"This project contains common design tools and configuration files for 1440 projects.","directories":{},"_nodeVersion":"20.9.0","_hasShrinkwrap":false,"devDependencies":{"@biomejs/biome":"2.2.4"},"_npmOperationalInternal":{"tmp":"tmp/design_2.0.0_1759264954897_0.7888651560637436","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.0.1":{"name":"@1440-media/design","version":"2.0.1","keywords":["design-tokens","css-variables","tailwind"],"_id":"@1440-media/design@2.0.1","maintainers":[{"name":"sam1440","email":"sam@join1440.com"}],"homepage":"https://github.com/1440-Media/design#readme","bugs":{"url":"https://github.com/1440-Media/design/issues"},"dist":{"shasum":"902666f6fa622f2258c1b887a0d73d9f1d3836b4","tarball":"https://registry.npmjs.org/@1440-media/design/-/design-2.0.1.tgz","fileCount":4,"integrity":"sha512-/8SZwtOQsTN6NsI+1ofvsvfyaCXvS4lcgftJ+OgVZ9LE1I2h3cXfBBaKJBH789iIMeADuoZYh3blcPu6vwpYYw==","signatures":[{"sig":"MEYCIQDEkNheFzKzFqQb6Okc6W35VFxNY1qKBb21DjUIyAUxcQIhAOllLXrLSuQmK1fnJNXlPxoHRBFKvIoKIkczDlTimEf6","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14160},"main":"./dist/variables.css","type":"module","exports":{".":"./dist/variables.css","./tailwind":"./dist/css/tailwind-theme.css","./variables":"./dist/variables.css"},"gitHead":"d9725458d5ddf8281e6ef7ad5ce94c17a7d7ccf8","_npmUser":{"name":"sam1440","email":"sam@join1440.com"},"repository":{"url":"git+ssh://git@github.com/1440-Media/design.git","type":"git"},"_npmVersion":"10.8.2","description":"This project contains common design tools and configuration files for 1440 projects.","directories":{},"_nodeVersion":"20.9.0","_hasShrinkwrap":false,"devDependencies":{"@biomejs/biome":"2.2.4"},"_npmOperationalInternal":{"tmp":"tmp/design_2.0.1_1759268078773_0.650068764616764","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.0.2":{"name":"@1440-media/design","version":"2.0.2","keywords":["design-tokens","css-variables","tailwind"],"_id":"@1440-media/design@2.0.2","maintainers":[{"name":"sam1440","email":"sam@join1440.com"}],"homepage":"https://github.com/1440-Media/design#readme","bugs":{"url":"https://github.com/1440-Media/design/issues"},"dist":{"shasum":"3fa2b2ddcc2bb3ae449e9ae5b8a211d104dd65e8","tarball":"https://registry.npmjs.org/@1440-media/design/-/design-2.0.2.tgz","fileCount":4,"integrity":"sha512-+UW4ALLbk9lyujH+dOq47w901phq3v9fbjJ6fB1+oNdyHa3q3Oj+FQGs1XCB7sO0EyyOIFozjwYGQfNOEsLcBw==","signatures":[{"sig":"MEUCIQDnp+3VhWOaqmuiJWz4bjm1B0wOnBIE2mwV21Kq2IgBEwIgWIXIKGext/zZwP0HCvTHHVwfk/pcboRB3v8SQT1mO08=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14176},"main":"./dist/variables.css","type":"module","exports":{".":"./dist/variables.css","./variables":"./dist/variables.css","./tailwind-base-theme":"./dist/css/tailwind-base-theme.css"},"gitHead":"0ed01a0f528e3c99dccf600909da1bde3cc12d72","_npmUser":{"name":"sam1440","email":"sam@join1440.com"},"repository":{"url":"git+ssh://git@github.com/1440-Media/design.git","type":"git"},"_npmVersion":"10.8.2","description":"This project contains common design tools and configuration files for 1440 projects.","directories":{},"_nodeVersion":"20.9.0","_hasShrinkwrap":false,"devDependencies":{"@biomejs/biome":"2.2.4"},"_npmOperationalInternal":{"tmp":"tmp/design_2.0.2_1759268484307_0.06257847757084689","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.1.0":{"name":"@1440-media/design","version":"2.1.0","keywords":["design-tokens","css-variables","tailwind"],"_id":"@1440-media/design@2.1.0","maintainers":[{"name":"sam1440","email":"sam@join1440.com"}],"homepage":"https://github.com/1440-Media/design#readme","bugs":{"url":"https://github.com/1440-Media/design/issues"},"dist":{"shasum":"266164e4d6624c9596ee8358b0ac7c8b1f2884e3","tarball":"https://registry.npmjs.org/@1440-media/design/-/design-2.1.0.tgz","fileCount":4,"integrity":"sha512-tTTxlk8+FKJpvVeZxnf2u+NciaAHMVdVPIM//0CBe3FjKc+8LedDRJAW8NHX4HhqWy6xYpeB+gwHbpquSq7YTA==","signatures":[{"sig":"MEUCICirHkFhoHgaF4Kwho9/CYkLrvZLccHYSGRpw9aQtkGFAiEAgwSlM8EZlqI3NlPGwYbbQjszm2fmsUWpHnb1+6LomiM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12131},"main":"./dist/variables.css","type":"module","exports":{".":"./dist/variables.css","./variables":"./dist/variables.css","./tailwind-base-theme":"./dist/css/tailwind-base-theme.css"},"gitHead":"c224147f2971cc472d765d91fb970903d4afc61a","scripts":{"build":"style-dictionary build --config style-dictionary.config.js","check":"biome check . --error-on-warnings","format":"biome check . --write","publish":"npm publish --access public"},"_npmUser":{"name":"sam1440","email":"sam@join1440.com"},"repository":{"url":"git+ssh://git@github.com/1440-Media/design.git","type":"git"},"_npmVersion":"10.8.2","description":"This project contains common design tools and configuration files for 1440 projects.","directories":{},"_nodeVersion":"20.9.0","_hasShrinkwrap":false,"devDependencies":{"@biomejs/biome":"2.2.4","style-dictionary":"^4.2.0"},"_npmOperationalInternal":{"tmp":"tmp/design_2.1.0_1759336035326_0.743884683694924","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.2.0":{"name":"@1440-media/design","version":"2.2.0","keywords":["design-tokens","css-variables","tailwind"],"_id":"@1440-media/design@2.2.0","maintainers":[{"name":"sam1440","email":"sam@join1440.com"}],"homepage":"https://github.com/1440-Media/design#readme","bugs":{"url":"https://github.com/1440-Media/design/issues"},"dist":{"shasum":"74996987cdd6e542719963384f76a00e0b064f40","tarball":"https://registry.npmjs.org/@1440-media/design/-/design-2.2.0.tgz","fileCount":4,"integrity":"sha512-rekR9eRB8pA2wxp0S4RoTwbb2NLuL6fvkhWEA/FK9KMhZjqJI1CmcB5DgMAJSzessdik5Xsw8sZ6GIxXAH2rug==","signatures":[{"sig":"MEQCIGIyGP3rh/gmPOPEsvKCUHo3CIWLitdIEClYc0J4yBSjAiBQV7FGsb61M2xvbNvNueLMoZsDSttBmcgpNQdZo7kRvw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":8493},"main":"./dist/variables.css","type":"module","exports":{".":"./dist/variables.css","./theme-base-tailwind4":"./dist/css/theme-base-tailwind4.css","./theme-base-variables":"./dist/css/theme-base-variables.css"},"gitHead":"ab02ebcfbfa65331d7340c0d4b72726cb9a1a48f","scripts":{"build":"tz build","check":"biome check . --error-on-warnings","format":"biome check . --write","publish":"npm publish --access public","build:watch":"tz build --watch"},"_npmUser":{"name":"sam1440","email":"sam@join1440.com"},"repository":{"url":"git+ssh://git@github.com/1440-Media/design.git","type":"git"},"_npmVersion":"10.8.2","description":"This project contains common design tools and configuration files for 1440 projects.","directories":{},"_nodeVersion":"20.9.0","_hasShrinkwrap":false,"devDependencies":{"@terrazzo/cli":"^0.10.3","@biomejs/biome":"2.2.4","@terrazzo/plugin-js":"^0.10.3","@terrazzo/plugin-css":"^0.10.4","@terrazzo/plugin-tailwind":"^0.3.3"},"_npmOperationalInternal":{"tmp":"tmp/design_2.2.0_1759345986185_0.0853608659813605","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.3.0":{"name":"@1440-media/design","version":"2.3.0","keywords":["design-tokens","css-variables","tailwind"],"_id":"@1440-media/design@2.3.0","maintainers":[{"name":"sam1440","email":"sam@join1440.com"}],"homepage":"https://github.com/1440-Media/design#readme","bugs":{"url":"https://github.com/1440-Media/design/issues"},"dist":{"shasum":"04b0b075b0123845089553d02106a043d11fe331","tarball":"https://registry.npmjs.org/@1440-media/design/-/design-2.3.0.tgz","fileCount":5,"integrity":"sha512-Odid7vIMP1LnqtOhjfq+hULLoPO/lRqfZXpQr3aMOqGSNtB/x6QcQvFBJ09a7ZfZ70p//L7wK5oTUJ0zj1Q/Yg==","signatures":[{"sig":"MEQCIDWA03T7chbv9uWqsbIM5LH2gbbv9Jbl9G0nzoGnYIibAiALcdN5b2s6zUO2tW3zT0CYDZggQs1OaaJhVchLK+w5fw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10532},"main":"./dist/variables.css","type":"module","exports":{".":"./dist/variables.css","./theme-base-tailwind3":"./dist/css/theme-base-tailwind3.js","./theme-base-tailwind4":"./dist/css/theme-base-tailwind4.css","./theme-base-variables":"./dist/css/theme-base-variables.css"},"gitHead":"8c844434d8ecc3ca5220017ac6a81ea480fc2732","scripts":{"build":"tz build","check":"biome check . --error-on-warnings","format":"biome check . --write","publish":"npm publish --access public","build:watch":"tz build --watch"},"_npmUser":{"name":"sam1440","email":"sam@join1440.com"},"repository":{"url":"git+ssh://git@github.com/1440-Media/design.git","type":"git"},"_npmVersion":"10.8.2","description":"This project contains common design tools and configuration files for 1440 projects.","directories":{},"_nodeVersion":"20.9.0","_hasShrinkwrap":false,"devDependencies":{"@terrazzo/cli":"^0.10.3","@biomejs/biome":"2.2.4","@terrazzo/plugin-js":"^0.10.3","@terrazzo/plugin-css":"^0.10.4","@terrazzo/plugin-tailwind":"^0.3.3","@cobalt-ui/plugin-tailwind":"^0.0.3"},"_npmOperationalInternal":{"tmp":"tmp/design_2.3.0_1759352766649_0.27735664209032684","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.3.1":{"name":"@1440-media/design","version":"2.3.1","keywords":["design-tokens","css-variables","tailwind"],"_id":"@1440-media/design@2.3.1","maintainers":[{"name":"sam1440","email":"sam@join1440.com"}],"homepage":"https://github.com/1440-Media/design#readme","bugs":{"url":"https://github.com/1440-Media/design/issues"},"dist":{"shasum":"bae062ee5f07a926213c208d0d7869846511f0a2","tarball":"https://registry.npmjs.org/@1440-media/design/-/design-2.3.1.tgz","fileCount":5,"integrity":"sha512-5S9n3UBRDRk5+GRdNTj5+Li50ZxpARCuj71Exe0wft0yU6RRVp+tN44HI4aXkGynmX6B83rVMRqPns/3X26ZoQ==","signatures":[{"sig":"MEYCIQDT3+FPkMWNnE3VMYb+ijoAo5/pze8PdsD2GU0Rfu6YngIhAMBo5ruaSc0SCPvOsUoqW4wm0ePQY4PwyFJoCpdRMAku","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10929},"main":"./dist/variables.css","type":"module","exports":{".":"./dist/variables.css","./theme-base-tailwind3":"./dist/css/theme-base-tailwind3.js","./theme-base-tailwind4":"./dist/css/theme-base-tailwind4.css","./theme-base-variables":"./dist/css/theme-base-variables.css"},"gitHead":"a04360880804e62d1805487e1d97c56b7f41bd24","scripts":{"build":"tz build","check":"biome check . --error-on-warnings","format":"biome check . --write","publish":"npm publish --access public","build:watch":"tz build --watch"},"_npmUser":{"name":"sam1440","email":"sam@join1440.com"},"repository":{"url":"git+ssh://git@github.com/1440-Media/design.git","type":"git"},"_npmVersion":"10.8.2","description":"This project contains common design tools and configuration files for 1440 projects.","directories":{},"_nodeVersion":"20.9.0","_hasShrinkwrap":false,"devDependencies":{"@terrazzo/cli":"^0.10.3","@biomejs/biome":"2.2.4","@terrazzo/plugin-js":"^0.10.3","@terrazzo/plugin-css":"^0.10.4","@terrazzo/plugin-tailwind":"^0.3.3","@cobalt-ui/plugin-tailwind":"^0.0.3"},"_npmOperationalInternal":{"tmp":"tmp/design_2.3.1_1759353333632_0.9002361620525747","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2025-09-30T20:42:34.779Z","modified":"2026-09-09T22:08:51.747Z","2.0.0":"2025-09-30T20:42:35.086Z","2.0.1":"2025-09-30T21:34:38.961Z","2.0.2":"2025-09-30T21:41:24.486Z","2.1.0":"2025-10-01T16:27:15.521Z","2.2.0":"2025-10-01T19:13:06.413Z","2.3.0":"2025-10-01T21:06:06.883Z","2.3.1":"2025-10-01T21:15:33.827Z"},"bugs":{"url":"https://github.com/1440-Media/design/issues"},"homepage":"https://github.com/1440-Media/design#readme","keywords":["design-tokens","css-variables","tailwind"],"repository":{"url":"git+ssh://git@github.com/1440-Media/design.git","type":"git"},"description":"This project contains common design tools and configuration files for 1440 projects.","maintainers":[{"name":"sam1440","email":"sam@join1440.com"}],"readme":"# 1440 Design\n\nA comprehensive design system package providing CSS variables and design tokens for 1440 Media projects.\n\n## Overview\n\nThis package contains common design tools and CSS variables that ensure consistent styling across all 1440 Media applications.\n\n## Installation\n\n```bash\nnpm install @1440-media/design\n```\n\n## Usage\n\n### Importing CSS Variables\n\nThe package provides two CSS files with identical design tokens:\n\n```javascript\n// Import base CSS variables (uses :root selector)\nimport '@1440-media/design';\n\n// Or import the Tailwind CSS theme (uses @theme directive for Tailwind v4)\nimport '@1440-media/design/tailwind-base-theme';\n```\n\n**Note:** Both files contain the same design tokens. The difference is:\n- `base-variables.css` uses `:root` selector for standard CSS usage\n- `tailwind-base-theme.css` uses `@theme` directive for Tailwind CSS v4 integration\n\n### Available Design Tokens\n\n#### Colors\n- **Grays**: 100-800 shades (#f4f4f4 to #181818)\n- **Cyan**: 100-700 shades\n- **Magenta**: 100-700 shades\n- **Yellow**: 100-700 shades\n- **Red**: 100-700 shades\n- **Green**: 100-700 shades\n- **Blue**: 100-700 shades\n- **Orange**: 100-700 shades\n- **Purple**: 100-700 shades\n- **Aliases**: `--color-paper`, `--color-offwhite`, `--color-newsletter-blue`\n\n#### Typography\n- **Display**: Sizes 500-2200 (2rem to 8.8rem) with line-height and font-weight\n- **Heading**: Sizes 350-1600 (1.4rem to 6.4rem) with line-height and font-weight\n- **Body**: Sizes 300-550 (1.2rem to 2.2rem) with line-height and font-weight\n- **Tag**: Sizes 300-350 (1.2rem to 1.4rem) with line-height and font-weight\n- **Condensed**: Sizes 600-1000 (2.4rem to 4rem) with line-height and font-weight\n\n#### Font Families\n- `--font-serif`: freightdispcmp-pro with fallbacks\n- `--font-sans`: System UI font stack\n- `--font-numbers-sans`: Special gothic with fallbacks\n- `--font-monospace`: UI monospace font stack\n\n#### Font Weights\n- `--font-weight-400`: 400 (regular)\n- `--font-weight-600`: 600 (semi-bold)\n- `--font-weight-800`: 800 (extra-bold)\n\n#### Spacing\n- `--spacing-px`: 0.1rem\n- `--spacing-half`: 0.2rem\n- `--spacing`: 0.4rem\n- Button spacing: `sm` (2rem), `md` (3rem), `lg` (3.8rem), `xl` (5rem)\n\n#### Border Radius\n- `--radius-px` through `--radius-4`: 0.1rem to 1.6rem\n\n#### Animations\n- `--animate-playing`: Play animation (1.2s ease-in-out infinite)\n- `--animate-favorite`: Favorite animation (0.3s ease-out)\n\n#### Aspect Ratios\n- `--aspect-thumbnail`: 1.42 / 1\n- `--aspect-golden`: 1.618 / 1\n- `--aspect-1440-logo`: 271 / 123\n\n#### Breakpoints\n- `--breakpoint-pagewrapper`: 1240px\n\n## Development\n\nThis package uses [Biome](https://biomejs.dev/) for code formatting and linting.\n\n## Package Information\n\n- **Version**: 2.0.2\n- **Main Export**: `./dist/variables.css` (which is actually `./dist/css/base-variables.css`)\n- **Repository**: [1440-Media/design](https://github.com/1440-Media/design)\n- **Keywords**: design-tokens, css-variables, tailwind\n\n## License\n\nCopyright © 1440 Media\n","readmeFilename":"README.md"}