Brand assets

Logos for light backgrounds

Horizontal logo, light background

• PNG 861×223
• WebP 861×223
• SVG file (embedded PNG, not an editable vector)
• Header PNG 520×135
• Header WebP 520×135
• Header WebP 320×83

PNG and WebP links are the original files, at the sizes written on the buttons. SVG is the original file and it embeds a PNG, so it is not an editable vector. A new PNG was not generated from it.

Icon, light background

• PNG 190×161
• WebP 190×161
• SVG file (embedded PNG, not an editable vector)

PNG and WebP links are the original files, at the sizes written on the buttons. SVG is the original file and it embeds a PNG, so it is not an editable vector. A new PNG was not generated from it.

Stacked logo, light background

• PNG 348×288
• WebP 348×288
• SVG file (embedded PNG, not an editable vector)

PNG and WebP links are the original files, at the sizes written on the buttons. SVG is the original file and it embeds a PNG, so it is not an editable vector. A new PNG was not generated from it.

Monochrome logo, light background

• PNG 313×214
• WebP 313×214
• SVG file (embedded PNG, not an editable vector)

PNG and WebP links are the original files, at the sizes written on the buttons. SVG is the original file and it embeds a PNG, so it is not an editable vector. A new PNG was not generated from it.

Logos for dark backgrounds

Horizontal logo, dark background

• PNG 861×223
• WebP 861×223
• SVG file (embedded PNG, not an editable vector)
• Header PNG 520×135
• Header WebP 520×135
• Header WebP 320×83

PNG and WebP links are the original files, at the sizes written on the buttons. SVG is the original file and it embeds a PNG, so it is not an editable vector. A new PNG was not generated from it.

Icon, dark background

• PNG 190×161
• WebP 190×161
• SVG file (embedded PNG, not an editable vector)

PNG and WebP links are the original files, at the sizes written on the buttons. SVG is the original file and it embeds a PNG, so it is not an editable vector. A new PNG was not generated from it.

Stacked logo, dark background

• PNG 348×288
• WebP 348×288
• SVG file (embedded PNG, not an editable vector)

PNG and WebP links are the original files, at the sizes written on the buttons. SVG is the original file and it embeds a PNG, so it is not an editable vector. A new PNG was not generated from it.

Monochrome logo, dark background

• PNG 313×214
• WebP 313×214
• SVG file (embedded PNG, not an editable vector)

PNG and WebP links are the original files, at the sizes written on the buttons. SVG is the original file and it embeds a PNG, so it is not an editable vector. A new PNG was not generated from it.

Icons and favicons

Browser icon (Favicons v3)

• SVG vector, 64×64 viewBox
• ICO
• PNG 16×16
• PNG 32×32
• PNG 48×48
• PNG 64×64
• PNG 180×180
• PNG 192×192
• PNG 512×512
• Source SVG, black tile
• Source SVG, white tile

PNG and WebP links are the original files, at the sizes written on the buttons. SVG is a real vector file. No extra PNG was generated from it.

Browser icon for a dark tab

• ICO
• PNG 16×16
• PNG 32×32
• PNG 48×48
• PNG 64×64

PNG and WebP links are the original files, at the sizes written on the buttons. SVG is not available for this asset.

Color palette

Taken from the site stylesheet: the @theme defaults, then the :root and .dark overrides where a token changes. Tokens that share one value are listed together.

• Black

  @theme --color-safi-black, --color-safi-charcoal, --color-brand-primary, --color-brand-secondary, --color-action-primary, --color-header-blue

  #0A0A0Argb(10, 10, 10)

• White

  @theme --color-safi-white, --color-surface-white

  #FFFFFFrgb(255, 255, 255)

• Neutral dark

  @theme --color-safi-neutral-dark

  #0F0F10rgb(15, 15, 16)

• Elevated

  @theme --color-safi-elevated, --color-brand-action, --color-card-dark

  #141416rgb(20, 20, 22)

• Gray

  @theme --color-safi-gray, --color-trust-blue, --color-feedback-error, --color-feedback-info

  #52525Brgb(82, 82, 91)

• Border

  @theme --color-safi-border

  #E4E4E7rgb(228, 228, 231)

• Surface

  @theme --color-safi-surface, --color-surface-light

  #FAFAFArgb(250, 250, 250)

• Muted

  @theme --color-feedback-success

  #A1A1AArgb(161, 161, 170)

• Warning gray

  @theme --color-feedback-warning

  #71717Argb(113, 113, 122)

• Border dark

  @theme --color-border-dark

  #27272Argb(39, 39, 42)

• Header raised, light

  :root --color-header-raised

  #F4F4F5rgb(244, 244, 245)

• Header line, light

  :root --color-header-line

  rgb(0 0 0 / 0.10)

• Header line, dark

  .dark --color-header-line

  rgb(255 255 255 / 0.12)

• Dark mode primary text

  .dark --color-brand-primary, --color-action-primary

  #FAFAFArgb(250, 250, 250)

• Dark mode action

  .dark --color-brand-action, --color-trust-blue

  #A1A1AArgb(161, 161, 170)

Not included

• public/Favicons/ (root) and public/Favicons/v2/ — Older favicon sets. The live set is public/Favicons/v3.
• public/images/svg, png, and components/safi-concept1-* — Concept drafts, not the current logo.
• public/images/logo.svg, logo-blue.svg, logo-ur.svg, logo.webp, and public/logo.webp — Earlier logo files. The current lockups are in Light-Mode and Dark-Mode.
• public/images/blog/** and public/images/pakish-office-team-1.webp — Editorial photos, not brand marks.
• public/og/default.png — Social preview image, not a logo download.
• public/next.svg, window.svg, globe.svg, file.svg — Framework sample icons.
• public/rdp-hero.webp and other page art — Page imagery, not a brand asset.
• public/pm/qr/*.png — Payment QR codes. They are not logos.

Technical Support