Styling Guidelines

Field Details
Status Active
Last Updated 05-11-2026

Purpose

To ensure consistent, maintainable, and scalable styling across all frontend applications

Scope

Applies to: All frontend applications, components, and styling files

Does not apply to: Third-party component libraries, email templates

File Organization

  • Global styles: /src/styles/globals.css
  • Shared styles: /src/styles/shared/
  • CSS variables: /src/styles/variables.css
/components/Button/Button.css
/components/Button/Button.module.css

Naming Conventions

Class Names

Use kebab-case for all CSS classes:

.user-profile
.nav-menu-item
.btn-primary

CSS Variables

Use semantic naming with double dashes:

--color-primary: #3B82F6;
--spacing-md: 16px;
--font-size-lg: 18px;

Colors

Never hardcode colors. Always use CSS variables:

/* Good practice */
color: var(--color-primary);
background: var(--color-background);

/* Avoid hardcoding */
color: #3B82F6;
background: rgb(59, 130, 246);

Define color scale in variables:

--color-primary-100: #DBEAFE;
--color-primary-500: #3B82F6;
--color-primary-900: #1E3A8A;

Don'ts

  • Never use !important (except overriding third-party)
  • Avoid inline styles (except dynamic values)
  • Don't nest more than 3 levels deep
  • Never hardcode values
/* Avoid these patterns */
.card { color: blue !important; }
style="padding: 16px"
.parent .child .grandchild .element { }

Z-Index Scale

Use standardized z-index values:

--z-dropdown: 1000;
--z-modal: 2000;
--z-popover: 3000;
--z-tooltip: 4000;
--z-notification: 5000;

Responsiveness

Always make sure the design is mobile friendly. Even if you dont have a specific design it should not break in mobile

Exceptions

Inline styles allowed for dynamic user-generated values (e.g., user-uploaded images, dynamic positions)

Changelog

Version Date Author Change
1.0.0 05-11-2026 Tibin Sunny Initial version