27u
Clear space
Keep at least one bowl radius (27u) between the visible strokes and nearby text, imagery or edges. Scale this space with the artwork.
PAEAN / DESIGN SYSTEM
One language. Endless creation.
The visual language of Paean. Our marks, colors, typography and app icons, brought together for a consistent identity wherever ideas take shape.
Get brand assetsLiving Mark · Visual identity01 — PAEAN
01Brand marks
The Paean wordmark and symbol share a geometric language with 8x and Zero. Use the supplied vectors to keep every curve, gradient and proportion intact.
Paean
8x
Zero
Paean
8x
Zero
Paean uses the same artwork on both grounds. 8x and Zero have dedicated dark-ground and light-ground variants; preserve their original gradient stops and opacity.
02Using the marks
Give the identity room to breathe. The following dimensions describe the brand artwork; always check legibility at the final display size.
16 / 88px
Minimum size
Symbol: 16px. Wordmark: 88px wide. These are lower limits; use the dedicated favicon exports for browser tabs.
r27 / 8u
Original geometry
The Paean symbol uses a 27u bowl radius and an 8u stroke. Preserve the aspect ratio, round terminals and the direction of the gradient.
Keep it consistent
- Use the complete wordmark, or a standalone symbol with a plain-text product name.
- Place artwork on a calm background with the recommended clear space.
- Use the original SVG for websites and scalable layouts.
Avoid
- Do not place an extra P symbol next to the complete Paean wordmark.
- Do not stretch, rotate, crop, recolor or add strokes and effects to the artwork.
- Do not rebuild the wordmark with a font or flatten the fading ends of the 8x gradient.
03Color
Color has a job. Logo gradients identify the brand; interface colors guide reading and actions. Keep those roles distinct.
Paean gradient
Cyan
#67E8F9
Blue
#2E7CFF
Violet
#8B5CF6
Three stops: cyan at 0%, blue at 55%, violet at 100%. Use the SVG to preserve the original gradient direction.
Brand grounds
The two presentation backgrounds used for the marks above.
Dark ground
#04060D
Light ground
#EEF3FA
Website palette
The current website uses separate colors for surfaces, text and interaction in each theme. These samples describe the interface, not replacement logo colors.
Dark ground
Background
#04060D
Surface
#0D111D
Text
#EEF3FA
Secondary text
#939DAF
Accent
#80DFF3
Light ground
Background
#EEF3FA
Surface
#FFFFFF
Text
#111C32
Secondary text
#5D6C81
Accent
#225FD5
Use readable foreground/background pairs. Reserve gradients for the identity and intentional accents; communicate status with text or an icon as well as color.
04Typography
A clear hierarchy leaves space for the work. Use display type for a short statement, neutral body type for reading, and monospace for precise details.
Display · Outfit
Short headings with a natural line break.
Ideas take shape.
Body & UI · Inter
Comfortable line height for paragraphs and interface text.
Create something people can use, remix and make their own.
Data & labels · JetBrains Mono
Color values, measurements and concise labels.
01 / PAEAN / #67E8F9
Use system CJK fallbacks for Chinese text. The geometric Paean wordmark is artwork and is never typeset in these fonts.
05App icons
The same app icons used on our Download page. Each keeps its original symbol, dark ground and built-in clear space.
1024 × 1024 artwork. SVG for scaling; PNG for ready-to-use imagery. Keep the full tile intact. For a maskable PWA icon, use the dedicated export below.
Go to app downloads06Downloads
Original vectors and app icon exports for your next layout. Choose the variant that matches its background.
Paean wordmarkSVGPaean symbolSVG8x · dark groundSVG8x · light groundSVGZero · dark groundSVGZero · light groundSVGPaean faviconPNG · 32pxPaean maskable iconPNG · 512px
SVG marks have a transparent background. App icons include their dark ground. Downloading an asset does not change its usage rules above.