Skip to main content

​
Import

import { ColorV2 } from '@adoptaunabuelo/react-components';

​
Usage

// Surface colors
const primaryBg = ColorV2.surface.primary;
const softBg = ColorV2.surface.neutralSoft;

// Transparent overlays
const overlay = ColorV2.transparent.neutralHard;

// Border colors
const primaryBorder = ColorV2.border.primary;

// Text colors
const bodyText = ColorV2.text.neutralHard;
const linkText = ColorV2.text.primary;

​
Color Categories

​
Surface

Background and surface colors for UI elements.
PropertyValueDescription
neutralHigh#66839EMedium neutral blue-gray
neutralMedium#A6BACBLight neutral blue-gray
neutralLow#D8DFE5Very light neutral gray
neutralSoft#F0F3F6Extremely light neutral
background#F9F6F3Page background (warm white)
invert#FFFFFFWhite surface
primaryHard#00315CDark primary blue
primaryHigh#005AA8Medium dark primary blue
primary#008FF5Primary blue
primaryLow#93CCF5Light primary blue
primarySoft#ECF4FBVery light primary blue
secondaryHard#A25700Dark secondary orange
secondaryHigh#C76B00Medium dark secondary orange
secondary#FFAA47Secondary orange
secondarySoft#FFF6E5Light secondary orange
orange#FF773DAccent orange
brown#D6AA91Neutral brown
red#E02D2DError red
redMedium#FF5A5AMedium error red
redSoft#FFE5E5Light error red
greenHard#1A5B3CDark success green
green#08A85BSuccess green
greenMedium#7EE0B1Medium success green
greenSoft#E4F8EELight success green

​
Transparent

Semi-transparent colors for overlays and subtle effects.
PropertyValueDescription
neutralHardrgba(0, 29, 61, 0.92)Dark overlay (92% opacity)
neutralHighrgba(0, 29, 61, 0.56)Medium overlay (56% opacity)
neutralMediumrgba(0, 29, 61, 0.34)Light overlay (34% opacity)
neutralLowrgba(0, 29, 61, 0.24)Very light overlay (24% opacity)
neutralSoftrgba(0, 29, 61, 0.10)Subtle overlay (10% opacity)
invertHard#FFFFFFEBWhite overlay (92% opacity)
invertHigh#FFFFFF8FWhite overlay (56% opacity)
invertMedium#FFFFFF5CWhite overlay (36% opacity)
invertLow#FFFFFF47White overlay (28% opacity)
invertSoft#FFFFFF1FWhite overlay (12% opacity)

​
Border

Border and divider colors.
PropertyValueDescription
neutralHard#001D3DEBDark border (92% opacity)
neutralHigh#00315C8FMedium dark border (56% opacity)
neutralMedium#00315C57Medium border (34% opacity)
neutral#00315C24Light border (14% opacity)
neutralSoft#00315C1AVery light border (10% opacity)
invert#FFFFFFWhite border
invertSoft#FFFFFF33White border (20% opacity)
primary#008FF5Primary blue border
primarySoft#D3E5F5Light primary border
secondary#FFAA47Secondary orange border
secondarySoft#FFD5A3Light secondary border
orange#FF773DOrange border
red#E02D2DError red border
redSoft#F5CFCFLight error border
green#08A85BSuccess green border
greenSoft#B2EBD0Light success border

​
Text

Text and icon colors.
PropertyValueDescription
neutralHardrgba(0, 29, 61, 0.92)Primary body text (92% opacity)
neutralMediumrgba(0, 29, 61, 0.56)Secondary text (56% opacity)
neutralSoftrgba(0, 29, 61, 0.24)Disabled text (24% opacity)
invert#FFFFFFWhite text
invertHigh#FFFFFFADWhite text (68% opacity)
invertMedium#FFFFFF75White text (46% opacity)
invertSoft#FFFFFF47White text (28% opacity)
primary#008FF5Primary blue text
orange#FF773DOrange text
redHard#701E09Dark error text
red#E02D2DError red text
greenHard#1A5B3CDark success text
green#08A85BSuccess green text

​
Examples

​
Modern Button

import { ColorV2 } from '@adoptaunabuelo/react-components';
import styled from 'styled-components';

const PrimaryButton = styled.button`
  background-color: ${ColorV2.surface.primary};
  color: ${ColorV2.text.invert};
  border: 1px solid ${ColorV2.border.primary};
  padding: 12px 24px;
  border-radius: 8px;
  
  &:hover {
    background-color: ${ColorV2.surface.primaryHigh};
  }
  
  &:disabled {
    background-color: ${ColorV2.surface.neutralSoft};
    color: ${ColorV2.text.neutralSoft};
    border-color: ${ColorV2.border.neutralSoft};
  }
`;

​
Card with Overlay

import { ColorV2 } from '@adoptaunabuelo/react-components';

const Card = styled.div`
  background-color: ${ColorV2.surface.invert};
  border: 1px solid ${ColorV2.border.neutralSoft};
  border-radius: 12px;
  padding: 24px;
  position: relative;
`;

const Overlay = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: ${ColorV2.transparent.neutralHard};
  border-radius: 12px;
`;

​
Status Messages

import { ColorV2 } from '@adoptaunabuelo/react-components';

const SuccessMessage = styled.div`
  background-color: ${ColorV2.surface.greenSoft};
  color: ${ColorV2.text.greenHard};
  border: 1px solid ${ColorV2.border.green};
  padding: 16px;
  border-radius: 8px;
`;

const ErrorMessage = styled.div`
  background-color: ${ColorV2.surface.redSoft};
  color: ${ColorV2.text.redHard};
  border: 1px solid ${ColorV2.border.red};
  padding: 16px;
  border-radius: 8px;
`;

const WarningMessage = styled.div`
  background-color: ${ColorV2.surface.secondarySoft};
  color: ${ColorV2.text.orange};
  border: 1px solid ${ColorV2.border.secondary};
  padding: 16px;
  border-radius: 8px;
`;

​
Typography System

import { ColorV2 } from '@adoptaunabuelo/react-components';

const Title = styled.h1`
  color: ${ColorV2.text.neutralHard};
  font-weight: 600;
`;

const BodyText = styled.p`
  color: ${ColorV2.text.neutralMedium};
  line-height: 1.6;
`;

const Caption = styled.span`
  color: ${ColorV2.text.neutralSoft};
  font-size: 12px;
`;

const Link = styled.a`
  color: ${ColorV2.text.primary};
  text-decoration: none;
  
  &:hover {
    text-decoration: underline;
  }
`;

​
Form Elements

import { ColorV2 } from '@adoptaunabuelo/react-components';

const Input = styled.input`
  background-color: ${ColorV2.surface.invert};
  border: 1px solid ${ColorV2.border.neutralSoft};
  color: ${ColorV2.text.neutralHard};
  padding: 12px;
  border-radius: 8px;
  
  &:focus {
    outline: none;
    border-color: ${ColorV2.border.primary};
    box-shadow: 0 0 0 3px ${ColorV2.transparent.neutralSoft};
  }
  
  &::placeholder {
    color: ${ColorV2.text.neutralSoft};
  }
  
  &:disabled {
    background-color: ${ColorV2.surface.neutralSoft};
    color: ${ColorV2.text.neutralSoft};
  }
`;

​
Design System Benefits

ColorV2 provides:
  • Semantic naming for better code readability
  • Consistent opacity values for transparent colors
  • Complete color scales for neutral, primary, and secondary colors
  • Success/error states with multiple shades
  • Better accessibility with defined contrast ratios
  • Modern color palette aligned with current design trends

Build docs developers (and LLMs) love

Get started for freeTalk to us