Design Elements

Color

Palette

Utility Colors

Color Variables

Each color below maps to specific UI elements and states. These are primarily used for .text-white, .text-dark, and individual element overrides.

Note: not all UI elements and components support these variables yet.

Color Name Usage
--color-trans-bg Semi-transparent backgrounds
--color-border Borders
--color-scrollbar Scrollbars
Text
--color-heading Headings
--color-text Body text
General Links
--color-link Links
--color-link-attn Link attention/hover
Primary Buttons
--color-btn-bg Button background
--color-btn-text Button foreground
--color-btn-border Button border
--color-btn-attn-bg Button attention/hover background
--color-btn-attn-text Button attention/hover foreground
--color-btn-attn-border Button attention/hover border
Secondary Buttons
--color-btn-sec Button color
--color-btn-sec-attn-bg Button attention/hover background
--color-btn-sec-attn-text Button attention/hover foreground
CTA Buttons
--color-btn-cta-bg Button background
--color-btn-cta-text Button foreground
--color-btn-cta-border Button border
--color-btn-cta-attn-bg Button attention/hover background
--color-btn-cta-attn-text Button attention/hover foreground
--color-btn-cta-attn-border Button attention/hover border
Light Buttons
--color-btn-light-text Button foreground
--color-btn-light-border Button border
--color-btn-light-attn-bg Button attention/hover background
--color-btn-light-attn-text Button attention/hover foreground
--color-btn-light-active-bg Button attention/hover background
--color-btn-light-active-text Button attention/hover foreground
Forms
--color-field-label Labels
--color-field-text Form field foreground
--color-field-bg Form field background
--color-field-required Required field indicators
--color-field-border Form field borders
--color-field-border-attn Form field attention/focus borders
--color-field-error Form field errors

Iconography

Font Awesome

KI uses Font Awesome. To use an icon, copy the HTML or SVG provided by Font Awesome. Icons can be styled with classes found in the Font Awesome documentation.

Example:

<i class="fa-light fa-star fa-2xl"><i>

SVG Icons

Grid & Spacing

Column widths can be changed at each breakpoint with the prefixes:

  • .default-sizeXofY — used to set the initial width for narrow screens
  • .alpha-sizeXofY
  • .bravo-sizeXofY
  • .charlie-sizeXofY or .sizeXofY
  • .delta-sizeXofY
  • .echo-sizeXofY

.size1of1
.size1of2
.size1of2
.size3of5
.size2of5
.size2of3
.size1of3
.size3of4
.size1of4
.size4of5
.size1of5

Columns can be auto-sized by using .size-auto instead of .sizeXofY. This can be set at each breakpoint with the appropriate prefix.

.size-auto
.bravo-size-auto
.bravo-size-auto

Block Grid

Elements can automatically be arranged into a block grid with a specified number of equal-width columns between one and six. The number of columns can be changed at each breakpoint with the prefixes:

  • .default-block-grid-X — used to set the initial number of columns for narrow screens
  • .alpha-block-grid-X
  • .bravo-block-grid-X
  • .charlie-block-grid-X
  • .delta-block-grid-X
  • .echo-block-grid-X
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

Typography

Heading text sizes scale within defined ranges between the "alpha" and "delta" breakpoints.

Hero Title

40-88px Proxima Nova 600 Normal
Used for hero titles, .hero-title

Section Title

28-40px Proxima Nova 600 Normal
Used for section titles, .section-title

Heading 1

40-56px Proxima Nova 600 Normal
Used for <h1>, .heading1

Heading 2

28-40px Proxima Nova 600 Normal
Used for <h2>, .heading2

Heading 3

22-28px Proxima Nova 600 Normal
Used for <h3>, .heading3

Heading 4

18-20px Proxima Nova 600 Normal
Used for <h4>, .heading4

Heading 5

14px Proxima Nova 400 All-Caps
Used for <h5>, .heading5

Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque suscipit dui vitae magna maximus, in imperdiet augue laoreet. Curabitur pretium orci lobortis, imperdiet ante quis, dapibus tortor. Phasellus ac scelerisque nulla. Maecenas lacus nulla, vestibulum eget commodo vitae, dignissim at orci.

16px Proxima Nova 400 Normal
Used for <p>

Large paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque suscipit dui vitae magna maximus, in imperdiet augue laoreet. Curabitur pretium orci lobortis, imperdiet ante quis, dapibus tortor. Phasellus ac scelerisque nulla. Maecenas lacus nulla, vestibulum eget commodo vitae, dignissim at orci.

18-20px Proxima Nova 300 Normal
Used for .large-text

Small paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque suscipit dui vitae magna maximus, in imperdiet augue laoreet. Curabitur pretium orci lobortis, imperdiet ante quis, dapibus tortor. Phasellus ac scelerisque nulla. Maecenas lacus nulla, vestibulum eget commodo vitae, dignissim at orci.

14px Proxima Nova 400 Normal
Used for .small-text

1 2 3 4 5 6 7 8 9 0

Numerals

Text Decorations

Standard Styles

Strong is used to indicate strong importance

This text has added emphasis

Additional Styles

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

Superscript®

Subscript for things like H2O

Lists

Unordered Lists

An unordered list is a list in which the sequence of items is not important.

Ordered Lists

An ordered list is a list in which the sequence of items is important.

  1. This is a list item in an ordered list with the default number indicators
  2. Lists can be nested inside of each other
    1. This is a nested ordered list item
    2. This is another nested list item in an ordered list
  3. List types can be mixed as well
    • This is a nested unordered list item
    • This is another nested list item in an unordered list
  4. This is the last list item
  1. The number type can be set with the type attribute
  2. This is an ordered list with lowercase letters
  3. This list type indicator displays a-z, followed by aa-az, etc.
  1. The number type can be set with the type attribute
  2. This is an ordered list with uppercase letters
  3. This list type indicator displays A-Z, followed by AA-AZ, etc.
  1. The number type can be set with the type attribute
  2. This is an ordered list with lowercase Roman numerals
  1. The number type can be set with the type attribute
  2. This is an ordered list with uppercase Roman numerals

Unstyled List

Default styles can be removed from a list with the class .unstyled-list.

Ruled List

A list with horizonal rules between items can be created with the class .ruled-list.

Striped List

A list with alternating background colors can be created with the class .striped-list.

Flex List

A horizontal list can be created with the class .flex-list. The space between items can be set with gap utility classes.

Links & Buttons

Standard Link

Arrow Link 

Primary Button

Secondary Button

CTA Button

Light Button

Form Fields

Tables

Scrolling Table (Default)

This table scrolls horizontally when the content is wider than the available space.

Item Warranty
Accessories / Components
Casters 15 years
CPU Holders 15 years
Electrical Accessories (Isle Power Tower, Activ8, USB Charger, Qi, PowerUp, Villa) 15 years
Fabric, Vinyl, Leather (KI Ingrades and Pallas only) 3 years
Pallas Fabric (Juggernaut only) 5 years
Flat Screen Monitor Arms 15 years
Foam 15 years
Glides (excluding Felt - no warranty) 15 years
Keyboard Mechanisms 15 years
Laminate HPL (high pressure laminate) 15 years
Laminate LPL (low pressure laminate) 5 years
Lighting 5 years
Mesh 15 years
Pneumatic Cylinder (except Cafeteria at 5 years) 12 years
Tablet Arm 15 years
Universal Height-Adjustable Screens 10 years
Veneer 15 years
Worksurface Embedded Storage (Flat Screen Garage, Smart Lift) 5 years
Benching System
Connection Zone Lifetime
Cafeteria Folding Tables
CafeWay (except pneumatic) 15 years
Uniframe (except pneumatic) 15 years
Pneumatic for CafeWay and Uniframe 5 years

Stacking Table

This table stacks content in a list format until the Bravo breakpoint using the .list-table class.

Item Warranty
Accessories / Components
Casters 15 years
CPU Holders 15 years
Electrical Accessories (Isle Power Tower, Activ8, USB Charger, Qi, PowerUp, Villa) 15 years
Fabric, Vinyl, Leather (KI Ingrades and Pallas only) 3 years
Pallas Fabric (Juggernaut only) 5 years
Flat Screen Monitor Arms 15 years
Foam 15 years
Glides (excluding Felt - no warranty) 15 years
Keyboard Mechanisms 15 years
Laminate HPL (high pressure laminate) 15 years
Laminate LPL (low pressure laminate) 5 years
Lighting 5 years
Mesh 15 years
Pneumatic Cylinder (except Cafeteria at 5 years) 12 years
Tablet Arm 15 years
Universal Height-Adjustable Screens 10 years
Veneer 15 years
Worksurface Embedded Storage (Flat Screen Garage, Smart Lift) 5 years
Benching System
Connection Zone Lifetime
Cafeteria Folding Tables
CafeWay (except pneumatic) 15 years
Uniframe (except pneumatic) 15 years
Pneumatic for CafeWay and Uniframe 5 years

Spacing Utility Class Reference

Size Suffixes

Size suffixes range from xxs to xxl. Their values are documented below. Each size suffix can be appended to margin, padding, and gap classes. The 0 suffix can be used to remove padding, margin, and gap.

0
0
xxs
0.25rem
xs
0.5rem
sm
0.75rem
md
1rem
lg
1.5rem
xl
2rem
xxl
3rem

Padding

Example: .p-b-xl

All Sides
.p-*
Top
.p-t-*
Right
.p-r-*
Left
.p-l-*
Bottom
.p-b-*

Margin

Example: .m-t-lg

All Sides
.m-*
Top
.m-t-*
Right
.m-r-*
Left
.m-l-*
Bottom
.m-b-*

Gap

To be used with flexbox. Example: .gap-x-md

Both Axes
.gap-*
X Axis
.gap-x-*
Y Axis
.gap-y-*