In this task, you'll be working with a simplified design system that includes predefined tokens for various design properties, ensuring consistency across the UI. Here's a breakdown of the key elements:
- Primitives: These are the foundational values, such as colours, which we use to create our tokens.
- Tokens:
- Colours: Applied across text, surfaces, and borders. Each colour is defined as a token to ensure consistency.
- Typography: We've created tokens for different type styles ranging from Display H1 to Caption C1. Each type token includes a predefined font, font weight, font size, line height, and letter spacing.
- Spacing: Spacing tokens range from 0 (0px) to 14 (160px). These tokens are used throughout the system to ensure consistent padding, margins, and layout.
- Radius: These tokens define border radius, mapped to spacing values, such as small (2px), medium (8px), and full (999px for fully rounded corners).
- Buttons: We have primary and secondary buttons, each with tokens for typography, colours (for default, hover, pressed, and disabled states), padding, and border radius. These tokens link back to the general typography, colour, and spacing tokens to maintain consistency.
- Grid System: This follows a Bootstrap-like grid setup with breakpoints for mobile, tablet, laptop, and desktop. Different margin and gutter values are applied depending on the viewport (e.g., 16px margin on mobile, 32px on tablet).
- Buttons and Inputs: These use the tokens defined for typography, spacing, and colours.
- Shapes: Fixed ratio shapes for use with images in Figma.
- Logo & Icons: Predefined components linked back to our design system tokens.
Inside of this Astro project, you'll see the following folders and files:
/
├── public/
│ └── favicon.svg
├── src
│ ├── assets
│ │ └── astro.svg
│ ├── components
│ │ └── Header
| | └── UI
| | └── Breadcrumb
| | └── Button
| | └── Field
| | └── Icons
| | └── Shape
| | └── Gallery
| | └── Price
│ ├── layouts
│ │ └── Layout.astro
│ └── pages
│ └── index.astro
│ └── shop.astro
│ └── 404.astro
└── package.json
All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
pnpm install |
Installs dependencies |
pnpm dev |
Starts local dev server at localhost:4321 |
pnpm build |
Build your production site to ./dist/ |
pnpm preview |
Preview your build locally, before deploying |
pnpm astro ... |
Run CLI commands like astro add, astro check |
pnpm astro -- --help |
Get help using the Astro CLI |