Distinctive by design.
A consistent identity for custom Shopify apps and growing brands. Use these rules whenever the Glyceral name or logo appears, on our apps, our site, or a partner's page.
Closed ring. Separate curved stroke. Signature purple dot.
The master mark
One construction, shared by every layout and color variant.
Preserve these three elements
- A fully closed circular upper ring.
- A separate smile-shaped lower arc.
- A circular dot above and to the right.
Construction and spacing
- Master ring: 89 units outside, 33 units inside.
- Dot: 46 units in diameter. Keep the lower arc as supplied.
- Keep at least 23 units of clear space around the visible artwork. Scale the spacing with the symbol, and add padding to the export canvas when a placement needs more room.
A flexible logo system
Choose the layout for the space, then choose the colorway for the background.
Stacked layouts suit square spaces. Icon-only artwork suits app icons, avatars and favicons.
Color with purpose
Use the exact sRGB values below. Contrast applies to the actual foreground and background pair.
| Text on background | Contrast | Use |
|---|---|---|
| Aa Midnight on Off-white | 17.06:1 | Passes 4.5:1 for normal text |
| Aa Off-white on Purple | 5.45:1 | Passes 4.5:1 for normal text |
| Aa Lavender on Midnight | 6.56:1 | Passes 4.5:1 for normal text |
| Aa Purple on Midnight | 3.13:1 | Accents only, fails 4.5:1 for normal text |
| Aa Lavender on Off-white | 2.60:1 | Accents only, fails 4.5:1 for normal text |
| Aa Gray on Off-white | 1.41:1 | Accents only, fails 4.5:1 for normal text |
- For normal text, target 4.5:1. Use midnight text on light surfaces and off-white text on purple.
- Use lavender and gray as supporting colors. Keep purple text off midnight backgrounds.
- Never convey status by color alone. Add text, an icon or another cue.
- Logos are exempt from the text contrast rule; nearby UI is not.
Typography and everyday use
The logo is artwork. Supporting typography should stay simple and legible.
Keep the wordmark intact
Always use the supplied outlined lowercase wordmark. Don't retype it, stretch it, change its spacing or alter its letterforms.
Supporting type
Use the system sans-serif stack for body text and interfaces:
-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serifRegular body text with comfortable line spacing, so setup guides and pricing stay easy to scan.
Sizes and misuse
| Artwork | Screen minimum | Print minimum |
|---|---|---|
| Horizontal logo | 160 px wide | 30 mm wide |
| Stacked logo | 120 px wide | 20 mm wide |
| Symbol | 32 px recommended | Check a proof at actual size |
| Favicon | 16–48 px files are a constrained exception; use the 32 px or SVG version when possible | n/a |
Do not open the ring, join the arc, move the dot, rotate the mark, add effects or place it over busy imagery.
Shopify app icons
- Upload the 1200 × 1200 PNG. The midnight field is the default.
- Square canvas with no baked-in rounded corners.
- Symbol height is 840 px, 70% of the canvas.
- Name standalone logo images "Glyceral" in alt text. Use empty alt text when nearby text already says the name.
Downloads
Use SVG for scalable artwork and PNG when a platform requires pixels.
- Horizontal · primaryglyceral-horizontal.svg
- Horizontal · reversedglyceral-horizontal-reversed.svg
- Horizontal · single ink midnightglyceral-horizontal-midnight.svg
- Horizontal · single ink blackglyceral-horizontal-black.svg
- Horizontal · single ink whiteglyceral-horizontal-white.svg
- Stacked · primaryglyceral-stacked.svg
- Stacked · reversedglyceral-stacked-reversed.svg
- Symbol · primaryglyceral-symbol.svg
- Symbol · reversedglyceral-symbol-reversed.svg
- Wordmarkglyceral-wordmark.svg
- App icon · midnight (default), SVGglyceral-app-icon.svg
- App icon · midnight, 1200 × 1200 PNGglyceral-app-icon-1200.png
- App icon · purpleglyceral-app-icon-purple.svg
- App icon · lightglyceral-app-icon-light.svg
Questions about using the Glyceral brand? Email the address on our support page.