Розробка респонсивних HTML/CSS шаблонів для вебдодатку

Потрібно зробити HTML/CSS/Javascript шаблони відповідно до доданих описів і візуалізацій. Наш взірець UI дизайну це Jira. Дані шаблони будуть використовуватись для нашого вже наявного вебдодатку:

https://demo.atropim.com/

Всі шаблони мають бути зроблені на основі Pico.css і в плані UI дизайну очікується максимальне дотримання стандартів Pico.css. Розробка UI дизайну не є складовою цього проекту (дизайн задається Pico.css), але все потрібно зробити так, щоб не було враження про "недоробленість" чи "непрофесійність". Розробка додаткових елементів UI, які тут не розписані буде виписана в наступному проекті. 

Детальні вимоги: 

- Якісне виконання та відсутність багів

- Використовуємо Pico.css як базовий і єдиний фреймворк

- дотримуємось правил, філософії і стилістики picocss (невикористання функціонала пікоцсс і створення альтернативного рішення, якщо такий є буде розцінюватись як баг)

- всі кольори (розрізняємо колір шрифта, колір ліній, колір фону) мають бути параметрами, щоб було чітке розуміння скільки кольорів використовується

- невикористання мардженів і падінгів - вони всі вже прописані в пікоцсс для html елементів

- абсолютна мінімізація використання цсс класів

- максимум 3 розміри шрифта, і 3 кольори шрифта

- кнопочки можуть мати легку закругленість (3пкс)

- для іконок використовуєм тільки Google Fonts Material Symbols - https://fonts.google.com/icons?icon.style=Outlined&icon.set=Material+Symbols

- ніяких тіней і градієнтів

- максимально короткий код цсс

- можливість перемикнутися між світлим і темним модом (базові речі вже передбачені в пікоцсс)

- максимальне використання можливостей СSS3: змінні, apply для mixins, Selectors, Transformations, Grids, Flexbox, ітд

- чіткість UI (відсутність ледве видних елементів, користувач не повинен приглядатись, мружитись і тд)

- мінімальне використання Javascript (Javascript потрібен обовязково для реалізації певниг вимог, зображених на візуалізаціях)

- шаблони потрібно заповнити lorem ipsum'ами і іншими плейсхолдерами так, щоб було видно всі необхідні елементи (наприклад де розташовується скролбар)

- в елементах де використовується текст з іконкою, іконка має бути вертикально посередині тексту

- елементи UI повинні завжди бути візуально по чомусь вирівняні вертикально і/або горизонтально 

- виконавець повинен повідомити про джерела де він взяв використаний код (наприклад Javascript), якщо релевантно

- масштаб елементів на макетах є неточним (його не потрібно дотримуватись)

Очікуваний результат:

Реалізовані шаблони 4х html сторінок.

Буду реагувати лише на пропозиції з конкретною ціною.

З радістю відповім на всі запитання.