Power
Hex
CC0000
Copied!
RGB
204 0 0
Might
Hex
FCF0F0
Copied!
RGB
252 240 240
Salt
Hex
FFFFFF
Copied!
RGB
255 255 255
Pepper
Hex
312f2e
Copied!
RGB
49 47 46
Stone
Hex
ECEBEB
Copied!
RGB
236 235 235
Golden
Hex
FED348
Copied!
RGB
254 211 72

Brand Colors

As part of ArkBM's branding specific personas will have assigned colors, and various colors also are used as visual cues for users

Power

Dominant, actionable & attention grabbing "Power" is used.

Might

Highlight, accent & complement or enhance other colors.

Salt

Secondary color to provide contrast &  deliver a clean, simple background or text.

Pepper

Works best as a secondary color to amp up a bright accent colors.

Stone

May not be dominant but, can be used as an accent color and graphics.

Golden

Create a bold pop and it's frequently paired with "Pepper".

Use with Salt colored text on top

Power

Use with Salt colored text on top

Pepper

Use with Pepper colored text on top

Golden

Color Usage

Based on the ArkBM app, each user group has a specified color theme. The selected color will be the primary display color while all other colors will be used as accents.

ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz-0123456789-«+»!?.*\\/()£€$¥¢+−±×÷=≠≈<>≤ċðđłĵğſþŧřßŋąŀēıőķůỳ
ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz-0123456789-«+»!?.*\\/()£€$¥¢+−±×÷=≠≈<>≤ċðđłĵğſþŧřßŋąŀēıőķůỳ
ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz-0123456789-«+»!?.*\\/()£€$¥¢+−±×÷=≠≈<>≤ċðđłĵğſþŧřßŋąŀēıőķůỳ

Montserrat

1. Semi-Bold
2. Classic
3. Regular

Header
Oui
Sub-header
it's possible with ArkBM
Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Montserrat

Usage

Headers should be Montserrat Semi-Bold.

Sub-Header should be Classic.

Paragraphs should be Regular.

Corners

To help create a modern yet sophisticated look NO shapes should contain sharp corners. All component corners should be rounded.

To help create a modern yet sophisticated look NO shapes should contain sharp corners. All component corners should be rounded.

Shadow

Shadows are an important part of the design system because they help create specified sections that user can easily identify against the whitespace of the page.

All components that lay on top of white space should use  the specified drop shadow below. Drop Shadow - Blur 20%, Opacity 7%*X & Y coordinates can be adjusted to best fit the layout of page but most common usage is X-0 Y-10

Where there are areas of colored background the only elements that need shadow are profile images for users, text and icons can sit directly on the page. Background Blur - 4%

Blur

Utilize screen blurs when there is a pop-up or overlay covering any part of the main screen. This will help focus users' gaze and combat information overload on a single page

Make sure to blur the entirety of the screen except for navigation components that might still be helpful to users Overlay Background Blur - 4%

Spacing

Spacing on pages may vary slightly due to the number of components users need.

Below are the minimum and maximum spaces allowed. Always arrange components with spaces that are multiples of 6 (ex: 6 px, 12px, 24 px) Minimum - 6px Maximum -  96 px

Alignment

Left align all text unless it is being used to label an icon, in this case, center with the icon.

Polo Shirts

Collar shirts can be short or long, dress shirts or polo style.

All shirts must be crew neck style and logo left breast. Logo size should be 3 inches long.

T-shirts

All shirts must be crew neck style and logo left breast. T-shirts must be pocketless. Logo size should be 3 inches long.

Icons

Icons should always be placed to the right of any wording, paragraphs, or text.

Change the color of the logo.
Squash the logo.
Outline the logo.

Images

ArkBM uses the images of the local area that they are referring to.

Symbol

ArkBM’s red circle indicates the complete of the page, project or sentence.

Partners

Collabs

All ArkBM partners docs will be shown side by side with our logo first.

Grids

Using grids is essential to keeping consitency throughout every page

For the page set up, utilize 30 rows and 12 coloums to align text and components onto. If there are no side bars on the left or right use the center 10 columns and leave the last one on each side empty for extra padding.

Visual Hierarchy

Use the rule of thirds for page and component design. Place the most important information in the top 1/3rd of the screen in a horizontal layout then use the bottom 2/3rds vertically to place secondary information.

Stationary Pack

Business cards, stationary docs merch. and other mock ups available upon request.

Slogan

Learn our sound.

Brand personalities allow customers to relate to similar traits while building an emotional connect to the brand. We Sell, Manage & Retain.

Voice

BLACK OWNED

People related emojis MUST display people of color

Sincerity & Competence

Down - To - Earth
Honest
Wholesome
Rebel
Reliable
Intelligent
Hardworking
Successful