Styleguide
The sky is the limit - and it is where it all began.
Intro
A planet gives people their only natural environment. It unites what belongs together and is the most constant geometric form of all.
We see the “S” logomark slightly from below. Ascending from a flat circle to a three-dimensional sphere, it unites gathered knowledge in itself and distributes it in all directions using genuine social connections. The perspective portraits the power of personal gathering, which always leaves a lasting impression - and learnings. Because the collective is smarter than any individual.
Let's get back down to earth: Sweap - that’s a unique name. Simplicity and efficiency are our core values. We empower marketing experts to organise perfect events at ease.
Because commitment is hard enough. We have the tool to bring people and their knowledge together!
Logo
Construction
„S“ Shape Characteristics
To achieve a perfect 1:1 shape, the signet was intentionally scaled out of a circle. Although this does not result in a mathematical circular shape for the "S", it does simplify design processes and implementations.
Logo Gradient
Logo layouts
There are two logo layouts for different applications.
Both variants consist of the Sweap Sphere - our signet - and the lettering. Please do not separate or adjust the proportions of these two elements.
1. Standard - preferred version
Cross-format arrangement for as many applications as possible
2. Compact
Portrait layout for applications where the standard logo cannot be used optimally e.g. square social media profile images.
Logo application on different backgrounds
onlight
For use on light backgrounds
ondark
For use on dark backgrounds
onblue = white
For use on blue background
ongreen = white
For use on green background
ongradient = white
For use on the Sweap background gradient
Logo Download
Color Scheme
Colour system with primary and secondary colors
-
#E9F5F9
-
#B4DCEB
-
#70BEDA
-
Sweap
Blue
HEX
#339cc2
RGB
51/156/194
CMYK
70/15/10/10
-
#287C9A
-
#1A5064
-
#DCF7EF
-
#B2EDDC
-
#7BE1C3
-
Sweap
Ocean Green
HEX
#44d4aa
RGB
68/212/170
CMYK
60/0/50/0
-
#28AC86
-
#1B755B
-
#fff4e0
-
#ffd48b
-
#ffc258
-
Sweap
Orange
HEX
#ffaf25
RGB
255/175/37
CMYK
0/38/90/0
-
#f19900
-
#be7800
-
#F3F3F3
-
#B8B8B8
-
#747474
-
Sweap
Anthracite
HEX
#303030
RGB
48/48/48
CMYK
70/60/60/65
-
#E5F7E7
-
#B1E7B9
-
#71D27E
-
Sweap
Green
HEX
#39b54a
RGB
57/181/74
CMYK
74/0/91/0
-
#2D9C3B
-
#268232
-
#F2FAE9
-
#D8F0BD
-
#AADC70
-
Sweap
Light Green
HEX
#8acf39
RGB
138/207/57
CMYK
55/0/95/0
-
#679E26
-
#436719
-
#EFDEFF
-
#DAB5FF
-
#BD86F4
-
Sweap
Purple
HEX
#AB79DD
-
#9066B9
-
#745296
-
#fcf9cf
-
#f8f29f
-
#f5ec70
-
Sweap
Yellow
HEX
#f2e640
RGB
242/230/64
CMYK
9/0/82/0
-
#efe010
-
#cfc20e
-
#ffb7b7
-
#ff7373
-
#ff4040
-
Sweap
Alert Red
HEX
#ff0d0d
RGB
255/13/13
Nur digital
einsetzbar!
-
#d90000
-
#a60000
Gradient (Blue to Ocean Green)
CSS Code of the Gradient
background-image: linear-gradient(342deg,#44D4AA 0%,#2BCFB2 11.11%,#00C9B8 22.22%,#00C3BE 33.33%,#00BDC2 44.44%,#00B7C5 55.56%,#00B1C6 66.67%,#00AAC6 77.78%,#1EA3C5 88.89%,#339CC2 100%);
opacity: .8;
Color Scheme Download
The ZIP archive contains both the RGB and the CMYK colors, which are available in the file formats .ai and .ase.
If you want to use the Sweap colors in your files or pass them on to other designers, please use the Adobe Swatch Exchange file (.ase). You can import this file into Adobe InDesign as well as Illustrator and Adobe Photoshop.
Typography
The Rubik Typeface
Rubik is a sans serif typeface family designed by Philipp Hubert and Sebastian Fischer on behalf of Google for the Chrome Cube Lab. It features bold proportions with rounded corners and low stroke contrast. As part of the Google Fonts library, Rubik is freely available through an Open Font License.
Typeface Download
Font styles in use
Regular
Medium
Type scale
This type scale uses a 1.2 ratio (Minor Third), so each step is proportionally larger or smaller than the previous one.
Font sizes are fluid with clamp(): they scale smoothly between mobile (320px) and desktop (1440px).
For environments where fluid sizing is not possible, each token also has a rounded static fallback value.
Readability is preserved with two line-height zones:
1.618 for body and small text (base and below)
1.2 for headings (md and above)Result: consistent hierarchy, better responsiveness, and predictable fallback behavior.
Font size 10XL
font-size: clamp(108.36px → 187.24px) | static: 187px | line-height: 1.2 | font-weight: 500;
Font size 9XL
font-size: clamp(90.30px → 156.03px) | static: 156px | line-height: 1.2 | font-weight: 500;
Font size 8XL
font-size: clamp(75.25px → 130.03px) | static: 130px | line-height: 1.2 | font-weight: 500;
Font size 7XL
font-size: clamp(62.71px → 108.36px) | static: 108px | line-height: 1.2 | font-weight: 500;
Font size 6XL
font-size: clamp(52.25px → 90.30px) | static: 90px | line-height: 1.2 | font-weight: 500;
Font size 5XL
font-size: clamp(43.55px → 75.25px) | static: 75px | line-height: 1.2 | font-weight: 500;
Font size 4XL
font-size: clamp(30.24px → 62.71px) | static: 63px | line-height: 1.2 | font-weight: 500;
Font size 3XL
font-size: clamp(30.24px → 52.25px) | static: 52px | line-height: 1.2 | font-weight: 500;
Font size 2XL
font-size: clamp(25.20px → 43.55px) | static: 44px | line-height: 1.2 | font-weight: 500;
Font size XL
font-size: clamp(25.20px → 36.29px) | static: 36px | line-height: 1.2 | font-weight: 500;
Font size LG
font-size: clamp(21.00px → 30.24px) | static: 30px | line-height: 1.2 | font-weight: 500;
Font size MD
font-size: clamp(17.50px → 25.20px) | static: 25px | line-height: 1.2 | font-weight: 500;
Font size BASE
font-size: clamp(14.58px → 21.00px) | static: 21px | line-height: 1.61803 | font-weight: 500;
Font size SM
font-size: clamp(12.15px → 17.50px) | static: 18px | line-height: 1.61803 | font-weight: 500;
Font size XS
font-size: clamp(10.13px → 14.58px) | static: 15px | line-height: 1.61803 | font-weight: 500;
Font size 2XS
font-size: clamp(8.44px → 12.15px) | static: 12px | line-height: 1.61803 | font-weight: 500;