Fabric logo depicting a piece of flowing fabric
FABRIC

Branding

Colors

Primary Palette

primary
 
 
#27aae1
primary light
 
 
#cde4ef
primary dark
 
 
#078ac1
secondary
 
 
#f26522
secondary light
 
 
#ff8542
secondary dark
 
 
#d24502

Greys

black
 
 
#231f20
dark
 
 
#433f40
grey
 
 
#666677
light
 
 
#f3f3f9
white
 
 
#ffffff

Buttons

There are two types of FABRIC buttons:Primary Buttons and Accent Buttons. Both buttons are quite similar in style and differ only in their background colors. The base styling shared by both buttons defines text, text color, padding, and border style:

color: #fff; text-transform: uppercase; padding: 0.5rem 0.75rem; border-width: 1px; border-radius: 4px;

The Primary Button variant has the primary (blue) color defined above for its background color and the dark primary (blue) color for its border color. and it should be used for most actions on a given page.

The Accent Button has the secondary color (orange) color for its background color. and the dark secondary (orange) color for its border color. This button can be thought of as a Call to Action button. It should be used for the main action on a page, and there should not be more than one Accent Buttonon a single page.

Both buttons transition their background colors to their dark counterarts upon hover.

Typography

Heading Text - Montserrat

Title

Subtitle

Heading

Subheading

Body Text - IBM Plex Sans

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta fuga deserunt libero, voluptatum non quae suscipit sapiente rem architecto nihil esse soluta odio, quasi aliquid assumenda quo praesentium consectetur aut.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit mollitia quam nam aperiam debitis optio neque delectus rerum, blanditiis perferendis voluptates explicabo dicta, quas error facilis corrupti, ad obcaecati pariatur voluptatem incidunt ipsa impedit. Quis commodi fugiat repellat natus cumque. Quidem eligendi placeat, laborum nulla doloribus harum odio deserunt culpa sapiente. Quam voluptas magnam dolores minus blanditiis fuga quo quibusdam reprehenderit, facere! Quas minima esse earum asperiores facere possimus eligendi tenetur velit, nam delectus odio, beatae sed quisquam iste consequuntur, modi. Qui voluptates, alias nostrum beatae unde sit veniam neque, corporis reiciendis architecto. Cupiditate possimus ea dolor, laudantium in aperiam.

Want to stay current on updates or learn how to get involved in the FABRIC community?

We'd love to hear from you!