Skip to content

The mark and the app icon

The logo is a rough storm cloud with a yellow bolt, drawn by @draw/sketch from a fixed seed, so it looks the same everywhere. The app icon is the same mark knocked out of a rough ink tile.

Drawings

cloudMark, accentMark and tileDrawing return a Drawing. PAGE_PALETTE paints with theme custom properties and follows the theme. TILE_PALETTE is fixed to the light palette, because an icon cannot read a page’s CSS. MARK_SIZE, ACCENT_SIZE, TILE_SIZE and TILE_MARK_OFFSET give the frames in drawing units.

SVG strings

  • markSvg(variant, label?) frames the cloud at small, scene or large stroke weights, named by MarkVariant.
  • logoMarkSvg(roughness) is the large mark with the logo label, at any roughness.
  • sceneMarkBody(roughness) is the scene-weight cloud without a frame.
  • accentSvg() is the bolt that replaces the acute accent in the wordmark.
  • faviconSvg() is the tile with the mark, a complete standalone SVG document.
docs/examples/icon.ts
import { MARK_SEED, MarkVariant, accentSvg, faviconSvg, markSvg } from "@draw/brand";


export const favicon: string = faviconSvg();
export const logo: string = markSvg(MarkVariant.large, "Rúfol logo");
export const bolt: string = accentSvg();
export const seed: number = MARK_SEED;