18 chore transfer figma design system to fe

[HasithDeAlwis]

🛠 Changes being made

• Imported basic figma design system tokens into tailwind.config

✨ What's the context?

During previous development projects for myself, I've noticed that it was very hard to manage font sizes and colours, so I created a design system to mitigate those problems.

🧠 Value proposition of the Infrastructure

Reduce decision fatigue & replicate the figma exactly.

✅ Quality Checklist

• [ ] Did this break the deploy preview?
• [ ] Did you follow sourcery.ai's review?

Summary by Sourcery

Transfer Figma design system tokens into the Tailwind CSS configuration to improve consistency in font sizes and colors across the application.

Enhancements:

• Integrate Figma design system tokens into the Tailwind CSS configuration to standardize font sizes and colors.

[sourcery-ai[bot]]

Reviewer's Guide by Sourcery

This pull request implements a transfer of the Figma design system to the frontend by updating the Tailwind configuration and modifying the CSS styles. The changes focus on importing basic Figma design system tokens into the Tailwind configuration, including new color schemes, font sizes, and responsive design adjustments.

File-Level Changes

Change	Details	Files
Updated Tailwind configuration with design system tokens	Added custom screen breakpoints Removed container screens configuration Added custom font family (Poppins) Implemented extensive custom font size system for mobile and desktop Replaced color scheme with a new custom color palette Added custom line height values	tailwind.config.mjs
Removed default styling from app.css	Removed border-border application to all elements Removed background and text color application to body	src/styles/app.css

---

Tips

- Trigger a new Sourcery review by commenting `@sourcery-ai review` on the pull request. - Continue your discussion with Sourcery by replying directly to review comments. - You can change your review settings at any time by accessing your [dashboard](https://app.sourcery.ai): - Enable or disable the Sourcery-generated pull request summary or reviewer's guide; - Change the review language; - You can always [contact us](mailto:support@sourcery.ai) if you have any questions or feedback.

[netlify[bot]]

✅ Deploy Preview for hasith ready!

Name	Link
🔨 Latest commit	f71e3814ad5ff81f3fb5711bed16f2f05df7a512
🔍 Latest deploy log	https://app.netlify.com/sites/hasith/deploys/66dd36005cc9ab0008e2a836
😎 Deploy Preview	https://deploy-preview-19--hasith.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[HasithDeAlwis]

Hey @HasithDeAlwis - I've reviewed your changes - here's some feedback:

Overall Comments:

• Consider the impact of removing existing color definitions and body styles. Ensure this doesn't break existing components or overall site appearance.
• The large number of font size definitions might lead to inconsistent usage. Consider grouping or reducing these for better maintainability.
• Review the changes to container configuration, particularly the screen sizes, to ensure it doesn't negatively affect responsive layouts.

Here's what I looked at during the review Sourcery is free for open source - if you like our reviews please consider sharing them ✨ Help me be more useful! Please click 👍 or 👎 on each comment to tell me if it was helpful.

Review was very helpful.

• I will see how it feels to use many font sizes, and will reduce them if needed. Part of the process is learning and making mistakes with the design system.
• The container configuration is needed.
• I'll delete the exisiting styles in the future