Design System | Tokens

:bulb: Description

This package is part of the Pamela UI Design System developed as part of a study project. It stores all the essential, reusable design values that help define a project's visual identity. It also serves as a reference for choosing typography, spacing, and other foundational design decisions across applications.

:rocket: Technologies

• Built with TypeScript

:hammer: Features

• [x] Add the main reusable design values
• [ ] Update some tokens to follow the Tailwind CSS standard
• [ ] Add a new font family for use in other projects

:heavy_check_mark: How to edit and contribute

• After cloning and installing the dependencies at the root of the project, run npm run dev from the root directory or inside the monorepo.
• Make your changes, and before committing, run npm run lint to fix formatting and ensure code consistency.

:heavy_check_mark: What will you find in this package?

| Token | Description | | ------------- | ---------------------------------------------------------------- | | Colors | All primary colors used across projects | | Font Sizes | Font sizes in both rem and px | | Font Weights | Common font weights used throughout the system | | Font Families | Installed font families available for use | | Line Heights | Line height values in percentages | | Radii | Border radius values (e.g. for rounded corners) | | Spaces | A full scale of spacing values usable in any layout or component |