Grid System

See the Code

Grid Sizes

1 of 1 (full width)

1 of 2 (half width)

1 of 3 (third width)

1 of 4 (quarter width)

1 of 8 (eighth width)

Responsive Grids

Depending on the browser or device width, our column sizes change dimensions at determined breakpoints. This allows for a fluid and responsive design across most endpoints.

DeviceWidthColumnGutterNumberMargin
Mobile 480px 60px 20px 6 10px
Tablet 768px 40px 20px 12 34px
Desktop 960px 60px 20px 12 10px

ButtonsSee the Code

We use two different button styles in three different sizes (depending on page context): one for a primary call-to-action and one for a secondary call-to-action. The examples below showcase the hover states and CSS transitions.

Primary CTA Button

SmallTake actionMediumTake action hereLargeTake action here, user

Secondary CTA Button

SmallTake actionMediumTake action hereLargeTake action here, user

TypographySee the Code

We use two different font families for our headers and paragraph styles: Avant Garde for all headers, and Muli for paragraphs and input fields.

Headings

H1 - displayed in TokBox blue, but can be displayed in Slate Gray or White depending on the context:

This is your simple H1

48px/60px Extra Light

H2 - displayed in Slate Gray, but can be displayed in TokBox Blue or White depending on the context:

This is your simple H2

30px/36px Book

H3 - displayed in Slate Gray, but can be displayed in White depending on the context:

This is your simple H3

20px/26px Medium

H4 - displayed in Slate Gray, but can be displayed in White depending on the context:

This is your simple H4

14px/18 px Medium

Body Copy

Body Copy - displayed in Slate Gray, but can be displayed in White depending on the context:

This body copy gives all the pertinent details about the relevant subject. Perhaps there’s also a link to another pagewith details about a new platform feature, benefits of a recent release, etc.

16px/24px Regular

Type Layouts

Below are some common examples of how TokBox's typographic styles can apply to a variety of layouts.

Paragraphs - displayed in Slate Gray, but can be displayed in White depending on the context:

This is your simple H3

Some body copy that gives the pertinent details about the H3 above. Maybe this a description of features under a plan, benefits of a new platform release, etc. You can also get more detailed in a larger paragraph like this, which spans the width of container.

Body Copy - 2 Column Sub-sections:

Your H2 - Column 1

Some body copy that gives all the pertinent details about the H2 above. This could include features, benefits of a new platform release, etc.

Your H2 - Column 2

Some body copy that gives all the pertinent details about the H2 above. This could include features, benefits of a new platform release, etc.

Body Copy - 3 Column Sub-sections:

Global NavigationSee the Code

The TokBox global navigation is the user's foundation for locating and accessing key product, pricing, and TokBox company information. All product marketing content that lives in the tokbox.com domain should have the below global navigation.

TokBox's top navigation is comprised of two sections: the top section gives users clear and unobstructed access to registering for and access their account. The bottom section contains the top level topics that frame the content of our platform, pricing, customer resources and developer center.

Desktop default view of the top navigation, including access to the login and sign up registration flow, top-level navigation sections, and a quick access point to contact sales.

Desktop view of the top navigation with on-hover dropdown.

Default, off-canvas reveal, and expanded views of the mobile navigation.

TokBox's footer exposes most of the page on tokbox.com, acting as foundational sitemap for the user.

Content TemplatesSee the Code

The content templates below illustrate a variety of website UI configurations that follow TokBox design principles. Depending on the content strategy, project goals and audience, you can customize a combination of these templates to create a foundation for any experience on the TokBox website. When building from these templates, please do not crowd content and remember to preserve our brand styles.

Announcement banner featuring an H4, in-line link and UI to allow the user to remove the banner. When used, the announcement banner will sit above the top global navigation, spanning full-width.

Body banner featuring an H3 and a call-to-action button.

Body banner featuring an H3 and an in-line link, in slate gray (below) and rich blue (2nd banner down).

Hero Headers

See the Code

Centered content featuring an H1, H3, primary and secondary call-to-action buttons.

Centered content featuring an H1, H3, primary call-to-action button, and an in-line link.

Centered content featuring an H1, H3, and a call-to-action button.

Centered content featuring an H1 and H3.

Centered content featuring an H1.

Left-aligned content featuring an H1, expanded H3, primary and secondary call-to-acttion buttons. The below image illustrates the template in desktop and large desktop widths. At the tablet and mobile breakpoints, the content automatically center-aligns (see second template below).

Body Layouts

See the Code

Centered content featuring an H2, H3, icon, paragraph, and a primary call-to-action button.

Centered content featuring an H2 in slate gray, icon, paragraph, and a primary call-to-action button.

Left-aligned content featuring an H2, H3, icon, paragraph, and an image.

Right-aligned content featuring an H2, H3, icon, paragraph, and an image.

2-Column Layouts

See the Code

Centered content featuring an H2, icon, paragraph, and two framed columns.

Body content featuring an H2, icon, paragraph, and two list columns. The below image illustrates the template in desktop and large desktop widths. At the tablet and mobile breakpoints, the content automatically adjusts to one column (see second template below).

Body content featuring an H2, icons, a list, and an image. The below image illustrates the template in desktop and large desktop widths. At the tablet and mobile breakpoints, the content automatically adjusts to one column (see second template below).

Body content featuring H2’s, paragraphs, and an image. The below image illustrates the template in desktop and large desktop widths. At the tablet and mobile breakpoints, the content automatically adjusts to one column (see second template below).

3-Column Layouts

See the Code

Body content featuring an H2, icon and three framed columns. The below image illustrates the template in desktop and large desktop widths. At the tablet and mobile breakpoints, the content automatically adjusts to one column (see second template below).

Body content featuring an H2, icon and three columns. The three images below illustrate the variety of templates in desktop and large desktop widths. At the tablet and mobile breakpoints, the content automatically adjusts to one column (see fourth template below).

Body content featuring an H2, icon and three columns. The below image illustrates the template in desktop and large desktop widths. At the tablet and mobile breakpoints, the content automatically adjusts to one column (see second template below).

Conclusion Panel

See the Code

Conclusion template featuring an H1, H3 and primary and secondary call-to-action buttons. The below image illustrates the template in desktop and large desktop widths. At the tablet and mobile breakpoints, the content automatically adjusts to one column (see second template below).