Skip to main content

​
Overview

Proyecto Neptuno uses CSS custom properties (CSS variables) to define its color palette. This makes it easy to customize the entire color scheme by modifying values in a single location.

​
Color System

The color scheme is organized into three main categories:

​
Primary Colors

The brand colors that define the visual identity: 
--color-primario: #8B1D1D;    /* Granate Corporativo (el arco) */
--color-primario-claro: #A32A2A; /* Para hover y acentos secundarios */
--color-secundario: #B89D64;  /* Dorado Champán (otros acentos) */
--color-secundario-claro: #E5D1A4; /* Para hover y acentos secundarios */

​
Background Colors

Colors used for surfaces and layout backgrounds: 
--bg-principal: #FFFFFF;      /* Blanco Puro (limpieza visual) */
--bg-secundario: #F8F9FA;     /* Gris Humo (para separar secciones) */
--bg-footer: #1A1A1A;         /* Negro Carbón (cierre sólido) */

​
Text Colors

Colors for typography across different contexts: 
--texto-oscuro: #1A1A1A;      /* Títulos y párrafos importantes */
--texto-claro: #F5F5F5;       /* Texto sobre fondos oscuros (footer) */
--texto-muted: #6C757D;       /* Gris para detalles menos importantes */

​
How to Change Colors

1

Locate the style.css file

Open ~/workspace/source/style.css in your code editor.
2

Find the :root section

Scroll to the top of the file and locate the :root selector (around line 8). This is where all color variables are defined.
3

Modify the color values

Replace the hex color values with your desired colors. Make sure to keep the variable names the same.
:root {
    /* Your new primary color */
    --color-primario: #2E5090;    /* Navy Blue */
    --color-primario-claro: #4A6FA5;
    
    /* Your new secondary color */
    --color-secundario: #F4A261;  /* Warm Orange */
    --color-secundario-claro: #F6B98C;
}
4

Save and refresh

Save the file and refresh your browser to see the changes applied across the entire site.
All color variables use the -- prefix followed by a descriptive name. Changing these values will automatically update all components that use them.

​
Example Color Schemes

Here are some pre-designed color schemes you can use:

​
Ocean Blue Theme

:root {
    --color-primario: #006994;
    --color-primario-claro: #0088BB;
    --color-secundario: #47B5FF;
    --color-secundario-claro: #84D2FF;
    
    --bg-principal: #FFFFFF;
    --bg-secundario: #F0F8FF;
    --bg-footer: #002B3D;
    
    --texto-oscuro: #1A1A1A;
    --texto-claro: #F5F5F5;
    --texto-muted: #6C757D;
}

​
Forest Green Theme

:root {
    --color-primario: #2D5016;
    --color-primario-claro: #3D6A21;
    --color-secundario: #A0C334;
    --color-secundario-claro: #C5E86C;
    
    --bg-principal: #FFFFFF;
    --bg-secundario: #F4F7F0;
    --bg-footer: #1A2912;
    
    --texto-oscuro: #1A1A1A;
    --texto-claro: #F5F5F5;
    --texto-muted: #6C757D;
}

​
Sunset Purple Theme

:root {
    --color-primario: #6B2C91;
    --color-primario-claro: #8442A8;
    --color-secundario: #E76F51;
    --color-secundario-claro: #F4A590;
    
    --bg-principal: #FFFFFF;
    --bg-secundario: #FAF7FC;
    --bg-footer: #2B1138;
    
    --texto-oscuro: #1A1A1A;
    --texto-claro: #F5F5F5;
    --texto-muted: #6C757D;
}

​
Step-by-Step: Changing Brand Colors

Let’s walk through a complete example of rebranding with a new color scheme:
1

Choose your brand colors

Select a primary color (your main brand color) and a secondary/accent color. You can use tools like Adobe Color or Coolors to help pick complementary colors.
2

Generate color variations

Create lighter variations of your colors for hover states and accents. A good rule of thumb is to increase the lightness by 10-15% for the claro variants.
3

Update the CSS variables

Replace the values in style.css:Before:
--color-primario: #8B1D1D;
--color-primario-claro: #A32A2A;
After:
--color-primario: #FF6B35;  /* Your new primary color */
--color-primario-claro: #FF8C61;  /* Lighter variant */
4

Test across pages

Check different pages to ensure your colors work well:
  • Buttons and CTAs (.btn-primary)
  • Navigation and headers
  • Cards and sections (.landing-card, .gastro-card)
  • Form elements and focus states
5

Adjust if needed

Fine-tune your colors based on readability and contrast. Ensure text remains legible on all backgrounds.
When changing colors, always consider accessibility. Ensure sufficient contrast between text and background colors (minimum 4.5:1 ratio for normal text). Use tools like WebAIM Contrast Checker to verify.

​
Where Colors Are Used

Understanding where each color variable is applied helps you make informed customization decisions:
VariableUsage
--color-primarioPrimary buttons, borders, accents, bullet points
--color-primario-claroButton hover states, link hover
--color-secundarioLabels, secondary accents, decorative elements
--color-secundario-claroHero subtitle, secondary button hover
--bg-principalMain page background, cards
--bg-secundarioAlternating sections, form backgrounds
--bg-footerFooter background
--texto-oscuroHeadings, body text
--texto-claroText on dark backgrounds
--texto-mutedSupporting text, captions
Start by changing just the primary and secondary colors first. Test thoroughly before modifying background and text colors, as these have a broader impact on readability.

​
Next Steps

Customize Fonts

Learn how to change typography and fonts

Customize Layout

Adjust spacing, padding, and responsive breakpoints

Build docs developers (and LLMs) love

Get started for freeTalk to us