SpellWare style guide.

Brand assets

Brand use Developers

SpellWare has two primary brand assets: our logo and our mascot, Hikari. Both are available for use under the rules below.

Logo files

The logo has two approved colourways. Use the light files on light backgrounds and the reversed files on dark backgrounds. Each file is a vector SVG with a PNG alongside it. The crescent and rose symbol is also supplied on its own, as a light SVG and a reversed SVG.

Usage rules

• Use the light logo files on light backgrounds and the reversed files on dark backgrounds. The square logo carries its own background, and Hikari may be placed on any colour.
• The square logo and Hikari must be displayed at a minimum size of 512×512 pixels. The horizontal and stacked logos must be at least 512 pixels wide.
• Every use of the logo or Hikari must link back to spellware.dev whenever used.
• Hikari may only be used when the SpellWare logo is also present and visible in the same area.
• All use must comply with our Code of Conduct.

Prohibited uses

Both assets must be used exactly as provided. No modifications of any kind are permitted. The following examples illustrate common prohibited alterations:

Tagline

Our tagline is Thoughtfully built. Wonderfully human. It leads our brand line: it is the first line of the footer on every page, and the opening line of the homepage. It sits above our descriptor, Software engineering and community management for developer-facing companies, which stays in page titles and descriptions so that search results and link previews still say what we do.

On the homepage hero only, a supporting principle sits directly beneath the tagline: Exceptional work comes from people who are given the room, trust, and opportunity to do their best. It states how we work. It is not part of the tagline, and it does not appear in the footer, in structured data or on the social card.

• Use the exact wording, with both full stops.
• Set it in our brand typeface, Fraunces, when it is displayed on its own.
• Keep the descriptor in page titles and meta descriptions.

• Do not shorten it, reorder it, translate it or add words.
• Do not use it in place of a page title or a description.

Typography

Developers

Text is set in the system font stack, which is fast, accessible and familiar to readers. Fraunces, our wordmark typeface, is reserved for the SpellWare wordmark.

/* Only needed if you build a wordmark yourself */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@72,600,50&display=swap');

:root {
  --font-brand: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-brand-variation: 'opsz' 72, 'SOFT' 50, 'WONK' 0;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

Type scale

Sizes used by pages on the shared layout, at a 16px root. Hero headings on the company homepage use larger display sizes.

Layout

Developers

All SpellWare pages share a common foundation delivered by the shared header script. Include it in every page's head:

<script src="https://cdn.spellware.dev/headers/index.js" async defer></script>

The script injects the design tokens, Font Awesome, the header, the footer, consent, analytics, HubSpot and the community popup. By default it also applies the shared layout, so your page only needs to provide a main element. It looks the same as the company site, because the company site is built from the same standards.

Shared layout

• Header: a floating glass bar with the SpellWare logo and the same links as the company site. The text beside the logo is the page title, as described under header text.
• Background: a fixed full-viewport artwork layer, frosted over by the same rose and lavender light as the rest of the site. The wash is about 40% opaque with a 14 pixel blur, so the artwork shows softly through it.
• main: a centred, lit card, max-width: 1080px, padding: 40px, border-radius: 16px, with a rose edge, a rose glow thrown up and to the right, and a 16 pixel frost over the background.
• Long articles: text inside main is centred, except on HubSpot blog posts, which are left aligned because long articles read better that way. Headings scale down on narrow screens, so a long word never breaks across lines.
• Footer: a replica of the company site footer, in the normal flow at the end of the page, with the same columns, links, address and the Tree-Nation badge.
• Community popup: a lit dialog with a rose glow and a glowing Discord button, shown at most once a week.

Header text

The header shows the full SpellWare wordmark. A page title appears beside it, after a divider. Set it with a data-nhcarrigan-title attribute on the html element. If you leave it out, the script takes the page's title without the SpellWare name or its separators. When nothing is left, or the title is just SpellWare, no title is shown and the wordmark stands alone. Long titles are cut short with an ellipsis, and on screens narrower than 480 pixels the title is hidden to make room for the menu button.

<html lang="en-GB" data-nhcarrigan-title="Tarot">

Opting out

Bespoke pages, such as the company site, can opt out of parts of the script by listing features in a space-separated data-nhcarrigan-exclude attribute on the html element:

<html lang="en-GB" data-nhcarrigan-exclude="layout footer cta ads">

Metadata, icons, consent, analytics and HubSpot always load. Anything your page already declares, such as meta tags and icons, is left alone. A page that already has its own header.site-header never gets a second header.

Pages with their own layout

The company site builds the same look itself, with full-width sections inside a 1120px container and shared styles in assets/styles.css, so it opts out of the script's layout, header, footer and popup. Sections alternate between the page colour, white and a lavender tint, with dark hero and call-to-action bands. The header floats above the page as a translucent glass bar, and every page starts with a hero, so that nothing sits underneath it. Its class names are unprefixed (.btn, .card). The script's equivalents are prefixed nhc-, so they can never collide with an app's own styles.

Opt-in components and glow

Developers

Beyond the automatic element styling, there is a set of named components. The company site defines them in assets/styles.css. Pages that load the shared header script get the same components, with an nhc- prefix. The previews below use the company site classes.

Buttons

<!-- On the company site. In an app that loads the shared script, use nhc-btn nhc-btn-primary and so on. -->
<a class="btn btn-primary" href="/">Primary</a>   <!-- on dark bands -->
<a class="btn btn-ghost" href="/">Ghost</a>       <!-- on dark bands -->
<a class="btn btn-dark" href="/">Dark</a>         <!-- on light backgrounds -->
<a class="btn btn-outline" href="/">Outline</a>   <!-- on light backgrounds -->

Section heading

<div class="section-head">
  <p class="eyebrow">Eyebrow</p>
  <h2>A section heading.</h2>
  <p>Supporting copy that introduces the section.</p>
</div>

Card and notice

<article class="card"><h3>Card title</h3><p>Content.</p></article>
<aside class="notice"><h2>Notice</h2><p>Content.</p></aside>

Glass and glow

Frosted glass and a soft rose glow are the SpellWare look on every page. The company site builds them itself, and the shared header script applies the same treatment to every app that loads it.

• Glass needs colour behind it to show, so light sections carry soft rose and mauve washes. Do not add glass to a plain background.
• Always provide a solid fallback. The stylesheet turns the blur off and uses solid surfaces when the browser lacks backdrop-filter or the reader asks for reduced transparency.
• Glow never replaces the keyboard focus ring, and it is never animated or pulsed, with one exception: the dot in the availability pill.
• Do not blur long lists. Testimonials and résumé entries stay on plain white, and cards drop the blur on phones, because blur is costly on low-end devices.
• Printed pages use plain surfaces with no glow.
• The lighting comes from one hue, Witch Rose, set against plum and black. The drama comes from light against dark and from a single consistent direction, not from a second colour. Do not add a contrasting accent colour to the light.
• The logo is never filtered, tinted or overlaid. The glow sits on its container behind it.
• Check contrast against the rendered background, at phone, tablet and desktop widths, whenever the light is moved or made brighter. Contrast is measured behind each piece of text, at its brightest and darkest point, and decorative lines, underlines and screen-reader-only text are left out of the measurement.
• On light backgrounds light cannot glow as it does on dark, so it shows as colour bleeding in, a sheen and rim on each surface, a rose edge glow, and tinted shadows. Do not put a glow behind body text on a light background.

Scrollbar and selection

Developers

The shared stylesheet styles the scrollbar and text selection. These apply automatically, so do not override them in page stylesheets.

• Scrollbar: in Chrome, Edge and Safari the thumb is Witch Plum on a Witch Lavender track. Firefox uses the same colours through scrollbar-color.
• Selection: selected text is highlighted in Witch Rose with white text, in all browsers. Try selecting this sentence.

::selection { background: var(--witch-rose); color: #FFFFFF; }

Deprecated classes

Developers

Three decorative classes from the previous look still exist so that older pages keep working. They now simply use the Fraunces wordmark face, with no shadows, skew or gradient. Do not use them in new work.

Contact

Have a question this guide does not cover? We are happy to help.

• Brand and logo enquiries: reach us through our contact form.
• Developer questions: join our community and ask in our Discord server.
• Code of Conduct: all use of SpellWare brand assets must comply with our Code of Conduct.