Styles

Colors

event cyan green1 66b6ab
gulf stream green2 7ab3aa
blue chilli green3 079493
teal green4 06807f
attack yellow yellow1 ced001
wattle yellow2 dad338
conifer yellow3 bada55
incident red red1 ff1b51
watermelon red2 fd4772
shiraz red3 b81038
scooter blue1 2fb6c6
bondi blue blue2 008cba
casper blue3 a3beca
bluewood blue4 34495e
bon jour light1 f4f5f8
celeste grey1 cccccc
mountain mist grey2 999999
storm dust grey3 666666
mine shaft grey4 333333
abbey mid2 4c4f4f
black haze light2 ecedf3
athens grey light3 dfdfdf
french grey mid1 bbbcc7
waterloo mid7 818395
stardust mid3 969ca3
bright grey dark3 323f4c
pewter mid4 95a5a6
oslo grey mid6 7f8c8d
regent grey mid5 7c939d
shuttle grey dark1 566c70
plantation dark2 2d4a50
cable green dark4 203539

 

Typography

Futura PT Light

Weight 300, letter-spacing 0.07ems

Futura PT Regular

Weight 400, letter-spacing 0.0075ems

Futura PT Bold

Weight 700, letter-spacing 0.035ems

 

Web fonts licenced and hosted
via Adobe Typekit.

 

Examples:

h1. A Very Large header

h2. Another large header

h2.onboard-welcome

h2.onboard-welcome

h2.onboard-tasks

h2.welcome-text

 

h3. This is a medium header

h3. Scan text header

h3. Content header

h3. Content Alert Header header

 

h4. This is a moderate header

h4. Day header

 

h5. This is a small header
h5. line-chart-wrap header
h5. Content header

 

Paragraph text. Security is a strong brand differentiator. Your customers deserve the respect they are entitled to. We also understand that growing your business is your main priority and have built Barricade with that in mind.

It's extremely easy for engineers and ops teams to setup, then we fade into the background for the majority of the time. We only alert you with important information and steps to remedy the situation.

p.light-text Security is a strong brand differentiator. Your customers deserve the respect they are entitled to. We also understand that growing your business is your main priority and have built Barricade with that in mind.

It's extremely easy for engineers and ops teams to setup, then we fade into the background for the majority of the time. We only alert you with important information and steps to remedy the situation.

p.chart_num 100%

p.chart_name

p.date Date Text


 

 

UI Elements

Our Style Guide is built on top of Foundation 5, a powerful front-end framework built and maintained by the fine folks at ZURB.

Thanks too to Pinecone for their angular-foundation project.

Standard Button Examples:

 

Custom Border Buttons:

Sizes:

Large Button    Large Button
Regular Button    Regular Button
Small Button    Small Button
Tiny Button    Tiny Button
Compact Button    Compact Button Filter

 

Form Examples:

.com

 

Icons

Events
Attacks
Incidents

Our primary icons denote events, attacks and incidents detected by agents.
Additional Icons are via Font Awesome, the wonderful open source toolkit by @davegandy.

area-chart
ban
bar-chart
bell
bolt
bookmark
bullhorn
bullseye
certificate
check
check-circle
check-circle-o
check-square
check-square-o
child
circle
circle-o
circle-o-notch
circle-thin
clock-o
close (alias)
cloud
cloud-download
cloud-upload
code
code-fork
cog
cogs
comment
copyright
crop
crosshairs
dashboard (alias)
database
desktop
dot-circle-o
download
edit (alias)
exclamation
exclamation-circle
exclamation-triangle
external-link
external-link-square
eye
eyedropper
filter
flag
flash (alias)
flask
gear (alias)
gears (alias)
globe
group (alias)
hdd-o
heart
home
image (alias)
inbox
info
key
keyboard-o
language
laptop
level-down
level-up
line-chart
location-arrow
lock
magic
navicon (alias)
paper-plane
paper-plane-o
pie-chart
plug
power-off
question
recycle
refresh
remove (alias)
rocket
search
send (alias)
server
shield
sign-in
sign-out
signal
sitemap
sliders
spinner
star
tachometer
tag
tasks
terminal
trash
unlock
unlock-alt
upload
user
users
warning (alias)
wrench