Variable CIA_COMPONENT_COLORS`Const`

CIA_COMPONENT_COLORS: {
    CONFIDENTIALITY: { PRIMARY: string; SECONDARY: string; DARK: string };
    INTEGRITY: { PRIMARY: string; SECONDARY: string; DARK: string };
    AVAILABILITY: { PRIMARY: string; SECONDARY: string; DARK: string };
} = ...

Color schemes for CIA triad components with enhanced distinctiveness.

Each CIA component has a unique color palette to aid visual recognition:

Confidentiality (Orange): Represents data privacy and access control
Integrity (Green): Represents data accuracy and validation
Availability (Blue): Represents uptime and system accessibility

Each palette includes PRIMARY, SECONDARY (light), and DARK variants to support different design contexts and dark mode compatibility.

Type Declaration

CONFIDENTIALITY: { PRIMARY: string; SECONDARY: string; DARK: string }
INTEGRITY: { PRIMARY: string; SECONDARY: string; DARK: string }
AVAILABILITY: { PRIMARY: string; SECONDARY: string; DARK: string }

Example

// Use confidentiality colors in a component
const colors = CIA_COMPONENT_COLORS.CONFIDENTIALITY;

<Card 
  style={{
    borderLeft: `4px solid ${colors.PRIMARY}`,
    backgroundColor: colors.SECONDARY
  }}
>
  <Icon color={colors.DARK} />
  Confidentiality Settings
</Card>

Example

// Create a gradient effect
const gradient = `linear-gradient(135deg, 
  ${CIA_COMPONENT_COLORS.INTEGRITY.SECONDARY}, 
  ${CIA_COMPONENT_COLORS.INTEGRITY.PRIMARY})`;

Variable CIA_COMPONENT_COLORSConst

Type Declaration

CONFIDENTIALITY: { PRIMARY: string; SECONDARY: string; DARK: string }

INTEGRITY: { PRIMARY: string; SECONDARY: string; DARK: string }

AVAILABILITY: { PRIMARY: string; SECONDARY: string; DARK: string }

Example

Example

Settings

Variable CIA_COMPONENT_COLORS`Const`