Square Cloud logo and brand
Logo in SVG and PNG, symbol, Powered by Square Cloud badge, official colors and typography, with the rules for using each one.
Brand facts
- Name
- Square Cloud: two words, capital S and C, the same in every language
- Legal name
- SQUARE CLOUD LTDA · CNPJ 51.893.307/0001-08
- Primary color
- Blue #1447E6 (blue-700), on buttons and primary actions
- Fonts
- Inter for the interface and Fira Mono for code, both on Google Fonts
- Symbol
- Two squares offset on the diagonal, always in a single color: white or black
- Logo in SVG
- https://cdn.squarecloud.app/assets/logo.svg
The symbol
Two squares offset on the diagonal that together evoke the shape of a container. Where they cross, the front square cuts the back one.
Logo
Use the full logo whenever there is room. The symbol on its own is for favicons, avatars and small spaces.
Full logo
For dark backgrounds
For light backgrounds
Symbol
Versions without the name, including rounded corners for avatars and app icons.
For dark backgrounds
For light backgrounds
Rounded
Semi-rounded
Usage rules
Keep the clear space and the minimum size, and use the symbol exactly as it is.
Correct use
Stretch or squash
Rotate
Change the color
Shadows or effects
Crowd it with another name
Redraw the name
Low-contrast background
The rules for writing the name and for commercial use of the brand are in the Trademark Guidelines.
Powered by Square Cloud badge
Show that your project is hosted on Square Cloud. The badge text is always in English, whatever the language of your site.
Dark
Light
Blue
Symbol only, dark
Symbol only, light
Symbol only, blue
How to embed
Point to the official file instead of copying the badge. For another variant, replace powered-by.svg with the name of the file you downloaded.
HTML
<a href="https://squarecloud.app" rel="noopener">
<img src="https://cdn.squarecloud.app/assets/powered-by.svg"
alt="Powered by Square Cloud" height="36">
</a>README (GitHub)
<a href="https://squarecloud.app"><img src="https://cdn.squarecloud.app/assets/powered-by.svg" alt="Powered by Square Cloud" height="36"></a>Colors
These are the tokens in the code. The interface uses the semantic names (--background, --primary…), which change value between the dark and light themes.
Brand
--primary
Buttons and primary actions
blue-700 · #1447e6
oklch(0.488 0.243 264.376)
--ring
Focus in the light theme
blue-600 · #155dfc
oklch(0.546 0.245 262.881)
--text-link
Links in the dark theme
blue-400 · #51a2ff
oklch(0.707 0.165 254.624)
Dark theme
--background
Page background
square-950 · #030405
oklch(0.105 0.005 244.28)
--card
Cards and panels
square-900 · #060709
oklch(0.128 0.006 262.01)
--accent
Hover highlight
square-800 · #090b0e
oklch(0.149 0.007 258.04)
--muted
Subtle surfaces
square-700 · #0f1114
oklch(0.177 0.007 258.37)
--border
Borders and dividers
square-600 · #111417
oklch(0.189 0.008 248.23)
--foreground
Main text
square-50 · #e2e6ea
oklch(0.923 0.007 247.87)
--muted-foreground
Secondary text
text-muted · #86909f
oklch(0.65 0.025 257.51)
--success
Success
green-500 · #00c950
oklch(0.723 0.219 149.579)
--warning
Warning
yellow-500 · #f0b100
oklch(0.795 0.184 86.047)
--destructive
Errors and destructive actions
red-500 · #e84b54
Light theme
--background
Page background
light-50 · #ffffff
oklch(1 0 0)
--card
Cards and panels
light-100 · #fafafb
oklch(0.985 0.001 264)
--muted
Subtle surfaces
light-200 · #f1f2f3
oklch(0.96 0.002 264)
--border
Borders and dividers
light-300 · #e3e5e6
oklch(0.92 0.003 257)
--muted-foreground
Secondary text
light-700 · #565b62
oklch(0.47 0.013 257)
--foreground
Main text
square-950 · #030405
oklch(0.105 0.005 244.28)
--success
Success
green-700 · #008236
oklch(0.527 0.154 150.069)
--warning
Warning
yellow-700 · #a65f00
oklch(0.554 0.135 66.442)
--destructive
Errors and destructive actions
red-600 · #d52d37
Typography
Inter across the whole interface and Fira Mono for code, commands and technical values.
--font-inter
Inter
Headings, text and interface.
Aa Bb Cc
400500600700
--font-fira
Fira Mono
Code, commands and technical numbers.
0123456789
{ } [ ] ( ) => != === 512 MB
Banner
For the top of READMEs and documentation. background.webp has higher quality; github-readme.png is a smaller file.
background.webp (recommended)
github-readme.png (compact)
Frequently asked questions
What people ask most about the logo, the colors and using the brand.
Can I use the Square Cloud logo in my project?
Yes, to say that the project is hosted on Square Cloud or integrates with it, without modifying the logo. Other commercial uses need written permission. The full rules are in the Trademark Guidelines.
Where can I download the Square Cloud logo in SVG?
In the Logo section of this page: SVG and PNG for dark and light backgrounds, the full logo with the name in WEBP, and rounded versions for avatars and app icons.
What is Square Cloud's color?
Blue #1447E6, Tailwind's blue-700 (oklch(0.488 0.243 264.376)), used on buttons and primary actions. The symbol doesn't use this color: it only appears in white or black.
What font does Square Cloud use?
Inter across the whole interface and Fira Mono for code, commands and technical values. Both are free and available on Google Fonts.
How do I show that my project is hosted on Square Cloud?
With the Powered by Square Cloud badge. Embed https://cdn.squarecloud.app/assets/powered-by.svg at 36 px high with a link to squarecloud.app. There are dark, light, blue and symbol-only versions.
How is the brand name written?
Square Cloud, two words, with a capital S and C, the same in every language. Spellings like SquareCloud, Squarecloud or abbreviations are not the brand name.