Claricle Brand

The canonical home for Claricle’s logo, palette, typography, and brand artifacts. Site implementations (claricle.github.io and any sibling properties) reference the files here; this repo is the source of truth.

Asset hierarchy

There is exactly one canonical source for the logo:

Tier	Format	Role
Canonical	logo-claricle.pdf	The designer’s vector-traced source. Edit here, regenerate everything else.
Working	SVG (.svg)	The format we actually use. Vector, scalable, recolorable, diffable as text.
Rasterized	PNG / ICO	Generated artifacts, not source. Rasterize from SVG only where an SVG won’t render (favicons for legacy browsers, Open Graph previews, iOS home-screen icon).

The rule: edit the PDF, regenerate SVGs, rasterize PNGs. Never hand-edit an SVG to "fix" a problem that originated in the PDF. Never ship a PNG that wasn’t regenerated from the SVG.

What’s here

File	Purpose	Derivation
logo-claricle.pdf	Canonical designer source	Origin — do not edit by hand; update from the designer’s working file.
logo-claricle.svg	Medium-saturation SVG (works on either theme)	Vector export from the PDF.
logo-claricle.png	200x200 RGBA rasterized medium-saturation logo	Rasterized from logo-claricle.svg.
logo-claricle_icon-light.svg	Light-mode SVG — saturated colors that pop on white	Recolored variant of logo-claricle.svg, vector export from the PDF.
logo-claricle_icon-light.png	834x834 rasterized light-mode logo	Rasterized from logo-claricle_icon-light.svg. Sized for Open Graph previews.
logo-claricle_icon-dark.svg	Dark-mode SVG — luminous colors that glow on dark	Recolored variant of logo-claricle.svg, vector export from the PDF.
logo-claricle_icon-dark.png	834x834 rasterized dark-mode logo	Rasterized from logo-claricle_icon-dark.svg.
favicon.svg	Glyph-only favicon (the 5-circle mark, no wordmark)	Vector export, glyph-only crop of the full logo.
favicon-96x96.png	96x96 rasterized favicon	Rasterized from favicon.svg.
favicon.ico	Windows multi-resolution ICO (16, 32, 48)	Rasterized from favicon.svg.
apple-touch-icon.png	180x180 iOS home-screen icon	Rasterized from favicon.svg. Opaque background (iOS rounds corners itself).
site.webmanifest	PWA manifest referencing the icons	Hand-written metadata file.

Regenerating PNGs from SVGs

PNG and ICO files in this repo are committed for convenience, but they are derived artifacts. To regenerate after editing an SVG:

# Requires ImageMagick 7
magick -background none logo-claricle_icon-light.svg -resize 834x834 logo-claricle_icon-light.png
magick -background none favicon.svg -resize 96x96 favicon-96x96.png
magick -background none favicon.svg -define icon:auto-resize=16,32,48 favicon.ico
magick -background none favicon.svg -resize 180x180 apple-touch-icon.png

The logo

Five translucent circles, arranged as a flower, in the spectrum that runs upward — coral, amber, forest, sky, plum. Where they overlap, new colors emerge; the negative space at the center is the clārus, the clear bright point that every Claricle tool preserves.

The logo reads as a rainbow rising:

• Warmer colors at the base — conformance, conversion: the work.

• Cooler colors at the crown — parsers, layout: the structure.

The eye climbs with it.

Etymology

Part	Root	Meaning
clari-	Latin clārus	clear, bright, famous
-cle	Latin cle (from particula)	small particle

Clear particle or bright essence — the perfect metaphor for an image tool that validates every pixel so the essence passes through unchanged.

The palette

The spectrum colors map one-to-one to project categories in the ecosystem. Both light and dark variants are extracted from the canonical logo (200x200 PNG); the dark variants are luminous versions of the same hues.

Token	Category	Light mode	Dark mode	Where it appears
coral	Conformance	#e56b5b	#ff886a	Conformance tools
amber	Conversion	#f7bc68	#fcba49	Vector conversion tools
forest	Page description	#3f7f55	#5fffa6	PS, PDF, page-description tools
sky	Parsers	#588ac4	#51a2ff	Format readers and libraries
plum	Layout & diagrams	#ad89b6	#ffa1bf	Diagram rendering, layout
mist	Neutral surfaces	#dddddd	(unchanged)	Borders, dividers, soft backgrounds

The "rainbow upwards" reading is fundamental. Always arrange the spectrum in this order when stacking or sequencing the colors. Never reorder.

Typography

• Display + body: Inter Variable (open source, OFL). Available via @fontsource-variable/inter on npm, or directly from Google Fonts.

• Monospace (code blocks, CLI snippets): ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace.

The rainbow carries the personality; the typography stays out of the way. Avoid display scripts or novelty faces.

Usage guidelines

Do

• Use the variant that matches the surrounding surface (light logo on white, dark logo on dark).

• Respect the spectrum order (coral at the bottom, plum at the top).

• Preserve clear space around the logo equal to the radius of one circle.

• When in doubt, use the medium-saturation logo-claricle.svg — it works passably on both themes.

Don’t

• Don’t recolor the logo. If you need a single-color variant for print or watermarking, open an issue and we’ll provide one.

• Don’t tilt, skew, or stretch the logo.

• Don’t add a drop shadow, glow, or outline that wasn’t in the original.

• Don’t place the light variant on a dark surface, or vice versa. The contrast is wrong by design.

Favicon decision tree

1. Modern browser (Chrome, Firefox, Safari ≥14) → favicon.svg

2. Legacy / fallback → favicon.ico

3. iOS home screen → apple-touch-icon.png (180x180, opaque)

Open Graph / social cards

Use logo-claricle_icon-light.png (834x834). Social platforms render preview cards on white or near-white backgrounds; the light variant’s saturated colors read correctly there. The dark variant will look muddy.

License

All assets in this repository are released under the BSD-2-Clause license (see LICENSE). The Claricle wordmark and logo are project identifiers; usage in connection with the Claricle project, or to reference it in derivative work, is permitted. Usage that implies endorsement by, or affiliation with, Ribose or the Claricle project where none exists is not.

Acknowledgements

Maintained by the Claricle project, an open source project of Ribose.