Object | Color

Object | Color | Text Colors

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
HTML
<div class="ss-c-grid">
            <label>.object--color--text_primary</label>
            <div class="ss-c-swatch ss-c-object--color--text_primary">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--text_secondary</label>
            <div class="ss-c-swatch ss-c-object--color--text_secondary">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--text_tertiary</label>
            <div class="ss-c-swatch ss-c-object--color--text_tertiary">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
        </div>

Object | Color | Line Colors

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
HTML
<div class="ss-c-grid">
            <label>.object--color--line_primary</label>
            <div class="ss-c-swatch ss-c-object--color--line_primary">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--line_secondary</label>
            <div class="ss-c-swatch ss-c-object--color--line_secondary">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--line_tertiary</label>
            <div class="ss-c-swatch ss-c-object--color--line_tertiary">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
        </div>

Object | Color | Fill Colors

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
HTML
<div class="ss-c-grid">
            <label>.object--color--color_primary</label>
            <div class="ss-c-swatch ss-c-object--color--fill_primary">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--color_secondary</label>
            <div class="ss-c-swatch ss-c-object--color--fill_secondary">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--color_tertiary</label>
            <div class="ss-c-swatch ss-c-object--color--fill_tertiary">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
        </div>

Object | Color | Accent Colors

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
HTML
<div class="ss-c-grid">
            <label>.object--color--accent_primary</label>
            <div class="ss-c-swatch ss-c-object--color--accent_primary">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--accent_secondary</label>
            <div class="ss-c-swatch ss-c-object--color--accent_secondary">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--accent_tertiary</label>
            <div class="ss-c-swatch ss-c-object--color--accent_tertiary">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
        </div>

Object | Color | State Colors

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
HTML
<div class="ss-c-grid">
            <label>.object--color--state_visited</label>
            <div class="ss-c-swatch ss-c-object--color--state_visited">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--state_focus</label>
            <div class="ss-c-swatch ss-c-object--color--state_focus">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--state_hover</label>
            <div class="ss-c-swatch ss-c-object--color--state_hover">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--state_active</label>
            <div class="ss-c-swatch ss-c-object--color--state_active">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--state_link</label>
            <div class="ss-c-swatch ss-c-object--color--state_link">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--state_enabled</label>
            <div class="ss-c-swatch ss-c-object--color--state_enabled">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--state_disabled</label>
            <div class="ss-c-swatch ss-c-object--color--state_disabled">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--state_current</label>
            <div class="ss-c-swatch ss-c-object--color--state_current">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--state_checked</label>
            <div class="ss-c-swatch ss-c-object--color--state_checked">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--state_invalid</label>
            <div class="ss-c-swatch ss-c-object--color--state_invalid">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--state_muted</label>
            <div class="ss-c-swatch ss-c-object--color--state_muted">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
        </div>

Object | Color | Log Colors

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
HTML
<div class="ss-c-grid">
            <label>.object--color--log_trace</label>
            <div class="ss-c-swatch ss-c-object--color--log_trace">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--log_debug</label>
            <div class="ss-c-swatch ss-c-object--color--log_debug">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--log_success</label>
            <div class="ss-c-swatch ss-c-object--color--log_success">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--log_info</label>
            <div class="ss-c-swatch ss-c-object--color--log_info">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--log_notice</label>
            <div class="ss-c-swatch ss-c-object--color--log_notice">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--log_warning</label>
            <div class="ss-c-swatch ss-c-object--color--log_warning">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--log_audit</label>
            <div class="ss-c-swatch ss-c-object--color--log_audit">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--log_error</label>
            <div class="ss-c-swatch ss-c-object--color--log_error">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--log_security</label>
            <div class="ss-c-swatch ss-c-object--color--log_security">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--log_critical</label>
            <div class="ss-c-swatch ss-c-object--color--log_critical">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--log_alert</label>
            <div class="ss-c-swatch ss-c-object--color--log_alert">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <label>.object--color--log_emergency</label>
            <div class="ss-c-swatch ss-c-object--color--log_emergency">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
        </div>