Nice Uiux

NICE Brand Design System

Reference: https://nice.com

Tailwind Theme (single source of truth)

// tailwind.config.ts — extend section
{
  theme: {
    extend: {
      fontFamily: {
        sans: ['"Be Vietnam Pro"', 'sans-serif'],
      },
      colors: {
        nice: {
          black: '#22212b',       // Dark sections, footer, primary buttons
          primary: '#3694fd',     // CTA buttons, links, accents
          'dark-blue': '#2c79ee', // Hover states
          text: '#11181c',        // Body text (not pure black)
          'gray-text': '#6d6d72', // Secondary/muted text
          'gray-bg': '#f2f0eb',   // Alternating section backgrounds (warm gray)
          'gray-base': '#e8e6e0', // Borders, dividers
          pink: '#ff5b8a',        // Alerts (sparingly)
          'dark-red': '#e73b71',  // Error/destructive (sparingly)
          green: '#00e2a0',       // Success (sparingly)
        },
      },
      borderRadius: {
        card: '32px',
        'card-lg': '40px',
        pill: '38px',
      },
      fontSize: {
        hero: ['54px', { lineHeight: '1.2', letterSpacing: '-0.03em', fontWeight: '500' }],
        section: ['42px', { lineHeight: '1.2', fontWeight: '500' }],
        subsection: ['36px', { lineHeight: '1.2', fontWeight: '500' }],
        'body-lg': ['20px', { lineHeight: '1.35', fontWeight: '300' }],
      },
    },
  },
}