AXEL Style Guide

In order to use this material you must follow these rules:

  • Do not use these images in a way that would confuse someone into thinking that a product or item is made or endorsed by AXEL.
  • Do not use these images in a way that would confuse someone into thinking that a website is run or endorsed by AXEL.
  • Do not alter, stretch, condense, overlay, stylize, or otherwise skew these images in any way.
AXEL Style Guide

Download Assets

Brand Colors

  • Primary
    • Secondary
      • Accent
        • Wild

          Grayscale Colors

          • White
            • Light Grey
              • Dark Grey
                • Charcoal

                  Status Colors

                  • OK
                    • Warning
                      • Error

                        Branding Images

                        Sample 1 Sample 2 Sample 3 Sample 4 Sample 5 Sample 6

                        Background Images

                        Headers

                          • H1 Header Title

                          • H2 Header Title

                          • H3 Header Title

                          • H4 Header Title

                          • H5 Header Title
                          • H6 Header Title
                          • H1 Subheader Title

                          • H2 Subheader Title

                          • H3 Subheader Title

                          • H4 Subheader Title

                          • H5 Subheader Title
                          • H6 Subheader Title

                        Copy

                        • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                        • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                        Default Buttons

                        Hero Buttons

                        Flat Buttons

                        Disabled Buttons

                        Button Groups

                        Note
                        There is no limit to how many buttons can be placed inside .button-group, although this will be determined by the width of your container content. It is recommened to limit the button amount to 2.

                        Dialog Box

                        The Dialog component (also known as modal) can be used to load external content within the same domain or subdomain. This component will not allow content loaded from outside domains or websites for security and performance reasons. The dialog component also has a logical error checking feature that will check to see if the specified content exists, otherwise it will throw an error. Note that the component will only allow 1 dialog box at a time. Use the dialog component sparignly!

                        Attributes

                        • data-content-url="path" - URL path to the external content. Used on block-level elements such as div's and li's.
                        • data-content-selector="id-selector" - The selector id to load the content, ex: #my-selector
                        • data-content-width="400" - Define a fixed width or set to auto and the dialog box will resize appropriately according to the browser's width.
                        • data-content-height="600 - Define a fixed height or set to auto and the dialog box will resize appropriately according to the browser's height.
                        • dialog-title="My Dialog Box" - For accessibility, use this class to define the content's main title.
                        • dialog-description="This is a dialog box." - For accessibility, use this class to define the content's description.
                        Attributes

                        Used with a 'button' element, 'data-content-url' and sizing set to 'auto'.

                        data-content-url="path/to/dialog/content" data-content-selector="id-selector" data-content-width="auto" data-content-height="auto" Copied!
                        Open Dialog
                        Attributes

                        Used with a 'div' element and 'data-content-url' attribute with fixed sizing.

                        data-content-url="path/to/dialog/content" data-content-selector="id-selector" data-content-width="650" data-content-height="400" Copied!
                        Open Dialog
                        Attributes

                        Used with hyperlink text.

                        href="path/to/dialog/content" data-content-selector="id-selector" data-content-width="650" data-content-height="650" Copied!

                        Mouseover

                        These animations are disabled on mobile devices.

                        Helpers

                        • anim-play - Play the element's animation.
                        • anim-interact - The element's animation will play once when in the viewport, and will play on mouse or touch interaction.

                        Animate Top

                        Animate Top Right

                        Animate Right

                        Animate Bottom Right

                        Animate Bottom

                        Animate Bottom Left

                        Animate Left

                        Animate Top Left

                        Microinteractions

                        For microinteractions, the framework utilizes a modified version of the Micron JS animation library. Microinteractions will trigger on mouseover as well as touchstart events.

                        Data Helpers

                        • data-anim="animation" - Define an animtion type: blink, bounce, fade, flicker, groove, jelly, jerk, pop, shake, squeeze, swing, tada.
                        • data-anim-duration="number" - Define the duration (in seconds) of the animation.
                        • data-anim-timing="type" - Define the timing or easing: linear, ease-in, ease-out, ease-in-out.
                        • data-anim-bind="true" data-anim-id="id-selector" - Define the triggering element, and interaction will be applied to the element which reference to the defined id attribute.

                        Blink

                        Attributes
                        data-anim="blink" Copied!

                        Bounce

                        Attributes
                        data-anim="bounce" Copied!

                        Fade

                        Attributes
                        data-anim="fade" Copied!

                        Flicker

                        Attributes
                        data-anim="flicker" Copied!

                        Groove

                        Attributes
                        data-anim="groove" Copied!

                        Jelly

                        Attributes
                        data-anim="jelly" Copied!

                        Jerk

                        Attributes
                        data-anim="jerk" Copied!

                        Pop

                        Attributes
                        data-anim="pop" Copied!

                        Shake

                        Attributes
                        data-anim="shake" Copied!

                        Squeeze

                        Attributes
                        data-anim="squeeze" Copied!

                        Swing

                        Attributes
                        data-anim="swing" Copied!

                        Tada

                        Attributes
                        data-anim="tada" Copied!

                        Looping Microinteractions

                        You can use Class Helpers on specific elements you want to call attention to. These element's will continously loop, but will stop on user interaction. By default animations are paused when not on-screen (or visibible in the browser's viewport).

                        Class Helpers

                        • anim - Track the element's on-screen visibility, otherwise the animated element will continuously play even when not visible on-screen. Note: elements already interacted with will not reset or continue playing if it appears on-screen.
                        • anim-[animation] - Define an animation type where [animation] is: blink, bounce, fade, flicker, groove, jelly, jerk, pop, shake, squeeze, swing, tada
                        • anim-ease-[type] - Define the timing or easing where [type] is: linear, in, out, in-out.

                        Blink

                        Attributes
                        anim anim-blink Copied!

                        Bounce

                        Attributes
                        anim anim-bounce Copied!

                        Fade

                        Attributes
                        anim anim-fade Copied!

                        Flicker

                        Attributes
                        anim anim-flicker Copied!

                        Groove

                        Attributes
                        anim anim-groove Copied!

                        Jelly

                        Attributes
                        anim anim-jelly Copied!

                        Jerk

                        Attributes
                        anim anim-jerk Copied!

                        Pop

                        Attributes
                        anim anim-pop Copied!

                        Shake

                        Attributes
                        anim anim-shake Copied!

                        Squeeze

                        Attributes
                        anim anim-squeeze Copied!

                        Swing

                        Attributes
                        anim anim-swing Copied!

                        Tada

                        Attributes
                        anim anim-tada Copied!