Getting Started​

The style guide is a resource for designers, product managers, and developers, providing a common language around this brand’s UI Patterns. We use it to maintain modular front-end code and visual consistency across the web app.

Color Palette

The brand colors are equal in status and always appear in full tone. They may not be darkened, lightened or displayed transparently.

Main Brand Color

Rich Mahogany

Accent Color​

Silver​

Dark Shade​

Coffee Bean​

Light Shade​

Porcelain

Text Color​

Charcoal​

Functional Grey Tones

For functional applications, the colour palette can be extended to include grey tones ranging from white to black.

Typography

Clear and legible, yet still expressive and exciting, our typography captures your essence in every word. When it’s used consistently, brand recognition becomes effortless.

Font Family + Weights​

Welcome to our font family. Book, Semibold and Bold are our primary font weights, but the full suite may be leveraged for specific use cases.

Work Sans​

Used for headlines

Open Sans​

Used for body copy

Heading (h1)

Hero/Page Title

clamp(3rem, 1.7309rem + 1.813vw, 4rem)

You should only use one H1 per page. The H1 defines the main topic of the page and helps both users and search engines understand what the page is about at a glance.

  • Weight - Semibold only.
  • Size - 4rem (64px)
  • Transform - Capitalized.
  • Style - Normal
  • Decoration - None.
  • Line-Height - 56px
  • Alignment - Flush left or centered. Never flush right.

Heading (h2)

Topic Headline.

clamp(1.8rem, 1.3654rem + 0.9065vw, 2rem)

H2 headings divide your article into its main sections. Each H2 should cover one important aspect of your topic. When someone scans only your H2 headings, they should still be able to understand the overall structure and purpose of your article.

  • Weight - Semibold only.
  • Size - 2rem (32px)
  • Transform - Capitalize.
  • Style - Normal
  • Decoration - None.
  • Line-Height - 48px
  • Alignment - Flush left or centered. Never flush right.

Heading (h3)

Subhead lorem ipsum dolor sit amet consectetur adipscing elit.

clamp(1.4rem, 1.1827rem + 0.4533vw, 1.5rem)

H3 headings are used within an H2 section to break it down into smaller parts. They are useful when you explain steps, compare options, or cover several closely related points within one larger section.

  • Weight - Medium only.
  • Size - 1.5rem (24px)
  • Transform - Capitalized.
  • Style - Normal
  • Decoration - None.
  • Line-Height - 28px
  • Alignment - Flush left or centered. Never flush right.

Body text

For functional applications, the body copy are used in all situation requiring extensive copy.

Body Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. 

  • Weight - Normal only.
  • Size - 1rem (16px)
  • Transform - None.
  • Style - Normal
  • Decoration - None.
  • Line-Height - 1.5rem.
  • Alignment - Flush left or centered. Never flush right.

Caption (fineprint)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

  • Weight - Normal only.
  • Size - .875rem (14px)
  • Transform - None.
  • Style - Normal
  • Decoration - None.
  • Line-Height - 1.5rem.
  • Kerning - Optical kerning with manual adjustments as needed. Use 0-pixel letter spacing for digital
  • Alignment - Flush left or centered. Never flush right.

Components

Components are the “single source of truth.” Instead of designers recreating a search bar from scratch every time, they use a predefined component. This ensures that every search bar across an entire platform looks, feels, and behaves exactly the same way.

Buttons

Here are the standard buttons and various states in the professional style guide.

Primary

Click Here

Secondary

Click Here

Tertiary

Click Here

Secondary Navigation

Here is how we deploy the secondary navigation on inside pages.

Newsletter Sign-Up

Join our mailing list to receive Little Rock A.M.E Zion Church news and updates in your inbox.
Name(Required)