Color System
Primary Colors
The primary colors for Greenwave Projects reflect our commitment to sustainability, professionalism, and reliability. Forest Green serves as the main brand color for headers and footer, Medium Olive for buttons and accents, and Pale Green for backgrounds and cards.
Legacy Colors
These colors are maintained for backward compatibility with existing components. New development should use the primary and neutral color palettes.
Neutral Colors
Our neutral color palette provides the foundation for layouts and ensures optimal readability across all content. Charcoal is used for primary text, Taupe for secondary text, Light Beige for subtle background areas, and Off-White for main content backgrounds.
Accent Colors
Accent colors are used to highlight and emphasize important elements within the design. Earth Brown, Sky Blue, and Terracotta provide a range of options for creating visual interest.
Functional Colors
These colors convey specific meanings related to functionality, status, or alerts within the interface. Success colors for positive outcomes, Warning for notifications that need attention, Error for issues that need immediate attention, and Inactive for disabled elements.
Color Usage Guidelines
Text Colors
Use Charcoal (#333333) for primary text content
Use Taupe (#5F5B53) for secondary text content
Use Deep Forest Green (#1A5336) for links and emphasis
Use White (#FFFFFF) for text on dark backgrounds
Background Colors
Use White (#FFFFFF) as the primary background color
Use Off-White (#FDFCF9) for content backgrounds
Use Light Beige (#F5F2EA) for alternating sections and light backgrounds
Use Pale Green (#C5D0B1) for highlight sections and card borders
Use Forest Green (#1A5336) for headers, footer background
Button Colors
Use Medium Olive (#7D9665) for primary buttons and call-to-actions
Use Forest Green (#1A5336) for primary button hover states
Use Off-White with Medium Olive border for secondary buttons
Use Pale Green (#C5D0B1) for secondary button hover states
Use Inactive (#BCBCB6) for disabled buttons
Accessibility
Ensure all color combinations meet WCAG 2.1 AA standards with a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Always use color as an enhancement, not as the sole means of conveying information.
Functional Color Usage
Use functional colors consistently for their intended purpose:
Success (#70A86B) for success messages and completed states
Warning (#DBA858) for warnings and notifications
Error (#C35A52) for error states and critical alerts
Inactive (#BCBCB6) for disabled states and inactive elements
Color in Context
Project Showcase
Our portfolio demonstrates our commitment to quality and attention to detail across all projects.
Project Highlight
Amen Lodge, St Pauls - A complex refurbishment project delivered on time and under budget.
Primary Color Usage
Forest Green serves as our primary brand color for headers and footer.
This section demonstrates the Forest Green color with white text for strong contrast.
Light Background Usage
Light Beige provides a subtle, natural background that complements our green palette.
This section demonstrates how neutral colors work together for a cohesive look.
Medium Olive Accent Example
Medium Olive can be used for highlighting important information or creating visual interest in specific UI components like buttons and accents.