GCS Design System: Colors, Typography, and Tokens

The GCS design system is implemented as a set of Tailwind CSS v4 custom properties declared in a single @theme inline block inside app/globals.css, combined with shadcn/ui components styled via CSS variables in the :root and .dark selectors. Every color, font, and radius used across the site derives from these tokens — no hardcoded hex values appear in component files.

Corporate Color Palette

The five brand colors are derived from the GCS Manual de Identidad Corporativa. They are exposed as Tailwind utility classes (bg-brand-navy, text-brand-lime, etc.) through the @theme inline block.

Token	CSS Variable	Hex	Usage
`brand-navy`	`--color-brand-navy`	`#2A3A6E`	Primary brand color, dark backgrounds, body text
`brand-blue`	`--color-brand-blue`	`#007DC2`	Interactive elements, links, accent highlights
`brand-blue-dark`	`--color-brand-blue-dark`	`#155C98`	Hover states, darker variants of brand-blue
`brand-lime`	`--color-brand-lime`	`#ABC42E`	CTAs, highlighted indicators, active states
`brand-gray`	`--color-brand-gray`	`#C6C6C5`	Borders, separators, neutral surfaces

`@theme inline` Block

The @theme inline directive in Tailwind CSS v4 registers tokens as CSS custom properties and simultaneously generates utility classes. The full brand token block from app/globals.css:

@theme inline {
  /* Typography exposed as font-sans / font-heading utility classes */
  --font-sans: var(--font-open-sans), 'Open Sans Fallback', sans-serif;
  --font-heading: var(--font-open-sans), sans-serif;
  --font-mono: var(--font-geist-mono), 'Geist Mono Fallback';

  /* Brand tokens exposed as bg-brand-*, text-brand-*, border-brand-* */
  --color-brand-navy: #2a3a6e;
  --color-brand-blue: #007dc2;
  --color-brand-blue-dark: #155c98;
  --color-brand-lime: #abc42e;
  --color-brand-gray: #c6c6c5;

  /* Radius scale derived from --radius base value */
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
}

Semantic Tokens (`:root`)

The :root block maps the brand palette to semantic role names that shadcn/ui components consume. This is the light-mode default.

Token	Value	Role
`--primary`	`#2a3a6e`	Brand navy — primary buttons, active states
`--primary-foreground`	`#ffffff`	Text on primary surfaces
`--secondary`	`#f3f5fa`	Light neutral — section backgrounds
`--secondary-foreground`	`#2a3a6e`	Text on secondary surfaces
`--accent`	`#007dc2`	Brand blue — focus rings, links
`--accent-foreground`	`#ffffff`	Text on accent surfaces
`--foreground`	`#1a2138`	Default body text (dark navy)
`--background`	`#ffffff`	Page background
`--muted`	`#f3f5fa`	Muted backgrounds
`--muted-foreground`	`#5b647d`	Secondary text, captions
`--border`	`#e2e5ee`	Default border color
`--input`	`#d9dde8`	Input field borders
`--ring`	`#007dc2`	Focus ring color
`--radius`	`0.625rem`	Base border radius

:root {
  color-scheme: light;
  --background: #ffffff;
  --foreground: #1a2138;
  --primary: #2a3a6e;
  --primary-foreground: #ffffff;
  --secondary: #f3f5fa;
  --secondary-foreground: #2a3a6e;
  --accent: #007dc2;
  --accent-foreground: #ffffff;
  --muted: #f3f5fa;
  --muted-foreground: #5b647d;
  --border: #e2e5ee;
  --input: #d9dde8;
  --ring: #007dc2;
  --radius: 0.625rem;
}

Typography

Fonts are loaded via next/font/google in app/layout.tsx and injected as CSS custom properties on the <html> element. The @theme inline block maps those properties to Tailwind font utility classes.

Role	Font Family	CSS Variable	Tailwind Class
Body text	Open Sans	`--font-open-sans`	`font-sans`
Headings	Open Sans	`--font-open-sans`	`font-heading`
Monospace / code	Geist Mono	`--font-geist-mono`	`font-mono`

Nunito is also loaded in layout.tsx (variable --font-nunito) and is available as a CSS custom property for components that want a rounder, more approachable display typeface for headings — Nunito communicates trust and professionalism with a softer character than condensed display fonts.

Heading elements (h1–h4) receive global base styles in app/globals.css:

@layer base {
  h1, h2, h3, h4 {
    @apply font-heading;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
}

Utility Class Reference

Tailwind v4 generates utility classes for every --color-* token registered in @theme inline. The five brand tokens produce the following class families:

bg-brand-navy        /* #2a3a6e */
bg-brand-blue        /* #007dc2 */
bg-brand-blue-dark   /* #155c98 */
bg-brand-lime        /* #abc42e */
bg-brand-gray        /* #c6c6c5 */

Background Pattern Utility

A custom @utility is defined for section backgrounds that need a subtle dot-grid texture, used throughout the site to add visual depth without heavy imagery:

@utility bg-grid-soft {
  background-image: radial-gradient(
    rgba(42, 58, 110, 0.06) 1px,
    transparent 1px
  );
  background-size: 22px 22px;
}

shadcn/ui Components

The following shadcn/ui components are installed and available under components/ui/. All are configured via components.json with the base-nova style preset and CSS variable theming.

Component	File	Primary Use
`accordion`	`components/ui/accordion.tsx`	Expandable content panels
`button`	`components/ui/button.tsx`	CTAs, form submissions, navigation actions
`card`	`components/ui/card.tsx`	Solution cards, insight cards, center cards
`checkbox`	`components/ui/checkbox.tsx`	Data consent checkbox in contact form
`dialog`	`components/ui/dialog.tsx`	Modal overlays
`input`	`components/ui/input.tsx`	Form text fields
`label`	`components/ui/label.tsx`	Accessible form labels
`select`	`components/ui/select.tsx`	Interest area dropdown in contact form
`sheet`	`components/ui/sheet.tsx`	Mobile navigation drawer
`sonner`	`components/ui/sonner.tsx`	Toast notifications (form feedback)
`textarea`	`components/ui/textarea.tsx`	Optional message field in contact form

The `cn()` Utility

All component files use the cn() function from lib/utils.ts to compose Tailwind class strings. It combines clsx (conditional class logic) with tailwind-merge (deduplication of conflicting Tailwind classes):

// lib/utils.ts
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Usage in a component:

// Conditional classes merge cleanly — no duplicate or conflicting utilities
<div className={cn(
  'rounded-lg border bg-card p-6',
  isActive && 'border-brand-blue bg-brand-blue/5',
  className
)} />

Dark mode is supported. The .dark selector in app/globals.css redefines the semantic tokens with darker background values (--background: #11162a), a lighter foreground (--foreground: #f4f6fb), and an adjusted primary (--primary: #4d7fd6). Brand colors like --accent (#007dc2) and --color-brand-lime remain unchanged in dark mode, preserving corporate identity. Dark mode is activated by toggling the dark class on a parent element, managed via next-themes.

Architecture

API & Integrations

Configuration & Deployment

GCS Design System: Colors, Typography, and Tokens

Corporate Color Palette

`@theme inline` Block

Semantic Tokens (`:root`)

Typography

Utility Class Reference

Background Pattern Utility

shadcn/ui Components

The `cn()` Utility

Build docs developers (and LLMs) love

Architecture

API & Integrations

Configuration & Deployment

Documentation Index

​Corporate Color Palette

​@theme inline Block

​Semantic Tokens (:root)

​Typography

​Utility Class Reference

​Background Pattern Utility

​shadcn/ui Components

​The cn() Utility

Build docs developers (and LLMs) love

Corporate Color Palette

`@theme inline` Block

Semantic Tokens (`:root`)

Typography

Utility Class Reference

Background Pattern Utility

shadcn/ui Components

The `cn()` Utility