This PR integrates the Figma design token system into the React project using Supernova.io. Supernova is connected directly to the CommunityRule Figma project and automatically exports a tailwind.css file containing all tokens (colors, spacing, typography, radii, etc.). This file is imported into globals.css and consumed across the app.
Changes
Added Supernova-managed tailwind.css file with design tokens
Added custom breakpoints (manually appended, not generated by Supernova):
--breakpoint-xsm: 429px
--breakpoint-sm: 430px
--breakpoint-md: 640px
--breakpoint-lg: 1024px
--breakpoint-xl: 1440px
Reset default Tailwind config inside theme to ensure token-first styling
Notes
Supernova file should not be edited manually — but breakpoints have been added here for now.
Long term: migrate breakpoints into a separate config OR reapply them each time Supernova exports a new file.
Supernova is currently connected under a personal free account (limit: 1 team member).
A handoff process may be needed if additional collaborators are required.
How to Test
Run the app and confirm design tokens are applied globally.
Verify token-driven styles (colors, spacing, typography) match Figma definitions.
Resize the browser window to confirm custom breakpoints are recognized.
Check that tailwind.css is being imported through globals.css.
Screenshots
# Set Up Figma Token System with Supernova
## Overview
This PR integrates the **Figma design token system** into the React project using **Supernova.io**. Supernova is connected directly to the CommunityRule Figma project and automatically exports a `tailwind.css` file containing all tokens (colors, spacing, typography, radii, etc.). This file is imported into `globals.css` and consumed across the app.
## Changes
- Added **Supernova-managed `tailwind.css`** file with design tokens
- Integrated file into `globals.css` for global usage
- Configured **token-based theming** (colors, spacing, typography, border radius, etc.)
- Added **custom breakpoints** (manually appended, not generated by Supernova):
- `--breakpoint-xsm: 429px`
- `--breakpoint-sm: 430px`
- `--breakpoint-md: 640px`
- `--breakpoint-lg: 1024px`
- `--breakpoint-xl: 1440px`
- Reset default Tailwind config inside theme to ensure token-first styling
## Notes
- **Supernova file should not be edited manually** — but breakpoints have been added here for now.
- Long term: migrate breakpoints into a separate config OR reapply them each time Supernova exports a new file.
- Supernova is currently connected under a **personal free account** (limit: 1 team member).
- A **handoff process** may be needed if additional collaborators are required.
## How to Test
1. Run the app and confirm design tokens are applied globally.
2. Verify token-driven styles (colors, spacing, typography) match Figma definitions.
3. Resize the browser window to confirm **custom breakpoints** are recognized.
4. Check that `tailwind.css` is being imported through `globals.css`.
## Screenshots
<img width="1065" alt="Screenshot 2025-08-19 at 11.40.19 PM.png" src="attachments/ac3254b4-b69d-40d8-bb7d-f171ecd7a6e1">
<img width="884" alt="Screenshot 2025-08-19 at 11.41.04 PM.png" src="attachments/e430c77d-474a-45a0-b0a2-95be0d37adc8">
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Set Up Figma Token System with Supernova
Overview
This PR integrates the Figma design token system into the React project using Supernova.io. Supernova is connected directly to the CommunityRule Figma project and automatically exports a
tailwind.cssfile containing all tokens (colors, spacing, typography, radii, etc.). This file is imported intoglobals.cssand consumed across the app.Changes
tailwind.cssfile with design tokensglobals.cssfor global usage--breakpoint-xsm: 429px--breakpoint-sm: 430px--breakpoint-md: 640px--breakpoint-lg: 1024px--breakpoint-xl: 1440pxNotes
How to Test
tailwind.cssis being imported throughglobals.css.Screenshots