brand.md

layout
~/layouts/MainPageLayout

Secret Brand

Mission Statement

We build groundbreaking privacy technologies with a focus on increasing usability and adoption. We empower our own community to contribute directly to the success of our network and its applications, and we enable them to directly benefit from its growth. We are passionate and inclusive. We maintain a global presence. We work hard towards driving usage and awareness. We educate and cultivate our community. We build relationships and partnerships across the world so that people everywhere can benefit from privacy.

Vision Statement

By solving for data privacy, Secret Network will become a foundational pillar of a more decentralized, more democratic, and more empowering internet. Providing privacy and protecting data is critical for empowering people, protecting their freedoms, and unlocking value for users all around the world. We strive to build a sustainable network, ecosystem, and community that will work towards global adoption of our technologies.

Our visual brand is

humanist.

organic.

illustrated.

flowing.

striking.

Download our Brandbook

Logo

Icon

The Secret S evokes a flowing network and the duality of secrets: privacy and transparency.

The ends of the S are open, allowing data to freely flow in and out. The interior of the S is private, an enclave that encloses the activity of the network itself.

The overall shape of the S is reminiscent of a yin-yang, again reflecting the duality of a privacy-preserving network — a deeply humanist technology.

Primary Logo

SVG | PNG

SVG | PNG

Secondary Logo

SVG | PNG

SVG | PNG

Typography

Heading 1
Montserrat Bold (700)

Heading 2

Heading 3

Heading 4

Hind Regular (400) is used body copy, and Hind Bold (700) is used for bold body copy, buttons and alerts.

Paint Swirl

Analog Colors

SVG | PNG

High Key Colors

SVG | PNG

Topographical Map

SVG | PNG

SVG | PNG

Analog Colors

Primary

Secondary

Tertiary

High Key Colors

Primary

Secondary

Tertiary

<style lang="scss"> .statements { @include respond-to("medium and down") { grid-row-gap: rem(34px); } } .our-brand-is { grid-row-gap: $gutter-xxlarge; h2 { .animated-text { display: inline-block; position: relative; height: rem(34px); } .animated-text>div { opacity: 0; height: 0px; position: absolute; } .animated-text>div:nth-child(1){ animation: animation 10s infinite; color: $primary-orange-color; } .animated-text>div:nth-child(2){ animation: animation 10s infinite; animation-delay: 2s; color: $primary-cream-color; } .animated-text>div:nth-child(3){ animation: animation 10s infinite; animation-delay: 4s; color: $primary-red-color; } .animated-text>div:nth-child(4){ animation: animation 10s infinite; animation-delay: 6s; color: $primary-blue-color; } .animated-text>div:nth-child(5){ animation: animation 10s infinite; animation-delay: 8s; color: #EDC92B; } @keyframes animation { 0% {opacity: 0; height: auto;} 16% {opacity: 1;} 33% {opacity: 0; height: 0px;} 100% {opacity: 0; height: 0px;} } @include respond-to("medium and down") { .animated-text { display: block; position: relative; height: rem(34px); } } } .white-button { display: block; width: rem(289px); margin: 0 auto; text-align: center; border-radius: 10px; padding: 10px 0; color: var(--theme-bg); background-color: var(--theme-fg); font-weight: bold; text-decoration: none; @include respond-to("xsmall and down") { width: 100%; } @include theme(dark dark-colored) { &:hover { color: $primary-red-color; } } @include theme(light light-colored) { &:hover { color: $primary-blue-color; } } } } .logo-section { h2 { margin-bottom: rem(50px); } h3 { margin-bottom: rem(34px); } } .grid { .color-palette { &.black, &.white { .color-palette__color { border: 2px solid var(--theme-fg); } } } &.icon-grid { grid-template-columns: 148px 1fr !important; grid-column-gap: 34px; height: auto; margin-bottom: rem(66px); @include respond-to("medium and down") { grid-template-columns: 100% !important; grid-template-rows: auto !important; grid-row-gap: rem(34px); justify-items: left; } } &.secret-logos-grid { .secret-logos-grid__item { text-align: center; margin-bottom: rem(66px); p { margin: 0; font-weight: bold; img { border: 2px solid var(--theme-fg); } a { text-decoration: none; @include theme(dark dark-colored) { color: $secondary-turquoise-color; } @include theme(light light-colored) { color: $primary-blue-color; } } } } } } .opaque-headings { h1, h3, h4, p { opacity: 0.6; } h1 { margin-top: 0; @include respond-to("medium and up") { white-space: nowrap; } } h2 { &:not(:first-child) { opacity: 0.6; } &:first-child { margin-bottom: rem(34px); } } } .topographical-map-title { padding-bottom: rem(8px); } #paint-swirl, #topographical-map { margin-bottom: 0; } .paint-swirls { h3 { margin-bottom: rem(34px); } p { font-weight: bold; text-align: center; margin: 0; img { border: 2px solid var(--theme-fg); } a { text-decoration: none; @include theme(dark dark-colored) { color: $secondary-turquoise-color; } @include theme(light light-colored) { color: $primary-blue-color; } } } @include respond-to("medium and down") { grid-row-gap: rem(34px); } } .color-palette { h2, h3 { margin-bottom: rem(34px); } .grid { grid-column-gap: $gutter; grid-row-gap: $gutter; margin-bottom: $gutter-xlarge; } } </style>