CREATOP · BRAND SYSTEM
Design system v5
Colours and typography for the Creatop brand. Light mode is the default surface: cream background, coal text, plum and chartreuse accents.
Core + supporting
Cream
#EBE3D4
Light mode background, hero, light cards
Coal
#1A1D1A
Dark mode bg, body text on light
Plum
#5B3A8C
Primary accent, CTA buttons, brand
Chartreuse
#C5D86D
Pop, stat callouts, dark mode CTA
Sage
#A8B5A2
Calm supporting backgrounds
Extended (LinkedIn) + variant
Indigo
#6B68AD
LinkedIn, soft purple accents
Terracotta
#D17F4E
Operator / human moments
Deep Plum
#2D1B47
Dark sections with chartreuse
Light Cream
#EFEAE0
Tonal layering on light mode
Typography
Fraunces
Headings & display · weights 500–600
Most agencies sell reply rates.
Inter
Body text & UI · the readable workhorse
We’d rather make you money.
JetBrains Mono
Labels, metadata, hex · uppercase, tracked
FOR B2B TEAMS · #5B3A8C
Display
Fraunces
64 / 1.0
Heading 1
Fraunces
48 / 1.05
Heading 2
Fraunces
36 / 1.1
Heading 3
Fraunces
28 / 1.15
Body Large
Inter
20 / 1.5
Body
Inter
16 / 1.5
Label / Mono
JetBrains Mono
12 / 1.4
Contrast rules
Each surface pairs with one body text colour and one accent. Never put light text on cream; never put dark text on coal.
On cream
Body text reads clearly at this contrast level.
Plum accent
On coal
Body text reads clearly at this contrast level.
Chartreuse accent
On plum
Body text reads clearly at this contrast level.
Chartreuse accent
On sage
Body text reads clearly at this contrast level.
Plum accent
On chartreuse
Body text reads clearly at this contrast level.
Plum accent
On terracotta
Body text reads clearly at this contrast level.
Coal accent
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 60 54" xmlns="http://www.w3.org/2000/svg"><defs ><linearGradient id="Jy4hAiuvx-123410858-linear-gradient" x1="0.5674963762467684" x2="0.3945369121144245" y1="0.18" y2="1"><stop offset="0" stop-color="rgba(247, 115, 115, 0.4)"/><stop offset="0.43902439024390244" stop-color="rgba(199, 98, 246, 0.2)"/><stop offset="1" stop-color="rgba(129, 75, 238, 0)"/></linearGradient></defs><path d="M 8.26 33.497 L 0 0 C 0.302 1.223 1.161 2.232 2.32 2.724 L 2.78 2.92 L 6.777 4.509 L 49.544 17.138 L 57.072 51.845 Z" fill="url(%23Jy4hAiuvx-123410858-linear-gradient)" height="51.8449px" id="Jy4hAiuvx" transform="translate(1 1)" width="57.0716px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 80 40" xmlns="http://www.w3.org/2000/svg"><defs ><linearGradient id="m6mpMGm1l-1029907898-linear-gradient" x1="0.5785665950282661" x2="0.3732796854382805" y1="0.19" y2="1"><stop offset="0" stop-color="rgba(247, 115, 115, 0.4)"/><stop offset="1" stop-color="rgba(129, 75, 238, 0)"/></linearGradient></defs><path d="M 0 23.991 L 25.705 0 C 26.418 1.135 27.326 2.138 28.388 2.965 L 28.992 3.435 C 29.593 3.903 30.228 4.328 30.89 4.707 L 31.231 4.901 C 32.926 5.869 34.747 6.603 36.643 7.084 L 80 18.074 L 55.684 40 Z" fill="url(%23m6mpMGm1l-1029907898-linear-gradient)" height="40px" id="m6mpMGm1l" transform="translate(0.277 0.183)" width="80px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 335 203" xmlns="http://www.w3.org/2000/svg"><path d="M 112.535 0 C 116.757 0 120.941 0.941 124.099 2.792 L 124.101 2.793 L 328.415 121.582 L 328.418 121.584 C 331.471 123.331 332.908 125.611 332.995 127.737 L 333 127.942 L 332.906 136.12 L 332.906 136.126 C 332.906 138.397 331.391 140.77 328.231 142.577 L 328.228 142.579 L 232.022 198.207 C 228.815 200.061 224.606 201 220.385 201 C 216.162 201 211.979 200.06 208.819 198.208 L 208.818 198.207 L 4.599 79.419 L 4.596 79.417 L 4.305 79.246 C 1.352 77.469 0.014 75.262 0.014 73.059 L 0.014 68.178 L 0.351 67.85 L 0.636 67.571 L 0.665 67.571 C 0.665 67.562 0.661 67.554 0.661 67.546 L 0.708 67.502 C 0.723 67.518 0.73 67.538 0.706 67.488 C 0.681 67.439 0.627 67.325 0.515 67.215 L 0.014 66.725 L 0.014 64.872 L 0 64.872 C 0.025 62.644 1.469 60.287 4.692 58.419 L 4.691 58.418 L 100.899 2.794 C 104.105 0.941 108.313 0 112.535 0 Z" fill="rgb(250, 250, 250)" height="201px" id="FUVZgXErU" stroke-dasharray="" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="0.18" stroke="rgb(239, 239, 239)" transform="translate(1.089 1.036)" width="333px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 66 44" xmlns="http://www.w3.org/2000/svg"><path d="M 4.158 24.396 L 41.144 2.406 C 46.702 -0.875 53.715 -0.786 59.181 2.583 C 65.742 6.661 65.558 15.973 58.908 19.786 L 25.384 39.205 C 18.823 43.018 10.716 42.93 4.247 38.939 L 3.974 38.763 C -1.4 35.392 -1.309 27.677 4.158 24.396 Z" fill="rgba(255, 255, 255, 0.4)" height="42.00000006413392px" id="VzAov3Ef6" transform="translate(1 0.545)" width="63.99999999999996px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 213 225" xmlns="http://www.w3.org/2000/svg"><defs ><linearGradient id="Xvj2ktVe7-3555749574-linear-gradient" x1="0.736355037686027" x2="0.3445032646802454" y1="0.12" y2="0.75"><stop offset="0" stop-color="rgb(245, 240, 240)"/><stop offset="1" stop-color="rgba(245, 240, 240, 0)"/></linearGradient></defs><path d="M 1.5 104.767 L 0 0 L 1.5 2.993 L 3 4.49 L 213 126.22 L 210.5 225 Z" fill="url(%23Xvj2ktVe7-3555749574-linear-gradient)" height="225px" id="Xvj2ktVe7" transform="translate(0.223 0.237)" width="213.00000000000048px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 198 103" xmlns="http://www.w3.org/2000/svg"><defs ><linearGradient id="FI3ihoxop-2647728577-linear-gradient" x1="0.736355037686027" x2="0.28852443996513377" y1="0.12" y2="0.84"><stop offset="0" stop-color="rgb(245, 240, 240)"/><stop offset="1" stop-color="rgba(245, 240, 240, 0)"/></linearGradient></defs><path d="M 0 67.251 L 70.463 0 L 71.41 1.427 C 72.654 3.303 74.08 5.05 75.667 6.644 L 76.187 7.166 C 77.067 8.051 78.013 8.866 79.017 9.606 C 81.512 11.444 84.332 12.79 87.326 13.572 L 198 42.474 L 137.754 103 Z" fill="url(%23FI3ihoxop-2647728577-linear-gradient)" height="103px" id="FI3ihoxop" transform="translate(0.299 -0.371)" width="198px"/></svg>)
