The logo csl.
Everything you need to use the Creative Studio Lab mark correctly: ready-made files, a few essential rules and the code to embed it on a website. For partners, press, events and anyone featuring our work.
Two versions, positive and negative.
The csl. mark on its own for small spaces and icons; the full logo with our name when there is room and the audience doesn’t know us yet.
The blinking dot.
The square dot is a cursor: the idea about to be written. On screens it blinks; in print it stands still. It is the only animated element of the brand.
- Rhythm
- 1.2 seconds, on / off at 50%
- Transition
- hard cut, no fade
- Where
- web, apps, video, screens
- always static and visible
- Accessibility
- static when the user enables “reduce motion”
Clear space and minimum size.
Always give the logo room to breathe. The unit is x, the side of the square dot.
xxxx- Clear space
- at least 1 x on every side, no text or images inside
- Mark, screen
- minimum width 40 px
- Mark, print
- minimum width 10 mm
- Full logo
- minimum width 240 px or 50 mm
- Smaller than this
- use the favicon or app icon
Black and white, no exceptions.
The logo only exists in black or white. The warm paper tone and the text grey complete the website identity but are not used for the logo. Click a colour to copy it.
One family, three voices.
Roboto for headings and text, Roboto Mono for labels and numbers, IBM Plex Sans Arabic for Arabic. All free on Google Fonts.
Creative Studio Lab
headings 500, body 300IDEENERS / 01
labels, numbers, technical detailsمهندسو الأفكار
Arabic version of the siteThe text in the logo is already converted to outlines: no font needs to be installed.
Use it as it is.
The logo works because it is simple. Don’t alter it, redraw it or add effects.
Favicon and app icons.
Below 40 px use the version on a black square: it stays legible on light and dark tabs, phone home screens and as a profile picture.
Embed the logo on your website.
If you mention us as a partner, supplier or the authors of a project, copy one of these snippets. The animated file blinks on its own, even inside a plain <img> tag.
<a href="https://www.creativestudiolab.it/" title="Creative Studio Lab">
<img src="https://www.creativestudiolab.it/assets/img/logo-animated.svg"
alt="Creative Studio Lab" height="32">
</a><a href="https://www.creativestudiolab.it/" title="Creative Studio Lab">
<img src="https://www.creativestudiolab.it/assets/img/logo-lockup.svg"
alt="Creative Studio Lab" height="28">
</a>/* give the square dot the class logo-dot */
.logo-dot { animation: csl-blink 1.2s steps(1) infinite; }
@keyframes csl-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .logo-dot { animation: none; } }Terms of use.
The Creative Studio Lab logo and name are distinctive signs of Creative Studio Lab. You may use them without asking to refer to us accurately: as a partner or supplier, in project credits, in articles, presentations and events.
You may not use them in a way that suggests sponsorship or endorsement that doesn’t exist, nor modify them or incorporate them into your own brand. For any other use, get in touch — we reply quickly.