1440 Design

A comprehensive design system package providing CSS variables and design tokens for 1440 Media projects.

Overview

This package contains common design tools and CSS variables that ensure consistent styling across all 1440 Media applications.

Installation

npm install @1440-media/design

Usage

Importing CSS Variables

The package provides two CSS files with identical design tokens:

// Import base CSS variables (uses :root selector)
import '@1440-media/design';

// Or import the Tailwind CSS theme (uses @theme directive for Tailwind v4)
import '@1440-media/design/tailwind-base-theme';

Note: Both files contain the same design tokens. The difference is:

• base-variables.css uses :root selector for standard CSS usage
• tailwind-base-theme.css uses @theme directive for Tailwind CSS v4 integration

Available Design Tokens

Colors

• Grays: 100-800 shades (#f4f4f4 to #181818)
• Cyan: 100-700 shades
• Magenta: 100-700 shades
• Yellow: 100-700 shades
• Red: 100-700 shades
• Green: 100-700 shades
• Blue: 100-700 shades
• Orange: 100-700 shades
• Purple: 100-700 shades
• Aliases: --color-paper, --color-offwhite, --color-newsletter-blue

Typography

• Display: Sizes 500-2200 (2rem to 8.8rem) with line-height and font-weight
• Heading: Sizes 350-1600 (1.4rem to 6.4rem) with line-height and font-weight
• Body: Sizes 300-550 (1.2rem to 2.2rem) with line-height and font-weight
• Tag: Sizes 300-350 (1.2rem to 1.4rem) with line-height and font-weight
• Condensed: Sizes 600-1000 (2.4rem to 4rem) with line-height and font-weight

Font Families

• --font-serif: freightdispcmp-pro with fallbacks
• --font-sans: System UI font stack
• --font-numbers-sans: Special gothic with fallbacks
• --font-monospace: UI monospace font stack

Font Weights

• --font-weight-400: 400 (regular)
• --font-weight-600: 600 (semi-bold)
• --font-weight-800: 800 (extra-bold)

Spacing

• --spacing-px: 0.1rem
• --spacing-half: 0.2rem
• --spacing: 0.4rem
• Button spacing: sm (2rem), md (3rem), lg (3.8rem), xl (5rem)

Border Radius

• --radius-px through --radius-4: 0.1rem to 1.6rem

Animations

• --animate-playing: Play animation (1.2s ease-in-out infinite)
• --animate-favorite: Favorite animation (0.3s ease-out)

Aspect Ratios

• --aspect-thumbnail: 1.42 / 1
• --aspect-golden: 1.618 / 1
• --aspect-1440-logo: 271 / 123

Breakpoints

• --breakpoint-pagewrapper: 1240px

Development

This package uses Biome for code formatting and linting.

Package Information

• Version: 2.0.2
• Main Export: ./dist/variables.css (which is actually ./dist/css/base-variables.css)
• Repository: 1440-Media/design
• Keywords: design-tokens, css-variables, tailwind

License

Copyright © 1440 Media