Sandfly Security
Living StyleGuide
This is a public style guide intended for use by partners. The guide reflects the current state of the brand in the UI and can be used as a style reference for other media. For assets and full guidelines - see links below. If you have any questions, feel free to email use on marketing@sandflysecurity.com.
Logos.
Use full logo where possible. Use short when space is limited. Use white or black logo when emphasis is not required. Use blur device and gradients to emphasis key words.
Variants
Full
Short
Mark
Colors.
Color is used very sparingly if at all. White on Black or Black on white / gray. When using color in a brand sense - stick to monochromatic or duotone gradients. When color is used its often applied using blurred background gradients or gradients in text. Don&rlquo;t use Visibility Teal as a font color. It can be used you links but must be a darker shade.
Brand Colors
Visibility Teal
#21f4db / rgb(33, 244, 219)
Detection Blue
#91d0ff / rgb(145, 208, 255)
Responsive Purple
#9a94f5 / rgb(154, 148, 245)
Sandfly White
#ffffff / rgb(255, 255, 255)
Sandfly Black
#000000 / rgb(0, 0, 0)
Sandfly Gun Metal
#10181D / rgb(16, 24, 29)
Sandfly Slate Black
#2b2b2e / rgb(43, 43, 46)
Sandfly Dark Grey
#c3c4c9 / rgb(195, 196, 201)
Sandfly Light Grey
#e8e9ec / rgb(232, 233, 236)
Tints & Shades
Tint 80%
#D3FDF8 / rgb(211, 253, 248)
Tint 60%
#A6FBF1 / rgb(166, 251, 241)
Tint 40%
#7AF8E9 / rgb(122, 248, 233)
Tint 20%
#4DF6E2 / rgb(77, 246, 226)
Shade 20%
#1AC3AF / rgb(26, 195, 175)
Shade 40%
#149283 / rgb(20, 146, 131)
Shade 60%
#0D6258 / rgb(13, 98, 88)
Shade 80%
#07312C / rgb(7, 49, 44)
Tint 80%
#e9f6ff / rgb(233, 246, 255)
Tint 60%
#d3ecff / rgb(211, 236, 255)
Tint 40%
#bde3ff / rgb(189, 227, 255)
Tint 20%
#a7d9ff / rgb(167, 217, 255)
Shade 20%
#74a6cc / rgb(116, 166, 204)
Shade 40%
#577d99 / rgb(87, 125, 153)
Shade 60%
#3a5366 / rgb(58, 83, 102)
Shade 80%
#1d2a33 / rgb(29, 42, 51)
Typography.
Type is generally weighted between 500 - 700. Color is used very sparingly if at all. White on Black or Black on white / gray.Avoid thin and extra bold weights
Note: font, weight, size, line height, letter space.
Heading 1 - "Inter", 600, 3.5rem
Heading 2 - "Inter", 600, 2.75rem
Heading 3 - "Inter", 500, 1.75rem
Heading 4 - "Inter", 500, 1.25rem
Paragraph - "Inter", 500, 1.5. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium praesentium corrupti dolores placeat nulla, pariatur voluptatibus libero officiis illo neque asperiores architecto anchor link (color: primary) hic emphasis (font-style: italic), quos bold (font-weight: 600), a quidem id?
Codefont - "IBM Plex Mono", 400, 1rem, 1.5.Blockquote - "Inter", 600
Cite - "Inter", 500, Italic