This website use cookies to ensure you get the best experience on our website
</p> <p><!DOCTYPE html></p> <p><html lang="en"></p> <p><head></p> <p> <meta charset="UTF-8"></p> <p> <title>Color Palette Guidance</title></p> <p> <style></p> <p> body {</p> <p> font-family: sans-serif;</p> <p> margin: 20px;</p> <p> background: #fafafa;</p> <p> color: #333;</p> <p> }</p> <p> header {</p> <p> margin-bottom: 20px;</p> <p> }</p> <p> h1, h2, h3 {</p> <p> margin: 0 0 10px;</p> <p> }</p> <p> select {</p> <p> font-size: 16px;</p> <p> padding: 4px 8px;</p> <p> }</p> <p> .palette {</p> <p> display: none;</p> <p> margin-bottom: 40px;</p> <p> }</p> <p> .palette.active {</p> <p> display: block;</p> <p> }</p> <p> .category {</p> <p> margin-bottom: 30px;</p> <p> }</p> <p> .category h3 {</p> <p> margin-bottom: 10px;</p> <p> border-bottom: 1px solid #ccc;</p> <p> padding-bottom: 4px;</p> <p> }</p> <p> .color-item {</p> <p> display: inline-block;</p> <p> margin: 8px;</p> <p> text-align: center;</p> <p> vertical-align: top;</p> <p> width: 160px;</p> <p> }</p> <p> .color-box {</p> <p> width: 160px;</p> <p> height: 100px;</p> <p> padding: 5px;</p> <p> box-sizing: border-box;</p> <p> border-radius: 4px;</p> <p> font-size: 12px;</p> <p> line-height: 1.2;</p> <p> }</p> <p> .caption {</p> <p> margin-top: 4px;</p> <p> font-size: 12px;</p> <p> word-wrap: break-word;</p> <p> }</p> <p> </style></p> <p></head></p> <p><body></p> <p> <h1>Color Palette Guidance</h1></p> <p> <header></p> <p> <label for="paletteSelect">Select Palette: </label></p> <p> <select id="paletteSelect"></p> <p> <option value="minimal">Minimal Palette</option></p> <p> <option value="soft">Soft Palette</option></p> <p> <option value="autumn">Autumn Palette</option></p> <p> <option value="forest">Forest Palette</option></p> <p> <option value="bold">Bold Palette</option></p> <p> <option value="grey">Grey Palette</option></p> <p> <option value="darkmode">Dark Mode Palette</option></p> <p> <option value="ocean">Ocean Palette</option></p> <p> </select></p> <p> </header></p> <p> <!-- ================= Minimal Palette ================= --></p> <p> <div id="palette-minimal" class="palette active"></p> <p> <h2>Minimal Palette</h2></p> <p> <!-- Text Colors --></p> <p> <section class="category"></p> <p> <h3>Text Colors</h3></p> <p> <!-- Primary Content Text --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #333333; color: #333333; border: 1px solid #333333;"></p> <p> Primary Content Text<br></p> <p> Fill: #333333<br></p> <p> Font: #333333</p> <p> </div></p> <p> </div></p> <p> <!-- Secondary Content Text --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #6E7A8A; color: #6E7A8A; border: 1px solid #6E7A8A;"></p> <p> Secondary Content Text<br></p> <p> Fill: #6E7A8A<br></p> <p> Font: #6E7A8A</p> <p> </div></p> <p> </div></p> <p> <!-- Swimlane Text --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #333333; color: #333333; border: 1px solid #333333;"></p> <p> Swimlane Text<br></p> <p> Fill: #333333<br></p> <p> Font: #333333</p> <p> </div></p> <p> </div></p> <p> <!-- Bar Text (Dark Bar) --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #333333; color: #FFFFFF; border: 1px solid #333333;"></p> <p> Bar Text (Dark Bar)<br></p> <p> Fill: #333333<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <!-- Bar Text (Light Bar) --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; color: #333333; border: 1px solid #FFFFFF;"></p> <p> Bar Text (Light Bar)<br></p> <p> Fill: #FFFFFF<br></p> <p> Font: #333333</p> <p> </div></p> <p> </div></p> <p> <!-- Group Text --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #333333; color: #333333; border: 1px solid #333333;"></p> <p> Group Text<br></p> <p> Fill: #333333<br></p> <p> Font: #333333</p> <p> </div></p> <p> </div></p> <p> </section></p> <p> <!-- Background/Fill Colors --></p> <p> <section class="category"></p> <p> <h3>Background/Fill Colors</h3></p> <p> <!-- Main Background --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; border: 1px solid #FFFFFF;"></div></p> <p> <div class="caption">Main Background<br>Fill: #FFFFFF</div></p> <p> </div></p> <p> <!-- Secondary Background --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F5F7FA; border: 1px solid #F5F7FA;"></div></p> <p> <div class="caption">Secondary Background<br>Fill: #F5F7FA</div></p> <p> </div></p> <p> <!-- Project Pane Background --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; border: 1px solid #FFFFFF;"></div></p> <p> <div class="caption">Project Pane Background<br>Fill: #FFFFFF</div></p> <p> </div></p> <p> <!-- Project Pane Alternate Row --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F5F7FA; border: 1px solid #F5F7FA;"></div></p> <p> <div class="caption">Project Pane Alt Row<br>Fill: #F5F7FA</div></p> <p> </div></p> <p> <!-- Swimlane Background --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; border: 1px solid #FFFFFF;"></div></p> <p> <div class="caption">Swimlane Background<br>Fill: #FFFFFF</div></p> <p> </div></p> <p> <!-- Swimlane Alternate Background --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F5F7FA; border: 1px solid #F5F7FA;"></div></p> <p> <div class="caption">Swimlane Alt Background<br>Fill: #F5F7FA</div></p> <p> </div></p> <p> <!-- Swimlane Border --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E0E4E8; border: 1px solid #E0E4E8;"></div></p> <p> <div class="caption">Swimlane Border<br>Fill: #E0E4E8</div></p> <p> </div></p> <p> <!-- Group Background --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F0F4F8; border: 1px solid #F0F4F8;"></div></p> <p> <div class="caption">Group Background<br>Fill: #F0F4F8</div></p> <p> </div></p> <p> <!-- Group Alternate Background --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E6EEF3; border: 1px solid #E6EEF3;"></div></p> <p> <div class="caption">Group Alt Background<br>Fill: #E6EEF3</div></p> <p> </div></p> <p> <!-- Group Border --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #D0D9E3; border: 1px solid #D0D9E3;"></div></p> <p> <div class="caption">Group Border<br>Fill: #D0D9E3</div></p> <p> </div></p> <p> <!-- Bar Fill Colors & Outline Colors --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4682B4; border: 2px solid #36658D; color: #FFFFFF;"></p> <p> Bar 1<br></p> <p> Fill: #4682B4<br></p> <p> Outline: #36658D</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #EA3525; border: 2px solid #C12815; color: #FFFFFF;"></p> <p> Bar 2<br></p> <p> Fill: #EA3525<br></p> <p> Outline: #C12815</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #7FA7C9; border: 2px solid #6389A8; color: #FFFFFF;"></p> <p> Bar 3<br></p> <p> Fill: #7FA7C9<br></p> <p> Outline: #6389A8</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFD700; border: 2px solid #DAB500; color: #333333;"></p> <p> Bar 4<br></p> <p> Fill: #FFD700<br></p> <p> Outline: #DAB500</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #AEDB9F; border: 2px solid #89B77C; color: #333333;"></p> <p> Bar 5<br></p> <p> Fill: #AEDB9F<br></p> <p> Outline: #89B77C</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #D3C0D3; border: 2px solid #B4A5B4; color: #333333;"></p> <p> Bar 6<br></p> <p> Fill: #D3C0D3<br></p> <p> Outline: #B4A5B4</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F2B6AC; border: 2px solid #D3948A; color: #333333;"></p> <p> Bar 7<br></p> <p> Fill: #F2B6AC<br></p> <p> Outline: #D3948A</p> <p> </div></p> <p> </div></p> <p> <!-- Grid Colors --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; border: 1px solid #FFFFFF;"></div></p> <p> <div class="caption">Grid Background<br>Fill: #FFFFFF</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F5F7FA; border: 1px solid #F5F7FA;"></div></p> <p> <div class="caption">Grid Alt Row<br>Fill: #F5F7FA</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E0E4E8; border: 1px solid #E0E4E8;"></div></p> <p> <div class="caption">Grid Lines<br>Fill: #E0E4E8</div></p> <p> </div></p> <p> </section></p> <p> <!-- Interactive Elements --></p> <p> <section class="category"></p> <p> <h3>Interactive Elements</h3></p> <p> <!-- Primary Button --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4682B4; color: #FFFFFF; border: 1px solid #4682B4;"></p> <p> Primary Button<br></p> <p> Fill: #4682B4<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <!-- Secondary Button --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #7FA7C9; color: #FFFFFF; border: 1px solid #7FA7C9;"></p> <p> Secondary Button<br></p> <p> Fill: #7FA7C9<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <!-- Accent Button --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #EA3525; color: #FFFFFF; border: 1px solid #EA3525;"></p> <p> Accent Button<br></p> <p> Fill: #EA3525<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <!-- Link Color (Note: hover color is noted in caption) --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4682B4; border: 1px solid #4682B4;"></p> <p> Link Color<br></p> <p> Fill: #4682B4<br></p> <p> Hover: #356590</p> <p> </div></p> <p> </div></p> <p> </section></p> <p> <!-- System Status Colors --></p> <p> <section class="category"></p> <p> <h3>System Status Colors</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4CAF50; border: 1px solid #4CAF50;"></p> <p> Success<br></p> <p> Fill: #4CAF50</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FF9800; border: 1px solid #FF9800;"></p> <p> Warning<br></p> <p> Fill: #FF9800</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #EA3525; border: 1px solid #EA3525;"></p> <p> Error<br></p> <p> Fill: #EA3525</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #2196F3; border: 1px solid #2196F3;"></p> <p> Info<br></p> <p> Fill: #2196F3</p> <p> </div></p> <p> </div></p> <p> </section></p> <p> <!-- Form Elements --></p> <p> <section class="category"></p> <p> <h3>Form Elements</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; border: 1px solid #E0E4E8;"></div></p> <p> <div class="caption">Input Background<br>Fill: #FFFFFF</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E0E4E8; border: 1px solid #E0E4E8;"></div></p> <p> <div class="caption">Input Border<br>Fill: #E0E4E8</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #333333; color: #333333; border: 1px solid #333333;"></p> <p> Input Text<br></p> <p> Fill: #333333</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #9AA5B1; border: 1px solid #9AA5B1;"></div></p> <p> <div class="caption">Input Placeholder<br>Fill: #9AA5B1</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4682B4; border: 1px solid #4682B4;"></div></p> <p> <div class="caption">Input Focus Border<br>Fill: #4682B4</div></p> <p> </div></p> <p> </section></p> <p> <!-- Selection/State --></p> <p> <section class="category"></p> <p> <h3>Selection/State</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #EBF2F8; border: 1px solid #EBF2F8;"></div></p> <p> <div class="caption">Selected Item Background<br>Fill: #EBF2F8</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #333333; color: #333333; border: 1px solid #333333;"></p> <p> Selected Item Text<br></p> <p> Fill: #333333</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F8FAFC; border: 1px solid #F8FAFC;"></div></p> <p> <div class="caption">Hover State Background<br>Fill: #F8FAFC</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #CCCCCC; border: 1px solid #CCCCCC;"></div></p> <p> <div class="caption">Disabled State<br>Fill: #CCCCCC</div></p> <p> </div></p> <p> </section></p> <p> <!-- Dividers/Structural Elements --></p> <p> <section class="category"></p> <p> <h3>Dividers/Structural Elements</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E0E4E8; border: 1px solid #E0E4E8;"></div></p> <p> <div class="caption">Divider Color<br>Fill: #E0E4E8</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; border: 1px solid #E0E4E8;"></div></p> <p> <div class="caption">Card/Container Background<br>Fill: #FFFFFF</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E0E4E8; border: 1px solid #E0E4E8;"></div></p> <p> <div class="caption">Card Border<br>Fill: #E0E4E8</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.1);"></div></p> <p> <div class="caption">Shadow Color<br>Fill: rgba(0,0,0,0.1)</div></p> <p> </div></p> <p> </section></p> <p> </div></p> <p> <!-- ================= End Minimal Palette ================= --></p> <p> <!-- ================= Soft Palette ================= --></p> <p> <div id="palette-soft" class="palette"></p> <p> <h2>Soft Palette</h2></p> <p> <!-- Text Colors --></p> <p> <section class="category"></p> <p> <h3>Text Colors</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #3D454D; color: #3D454D; border: 1px solid #3D454D;"></p> <p> Primary Content Text<br></p> <p> Fill: #3D454D<br></p> <p> Font: #3D454D</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #7A8690; color: #7A8690; border: 1px solid #7A8690;"></p> <p> Secondary Content Text<br></p> <p> Fill: #7A8690<br></p> <p> Font: #7A8690</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #3D454D; color: #3D454D; border: 1px solid #3D454D;"></p> <p> Swimlane Text<br></p> <p> Fill: #3D454D<br></p> <p> Font: #3D454D</p> <p> </div></p> <p> </div></p> <p> <!-- Bar Text (only one variant) --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; color: #FFFFFF; border: 1px solid #FFFFFF;"></p> <p> Bar Text<br></p> <p> Fill: #FFFFFF<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #3D454D; color: #3D454D; border: 1px solid #3D454D;"></p> <p> Group Text<br></p> <p> Fill: #3D454D<br></p> <p> Font: #3D454D</p> <p> </div></p> <p> </div></p> <p> </section></p> <p> <!-- Background/Fill Colors --></p> <p> <section class="category"></p> <p> <h3>Background/Fill Colors</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F8F9FB; border: 1px solid #F8F9FB;"></div></p> <p> <div class="caption">Main Background<br>Fill: #F8F9FB</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F0F2F5; border: 1px solid #F0F2F5;"></div></p> <p> <div class="caption">Secondary Background<br>Fill: #F0F2F5</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F8F9FB; border: 1px solid #F8F9FB;"></div></p> <p> <div class="caption">Project Pane Background<br>Fill: #F8F9FB</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F0F2F5; border: 1px solid #F0F2F5;"></div></p> <p> <div class="caption">Project Pane Alt Row<br>Fill: #F0F2F5</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E8EEF4; border: 1px solid #E8EEF4;"></div></p> <p> <div class="caption">Swimlane Background<br>Fill: #E8EEF4</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #EDF3F8; border: 1px solid #EDF3F8;"></div></p> <p> <div class="caption">Swimlane Alt Background<br>Fill: #EDF3F8</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #D1DBE6; border: 1px solid #D1DBE6;"></div></p> <p> <div class="caption">Swimlane Border<br>Fill: #D1DBE6</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #DCE6F1; border: 1px solid #DCE6F1;"></div></p> <p> <div class="caption">Group Background<br>Fill: #DCE6F1</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E8EFF7; border: 1px solid #E8EFF7;"></div></p> <p> <div class="caption">Group Alt Background<br>Fill: #E8EFF7</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #C5D4E3; border: 1px solid #C5D4E3;"></div></p> <p> <div class="caption">Group Border<br>Fill: #C5D4E3</div></p> <p> </div></p> <p> <!-- Bar Fill Colors --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #A6C0D7; border: 2px solid #8AA2B7; color: #FFFFFF;"></p> <p> Bar 1<br></p> <p> Fill: #A6C0D7<br></p> <p> Outline: #8AA2B7</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F19A8E; border: 2px solid #D08177; color: #FFFFFF;"></p> <p> Bar 2<br></p> <p> Fill: #F19A8E<br></p> <p> Outline: #D08177</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #BDCCB1; border: 2px solid #9FAD95; color: #FFFFFF;"></p> <p> Bar 3<br></p> <p> Fill: #BDCCB1<br></p> <p> Outline: #9FAD95</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E9C7C7; border: 2px solid #C8AAAA; color: #FFFFFF;"></p> <p> Bar 4<br></p> <p> Fill: #E9C7C7<br></p> <p> Outline: #C8AAAA</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #D1C1D9; border: 2px solid #B3A5BA; color: #FFFFFF;"></p> <p> Bar 5<br></p> <p> Fill: #D1C1D9<br></p> <p> Outline: #B3A5BA</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F2D9A2; border: 2px solid #CFBA89; color: #FFFFFF;"></p> <p> Bar 6<br></p> <p> Fill: #F2D9A2<br></p> <p> Outline: #CFBA89</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #B3D1D9; border: 2px solid #95B2B9; color: #FFFFFF;"></p> <p> Bar 7<br></p> <p> Fill: #B3D1D9<br></p> <p> Outline: #95B2B9</p> <p> </div></p> <p> </div></p> <p> <!-- Grid Colors --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F8F9FB; border: 1px solid #F8F9FB;"></div></p> <p> <div class="caption">Grid Background<br>Fill: #F8F9FB</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F0F2F5; border: 1px solid #F0F2F5;"></div></p> <p> <div class="caption">Grid Alt Row<br>Fill: #F0F2F5</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #DCE0E5; border: 1px solid #DCE0E5;"></div></p> <p> <div class="caption">Grid Lines<br>Fill: #DCE0E5</div></p> <p> </div></p> <p> </section></p> <p> <!-- Interactive Elements --></p> <p> <section class="category"></p> <p> <h3>Interactive Elements</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #80A4C2; color: #FFFFFF; border: 1px solid #80A4C2;"></p> <p> Primary Button<br></p> <p> Fill: #80A4C2<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #A6C0D7; color: #FFFFFF; border: 1px solid #A6C0D7;"></p> <p> Secondary Button<br></p> <p> Fill: #A6C0D7<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F19A8E; color: #FFFFFF; border: 1px solid #F19A8E;"></p> <p> Accent Button<br></p> <p> Fill: #F19A8E<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #80A4C2; border: 1px solid #80A4C2;"></p> <p> Link Color<br></p> <p> Fill: #80A4C2<br></p> <p> Hover: #6789A3</p> <p> </div></p> <p> </div></p> <p> </section></p> <p> <!-- System Status Colors --></p> <p> <section class="category"></p> <p> <h3>System Status Colors</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #A3C9A8; border: 1px solid #A3C9A8;"></p> <p> Success<br></p> <p> Fill: #A3C9A8</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F2D9A2; border: 1px solid #F2D9A2;"></p> <p> Warning<br></p> <p> Fill: #F2D9A2</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F19A8E; border: 1px solid #F19A8E;"></p> <p> Error<br></p> <p> Fill: #F19A8E</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #A6C0D7; border: 1px solid #A6C0D7;"></p> <p> Info<br></p> <p> Fill: #A6C0D7</p> <p> </div></p> <p> </div></p> <p> </section></p> <p> <!-- Form Elements --></p> <p> <section class="category"></p> <p> <h3>Form Elements</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; border: 1px solid #DCE0E5;"></div></p> <p> <div class="caption">Input Background<br>Fill: #FFFFFF</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #DCE0E5; border: 1px solid #DCE0E5;"></div></p> <p> <div class="caption">Input Border<br>Fill: #DCE0E5</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #3D454D; color: #3D454D; border: 1px solid #3D454D;"></p> <p> Input Text<br></p> <p> Fill: #3D454D</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #A6ADBA; border: 1px solid #A6ADBA;"></div></p> <p> <div class="caption">Input Placeholder<br>Fill: #A6ADBA</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #80A4C2; border: 1px solid #80A4C2;"></div></p> <p> <div class="caption">Input Focus Border<br>Fill: #80A4C2</div></p> <p> </div></p> <p> </section></p> <p> <!-- Selection/State --></p> <p> <section class="category"></p> <p> <h3>Selection/State</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E8EFF7; border: 1px solid #E8EFF7;"></div></p> <p> <div class="caption">Selected Item Background<br>Fill: #E8EFF7</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #3D454D; color: #3D454D; border: 1px solid #3D454D;"></p> <p> Selected Item Text<br></p> <p> Fill: #3D454D</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F0F2F5; border: 1px solid #F0F2F5;"></div></p> <p> <div class="caption">Hover State Background<br>Fill: #F0F2F5</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #D9DDE3; border: 1px solid #D9DDE3;"></div></p> <p> <div class="caption">Disabled State<br>Fill: #D9DDE3</div></p> <p> </div></p> <p> </section></p> <p> <!-- Dividers/Structural Elements --></p> <p> <section class="category"></p> <p> <h3>Dividers/Structural Elements</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #DCE0E5; border: 1px solid #DCE0E5;"></div></p> <p> <div class="caption">Divider Color<br>Fill: #DCE0E5</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; border: 1px solid #DCE0E5;"></div></p> <p> <div class="caption">Card/Container Background<br>Fill: #FFFFFF</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #DCE0E5; border: 1px solid #DCE0E5;"></div></p> <p> <div class="caption">Card Border<br>Fill: #DCE0E5</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.05);"></div></p> <p> <div class="caption">Shadow Color<br>Fill: rgba(0,0,0,0.05)</div></p> <p> </div></p> <p> </section></p> <p> </div></p> <p> <!-- ================= End Soft Palette ================= --></p> <p> <!-- ================= Autumn Palette ================= --></p> <p> <div id="palette-autumn" class="palette"></p> <p> <h2>Autumn Palette</h2></p> <p> <!-- Text Colors --></p> <p> <section class="category"></p> <p> <h3>Text Colors</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4A3C30; color: #4A3C30; border: 1px solid #4A3C30;"></p> <p> Primary Content Text<br></p> <p> Fill: #4A3C30<br></p> <p> Font: #4A3C30</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #7D6B58; color: #7D6B58; border: 1px solid #7D6B58;"></p> <p> Secondary Content Text<br></p> <p> Fill: #7D6B58<br></p> <p> Font: #7D6B58</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4A3C30; color: #4A3C30; border: 1px solid #4A3C30;"></p> <p> Swimlane Text<br></p> <p> Fill: #4A3C30<br></p> <p> Font: #4A3C30</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; color: #FFFFFF; border: 1px solid #FFFFFF;"></p> <p> Bar Text<br></p> <p> Fill: #FFFFFF<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4A3C30; color: #4A3C30; border: 1px solid #4A3C30;"></p> <p> Group Text<br></p> <p> Fill: #4A3C30<br></p> <p> Font: #4A3C30</p> <p> </div></p> <p> </div></p> <p> </section></p> <p> <!-- Background/Fill Colors --></p> <p> <section class="category"></p> <p> <h3>Background/Fill Colors</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFBF5; border: 1px solid #FFFBF5;"></div></p> <p> <div class="caption">Main Background<br>Fill: #FFFBF5</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F5F1EA; border: 1px solid #F5F1EA;"></div></p> <p> <div class="caption">Secondary Background<br>Fill: #F5F1EA</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFBF5; border: 1px solid #FFFBF5;"></div></p> <p> <div class="caption">Project Pane Background<br>Fill: #FFFBF5</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F5F1EA; border: 1px solid #F5F1EA;"></div></p> <p> <div class="caption">Project Pane Alt Row<br>Fill: #F5F1EA</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F0E6D8; border: 1px solid #F0E6D8;"></div></p> <p> <div class="caption">Swimlane Background<br>Fill: #F0E6D8</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F7EFE5; border: 1px solid #F7EFE5;"></div></p> <p> <div class="caption">Swimlane Alt Background<br>Fill: #F7EFE5</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #DFD1C0; border: 1px solid #DFD1C0;"></div></p> <p> <div class="caption">Swimlane Border<br>Fill: #DFD1C0</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E6DCCC; border: 1px solid #E6DCCC;"></div></p> <p> <div class="caption">Group Background<br>Fill: #E6DCCC</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F0E7D9; border: 1px solid #F0E7D9;"></div></p> <p> <div class="caption">Group Alt Background<br>Fill: #F0E7D9</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #D4C6B3; border: 1px solid #D4C6B3;"></div></p> <p> <div class="caption">Group Border<br>Fill: #D4C6B3</div></p> <p> </div></p> <p> <!-- Bar Fill Colors --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #D07745; border: 2px solid #A65C36; color: #FFFFFF;"></p> <p> Bar 1<br></p> <p> Fill: #D07745<br></p> <p> Outline: #A65C36</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #CB904D; border: 2px solid #A37539; color: #FFFFFF;"></p> <p> Bar 2<br></p> <p> Fill: #CB904D<br></p> <p> Outline: #A37539</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #A7BF6E; border: 2px solid #879953; color: #FFFFFF;"></p> <p> Bar 3<br></p> <p> Fill: #A7BF6E<br></p> <p> Outline: #879953</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #ECB176; border: 2px solid #C99257; color: #FFFFFF;"></p> <p> Bar 4<br></p> <p> Fill: #ECB176<br></p> <p> Outline: #C99257</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E86F4A; border: 2px solid #C05638; color: #FFFFFF;"></p> <p> Bar 5<br></p> <p> Fill: #E86F4A<br></p> <p> Outline: #C05638</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #D6C37E; border: 2px solid #AD9C5F; color: #FFFFFF;"></p> <p> Bar 6<br></p> <p> Fill: #D6C37E<br></p> <p> Outline: #AD9C5F</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #8D9F5A; border: 2px solid #6E8044; color: #FFFFFF;"></p> <p> Bar 7<br></p> <p> Fill: #8D9F5A<br></p> <p> Outline: #6E8044</p> <p> </div></p> <p> </div></p> <p> <!-- Grid Colors --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFBF5; border: 1px solid #FFFBF5;"></div></p> <p> <div class="caption">Grid Background<br>Fill: #FFFBF5</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F5F1EA; border: 1px solid #F5F1EA;"></div></p> <p> <div class="caption">Grid Alt Row<br>Fill: #F5F1EA</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E0D4C8; border: 1px solid #E0D4C8;"></div></p> <p> <div class="caption">Grid Lines<br>Fill: #E0D4C8</div></p> <p> </div></p> <p> </section></p> <p> <!-- Interactive Elements --></p> <p> <section class="category"></p> <p> <h3>Interactive Elements</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #D07745; color: #FFFFFF; border: 1px solid #D07745;"></p> <p> Primary Button<br></p> <p> Fill: #D07745<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #A7BF6E; color: #FFFFFF; border: 1px solid #A7BF6E;"></p> <p> Secondary Button<br></p> <p> Fill: #A7BF6E<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #CB904D; color: #FFFFFF; border: 1px solid #CB904D;"></p> <p> Accent Button<br></p> <p> Fill: #CB904D<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #CB904D; border: 1px solid #CB904D;"></p> <p> Link Color<br></p> <p> Fill: #CB904D<br></p> <p> Hover: #A37539</p> <p> </div></p> <p> </div></p> <p> </section></p> <p> <!-- System Status Colors --></p> <p> <section class="category"></p> <p> <h3>System Status Colors</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #A7BF6E; border: 1px solid #A7BF6E;"></p> <p> Success<br></p> <p> Fill: #A7BF6E</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #ECB176; border: 1px solid #ECB176;"></p> <p> Warning<br></p> <p> Fill: #ECB176</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E86F4A; border: 1px solid #E86F4A;"></p> <p> Error<br></p> <p> Fill: #E86F4A</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #8C9EC5; border: 1px solid #8C9EC5;"></p> <p> Info<br></p> <p> Fill: #8C9EC5</p> <p> </div></p> <p> </div></p> <p> </section></p> <p> <!-- Form Elements --></p> <p> <section class="category"></p> <p> <h3>Form Elements</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; border: 1px solid #E0D4C8;"></div></p> <p> <div class="caption">Input Background<br>Fill: #FFFFFF</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E0D4C8; border: 1px solid #E0D4C8;"></div></p> <p> <div class="caption">Input Border<br>Fill: #E0D4C8</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4A3C30; color: #4A3C30; border: 1px solid #4A3C30;"></p> <p> Input Text<br></p> <p> Fill: #4A3C30</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #AB9F92; border: 1px solid #AB9F92;"></div></p> <p> <div class="caption">Input Placeholder<br>Fill: #AB9F92</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #CB904D; border: 1px solid #CB904D;"></div></p> <p> <div class="caption">Input Focus Border<br>Fill: #CB904D</div></p> <p> </div></p> <p> </section></p> <p> <!-- Selection/State --></p> <p> <section class="category"></p> <p> <h3>Selection/State</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F0E7D9; border: 1px solid #F0E7D9;"></div></p> <p> <div class="caption">Selected Item Background<br>Fill: #F0E7D9</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4A3C30; color: #4A3C30; border: 1px solid #4A3C30;"></p> <p> Selected Item Text<br></p> <p> Fill: #4A3C30</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F7EFE5; border: 1px solid #F7EFE5;"></div></p> <p> <div class="caption">Hover State Background<br>Fill: #F7EFE5</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #D0C5B8; border: 1px solid #D0C5B8;"></div></p> <p> <div class="caption">Disabled State<br>Fill: #D0C5B8</div></p> <p> </div></p> <p> </section></p> <p> <!-- Dividers/Structural Elements --></p> <p> <section class="category"></p> <p> <h3>Dividers/Structural Elements</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E0D4C8; border: 1px solid #E0D4C8;"></div></p> <p> <div class="caption">Divider Color<br>Fill: #E0D4C8</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFBF5; border: 1px solid #E0D4C8;"></div></p> <p> <div class="caption">Card/Container Background<br>Fill: #FFFBF5</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E0D4C8; border: 1px solid #E0D4C8;"></div></p> <p> <div class="caption">Card Border<br>Fill: #E0D4C8</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: rgba(121,85,61,0.1); border: 1px solid rgba(121,85,61,0.1);"></div></p> <p> <div class="caption">Shadow Color<br>Fill: rgba(121,85,61,0.1)</div></p> <p> </div></p> <p> </section></p> <p> </div></p> <p> <!-- ================= End Autumn Palette ================= --></p> <p> <!-- ================= Forest Palette ================= --></p> <p> <div id="palette-forest" class="palette"></p> <p> <h2>Forest Palette</h2></p> <p> <!-- Text Colors --></p> <p> <section class="category"></p> <p> <h3>Text Colors</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #33452D; color: #33452D; border: 1px solid #33452D;"></p> <p> Primary Content Text<br></p> <p> Fill: #33452D<br></p> <p> Font: #33452D</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #5E725A; color: #5E725A; border: 1px solid #5E725A;"></p> <p> Secondary Content Text<br></p> <p> Fill: #5E725A<br></p> <p> Font: #5E725A</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #33452D; color: #33452D; border: 1px solid #33452D;"></p> <p> Swimlane Text<br></p> <p> Fill: #33452D<br></p> <p> Font: #33452D</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; color: #FFFFFF; border: 1px solid #FFFFFF;"></p> <p> Bar Text<br></p> <p> Fill: #FFFFFF<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #33452D; color: #33452D; border: 1px solid #33452D;"></p> <p> Group Text<br></p> <p> Fill: #33452D<br></p> <p> Font: #33452D</p> <p> </div></p> <p> </div></p> <p> </section></p> <p> <!-- Background/Fill Colors --></p> <p> <section class="category"></p> <p> <h3>Background/Fill Colors</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FAFCF7; border: 1px solid #FAFCF7;"></div></p> <p> <div class="caption">Main Background<br>Fill: #FAFCF7</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F0F4EC; border: 1px solid #F0F4EC;"></div></p> <p> <div class="caption">Secondary Background<br>Fill: #F0F4EC</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FAFCF7; border: 1px solid #FAFCF7;"></div></p> <p> <div class="caption">Project Pane Background<br>Fill: #FAFCF7</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F0F4EC; border: 1px solid #F0F4EC;"></div></p> <p> <div class="caption">Project Pane Alt Row<br>Fill: #F0F4EC</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E5EDE0; border: 1px solid #E5EDE0;"></div></p> <p> <div class="caption">Swimlane Background<br>Fill: #E5EDE0</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #EFF5EB; border: 1px solid #EFF5EB;"></div></p> <p> <div class="caption">Swimlane Alt Background<br>Fill: #EFF5EB</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #CAD6C2; border: 1px solid #CAD6C2;"></div></p> <p> <div class="caption">Swimlane Border<br>Fill: #CAD6C2</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #DAE5D1; border: 1px solid #DAE5D1;"></div></p> <p> <div class="caption">Group Background<br>Fill: #DAE5D1</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E6EFDD; border: 1px solid #E6EFDD;"></div></p> <p> <div class="caption">Group Alt Background<br>Fill: #E6EFDD</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #BDCCB2; border: 1px solid #BDCCB2;"></div></p> <p> <div class="caption">Group Border<br>Fill: #BDCCB2</div></p> <p> </div></p> <p> <!-- Bar Fill Colors --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #6A8F64; border: 2px solid #557251; color: #FFFFFF;"></p> <p> Bar 1<br></p> <p> Fill: #6A8F64<br></p> <p> Outline: #557251</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #A9C1A3; border: 2px solid #889D84; color: #FFFFFF;"></p> <p> Bar 2<br></p> <p> Fill: #A9C1A3<br></p> <p> Outline: #889D84</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4B6E4C; border: 2px solid #3C583D; color: #FFFFFF;"></p> <p> Bar 3<br></p> <p> Fill: #4B6E4C<br></p> <p> Outline: #3C583D</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #8EA476; border: 2px solid #73845F; color: #FFFFFF;"></p> <p> Bar 4<br></p> <p> Fill: #8EA476<br></p> <p> Outline: #73845F</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #BFB26B; border: 2px solid #9A9055; color: #FFFFFF;"></p> <p> Bar 5<br></p> <p> Fill: #BFB26B<br></p> <p> Outline: #9A9055</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #D7BC88; border: 2px solid #AB966D; color: #FFFFFF;"></p> <p> Bar 6<br></p> <p> Fill: #D7BC88<br></p> <p> Outline: #AB966D</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #B56B45; border: 2px solid #915637; color: #FFFFFF;"></p> <p> Bar 7<br></p> <p> Fill: #B56B45<br></p> <p> Outline: #915637</p> <p> </div></p> <p> </div></p> <p> <!-- Grid Colors --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFBF5; border: 1px solid #FFFBF5;"></div></p> <p> <div class="caption">Grid Background<br>Fill: #FFFBF5</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F5F1EA; border: 1px solid #F5F1EA;"></div></p> <p> <div class="caption">Grid Alt Row<br>Fill: #F5F1EA</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E0D4C8; border: 1px solid #E0D4C8;"></div></p> <p> <div class="caption">Grid Lines<br>Fill: #E0D4C8</div></p> <p> </div></p> <p> </section></p> <p> <!-- Interactive Elements --></p> <p> <section class="category"></p> <p> <h3>Interactive Elements</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #D07745; color: #FFFFFF; border: 1px solid #D07745;"></p> <p> Primary Button<br></p> <p> Fill: #D07745<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #A7BF6E; color: #FFFFFF; border: 1px solid #A7BF6E;"></p> <p> Secondary Button<br></p> <p> Fill: #A7BF6E<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #CB904D; color: #FFFFFF; border: 1px solid #CB904D;"></p> <p> Accent Button<br></p> <p> Fill: #CB904D<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #CB904D; border: 1px solid #CB904D;"></p> <p> Link Color<br></p> <p> Fill: #CB904D<br></p> <p> Hover: #A37539</p> <p> </div></p> <p> </div></p> <p> </section></p> <p> <!-- System Status Colors --></p> <p> <section class="category"></p> <p> <h3>System Status Colors</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #A7BF6E; border: 1px solid #A7BF6E;"></p> <p> Success<br></p> <p> Fill: #A7BF6E</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #ECB176; border: 1px solid #ECB176;"></p> <p> Warning<br></p> <p> Fill: #ECB176</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E86F4A; border: 1px solid #E86F4A;"></p> <p> Error<br></p> <p> Fill: #E86F4A</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #8C9EC5; border: 1px solid #8C9EC5;"></p> <p> Info<br></p> <p> Fill: #8C9EC5</p> <p> </div></p> <p> </div></p> <p> </section></p> <p> <!-- Form Elements --></p> <p> <section class="category"></p> <p> <h3>Form Elements</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; border: 1px solid #E0D4C8;"></div></p> <p> <div class="caption">Input Background<br>Fill: #FFFFFF</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E0D4C8; border: 1px solid #E0D4C8;"></div></p> <p> <div class="caption">Input Border<br>Fill: #E0D4C8</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4A3C30; color: #4A3C30; border: 1px solid #4A3C30;"></p> <p> Input Text<br></p> <p> Fill: #4A3C30</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #AB9F92; border: 1px solid #AB9F92;"></div></p> <p> <div class="caption">Input Placeholder<br>Fill: #AB9F92</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #CB904D; border: 1px solid #CB904D;"></div></p> <p> <div class="caption">Input Focus Border<br>Fill: #CB904D</div></p> <p> </div></p> <p> </section></p> <p> <!-- Selection/State --></p> <p> <section class="category"></p> <p> <h3>Selection/State</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F0E7D9; border: 1px solid #F0E7D9;"></div></p> <p> <div class="caption">Selected Item Background<br>Fill: #F0E7D9</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4A3C30; color: #4A3C30; border: 1px solid #4A3C30;"></p> <p> Selected Item Text<br></p> <p> Fill: #4A3C30</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F7EFE5; border: 1px solid #F7EFE5;"></div></p> <p> <div class="caption">Hover State Background<br>Fill: #F7EFE5</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #D0C5B8; border: 1px solid #D0C5B8;"></div></p> <p> <div class="caption">Disabled State<br>Fill: #D0C5B8</div></p> <p> </div></p> <p> </section></p> <p> <!-- Dividers/Structural Elements --></p> <p> <section class="category"></p> <p> <h3>Dividers/Structural Elements</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E0D4C8; border: 1px solid #E0D4C8;"></div></p> <p> <div class="caption">Divider Color<br>Fill: #E0D4C8</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFBF5; border: 1px solid #E0D4C8;"></div></p> <p> <div class="caption">Card/Container Background<br>Fill: #FFFBF5</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E0D4C8; border: 1px solid #E0D4C8;"></div></p> <p> <div class="caption">Card Border<br>Fill: #E0D4C8</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: rgba(121,85,61,0.1); border: 1px solid rgba(121,85,61,0.1);"></div></p> <p> <div class="caption">Shadow Color<br>Fill: rgba(121,85,61,0.1)</div></p> <p> </div></p> <p> </section></p> <p> </div></p> <p> <!-- ================= End Forest Palette ================= --></p> <p> <!-- ================= Bold Palette ================= --></p> <p> <div id="palette-bold" class="palette"></p> <p> <h2>Bold Palette</h2></p> <p> <!-- Text Colors --></p> <p> <section class="category"></p> <p> <h3>Text Colors</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #202020; color: #202020; border: 1px solid #202020;"></p> <p> Primary Content Text<br></p> <p> Fill: #202020<br></p> <p> Font: #202020</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #606060; color: #606060; border: 1px solid #606060;"></p> <p> Secondary Content Text<br></p> <p> Fill: #606060<br></p> <p> Font: #606060</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #202020; color: #202020; border: 1px solid #202020;"></p> <p> Swimlane Text<br></p> <p> Fill: #202020<br></p> <p> Font: #202020</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; color: #FFFFFF; border: 1px solid #FFFFFF;"></p> <p> Bar Text<br></p> <p> Fill: #FFFFFF<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #202020; color: #202020; border: 1px solid #202020;"></p> <p> Group Text<br></p> <p> Fill: #202020<br></p> <p> Font: #202020</p> <p> </div></p> <p> </div></p> <p> </section></p> <p> <!-- Background/Fill Colors --></p> <p> <section class="category"></p> <p> <h3>Background/Fill Colors</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; border: 1px solid #FFFFFF;"></div></p> <p> <div class="caption">Main Background<br>Fill: #FFFFFF</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F5F5F5; border: 1px solid #F5F5F5;"></div></p> <p> <div class="caption">Secondary Background<br>Fill: #F5F5F5</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; border: 1px solid #FFFFFF;"></div></p> <p> <div class="caption">Project Pane Background<br>Fill: #FFFFFF</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F5F5F5; border: 1px solid #F5F5F5;"></div></p> <p> <div class="caption">Project Pane Alt Row<br>Fill: #F5F5F5</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #ECECEC; border: 1px solid #ECECEC;"></div></p> <p> <div class="caption">Swimlane Background<br>Fill: #ECECEC</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F5F5F5; border: 1px solid #F5F5F5;"></div></p> <p> <div class="caption">Swimlane Alt Background<br>Fill: #F5F5F5</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #D0D0D0; border: 1px solid #D0D0D0;"></div></p> <p> <div class="caption">Swimlane Border<br>Fill: #D0D0D0</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E0E0E0; border: 1px solid #E0E0E0;"></div></p> <p> <div class="caption">Group Background<br>Fill: #E0E0E0</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #ECECEC; border: 1px solid #ECECEC;"></div></p> <p> <div class="caption">Group Alt Background<br>Fill: #ECECEC</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #CCCCCC; border: 1px solid #CCCCCC;"></div></p> <p> <div class="caption">Group Border<br>Fill: #CCCCCC</div></p> <p> </div></p> <p> <!-- Bar Fill Colors --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #1E88E5; border: 2px solid #1565C0; color: #FFFFFF;"></p> <p> Bar 1<br></p> <p> Fill: #1E88E5<br></p> <p> Outline: #1565C0</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E53935; border: 2px solid #B71C1C; color: #FFFFFF;"></p> <p> Bar 2<br></p> <p> Fill: #E53935<br></p> <p> Outline: #B71C1C</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4CAF50; border: 2px solid #388E3C; color: #FFFFFF;"></p> <p> Bar 3<br></p> <p> Fill: #4CAF50<br></p> <p> Outline: #388E3C</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #7B1FA2; border: 2px solid #5E1882; color: #FFFFFF;"></p> <p> Bar 4<br></p> <p> Fill: #7B1FA2<br></p> <p> Outline: #5E1882</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FF9800; border: 2px solid #E65100; color: #FFFFFF;"></p> <p> Bar 5<br></p> <p> Fill: #FF9800<br></p> <p> Outline: #E65100</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFEB3B; border: 2px solid #F9A825; color: #333333;"></p> <p> Bar 6<br></p> <p> Fill: #FFEB3B<br></p> <p> Outline: #F9A825</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #00ACC1; border: 2px solid #00838F; color: #FFFFFF;"></p> <p> Bar 7<br></p> <p> Fill: #00ACC1<br></p> <p> Outline: #00838F</p> <p> </div></p> <p> </div></p> <p> <!-- Grid Colors --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; border: 1px solid #FFFFFF;"></div></p> <p> <div class="caption">Grid Background<br>Fill: #FFFFFF</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F5F5F5; border: 1px solid #F5F5F5;"></div></p> <p> <div class="caption">Grid Alt Row<br>Fill: #F5F5F5</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #D8D8D8; border: 1px solid #D8D8D8;"></div></p> <p> <div class="caption">Grid Lines<br>Fill: #D8D8D8</div></p> <p> </div></p> <p> </section></p> <p> <!-- Interactive Elements --></p> <p> <section class="category"></p> <p> <h3>Interactive Elements</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #1E88E5; color: #FFFFFF; border: 1px solid #1E88E5;"></p> <p> Primary Button<br></p> <p> Fill: #1E88E5<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4CAF50; color: #FFFFFF; border: 1px solid #4CAF50;"></p> <p> Secondary Button<br></p> <p> Fill: #4CAF50<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E53935; color: #FFFFFF; border: 1px solid #E53935;"></p> <p> Accent Button<br></p> <p> Fill: #E53935<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #1E88E5; border: 1px solid #1E88E5;"></p> <p> Link Color<br></p> <p> Fill: #1E88E5<br></p> <p> Hover: #1565C0</p> <p> </div></p> <p> </div></p> <p> </section></p> <p> <!-- System Status Colors --></p> <p> <section class="category"></p> <p> <h3>System Status Colors</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4CAF50; border: 1px solid #4CAF50;"></p> <p> Success<br></p> <p> Fill: #4CAF50</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FF9800; border: 1px solid #FF9800;"></p> <p> Warning<br></p> <p> Fill: #FF9800</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E53935; border: 1px solid #E53935;"></p> <p> Error<br></p> <p> Fill: #E53935</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #1E88E5; border: 1px solid #1E88E5;"></p> <p> Info<br></p> <p> Fill: #1E88E5</p> <p> </div></p> <p> </div></p> <p> </section></p> <p> <!-- Form Elements --></p> <p> <section class="category"></p> <p> <h3>Form Elements</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; border: 1px solid #D8D8D8;"></div></p> <p> <div class="caption">Input Background<br>Fill: #FFFFFF</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #D8D8D8; border: 1px solid #D8D8D8;"></div></p> <p> <div class="caption">Input Border<br>Fill: #D8D8D8</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #202020; color: #202020; border: 1px solid #202020;"></p> <p> Input Text<br></p> <p> Fill: #202020</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #9E9E9E; border: 1px solid #9E9E9E;"></div></p> <p> <div class="caption">Input Placeholder<br>Fill: #9E9E9E</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #1E88E5; border: 1px solid #1E88E5;"></div></p> <p> <div class="caption">Input Focus Border<br>Fill: #1E88E5</div></p> <p> </div></p> <p> </section></p> <p> <!-- Selection/State --></p> <p> <section class="category"></p> <p> <h3>Selection/State</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E3F2FD; border: 1px solid #E3F2FD;"></div></p> <p> <div class="caption">Selected Item Background<br>Fill: #E3F2FD</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #202020; color: #202020; border: 1px solid #202020;"></p> <p> Selected Item Text<br></p> <p> Fill: #202020</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F5F5F5; border: 1px solid #F5F5F5;"></div></p> <p> <div class="caption">Hover State Background<br>Fill: #F5F5F5</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #CCCCCC; border: 1px solid #CCCCCC;"></div></p> <p> <div class="caption">Disabled State<br>Fill: #CCCCCC</div></p> <p> </div></p> <p> </section></p> <p> <!-- Dividers/Structural Elements --></p> <p> <section class="category"></p> <p> <h3>Dividers/Structural Elements</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #D8D8D8; border: 1px solid #D8D8D8;"></div></p> <p> <div class="caption">Divider Color<br>Fill: #D8D8D8</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; border: 1px solid #D8D8D8;"></div></p> <p> <div class="caption">Card/Container Background<br>Fill: #FFFFFF</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #D8D8D8; border: 1px solid #D8D8D8;"></div></p> <p> <div class="caption">Card Border<br>Fill: #D8D8D8</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: rgba(0,0,0,0.2); border: 1px solid rgba(0,0,0,0.2);"></div></p> <p> <div class="caption">Shadow Color<br>Fill: rgba(0,0,0,0.2)</div></p> <p> </div></p> <p> </section></p> <p> </div></p> <p> <!-- ================= End Bold Palette ================= --></p> <p> <!-- ================= Grey Palette ================= --></p> <p> <div id="palette-grey" class="palette"></p> <p> <h2>Grey Palette</h2></p> <p> <!-- Text Colors --></p> <p> <section class="category"></p> <p> <h3>Text Colors</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #333333; color: #333333; border: 1px solid #333333;"></p> <p> Primary Content Text<br></p> <p> Fill: #333333<br></p> <p> Font: #333333</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #666666; color: #666666; border: 1px solid #666666;"></p> <p> Secondary Content Text<br></p> <p> Fill: #666666<br></p> <p> Font: #666666</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #333333; color: #333333; border: 1px solid #333333;"></p> <p> Swimlane Text<br></p> <p> Fill: #333333<br></p> <p> Font: #333333</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; color: #FFFFFF; border: 1px solid #FFFFFF;"></p> <p> Bar Text<br></p> <p> Fill: #FFFFFF<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #333333; color: #333333; border: 1px solid #333333;"></p> <p> Group Text<br></p> <p> Fill: #333333<br></p> <p> Font: #333333</p> <p> </div></p> <p> </div></p> <p> </section></p> <p> <!-- Background/Fill Colors --></p> <p> <section class="category"></p> <p> <h3>Background/Fill Colors</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; border: 1px solid #FFFFFF;"></div></p> <p> <div class="caption">Main Background<br>Fill: #FFFFFF</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F7F7F7; border: 1px solid #F7F7F7;"></div></p> <p> <div class="caption">Secondary Background<br>Fill: #F7F7F7</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; border: 1px solid #FFFFFF;"></div></p> <p> <div class="caption">Project Pane Background<br>Fill: #FFFFFF</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F7F7F7; border: 1px solid #F7F7F7;"></div></p> <p> <div class="caption">Project Pane Alt Row<br>Fill: #F7F7F7</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #EDEDED; border: 1px solid #EDEDED;"></div></p> <p> <div class="caption">Swimlane Background<br>Fill: #EDEDED</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F5F5F5; border: 1px solid #F5F5F5;"></div></p> <p> <div class="caption">Swimlane Alt Background<br>Fill: #F5F5F5</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #DADADA; border: 1px solid #DADADA;"></div></p> <p> <div class="caption">Swimlane Border<br>Fill: #DADADA</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E5E5E5; border: 1px solid #E5E5E5;"></div></p> <p> <div class="caption">Group Background<br>Fill: #E5E5E5</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #EDEDED; border: 1px solid #EDEDED;"></div></p> <p> <div class="caption">Group Alt Background<br>Fill: #EDEDED</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #CCCCCC; border: 1px solid #CCCCCC;"></div></p> <p> <div class="caption">Group Border<br>Fill: #CCCCCC</div></p> <p> </div></p> <p> <!-- Bar Fill Colors --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #757575; border: 2px solid #5A5A5A; color: #FFFFFF;"></p> <p> Bar 1<br></p> <p> Fill: #757575<br></p> <p> Outline: #5A5A5A</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #9E9E9E; border: 2px solid #7C7C7C; color: #FFFFFF;"></p> <p> Bar 2<br></p> <p> Fill: #9E9E9E<br></p> <p> Outline: #7C7C7C</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4D4D4D; border: 2px solid #383838; color: #FFFFFF;"></p> <p> Bar 3<br></p> <p> Fill: #4D4D4D<br></p> <p> Outline: #383838</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #BDBDBD; border: 2px solid #989898; color: #333333;"></p> <p> Bar 4<br></p> <p> Fill: #BDBDBD<br></p> <p> Outline: #989898</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #616161; border: 2px solid #4A4A4A; color: #FFFFFF;"></p> <p> Bar 5<br></p> <p> Fill: #616161<br></p> <p> Outline: #4A4A4A</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4682B4; border: 2px solid #356590; color: #FFFFFF;"></p> <p> Bar 6<br></p> <p> Fill: #4682B4<br></p> <p> Outline: #356590</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #EA3525; border: 2px solid #C12815; color: #FFFFFF;"></p> <p> Bar 7<br></p> <p> Fill: #EA3525<br></p> <p> Outline: #C12815</p> <p> </div></p> <p> </div></p> <p> <!-- Grid Colors --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; border: 1px solid #FFFFFF;"></div></p> <p> <div class="caption">Grid Background<br>Fill: #FFFFFF</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F7F7F7; border: 1px solid #F7F7F7;"></div></p> <p> <div class="caption">Grid Alt Row<br>Fill: #F7F7F7</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E0E0E0; border: 1px solid #E0E0E0;"></div></p> <p> <div class="caption">Grid Lines<br>Fill: #E0E0E0</div></p> <p> </div></p> <p> </section></p> <p> <!-- Interactive Elements --></p> <p> <section class="category"></p> <p> <h3>Interactive Elements</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4D4D4D; color: #FFFFFF; border: 1px solid #4D4D4D;"></p> <p> Primary Button<br></p> <p> Fill: #4D4D4D<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #757575; color: #FFFFFF; border: 1px solid #757575;"></p> <p> Secondary Button<br></p> <p> Fill: #757575<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4682B4; color: #FFFFFF; border: 1px solid #4682B4;"></p> <p> Accent Button<br></p> <p> Fill: #4682B4<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4682B4; border: 1px solid #4682B4;"></p> <p> Link Color<br></p> <p> Fill: #4682B4<br></p> <p> Hover: #356590</p> <p> </div></p> <p> </div></p> <p> </section></p> <p> <!-- System Status Colors --></p> <p> <section class="category"></p> <p> <h3>System Status Colors</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4CAF50; border: 1px solid #4CAF50;"></p> <p> Success<br></p> <p> Fill: #4CAF50</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FF9800; border: 1px solid #FF9800;"></p> <p> Warning<br></p> <p> Fill: #FF9800</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #EA3525; border: 1px solid #EA3525;"></p> <p> Error<br></p> <p> Fill: #EA3525</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4CAF50; border: 1px solid #4CAF50;"></p> <p> Info<br></p> <p> Fill: #4CAF50</p> <p> </div></p> <p> </div></p> <p> </section></p> <p> <!-- Form Elements --></p> <p> <section class="category"></p> <p> <h3>Form Elements</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; border: 1px solid #E0E0E0;"></div></p> <p> <div class="caption">Input Background<br>Fill: #FFFFFF</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E0E0E0; border: 1px solid #E0E0E0;"></div></p> <p> <div class="caption">Input Border<br>Fill: #E0E0E0</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #333333; color: #333333; border: 1px solid #333333;"></p> <p> Input Text<br></p> <p> Fill: #333333</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #9E9E9E; border: 1px solid #9E9E9E;"></div></p> <p> <div class="caption">Input Placeholder<br>Fill: #9E9E9E</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4D4D4D; border: 1px solid #4D4D4D;"></div></p> <p> <div class="caption">Input Focus Border<br>Fill: #4D4D4D</div></p> <p> </div></p> <p> </section></p> <p> <!-- Selection/State --></p> <p> <section class="category"></p> <p> <h3>Selection/State</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E0E0E0; border: 1px solid #E0E0E0;"></div></p> <p> <div class="caption">Selected Item Background<br>Fill: #E0E0E0</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #333333; color: #333333; border: 1px solid #333333;"></p> <p> Selected Item Text<br></p> <p> Fill: #333333</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F5F5F5; border: 1px solid #F5F5F5;"></div></p> <p> <div class="caption">Hover State Background<br>Fill: #F5F5F5</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #CCCCCC; border: 1px solid #CCCCCC;"></div></p> <p> <div class="caption">Disabled State<br>Fill: #CCCCCC</div></p> <p> </div></p> <p> </section></p> <p> <!-- Dividers/Structural Elements --></p> <p> <section class="category"></p> <p> <h3>Dividers/Structural Elements</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E0E0E0; border: 1px solid #E0E0E0;"></div></p> <p> <div class="caption">Divider Color<br>Fill: #E0E0E0</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; border: 1px solid #E0E0E0;"></div></p> <p> <div class="caption">Card/Container Background<br>Fill: #FFFFFF</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E0E0E0; border: 1px solid #E0E0E0;"></div></p> <p> <div class="caption">Card Border<br>Fill: #E0E0E0</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.1);"></div></p> <p> <div class="caption">Shadow Color<br>Fill: rgba(0,0,0,0.1)</div></p> <p> </div></p> <p> </section></p> <p> </div></p> <p> <!-- ================= End Grey Palette ================= --></p> <p> <!-- ================= Dark Mode Palette ================= --></p> <p> <div id="palette-darkmode" class="palette"></p> <p> <h2>Dark Mode Palette</h2></p> <p> <!-- Text Colors --></p> <p> <section class="category"></p> <p> <h3>Text Colors</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E6EAF0; color: #E6EAF0; border: 1px solid #E6EAF0;"></p> <p> Primary Content Text<br></p> <p> Fill: #E6EAF0<br></p> <p> Font: #E6EAF0</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #A6B0C2; color: #A6B0C2; border: 1px solid #A6B0C2;"></p> <p> Secondary Content Text<br></p> <p> Fill: #A6B0C2<br></p> <p> Font: #A6B0C2</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E6EAF0; color: #E6EAF0; border: 1px solid #E6EAF0;"></p> <p> Swimlane Text<br></p> <p> Fill: #E6EAF0<br></p> <p> Font: #E6EAF0</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; color: #FFFFFF; border: 1px solid #FFFFFF;"></p> <p> Bar Text<br></p> <p> Fill: #FFFFFF<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E6EAF0; color: #E6EAF0; border: 1px solid #E6EAF0;"></p> <p> Group Text<br></p> <p> Fill: #E6EAF0<br></p> <p> Font: #E6EAF0</p> <p> </div></p> <p> </div></p> <p> </section></p> <p> <!-- Background/Fill Colors --></p> <p> <section class="category"></p> <p> <h3>Background/Fill Colors</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #1F2533; border: 1px solid #1F2533;"></div></p> <p> <div class="caption">Main Background<br>Fill: #1F2533</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #2A3142; border: 1px solid #2A3142;"></div></p> <p> <div class="caption">Secondary Background<br>Fill: #2A3142</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #2A3142; border: 1px solid #2A3142;"></div></p> <p> <div class="caption">Project Pane Background<br>Fill: #2A3142</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #313A4F; border: 1px solid #313A4F;"></div></p> <p> <div class="caption">Project Pane Alt Row<br>Fill: #313A4F</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #364053; border: 1px solid #364053;"></div></p> <p> <div class="caption">Swimlane Background<br>Fill: #364053</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #2F3847; border: 1px solid #2F3847;"></div></p> <p> <div class="caption">Swimlane Alt Background<br>Fill: #2F3847</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #454F65; border: 1px solid #454F65;"></div></p> <p> <div class="caption">Swimlane Border<br>Fill: #454F65</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #3D4B60; border: 1px solid #3D4B60;"></div></p> <p> <div class="caption">Group Background<br>Fill: #3D4B60</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #364053; border: 1px solid #364053;"></div></p> <p> <div class="caption">Group Alt Background<br>Fill: #364053</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4E5A72; border: 1px solid #4E5A72;"></div></p> <p> <div class="caption">Group Border<br>Fill: #4E5A72</div></p> <p> </div></p> <p> <!-- Bar Fill Colors --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4C9AFF; border: 2px solid #3A77C4; color: #FFFFFF;"></p> <p> Bar 1<br></p> <p> Fill: #4C9AFF<br></p> <p> Outline: #3A77C4</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FF6B6B; border: 2px solid #C45151; color: #FFFFFF;"></p> <p> Bar 2<br></p> <p> Fill: #FF6B6B<br></p> <p> Outline: #C45151</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #5AD786; border: 2px solid #45A668; color: #FFFFFF;"></p> <p> Bar 3<br></p> <p> Fill: #5AD786<br></p> <p> Outline: #45A668</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #B191F9; border: 2px solid #8A71C4; color: #FFFFFF;"></p> <p> Bar 4<br></p> <p> Fill: #B191F9<br></p> <p> Outline: #8A71C4</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFBA42; border: 2px solid #C49033; color: #FFFFFF;"></p> <p> Bar 5<br></p> <p> Fill: #FFBA42<br></p> <p> Outline: #C49033</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #60B8D4; border: 2px solid #498FA6; color: #FFFFFF;"></p> <p> Bar 6<br></p> <p> Fill: #60B8D4<br></p> <p> Outline: #498FA6</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F87EE5; border: 2px solid #C463B6; color: #FFFFFF;"></p> <p> Bar 7<br></p> <p> Fill: #F87EE5<br></p> <p> Outline: #C463B6</p> <p> </div></p> <p> </div></p> <p> <!-- Grid Colors --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #252E3E; border: 1px solid #252E3E;"></div></p> <p> <div class="caption">Grid Background<br>Fill: #252E3E</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #2A3142; border: 1px solid #2A3142;"></div></p> <p> <div class="caption">Grid Alt Row<br>Fill: #2A3142</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #3D4559; border: 1px solid #3D4559;"></div></p> <p> <div class="caption">Grid Lines<br>Fill: #3D4559</div></p> <p> </div></p> <p> </section></p> <p> <!-- Interactive Elements --></p> <p> <section class="category"></p> <p> <h3>Interactive Elements</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4C9AFF; color: #FFFFFF; border: 1px solid #4C9AFF;"></p> <p> Primary Button<br></p> <p> Fill: #4C9AFF<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #60B8D4; color: #FFFFFF; border: 1px solid #60B8D4;"></p> <p> Secondary Button<br></p> <p> Fill: #60B8D4<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FF6B6B; color: #FFFFFF; border: 1px solid #FF6B6B;"></p> <p> Accent Button<br></p> <p> Fill: #FF6B6B<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4C9AFF; border: 1px solid #4C9AFF;"></p> <p> Link Color<br></p> <p> Fill: #4C9AFF<br></p> <p> Hover: #3A77C4</p> <p> </div></p> <p> </div></p> <p> </section></p> <p> <!-- System Status Colors --></p> <p> <section class="category"></p> <p> <h3>System Status Colors</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #5AD786; border: 1px solid #5AD786;"></p> <p> Success<br></p> <p> Fill: #5AD786</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFBA42; border: 1px solid #FFBA42;"></p> <p> Warning<br></p> <p> Fill: #FFBA42</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FF6B6B; border: 1px solid #FF6B6B;"></p> <p> Error<br></p> <p> Fill: #FF6B6B</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #60B8D4; border: 1px solid #60B8D4;"></p> <p> Info<br></p> <p> Fill: #60B8D4</p> <p> </div></p> <p> </div></p> <p> </section></p> <p> <!-- Form Elements --></p> <p> <section class="category"></p> <p> <h3>Form Elements</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #2A3142; border: 1px solid #3D4559;"></div></p> <p> <div class="caption">Input Background<br>Fill: #2A3142</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #3D4559; border: 1px solid #3D4559;"></div></p> <p> <div class="caption">Input Border<br>Fill: #3D4559</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E6EAF0; color: #E6EAF0; border: 1px solid #E6EAF0;"></p> <p> Input Text<br></p> <p> Fill: #E6EAF0</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #7A8399; border: 1px solid #7A8399;"></div></p> <p> <div class="caption">Input Placeholder<br>Fill: #7A8399</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4C9AFF; border: 1px solid #4C9AFF;"></div></p> <p> <div class="caption">Input Focus Border<br>Fill: #4C9AFF</div></p> <p> </div></p> <p> </section></p> <p> <!-- Selection/State --></p> <p> <section class="category"></p> <p> <h3>Selection/State</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #3A77C4; border: 1px solid #3A77C4;"></div></p> <p> <div class="caption">Selected Item Background<br>Fill: #3A77C4</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; color: #FFFFFF; border: 1px solid #FFFFFF;"></p> <p> Selected Item Text<br></p> <p> Fill: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #313A4F; border: 1px solid #313A4F;"></div></p> <p> <div class="caption">Hover State Background<br>Fill: #313A4F</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #4D5468; border: 1px solid #4D5468;"></div></p> <p> <div class="caption">Disabled State<br>Fill: #4D5468</div></p> <p> </div></p> <p> </section></p> <p> <!-- Dividers/Structural Elements --></p> <p> <section class="category"></p> <p> <h3>Dividers/Structural Elements</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #3D4559; border: 1px solid #3D4559;"></div></p> <p> <div class="caption">Divider Color<br>Fill: #3D4559</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #2A3142; border: 1px solid #3D4559;"></div></p> <p> <div class="caption">Card/Container Background<br>Fill: #2A3142</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #3D4559; border: 1px solid #3D4559;"></div></p> <p> <div class="caption">Card Border<br>Fill: #3D4559</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: rgba(0,0,0,0.4); border: 1px solid rgba(0,0,0,0.4);"></div></p> <p> <div class="caption">Shadow Color<br>Fill: rgba(0,0,0,0.4)</div></p> <p> </div></p> <p> </section></p> <p> </div></p> <p> <!-- ================= End Dark Mode Palette ================= --></p> <p> <!-- ================= Ocean Palette ================= --></p> <p> <div id="palette-ocean" class="palette"></p> <p> <h2>Ocean Palette</h2></p> <p> <!-- Text Colors --></p> <p> <section class="category"></p> <p> <h3>Text Colors</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #2D4B5A; color: #2D4B5A; border: 1px solid #2D4B5A;"></p> <p> Primary Content Text<br></p> <p> Fill: #2D4B5A<br></p> <p> Font: #2D4B5A</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #607D8B; color: #607D8B; border: 1px solid #607D8B;"></p> <p> Secondary Content Text<br></p> <p> Fill: #607D8B<br></p> <p> Font: #607D8B</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #2D4B5A; color: #2D4B5A; border: 1px solid #2D4B5A;"></p> <p> Swimlane Text<br></p> <p> Fill: #2D4B5A<br></p> <p> Font: #2D4B5A</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; color: #FFFFFF; border: 1px solid #FFFFFF;"></p> <p> Bar Text<br></p> <p> Fill: #FFFFFF<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #2D4B5A; color: #2D4B5A; border: 1px solid #2D4B5A;"></p> <p> Group Text<br></p> <p> Fill: #2D4B5A<br></p> <p> Font: #2D4B5A</p> <p> </div></p> <p> </div></p> <p> </section></p> <p> <!-- Background/Fill Colors --></p> <p> <section class="category"></p> <p> <h3>Background/Fill Colors</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F8FCFF; border: 1px solid #F8FCFF;"></div></p> <p> <div class="caption">Main Background<br>Fill: #F8FCFF</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #EDF5FA; border: 1px solid #EDF5FA;"></div></p> <p> <div class="caption">Secondary Background<br>Fill: #EDF5FA</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F8FCFF; border: 1px solid #F8FCFF;"></div></p> <p> <div class="caption">Project Pane Background<br>Fill: #F8FCFF</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #EDF5FA; border: 1px solid #EDF5FA;"></div></p> <p> <div class="caption">Project Pane Alt Row<br>Fill: #EDF5FA</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #E0EDF5; border: 1px solid #E0EDF5;"></div></p> <p> <div class="caption">Swimlane Background<br>Fill: #E0EDF5</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #ECF5FA; border: 1px solid #ECF5FA;"></div></p> <p> <div class="caption">Swimlane Alt Background<br>Fill: #ECF5FA</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #C2DDEA; border: 1px solid #C2DDEA;"></div></p> <p> <div class="caption">Swimlane Border<br>Fill: #C2DDEA</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #D0E5F2; border: 1px solid #D0E5F2;"></div></p> <p> <div class="caption">Group Background<br>Fill: #D0E5F2</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #DEEEF8; border: 1px solid #DEEEF8;"></div></p> <p> <div class="caption">Group Alt Background<br>Fill: #DEEEF8</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #B3D4E5; border: 1px solid #B3D4E5;"></div></p> <p> <div class="caption">Group Border<br>Fill: #B3D4E5</div></p> <p> </div></p> <p> <!-- Bar Fill Colors --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #3B97D3; border: 2px solid #2E76A6; color: #FFFFFF;"></p> <p> Bar 1<br></p> <p> Fill: #3B97D3<br></p> <p> Outline: #2E76A6</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #5BB0D5; border: 2px solid #488CAB; color: #FFFFFF;"></p> <p> Bar 2<br></p> <p> Fill: #5BB0D5<br></p> <p> Outline: #488CAB</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #88CCE7; border: 2px solid #6DA3B8; color: #FFFFFF;"></p> <p> Bar 3<br></p> <p> Fill: #88CCE7<br></p> <p> Outline: #6DA3B8</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #00B2A9; border: 2px solid #008E87; color: #FFFFFF;"></p> <p> Bar 4<br></p> <p> Fill: #00B2A9<br></p> <p> Outline: #008E87</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FF7F50; border: 2px solid #CC663F; color: #FFFFFF;"></p> <p> Bar 5<br></p> <p> Fill: #FF7F50<br></p> <p> Outline: #CC663F</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFB347; border: 2px solid #CC8F39; color: #333333;"></p> <p> Bar 6<br></p> <p> Fill: #FFB347<br></p> <p> Outline: #CC8F39</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #36486B; border: 2px solid #2A3854; color: #FFFFFF;"></p> <p> Bar 7<br></p> <p> Fill: #36486B<br></p> <p> Outline: #2A3854</p> <p> </div></p> <p> </div></p> <p> <!-- Grid Colors --></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F8FCFF; border: 1px solid #F8FCFF;"></div></p> <p> <div class="caption">Grid Background<br>Fill: #F8FCFF</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #EDF5FA; border: 1px solid #EDF5FA;"></div></p> <p> <div class="caption">Grid Alt Row<br>Fill: #EDF5FA</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #D2E3ED; border: 1px solid #D2E3ED;"></div></p> <p> <div class="caption">Grid Lines<br>Fill: #D2E3ED</div></p> <p> </div></p> <p> </section></p> <p> <!-- Interactive Elements --></p> <p> <section class="category"></p> <p> <h3>Interactive Elements</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #3B97D3; color: #FFFFFF; border: 1px solid #3B97D3;"></p> <p> Primary Button<br></p> <p> Fill: #3B97D3<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #5BB0D5; color: #FFFFFF; border: 1px solid #5BB0D5;"></p> <p> Secondary Button<br></p> <p> Fill: #5BB0D5<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FF7F50; color: #FFFFFF; border: 1px solid #FF7F50;"></p> <p> Accent Button<br></p> <p> Fill: #FF7F50<br></p> <p> Font: #FFFFFF</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #3B97D3; border: 1px solid #3B97D3;"></p> <p> Link Color<br></p> <p> Fill: #3B97D3<br></p> <p> Hover: #2E76A6</p> <p> </div></p> <p> </div></p> <p> </section></p> <p> <!-- System Status Colors --></p> <p> <section class="category"></p> <p> <h3>System Status Colors</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #00B2A9; border: 1px solid #00B2A9;"></p> <p> Success<br></p> <p> Fill: #00B2A9</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFB347; border: 1px solid #FFB347;"></p> <p> Warning<br></p> <p> Fill: #FFB347</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FF7F50; border: 1px solid #FF7F50;"></p> <p> Error<br></p> <p> Fill: #FF7F50</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #5BB0D5; border: 1px solid #5BB0D5;"></p> <p> Info<br></p> <p> Fill: #5BB0D5</p> <p> </div></p> <p> </div></p> <p> </section></p> <p> <!-- Form Elements --></p> <p> <section class="category"></p> <p> <h3>Form Elements</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #FFFFFF; border: 1px solid #D2E3ED;"></div></p> <p> <div class="caption">Input Background<br>Fill: #FFFFFF</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #D2E3ED; border: 1px solid #D2E3ED;"></div></p> <p> <div class="caption">Input Border<br>Fill: #D2E3ED</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #2D4B5A; color: #2D4B5A; border: 1px solid #2D4B5A;"></p> <p> Input Text<br></p> <p> Fill: #2D4B5A</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #8BA9BA; border: 1px solid #8BA9BA;"></div></p> <p> <div class="caption">Input Placeholder<br>Fill: #8BA9BA</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #3B97D3; border: 1px solid #3B97D3;"></div></p> <p> <div class="caption">Input Focus Border<br>Fill: #3B97D3</div></p> <p> </div></p> <p> </section></p> <p> <!-- Selection/State --></p> <p> <section class="category"></p> <p> <h3>Selection/State</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #DEEEF8; border: 1px solid #DEEEF8;"></div></p> <p> <div class="caption">Selected Item Background<br>Fill: #DEEEF8</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #2D4B5A; color: #2D4B5A; border: 1px solid #2D4B5A;"></p> <p> Selected Item Text<br></p> <p> Fill: #2D4B5A</p> <p> </div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #ECF5FA; border: 1px solid #ECF5FA;"></div></p> <p> <div class="caption">Hover State Background<br>Fill: #ECF5FA</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #C5D9E3; border: 1px solid #C5D9E3;"></div></p> <p> <div class="caption">Disabled State<br>Fill: #C5D9E3</div></p> <p> </div></p> <p> </section></p> <p> <!-- Dividers/Structural Elements --></p> <p> <section class="category"></p> <p> <h3>Dividers/Structural Elements</h3></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #D2E3ED; border: 1px solid #D2E3ED;"></div></p> <p> <div class="caption">Divider Color<br>Fill: #D2E3ED</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #F8FCFF; border: 1px solid #F8FCFF;"></div></p> <p> <div class="caption">Card/Container Background<br>Fill: #F8FCFF</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: #D2E3ED; border: 1px solid #D2E3ED;"></div></p> <p> <div class="caption">Card Border<br>Fill: #D2E3ED</div></p> <p> </div></p> <p> <div class="color-item"></p> <p> <div class="color-box" style="background-color: rgba(45,75,90,0.1); border: 1px solid rgba(45,75,90,0.1);"></div></p> <p> <div class="caption">Shadow Color<br>Fill: rgba(45,75,90,0.1)</div></p> <p> </div></p> <p> </section></p> <p> </div></p> <p> <!-- ================= End Ocean Palette ================= --></p> <p> <script></p> <p> const select = document.getElementById('paletteSelect');</p> <p> const palettes = document.querySelectorAll('.palette');</p> <p> select.addEventListener('change', function() {</p> <p> palettes.forEach(palette => palette.classList.remove('active'));</p> <p> const selected = select.value;</p> <p> document.getElementById('palette-' + selected).classList.add('active');</p> <p> });</p> <p> </script></p> <p></body></p> <p></html></p> <p>