<section class="ui_section" id="colors">
    <h2 class="ui_section_title">Color Palette</h2>

    <div class="ui_palette">
        <div class="ui_color">
            <div class="ui_color_box bg_primary"></div>
            <span>Primary</span>
        </div>

        <div class="ui_color">
            <div class="ui_color_box bg_secondary"></div>
            <span>Secondary</span>
        </div>

        <div class="ui_color">
            <div class="ui_color_box bg_accent"></div>
            <span>Accent</span>
        </div>

        <div class="ui_color">
            <div class="ui_color_box bg_info"></div>
            <span>Info</span>
        </div>

        <div class="ui_color">
            <div class="ui_color_box bg_success"></div>
            <span>Success</span>
        </div>

        <div class="ui_color">
            <div class="ui_color_box bg_warning"></div>
            <span>Warning</span>
        </div>

        <div class="ui_color">
            <div class="ui_color_box bg_error"></div>
            <span>Error</span>
        </div>
    </div>
</section>