feat(design): add Light Green design system CSS tokens and base styles by alichherawalla · Pull Request #10 · wednesday-solutions/ai-enablement-workshop

alichherawalla · 2026-02-18T07:52:08Z

Replaces ugly base styles with the Light Green design system:

Google Fonts: Instrument Serif (headlines) + DM Sans (body/UI)
CSS custom properties for brand gradient, neutrals, shadows, radii
Component classes: sp-nav, sp-btn-primary, sp-btn-ghost, sp-card, sp-movie-card, sp-input, sp-select, sp-seat, sp-booking-card, etc.
Removes all legacy .header, .movie-card, .seat, .booking-card rules

Replaces ugly base styles with the Light Green design system: - Google Fonts: Instrument Serif (headlines) + DM Sans (body/UI) - CSS custom properties for brand gradient, neutrals, shadows, radii - Component classes: sp-nav, sp-btn-primary, sp-btn-ghost, sp-card, sp-movie-card, sp-input, sp-select, sp-seat, sp-booking-card, etc. - Removes all legacy .header, .movie-card, .seat, .booking-card rules Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

gemini-code-assist · 2026-02-18T07:52:22Z

Summary of Changes

Hello @alichherawalla, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly refactors the application's styling by integrating a new 'Light Green' design system. The change aims to modernize the user interface, improve visual consistency, and establish a scalable foundation for future UI development. It replaces disparate, legacy styles with a structured, component-driven approach using CSS custom properties and updated typography, resulting in a more polished and maintainable codebase.

Highlights

Design System Integration: Introduced the 'Light Green' design system, replacing previous ad-hoc styling with a comprehensive, consistent set of CSS rules and custom properties.
Typography Update: Incorporated Google Fonts 'Instrument Serif' for headlines and 'DM Sans' for body text and UI elements, enhancing readability and aesthetic appeal.
CSS Custom Properties: Defined a wide range of CSS custom properties for brand gradients, neutral colors, text hierarchy, borders, shadows, and spacing, centralizing design tokens for easier maintenance and theming.
Component-Based Styling: Implemented new component classes prefixed with 'sp-' (e.g., sp-nav, sp-btn-primary, sp-card, sp-movie-card, sp-input, sp-select, sp-seat, sp-booking-card, sp-badge, sp-page, sp-gradient-text) to standardize UI elements.
Legacy Style Removal: Removed all outdated and inconsistent base styles, including .header, .movie-card, .seat, and .booking-card rules, streamlining the stylesheet and eliminating technical debt.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

packages/web/src/index.css
- Imported Google Fonts for new typography.
- Defined a comprehensive set of CSS custom properties for the 'Light Green' design system.
- Replaced generic base styles for body and a with design system variables.
- Introduced new component styles for navigation (sp-nav, sp-logo, sp-nav-link), buttons (sp-btn-primary, sp-btn-ghost), cards (sp-card, sp-movie-card), forms (sp-input, sp-select), seats (sp-seat), and other UI elements (sp-label, sp-booking-card, sp-page, sp-badge, sp-gradient-text).
- Removed all legacy and inconsistent styling rules for .movie-card, input, select, button, .seat-grid, .seat, .header, and .booking-card.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request successfully integrates the Light Green design system, replacing the previous base styles with a comprehensive set of CSS custom properties and well-defined component classes. This significantly enhances the maintainability, consistency, and overall aesthetic quality of the application's styling. The use of CSS variables centralizes design tokens, which is a great step towards a scalable and easily modifiable design system.

gemini-code-assist · 2026-02-18T07:58:41Z

+
+  /* Spacing */
+  --page-padding: 56px;
+  --nav-height: 72px;


The --nav-height custom property is currently set to 72px. However, the DESIGN_SYSTEM_GUIDE.md (line 210) specifies --nav-height: 84px;. Please align this value with the design system guide for consistency.

Suggested change

--nav-height: 72px;

--nav-height: 84px;

References

The design system guide specifies a navigation bar height of 84px. ^(link)

gemini-code-assist · 2026-02-18T07:58:41Z

+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-xl: 16px;
+  --radius-2xl: 24px;


To further centralize design tokens and improve maintainability, consider defining CSS custom properties for the button gradients and specific rgba values used for seat styling. This aligns with the design system's principle of using variables for colors and gradients, as seen in the "Brand with Opacity" section (lines 49-56) and "3D Button" section (lines 504-506) of the DESIGN_SYSTEM_GUIDE.md.

Suggested change

--radius-2xl: 24px;

/* Button Gradients */

--btn-primary-gradient-rest: linear-gradient(180deg, #4ade80 0%, #3acc72 50%, #2ab862 100%);

--btn-primary-gradient-hover: linear-gradient(180deg, #3bd975 0%, #2ebe68 50%, #25a85c 100%);

/* Seat Opacity Colors */

--brand-bg-opacity-08: rgba(74, 222, 128, 0.08);

--brand-border-opacity-30: rgba(74, 222, 128, 0.3);

--brand-bg-opacity-20: rgba(74, 222, 128, 0.2);

--brand-border-opacity-50: rgba(74, 222, 128, 0.5);

/* Error RGB for rgba derivation */

--error-rgb: 239, 68, 68;

References

The design system encourages the use of CSS custom properties for colors and gradients to centralize design tokens. ^(link)

gemini-code-assist · 2026-02-18T07:58:41Z

+  --border-brand: rgba(74, 222, 128, 0.15);
+  --border-brand-hover: rgba(74, 222, 128, 0.3);


The CSS defines --border-brand and --border-brand-hover. However, the DESIGN_SYSTEM_GUIDE.md (lines 77-78) defines --border-hover and --border-active with matching rgba values. To maintain consistency with the documented design system, consider renaming --border-brand to --border-hover and --border-brand-hover to --border-active in the CSS. This will ensure better alignment with the design system's defined tokens.

Suggested change

--border-brand: rgba(74, 222, 128, 0.15);

--border-brand-hover: rgba(74, 222, 128, 0.3);

--border-default: #e5e5e5;

--border-subtle: rgba(0, 0, 0, 0.04);

--border-hover: rgba(74, 222, 128, 0.15);

--border-active: rgba(74, 222, 128, 0.3);

References

The design system guide defines specific names for border variables, which should be consistently applied in the CSS. ^(link)

gemini-code-assist · 2026-02-18T07:58:41Z

+  font-size: 15px;
+  font-weight: 600;
+  color: #ffffff;
+  background: linear-gradient(180deg, #4ade80 0%, #3acc72 50%, #2ab862 100%);


Now that a custom property --btn-primary-gradient-rest has been suggested in the :root block, please use it here instead of the hardcoded linear-gradient value to improve maintainability and consistency with the design system.

Suggested change

background: linear-gradient(180deg, #4ade80 0%, #3acc72 50%, #2ab862 100%);

background: var(--btn-primary-gradient-rest);

References

The design system encourages the use of CSS custom properties for gradients to centralize design tokens. ^(link)

gemini-code-assist · 2026-02-18T07:58:41Z

+}
+
+.sp-btn-primary:hover:not(:disabled) {
+  background: linear-gradient(180deg, #3bd975 0%, #2ebe68 50%, #25a85c 100%);


Now that a custom property --btn-primary-gradient-hover has been suggested in the :root block, please use it here instead of the hardcoded linear-gradient value to improve maintainability and consistency with the design system.

Suggested change

background: linear-gradient(180deg, #3bd975 0%, #2ebe68 50%, #25a85c 100%);

background: var(--btn-primary-gradient-hover);

References

The design system encourages the use of CSS custom properties for gradients to centralize design tokens. ^(link)

gemini-code-assist · 2026-02-18T07:58:41Z

+.sp-card:hover {
+  transform: translateY(-6px);
+  box-shadow: var(--shadow-card-hover);
+  border-color: var(--border-brand-hover);


Following the suggested renaming of border variables to align with the DESIGN_SYSTEM_GUIDE.md, please update border-color here to use --border-active instead of --border-brand-hover.

Suggested change

border-color: var(--border-brand-hover);

border-color: var(--border-active);

References

The design system guide defines specific names for border variables, which should be consistently applied in the CSS. ^(link)

gemini-code-assist · 2026-02-18T07:58:41Z

+  border: 1.5px solid rgba(74, 222, 128, 0.3);
+  background: rgba(74, 222, 128, 0.08);


The border and background properties for .sp-seat use hardcoded rgba values. Now that custom properties like --brand-border-opacity-30 and --brand-bg-opacity-08 have been suggested in the :root block, please use them here to improve maintainability and consistency with the design system.

Suggested change

border: 1.5px solid rgba(74, 222, 128, 0.3);

background: rgba(74, 222, 128, 0.08);

border: 1.5px solid var(--brand-border-opacity-30);

background: var(--brand-bg-opacity-08);

References

The design system encourages the use of CSS custom properties for colors with opacity to centralize design tokens. ^(link)

gemini-code-assist · 2026-02-18T07:58:41Z

+  background: rgba(74, 222, 128, 0.2);
+  border-color: rgba(74, 222, 128, 0.5);


The background and border-color properties for .sp-seat:hover:not(.sp-seat--booked) use hardcoded rgba values. Now that custom properties like --brand-bg-opacity-20 and --brand-border-opacity-50 have been suggested in the :root block, please use them here to improve maintainability and consistency with the design system.

Suggested change

background: rgba(74, 222, 128, 0.2);

border-color: rgba(74, 222, 128, 0.5);

background: var(--brand-bg-opacity-20);

border-color: var(--brand-border-opacity-50);

References

The design system encourages the use of CSS custom properties for colors with opacity to centralize design tokens. ^(link)

gemini-code-assist · 2026-02-18T07:58:41Z

+.sp-seat--booked {
+  background: rgba(239, 68, 68, 0.08);


The background and border-color properties for .sp-seat--booked use hardcoded rgba values. Now that --error-rgb has been suggested in the :root block, please use it here to derive the rgba values. This ensures consistency with the semantic color definitions in the DESIGN_SYSTEM_GUIDE.md (line 110) and improves maintainability.

background: rgba(var(--error-rgb), 0.08); border-color: rgba(var(--error-rgb), 0.2);

References

The design system defines semantic colors, and their derived rgba values should use a consistent approach. ^(link)

gemini-code-assist · 2026-02-18T07:58:41Z

-  align-items: center;
+.sp-booking-card:hover {
+  box-shadow: var(--shadow-md);
+  border-color: var(--border-brand-hover);


Following the suggested renaming of border variables to align with the DESIGN_SYSTEM_GUIDE.md, please update border-color here to use --border-active instead of --border-brand-hover.

border-color: var(--border-active);

References

The design system guide defines specific names for border variables, which should be consistently applied in the CSS. ^(link)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- Instrument Serif headline, sp-movie-card grid - Switch flex wrap to CSS grid (auto-fill, minmax 220px) for even columns - Film count plural: "X film / X films" - Fix \uXXXX escape sequences — use actual Unicode characters - Update tests: new loading sentinel, film count, search placeholder Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…cast - sp-badge pills for duration/language/rating - Cast separator changed from pipe to middle dot (·) - Null synopsis/rating — section omitted rather than fallback text - Update tests: content-based sentinels, new null-field assertions Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- sp-seat, sp-seat--selected, sp-seat--booked CSS classes - Summary: "No seats selected" / "N seat(s) selected" - Fix ₹ and · unicode rendering - Update tests: content-based sentinel, new seat count strings Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- Instrument Serif title, sp-booking-card layout - Unauthenticated prompt: "Sign in to view your bookings" - Fix ₹ and · unicode rendering - Update test: new login prompt text Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

gemini-code-assist Bot reviewed Feb 18, 2026

View reviewed changes

alichherawalla and others added 7 commits February 18, 2026 13:39

feat(design-system): apply Light Green design system to App shell

a3dbffb

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

style: apply Light Green design system tokens to global CSS

34b9905

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat(design-system): redesign Login page with sp-card form

db2f944

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

alichherawalla merged commit b2067ff into main Feb 18, 2026
1 check failed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(design): add Light Green design system CSS tokens and base styles#10

feat(design): add Light Green design system CSS tokens and base styles#10
alichherawalla merged 8 commits into
mainfrom
feat/design-system

alichherawalla commented Feb 18, 2026

Uh oh!

gemini-code-assist Bot commented Feb 18, 2026

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

gemini-code-assist Bot Feb 18, 2026

Uh oh!

gemini-code-assist Bot Feb 18, 2026

Uh oh!

gemini-code-assist Bot Feb 18, 2026

Uh oh!

gemini-code-assist Bot Feb 18, 2026

Uh oh!

gemini-code-assist Bot Feb 18, 2026

Uh oh!

gemini-code-assist Bot Feb 18, 2026

Uh oh!

gemini-code-assist Bot Feb 18, 2026

Uh oh!

gemini-code-assist Bot Feb 18, 2026

Uh oh!

gemini-code-assist Bot Feb 18, 2026

Uh oh!

gemini-code-assist Bot Feb 18, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

-  --radius-2xl: 24px;
+  /* Button Gradients */
+  --btn-primary-gradient-rest: linear-gradient(180deg, #4ade80 0%, #3acc72 50%, #2ab862 100%);
+  --btn-primary-gradient-hover: linear-gradient(180deg, #3bd975 0%, #2ebe68 50%, #25a85c 100%);
+  /* Seat Opacity Colors */
+  --brand-bg-opacity-08: rgba(74, 222, 128, 0.08);
+  --brand-border-opacity-30: rgba(74, 222, 128, 0.3);
+  --brand-bg-opacity-20: rgba(74, 222, 128, 0.2);
+  --brand-border-opacity-50: rgba(74, 222, 128, 0.5);
+  /* Error RGB for rgba derivation */
+  --error-rgb: 239, 68, 68;

		--border-brand: rgba(74, 222, 128, 0.15);
		--border-brand-hover: rgba(74, 222, 128, 0.3);

-  --border-brand: rgba(74, 222, 128, 0.15);
-  --border-brand-hover: rgba(74, 222, 128, 0.3);
+  --border-default: #e5e5e5;
+  --border-subtle: rgba(0, 0, 0, 0.04);
+  --border-hover: rgba(74, 222, 128, 0.15);
+  --border-active: rgba(74, 222, 128, 0.3);

	background: linear-gradient(180deg, #4ade80 0%, #3acc72 50%, #2ab862 100%);
	background: var(--btn-primary-gradient-rest);

	background: linear-gradient(180deg, #3bd975 0%, #2ebe68 50%, #25a85c 100%);
	background: var(--btn-primary-gradient-hover);

	border-color: var(--border-brand-hover);
	border-color: var(--border-active);

		border: 1.5px solid rgba(74, 222, 128, 0.3);
		background: rgba(74, 222, 128, 0.08);

		background: rgba(74, 222, 128, 0.2);
		border-color: rgba(74, 222, 128, 0.5);

Conversation

alichherawalla commented Feb 18, 2026

Uh oh!

gemini-code-assist Bot commented Feb 18, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant