---
title: Asset showcase
description: See the brand marks, live motion, crests, figurines, and typography before using them.
sidebar:
  icon: gallery-horizontal
  order: 3
---

Explore the actual CDN assets here, then open each guide for its files and copyable code. All previews are part of this Blume website.

## The identity in motion

The wordmark draws into the portrait and back continuously here, without holds between states. Change the surface to compare cream, olive, or orange and charcoal, or turn animation off to inspect the static mark. Reduced-motion preferences are respected. The drop-in below retains its original timing.

<MotionPreview kind="mark" showcase />

```html
<shaughv-mark style="display:block;width:180px;height:122px;color:#5b8a5b" aria-label="SHAUGHV"></shaughv-mark>
<script src="https://cdn.shaughv.com/js/animated-brand-mark.js"></script>
```

[Motion guide and static variants](/motion) · [Original wordmark SVG](https://cdn.shaughv.com/brand/shaughv/logos/SHAUGHV-Official.svg)

## Static marks and favicons

The original SVG, with its own viewBox and proportions.

![Official SHAUGHV wordmark](/blume-assets/content/docs/images/wordmark.svg)

Official wordmark

<div class="cdn-swatch-row cdn-favicon-grid">
  <div class="cdn-swatch" style="background:#fafaf8;color:#5c5446;">
    ![Dark SHAUGHV favicon](/blume-assets/content/docs/images/favicon-dark.svg)
    <strong>Light browser chrome</strong>
  </div>
  <div class="cdn-swatch" style="background:#5c5446;color:#f5f5f0;">
    ![Light SHAUGHV favicon](/blume-assets/content/docs/images/favicon-light.svg)
    <strong>Dark browser chrome</strong>
  </div>
</div>

[Copy the theme-aware favicon pair](/brand#favicons).

## Shaughnessy crests

<div class="cdn-crest-grid">
  <figure><img src="https://cdn.shaughv.com/brand/crests/Shaughnessy-Crest.svg" alt="Color Shaughnessy crest" loading="lazy" /><figcaption>Color</figcaption></figure>
  <figure><img src="https://cdn.shaughv.com/brand/crests/Shaughnessy-Crest-Mono.svg" alt="Monochrome Shaughnessy crest" loading="lazy" /><figcaption>Mono</figcaption></figure>
</div>

The [brand guide](/brand#shaughnessy-crests) has both original downloads. The [portfolio footer example](/footer-lockup) pairs the main mark with the separate, strengthened footer crest at the source layout's proportions.

## Portrait loader

The lenses fill and drain before the portrait becomes a soft blob and returns. The preview uses the published loader; its timing and geometry stay intact. Turn animation off to show the portrait at rest.

<MotionPreview kind="loader" showcase />

```html
<shaughv-loader style="color:#5b8a5b;height:120px"></shaughv-loader>
<script src="https://cdn.shaughv.com/js/shaughv-loader.js"></script>
```

[Loader integration and reduced motion](/motion#loader).

## Figurines

The page surface shows through the artwork.

![SHAUGHV pointing at his vintage Mac](/blume-assets/content/docs/images/figurine-look-at-this.webp)

Transparent figurine

```html
<img src="https://cdn.shaughv.com/brand/shaughv/figurines/transparent/figurine-look-at-this.webp" alt="SHAUGHV pointing at his vintage Mac" />
```

[More figurines and image usage](/brand#figurines).

## Type you can try

Makira and Paper Mono are the default pair, with both available for headings, body text, and interfaces. Choose any hosted family, enter your own text, and adjust its weight. Use **Share this section** to copy a link that restores your selection and sample.

<FontPlayground family="Paper Mono" selectable shareId="type-you-can-try" />

**[Font guide](/fonts)**

Compare the same interface in both standard families and copy the bundle import.

**[Michelangelus](/fonts/michelangelus)**

Read the serif in headings and body text, including real italics.

**[Gail Rock alternates](/fonts/gail-rock)**

Compare default, signature, slashed, and ligature forms.

**[All asset URLs](https://cdn.shaughv.com/tree.json)**

The live catalog supplies exact files and embed snippets.

## Custom cursor

Try the [custom cursor and its color controls](/cursor) on its dedicated page. It preserves the emmetts.dev circle, responsive spring, and hover growth at 90% opacity. Orange, vintage sage, black, white, and custom colors share the same motion. This showcase keeps your normal cursor.