Layout in Figma for a partner’s fintech office with theming, Pixel Perfect and integration into the Next.js design system

Initial situation and subject area - there is a product in fintech - a partner’s personal account for processing applications for payments and monitoring statuses. The design was updated in Figma and the UI kit was partially rebuilt, but the front-end team is busy with back-end integrations. You need to layout a set of screens according to the layout and deliver the result in the form of ready-made React/Next.js components that can be immediately connected to an existing project.

Technical environment - Next.js 14 (App Router), TypeScript, CSS Modules + PostCSS, Storybook 7, Figma (auto-layout, variables), assembly via pnpm. The project already has basic primitives (Button, Input, Modal), but some blocks require new composite components and adaptive states. Access to the repository and layouts is provided.

What needs to be done is to lay out the layout and assemble the following sections of the cabinet into components:
1) Partner dashboard - metrics cards, graph (without data implementation - only layout and states), notification block, empty states.
2) List of requests - a table with a fixed header, horizontal scrolling on small screens, loading/empty/error states, lines of different types.
3) Detailed application page - status timeline, details block, action panel, warnings.
4) Modal windows and drawer windows - creating an application, confirmation, validation errors, viewing documents.

Limitations and requirements - without connecting third-party UI libraries (MUI/Antd, etc.). It is allowed to use already existing internal primitives. The layout must take into account RTL; it is not required, but dark and light themes via CSS variables are required, as well as correct operation with a system font increase of up to 125%. Animations are CSS only, without framer-motion. Semantics and accessibility are required - correct role/aria for modals, focus trap, visible focus-ring, keyboard control.

Professional expectations - the work involves analyzing the layout, building the structure of the components, coordinating tokens (colors/padding/radii), adjusting the adaptability and checking pixel accuracy.

The specific result is a PR to the repository with components and pages connected to Next.js routes, plus a Storybook story for all new composite components and their states.

Measurable acceptance criteria - Pixel Perfect deviation of no more than 2px at control breakpoints 375/768/1280. Lighthouse Accessibility is at least 95 for layout pages in data-free mode. All interactive elements are accessible from the keyboard, modals are closed by Esc and clicking outside, focus returns to the trigger. There should be no horizontal scrolling of the page by 375px, except for the table area in the list of requests, where scrolling is allowed inside the container. The pnpm build runs without TypeScript errors and without layout-related linter warnings. The components cover states - default/hover/focus/disabled/loading/empty/error according to the layout.

Execution stages - initial audit of Figma and approval of the component structure. Layout of basic tokens and themes. Implementation of pages and composite components. Running through the accessibility checklist and Pixel Perfect, making changes based on the review results.