Nettalco Brand Color Palettes and Semantic Token Roles

Nettalco Theme ships five fully custom primitive color palettes built around Nettalco’s brand guidelines, plus the standard neutral and error palettes inherited from Aura. Each custom palette provides an 11-step scale from 50 (near-white) to 950 (near-black), giving component tokens a wide range of tonal options. This page catalogs every swatch and shows how each palette maps to PrimeNG’s semantic color roles in both light and dark mode.

Custom Brand Palettes

nettalcoPrimary — Navy (`#112A46`)

The primary brand color anchors the most prominent interactive elements: primary buttons, focus rings, active navigation items, and the highlight state.

Shade	Hex	Preview
50	`#EDF4FF`	Very light blue-white
100	`#D7E3FB`	Light periwinkle
200	`#B4D3FD`	Soft sky blue
300	`#5A9FFC`	Medium cornflower
400	`#336DD9`	Strong blue
500	`#112A46`	Brand anchor — Navy
600	`#0A1D49`	Deep midnight navy
700	`#1F498E`	Dark royal blue
800	`#2B5DA1`	Steel blue
900	`#22436F`	Dark slate blue
950	`#0C3D5C`	Darkest teal-navy

nettalcoSecondary — Sky Blue (`#3F8CF9`)

Used for secondary actions, accent highlights, and supporting UI elements that complement the primary navy.

Shade	Hex	Preview
50	`#EEF4FF`	Near-white blue
100	`#CAD8F1`	Pale blue-grey
200	`#ABC9F9`	Light cornflower
300	`#7CB2FA`	Medium sky blue
400	`#5A9FFC`	Bright cornflower
500	`#3F8CF9`	Brand anchor — Sky Blue
600	`#5398F8`	Mid royal blue
700	`#3A72E0`	Strong cobalt
800	`#2B5FBC`	Dark cobalt
900	`#1F498E`	Navy blue
950	`#0C3D5C`	Darkest teal-navy

nettalcoSuccess — Cyan (`#2BA5CD`)

Applied to success states, confirmation messages, export actions, and positive feedback indicators.

Shade	Hex	Preview
50	`#D6E5FA`	Pale blue
100	`#8CC3D7`	Muted cyan
200	`#6ECBCD`	Soft teal-cyan
300	`#45B1CE`	Medium cyan
400	`#3CAAC8`	Bright teal
500	`#2BA5CD`	Brand anchor — Cyan
600	`#19819D`	Muted steel cyan
700	`#0C566F`	Dark teal
800	`#0C3D5C`	Deep teal-navy
900	`#09718A`	Dark cyan
950	`#0A1D49`	Darkest navy

nettalcoWarn — Orange (`#D57952`)

Used for warning states, caution messages, and situations requiring user attention without indicating failure.

Shade	Hex	Preview
50	`#FEF3E2`	Cream
100	`#E4DBE7`	Pale lavender-peach
200	`#F4B33C`	Warm amber
300	`#F2A61E`	Golden yellow
400	`#DE956A`	Peach-orange
500	`#D57952`	Brand anchor — Orange
600	`#D78158`	Warm terracotta
700	`#CA8825`	Dark amber
800	`#9D6A2D`	Brown-orange
900	`#7D5423`	Dark caramel
950	`#5C3E1A`	Very dark brown

nettalcoInfo — Blue Info (`#66A6FB`)

Applied to informational messages, tooltips, and non-critical notifications that communicate context without urgency.

Shade	Hex	Preview
50	`#EDF4FF`	Near-white blue
100	`#B4D3FD`	Light powder blue
200	`#ABC9F9`	Soft cornflower
300	`#7CB2FA`	Medium sky blue
400	`#69A7ED`	Periwinkle
500	`#66A6FB`	Brand anchor — Blue Info
600	`#5389DB`	Mid cobalt
700	`#4775BF`	Medium-dark blue
800	`#40609B`	Steel blue
900	`#336DD9`	Strong blue
950	`#0C3D5C`	Darkest teal-navy

Standard Inherited Palettes

The following palettes are inherited from the Aura base and remain available for component-level and utility use:

Standard palettes included from Aura base

Palette	500 Anchor
`emerald`	`#10b981`
`green`	`#22c55e`
`lime`	`#84cc16`
`red`	`#ef4444` — used for `error` semantic role
`orange`	`#f97316`
`amber`	`#f59e0b`
`yellow`	`#eab308`
`teal`	`#14b8a6`
`cyan`	`#06b6d4`
`sky`	`#0ea5e9`
`blue`	`#3b82f6`
`indigo`	`#6366f1`
`violet`	`#8b5cf6`
`purple`	`#a855f7`
`fuchsia`	`#d946ef`
`pink`	`#ec4899`
`rose`	`#f43f5e`
`slate`	`#64748b` — used for light surface
`gray`	`#6b7280`
`zinc`	`#71717a`
`neutral`	`#737373`
`stone`	`#78716c`

Semantic Color Role Mapping

The following table shows how each semantic role resolves to an actual color in light and dark mode:

Role	Light Mode Color	Light Hex	Dark Mode Color	Dark Hex
Primary	`{primary.500}`	`#112A46`	`{primary.50}`	`#EDF4FF`
Success	`{success.500}`	`#2BA5CD`	`{success.200}`	`#6ECBCD`
Info	`{info.500}`	`#66A6FB`	`{info.400}`	`#69A7ED`
Warning	`{warn.500}`	`#D57952`	`{warn.200}`	`#F4B33C`
Error	`{error.500}`	`#ef4444`	`{error.400}`	`#f87171`
Secondary	`{nettalcoSecondary.500}`	`#3F8CF9`	`{nettalcoSecondary.700}`	`#3A72E0`

Dark mode colors are selected to maintain WCAG AA contrast ratios on Nettalco Theme’s custom dark-blue surface scale. Primary inverts completely — the very-light #EDF4FF becomes the foreground color against the dark navy background.

Surface Palettes

Light Mode Surface (Slate Scale)

In light mode, surfaces use the standard slate scale for a clean, neutral hierarchy:

Token	Value
`surface.0`	`#ffffff`
`surface.50`	`#f8fafc`
`surface.100`	`#f1f5f9`
`surface.200`	`#e2e8f0`
`surface.300`	`#cbd5e1`
`surface.400`	`#94a3b8`
`surface.500`	`#64748b`
`surface.600`	`#475569`
`surface.700`	`#334155`
`surface.800`	`#1e293b`
`surface.900`	`#0f172a`
`surface.950`	`#020617`

Dark Mode Surface (Custom Dark-Blue Scale)

Nettalco Theme’s dark surface palette is a custom dark-blue scale, not the zinc gray used by Aura’s default dark theme. This preserves the brand’s blue identity even in dark mode.

Token	Value	Description
`surface.0`	`#f0f5fb`	Near-white blue
`surface.50`	`#c8d8ea`	Light steel blue
`surface.100`	`#8fa8c4`	Muted blue-grey
`surface.200`	`#5a7a9e`	Medium slate-blue
`surface.300`	`#3d5a7e`	Dark steel blue
`surface.400`	`#2e476d`	Deep blue
`surface.500`	`#253a5e`	Main content bg
`surface.600`	`#1c2f50`	Elevated surface
`surface.700`	`#152540`	Card background
`surface.800`	`#0f1e35`	Page background
`surface.900`	`#0a1628`	Deep background
`surface.950`	`#060d1a`	Darkest layer

Get Started

Theming

Publishing

Nettalco Brand Color Palettes and Semantic Token Roles

Custom Brand Palettes

nettalcoPrimary — Navy (`#112A46`)

nettalcoSecondary — Sky Blue (`#3F8CF9`)

nettalcoSuccess — Cyan (`#2BA5CD`)

nettalcoWarn — Orange (`#D57952`)

nettalcoInfo — Blue Info (`#66A6FB`)

Standard Inherited Palettes

Semantic Color Role Mapping

Surface Palettes

Light Mode Surface (Slate Scale)

Dark Mode Surface (Custom Dark-Blue Scale)

Build docs developers (and LLMs) love

Get Started

Theming

Publishing

Documentation Index

​Custom Brand Palettes

​nettalcoPrimary — Navy (#112A46)

​nettalcoSecondary — Sky Blue (#3F8CF9)

​nettalcoSuccess — Cyan (#2BA5CD)

​nettalcoWarn — Orange (#D57952)

​nettalcoInfo — Blue Info (#66A6FB)

​Standard Inherited Palettes

​Semantic Color Role Mapping

​Surface Palettes

​Light Mode Surface (Slate Scale)

​Dark Mode Surface (Custom Dark-Blue Scale)

Build docs developers (and LLMs) love

Custom Brand Palettes

nettalcoPrimary — Navy (`#112A46`)

nettalcoSecondary — Sky Blue (`#3F8CF9`)

nettalcoSuccess — Cyan (`#2BA5CD`)

nettalcoWarn — Orange (`#D57952`)

nettalcoInfo — Blue Info (`#66A6FB`)

Standard Inherited Palettes

Semantic Color Role Mapping

Surface Palettes

Light Mode Surface (Slate Scale)

Dark Mode Surface (Custom Dark-Blue Scale)