Living StyleGuide
This document reflects the current state of the brand in the UI and maybe subject to change, but can be used as a style reference for other digital media. For assets and full guidelines - see links below. If you have any questions, feel free to email me on jacob.carrington@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
Primary
Secondary
Inherit
Mode
Light
Dark
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
#21f4dbDetection Blue
#91d0ffResponsive Purple
#9a94f5Sandfly White
#fffSandfly Black
#000Sandfly Slate Black
#2b2b2eSandfly Dark Grey
#c3c4c9Sandfly Light Grey
#e8e9ecTints & Shades
Tint 80%
#d3fdf8Tint 60%
#a6fbf1Tint 40%
#7af8e9Tint 20%
#4df6e2Shade 20%
#1ec7b3Shade 40%
#1c9a8bShade 60%
#196e64Shade 80%
#17413cTint 80%
#e9f6ffTint 60%
#d3ecffTint 40%
#bde3ffTint 20%
#a7d9ffShade 20%
#78aad0Shade 40%
#5f85a1Shade 60%
#465f72Shade 80%
#2d3a43Design System References
Primary
Teal
#21f4dbSecondary
Blue
#91d0ffTertairy
Purple
#9a94f5Accent
Teal
#21f4dbLink Color
Teal Shade 20%
#1ec7b3Text Color
Slate Black
#2b2b2eBackground
White
#fafafbPrimary Gradient
Teal -> Blue
linear-gradient(135deg, #21f4db 40%, #91d0ff 100%)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", 500, 2.625rem ,1.4em, -0.01em
Heading 2 - "Inter", 600, 2rem, 1.25em,-0.01em
Heading 3 - "Inter", 600, 1.575rem, 1.4em
Heading 4 - "Inter", 700, 1rem, 1.66em
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 - "Roboto Mono", 400, 1rem, 1.5.Blockquote - "Inter", 700, 1.3125rem, 1.5
Cite - "Inter", 600, 1.125rem, 1.5