Layout based on layout: adaptive B2B SaaS dashboard pages with design tokens and component states

There is an existing B2B SaaS for procurement and warehouse management. The design was updated in Figma, but the interface in the product is partly based on the old layout, partly in an outdated UI-kit. It is required to layout a set of key personal account screens according to the layout so that they can be painlessly connected to the current frontend.

Technical environment and initial data
- Mockups and prototypes in Figma: desktop 1440, tablet 1024, mobile 375, including hover-focus-active-disabled, empty-error-loading states
- Current stack: React 18, Vite, TypeScript, SCSS Modules, Storybook already connected
- The project has basic components, but they do not coincide with the new design - it is allowed to create a new layer of UI components next to the old one

Scope of work and stages
1) Audit of layouts and approval of the map of component screens: highlight reused blocks, determine the grid, typography, colors, spacing, states
2) Setting up design tokens in the code: CSS variables for colors, typography, radii, shadows, z-index, spacing scale. Support light and dark theme from layout
3) Layout and integration of 6 cabinet screens into the project (with connection to existing route pages without changing the business logic):
- Dashboard with widgets and adaptive grid restructuring
- Order table: sticky header, horizontal scrolling on narrow screens, empty-loading-error states
- Order page: two-column composition, blocks with collapses, adaptive to mobile
- Order creation form: multi-step layout, field validation states (visual), disabled and helper texts
- Notification Center: grouping by dates, do not do virtualization, but ensure productive layout and correct transfers
- Profile settings: sections, toggles, confirmation of actions (modal window)
4) UI level components: Button, Input, Select (custom styling on top of native), Checkbox, Toggle, Badge, Tabs, Modal, Tooltip, Skeleton, Toast. Components must have states from the layout and be styled in Storybook
5) Cross-browser checking and polishing: Chrome, Firefox, Safari, Edge. Fixing discrepancies with Figma

Restrictions
- Do not touch the API, business logic and data types - the task is specifically about layout, styles, layout, states and connection to current pages
- Do not use heavy UI libraries (MUI, AntD and analogues) - only the existing stack and your own styles
- The layout should be without reference to pixel-perfect at the level of 1-2px, but in compliance with the grid, indents and typography within tolerances
- Accessibility: visible focus states, correct tab-order, aria-label for button icons, text contrast at least WCAG AA for body text

Specific result
- PR in the repository with ready-made layout of 6 screens and a set of UI components
- Storybook with all components and their states
- Brief README: how to launch, where to look at pages, what tokens have been added

Measurable acceptance criteria
- Visual compliance with Figma on control breakpoints 1440-1024-768-375 with a margin tolerance of up to 4px and font size tolerance of up to 1px
- No horizontal page scrolling at 375 and 768, except for the orders table, where it is allowed inside the container
- All interactive elements have hover-focus-active-disabled states as in the layout
- Lighthouse (Chrome) for any of the new pages: Accessibility no lower than 90, Best Practices no lower than 90 (excluding backend)
- No critical errors in the console when navigating new pages

Materials
- I will provide access to Figma and the repository, a list of pages and links to layouts before the start. During the process, 2-3 short calls are expected to synchronize components and tolerances.