Note: Ant Design Customization from phase 2.

Figma Files provided by Design Team:

• Mini-phase onboarding flow is HERE (Most up to date Onboarding Flows).
• Phase 4 hi-fidelity design for dev is HERE.
• Phase 4 mid-fidelity design for dev is HERE.
• Phase 4 Design system color, typography can be found HERE.
• Ant Design components, Typography and everything can be found HERE.

Why we use Less?

Ant Design version 5 (CSS-in-JS) had some issue wit SSR (Server Side Rendering) on next.js, so phase 2 dev decided to use version 4 (Less), which required to do some hacking to get it work in a customizable way. It looks like we can now use Ant Design v5 with some documentation (see below), and if we upgrade to v5, we will use CSS-in-JS. This requires in-depth research and risk, hence we won’t do that during this phase.

• SSR with v5 article
• Migrating the less variables into component tokens

Researching how Less works, it is supposed to use .less, then .css is automatically compiled. I see less-loader is installed to compile to css, but there is no webpack.config to setup (we have next.config.js). I tested updating colors.less, but it didn’t compile to colors.css. If anybody knows how to use appropriately, please advise.

Style files used for this project:

Since phase 4 has new colors, we have updated colors.css and colors.less. We’ve also created spacing.css and spacing.less then updated variables.less.

In global.css, we’ve updated the following:

• Commented out Links “a” section to prevent applying original color.

• Added new text colors:

  

• Based on typography guidelines, we updated line-height to be 130% for heading: