Astro Design System Starter
Token-first UI foundationDocs
Roadmap

Design system work tracked as variables, styles and visual rules.

01

Roadmap overview

This first slice mirrors the Notion board structure from the imported screenshot. Every item starts as not started, so each layer can be reviewed and finished deliberately.

Imported groups

7 parent areas

Variables system, styles system and visual rules are tracked as separate roadmap layers.

Current status

112 done / 37 not started

Completed items reflect audited and documented design-system work. Not-started items are still waiting for the same variables, styles and agentic-rules pass.

Priority

135 critical items

The current foundation work is critical because later components and pages depend on it.

02

Roadmap items

The structure below is generated from the local JSON source and can be expanded as more Notion categories are imported.

Critical

Sizing

System rozmiarów, od prymitywnej skali po semantyczne tokeny, style i zasady użycia.

Done
Critical

Variables

sizing
Done
Critical

Primitive tokens (size scale)

sizing
Done
Critical

Semantic tokens

sizing
Done
Critical

Padding component

sizing
Done
Critical

Padding section

sizing
Done
Critical

Gap

sizing
Done
Critical

Space

sizing
Done
Critical

Radius

sizing
Done
Critical

Border

sizing
Done
Critical

Attributes

sizing
Done
Critical

Agentic Rules

sizing
Done
Critical

Instructions

sizing
Done
Critical

Primary usage / priorities

sizing
Done
Critical

How to use classes

sizing
Done
Critical

How to use variables

sizing
Done
Critical

Colors

System kolorystyczny, od prymitywnych palet po semantyczne tokeny, tryby dark/light, kolory komponentów, style i zasady użycia.

Done
Critical

Variables

colors
Done
Critical

Primitive Tokens (color shades)

colors
Done
Critical

Semantic Tokens in two attribute modes (dark/light)

colors
Done
Critical

Global

colors
Done
Critical

Backgrounds

colors
Done
Critical

Text

colors
Done
Critical

Border

colors
Done
Critical

Icon

colors
Done
Critical

Status

colors
Done
Critical

Warning

colors
Done
Critical

Success

colors
Done
Critical

Error

colors
Done
Critical

Info

colors
Done
Critical

Disabled

colors
Done
Critical

Color Components

colors
Done
Critical

Button Primary

colors
Done
Critical

Button Secondary

colors
Done
Critical

Button tertiary

colors
Done
Critical

Link

colors
Done
Critical

Input

colors
Done
Critical

Tab

colors
Done
Critical

Tag

colors
Done
Critical

Card

colors
Done
Critical

Icon Button

colors
Done
Critical

Eyebrow

colors
Done
Critical

Label

colors
Done
Critical

Focus

colors
Done
Critical

Styles

colors
Done
Critical

Utility color styles

colors
Done
Critical

Global color styles

colors
Done
Critical

Attributes

colors
Done
Critical

Agentic Rules

colors
Done
Critical

Instructions

colors
Done
Critical

Primary usage / priorities

colors
Done
Critical

How to use classes

colors
Done
Critical

How to use variables

colors
Done
Critical

Layout

System layoutu: viewporty, breakpointy, paddingi strony, kontenery, grid, style layoutowe i zasady kompozycji.

Done
Critical

Variables

layout
Done
Critical

Layout foundations

layout
Done
Critical

Viewports

layout
Done
Critical

Breakpoints

layout
Done
Critical

Site paddings

layout
Done
Critical

Containers

layout
Done
Critical

Semantic tokens

layout
Done
Critical

Site padding

layout
Done
Critical

Containers

layout
Done
Critical

Composition grid

layout
Done
Critical

Grid system

layout
Done
Critical

Grid variables

layout
Done
Critical

Grid attributes

layout
Done
Critical

Grid examples

layout
Done
Critical

Styles

layout
Done
Critical

Utility layout styles

layout
Done
Critical

Global layout styles

layout
Done
Critical

Attributes

layout
Done
Critical

Section padding attributes

layout
Done
Critical

Container width attributes

layout
Done
Critical

Stack attributes

layout
Done
Critical

Cluster attributes

layout
Done
Critical

Agentic Rules

layout
Done
Critical

Instructions

layout
Done
Critical

Primary usage / priorities

layout
Done
Critical

How to use classes

layout
Done
Critical

How to use variables

layout
Done
Critical

Layout structure examples

layout
Done
Critical

Typography

System typograficzny: rodziny fontów, skale, line-heighty, letter spacingi, wagi, transformacje, semantyczne style tekstowe i zasady użycia.

Done
Critical

Variables

typography
Done
Critical

Typography foundations

typography
Done
Critical

Font families

typography
Done
Critical

Headings sizes

typography
Done
Critical

Body sizes

typography
Done
Critical

Letter spacings

typography
Done
Critical

Line heights

typography
Done
Critical

Text wrap

typography
Done
Critical

Weights

typography
Done
Critical

Font styles

typography
Done
Critical

Text transforms

typography
Done
Critical

Typography semantic

typography
Done
Critical

Typography styles variables

typography
Done
Critical

Family

typography
Done
Critical

Size

typography
Done
Critical

Letter spacing

typography
Done
Critical

Line heights

typography
Done
Critical

Weights

typography
Done
Critical

Font styles

typography
Done
Critical

Text transforms

typography
Done
Critical

Text wrap and breaking

typography
Done
Critical

Styles

typography
Done
Critical

Utility typography styles

typography
Done
Critical

Global typography styles

typography
Done
Critical

Agentic Rules

typography
Done
Critical

Instructions

typography
Done
Critical

Primary usage / priorities

typography
Done
Critical

How to use classes

typography
Done
Critical

How to use variables

typography
Done
Critical

Components

Reusable UI atoms, molecules, cards, navigation modules, documentation components and utility components that need design-system audit.

Not started
Critical

Global Header Component

navigation
Not started
Critical

Top navbar

navigation
Not started
Critical

Menu Link

navigation
Not started
Critical

Left navbar

navigation
Not started
Critical

Nav Item Link

navigation
Not started
Critical

Button

atoms
Not started
Critical

Button Link

atoms
Not started
Critical

Copy to clipboard button

atoms
Not started
Critical

Input

atoms
Not started
Critical

Tab

atoms
Not started
Critical

Label

atoms
Not started
Critical

Tag

atoms
Not started
Critical

Eyebrow

atoms
Not started
Critical

Divide Block

atoms
Not started
Critical

Image Effect Overlay - 2 modes

atoms
Not started
Critical

Visual Ratio Wrapper

atoms
Not started
Critical

Callout Card (CTA)

cards
Not started
Critical

Field Card

cards
Not started
Critical

Icons components system

icons
Not started
Critical

Checkboxes

forms
Not started
Critical

Radio Buttons

forms
Not started
Medium

Tooltip

overlays
Not started
Critical

Form

forms
Not started
High

Design System Components

documentation
Not started
High

DS - Table of Contents

documentation
Not started
High

DS - Header

documentation
Not started
High

DS - Code Snippet

documentation
Not started
High

DS - Variables/Styles Tables

documentation
Not started
High

DS - Color Row / Color Shade Card

documentation
Not started
High

DS - Automated token documentation

documentation
Not started
Low

Illustration system

visual-system
Not started
High

Grid visualizer

development-tools
Not started
High

Components Guide

development-tools
Not started
High

Global scripts

Globalne skrypty i interakcje, które działają ponad pojedynczym komponentem albo stroną.

Not started
Low

ScrambleText

text-animation
Not started
Medium

Guides widgets

Guidelines - jak się poruszać po aplikacji.

Not started