From fc835ab983dcc10df1fc31ea42ec4d7c89e65641 Mon Sep 17 00:00:00 2001 From: Hikari Date: Tue, 3 Mar 2026 16:41:50 -0800 Subject: [PATCH] feat: add style/branding guide --- style/index.html | 1381 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 1381 insertions(+) create mode 100644 style/index.html diff --git a/style/index.html b/style/index.html new file mode 100644 index 0000000..9f6c468 --- /dev/null +++ b/style/index.html @@ -0,0 +1,1381 @@ + + + + NHCarrigan Style Guide + + + + + + + +
+

NHCarrigan Style Guide

+

+ This is the authoritative reference for NHCarrigan brand and design + standards. It serves two audiences: +

+ +

+ Each section is labelled with the audience it applies to. All use of + NHCarrigan brand assets must comply with our + Code of Conduct. +

+ + + + +
+

Brand Assets

+ Brand Use + Developers + +

+ NHCarrigan has two primary brand assets: our logo and + our mascot, Hikari. Both are available for use under + the rules below. Any use must comply with our + Code of Conduct. +

+ +
+
+ NHCarrigan Logo +

Logo

+

+ Download +

+
+
+ Hikari, the NHCarrigan mascot +

Hikari (Mascot)

+

+ Download +

+
+
+ +

Usage Rules

+
    +
  • Both assets may be placed on any background colour.
    • +
  • + Both assets must be displayed at a minimum size of 512×512 + pixels. +
    • +
  • + Both assets must link back to + nhcarrigan.com whenever used. +
    • +
  • + Hikari may only be used when the NHCarrigan 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: +

+ +
+
+

✗ Do not recolour

+ Example of prohibited recolouring +

+ Do not apply colour filters, tints, or overlays to either asset. +

+
+ +
+

✗ Do not rotate

+ Example of prohibited rotation +

Do not rotate either asset at any angle.

+
+ +
+

✗ Do not stretch

+ Example of prohibited stretching +

+ Do not stretch, squash, or distort the proportions of either + asset. +

+
+ +
+

✗ Do not crop

+ Example of prohibited cropping +

Do not crop, clip, or partially obscure either asset.

+
+ +
+

✗ Do not invert

+ Example of prohibited inversion +

+ Do not invert, desaturate, or otherwise alter the colours of + either asset. +

+
+ +
+

✗ Hikari without logo

+ Example of Hikari used without the logo +

+ Do not use Hikari unless the NHCarrigan logo is also visible in + the same area. +

+
+
+
+ + +
+

Colour Palette

+ Brand Use + Developers + +

+ These are the official NHCarrigan brand colours. Use them for any + NHCarrigan-adjacent content to maintain visual consistency. Developers + should reference the CSS custom property names rather than hardcoding + hex values, so that dark mode works correctly. +

+ +
+
+
+
+ Witch Purple + #2B1B3D + --witch-purple +
+
+
+
+
+ Witch Plum + #44275A + --witch-plum +
+
+
+
+
+ Witch Rose + #A8577E + --witch-rose +
+
+
+
+
+ Witch Mauve + #D4A5C7 + --witch-mauve +
+
+
+
+
+ Witch Lavender + #E8D5E8 + --witch-lavender +
+
+
+
+
+ Witch Black + #0A0009 + --witch-black +
+
+
+
+
+ Witch Silver + #C0C0C0 + --witch-silver +
+
+
+
+
+ Witch Moon + #F5F5F5 + --witch-moon +
+
+
+ +

Semantic Theme Variables

+

+ Developers should use these semantic variables in preference to the + raw palette colours. They automatically remap in dark mode. +

+
:root { + --foreground: var(--witch-purple); /* Primary text */ + --background: var(--witch-moon); /* Page background */ + --accent: var(--witch-rose); /* Links and highlights */ + --border: var(--witch-plum); /* Borders and dividers */ + --highlight: var(--witch-mauve); /* Hover states */ +}
+
+ + +
+

Typography

+ Developers + +

+ NHCarrigan web applications use four typefaces, all loaded from Google + Fonts. Add the following import at the top of your stylesheet: +

+
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Creepster&family=Griffy&family=Henny+Penny&display=swap');
+ +
+

+ Griffy — Headings (h1, h2, h3, h4, h5, h6) +

+

+ The quick brown fox jumps over the lazy dog +

+

+ Used for all heading elements. Applied automatically — no class + needed. +

+
+ +
+

Kalam — Body text, UI, form elements

+

+ The quick brown fox jumps over the lazy dog +

+

+ The default page font. Applied to all body text, inputs, and + general UI. Applied automatically via html — no class + needed. +

+
+ +
+

+ Creepster — Accent display text (.witchy-accent) +

+

+ The quick brown fox jumps over the lazy dog +

+

+ Used via the .witchy-accent class. Use sparingly for + labels and callouts. +

+
+ +
+

+ Henny Penny — Mystical display text (.mystical-text) +

+

+ The quick brown fox jumps over the lazy dog +

+

+ Used via the .mystical-text class. Suited to large + display headings and special callouts. Use sparingly. +

+
+
+ + +
+

Icons

+ Developers + +

+ All NHCarrigan web applications use + Font Awesome for iconography. Font Awesome is loaded + automatically via the shared header script — you do not need to add a + separate import. Use standard <i> tags with Font + Awesome class names: +

+
<!-- Solid icon --> +<i class="fas fa-heart"></i> + +<!-- Brand icon --> +<i class="fab fa-github"></i> + +<!-- Regular icon --> +<i class="far fa-star"></i>
+

+ Browse the full library at + fontawesome.com/icons. +

+
+ + +
+

Layout

+ Developers + +

+ All NHCarrigan pages share a common layout delivered by the shared + header script. Include it in every page's <head>: +

+
<script src="https://cdn.nhcarrigan.com/headers/index.js" async defer></script>
+ +

+ The script injects the global stylesheet, Font Awesome, footer + markup, and theme toggle logic. Your page only needs to provide the + <main> element with your content. +

+ +

Page Structure

+
+
+ body::before — Background image (fixed, full-viewport, z-index: -2) +
+
+ body::after — Purple gradient overlay (fixed, full-viewport, z-index: -1) +
+
+ <main> — Primary content container
+ max-width: 1080px · margin: auto · padding: 40px + · border-radius: 15px +
+
+ <footer> — Fixed bottom bar (injected by header script)
+ height: 75px · contains socials and theme toggle +
+
+ +

Background & Overlay

+

+ Every page uses a two-layer background system. This is applied + automatically by the shared stylesheet — do not override it. +

+
/* Layer 1: Background image */ +body::before { + content: ""; + position: fixed; + inset: 0; + background: url(https://cdn.nhcarrigan.com/background.png) center / cover; + z-index: -2; +} + +/* Layer 2: Mystical purple gradient overlay */ +body::after { + content: ""; + position: fixed; + inset: 0; + background: + radial-gradient(circle at 20% 50%, rgba(168, 87, 126, 0.35) 0%, transparent 60%), + radial-gradient(circle at 80% 80%, rgba(68, 39, 90, 0.35) 0%, transparent 60%), + linear-gradient(180deg, + rgba(10, 0, 9, 0.5) 0%, + rgba(43, 27, 61, 0.25) 50%, + rgba(43, 27, 61, 0.4) 100% + ); + z-index: -1; +}
+ +

Responsive Breakpoints

+ + + + + + + + + + + + + + + + + + + + + +
Max WidthChanges
625px + Footer height reduces to 50px; Tree Nation badge hidden; main + bottom margin reduces to 60px +
425pxDonate badge hidden from footer
350pxFooter font size reduces to 10pt
+
+ + +
+

Custom Cursors

+ Developers + +

+ NHCarrigan pages use custom SVG cursors as a distinctive brand + element. Four cursor states are defined and must be applied to the + correct elements. The cursors are provided as inline SVG data URIs in + the shared stylesheet — copy them exactly; do not substitute standard + browser cursors. +

+ +
+
+

Default

+

Applied to: html

+

+ A cross-shaped flower with a witch-purple body, rose centre, and a + trailing lavender sparkle dot. Shown in all non-interactive areas. +

+
+
+

Pointer

+

+ Applied to: a, button, + input[type="submit"], + input[type="button"], select +

+

+ The same flower shape with a glowing rose fill, indicating a + clickable or interactive element. +

+
+
+

Text

+

+ Applied to: input[type="text"], + input[type="email"], + input[type="password"], textarea +

+

+ A classic I-beam styled in witch purple with a rose midpoint dot, + indicating an editable text field. +

+
+
+

Move / Drag

+

Applied to: [draggable="true"]

+

+ A four-directional diamond shape in witch purple, indicating a + draggable element. +

+
+
+
+ + +
+

Components

+ Developers + +

+ All components below are styled automatically by the shared + stylesheet. No additional classes are required unless noted. +

+ +
+

Buttons

+
+ +   + +
+
<button>Click Me</button> +<input type="submit" value="Submit" />
+
+ +
+

Links

+
+ An example link +
+
<a href="https://nhcarrigan.com">An example link</a>
+
+ +
+

Form Inputs

+
+ + + + +
+
<input type="text" placeholder="Text input" /> +<input type="email" placeholder="Email input" /> +<textarea rows="3"></textarea> +<select> + <option>Option one</option> +</select>
+
+ +
+

Tables

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
NameRoleStatus
NaomiFounderActive
HikariMascotAlways here
ContributorDeveloperWelcome!
+
+
<table> + <thead> + <tr><th>Column</th></tr> + </thead> + <tbody> + <tr><td>Value</td></tr> + </tbody> +</table>
+
+ +
+

Blockquotes

+
+
Permanence in a Transient World.
+
+
<blockquote>Your quote here.</blockquote>
+
+ +
+

Code

+
+

Use inline code within body text.

+ 
// Code block example
+const greeting = "Hello, world!";
+
+
<!-- Inline --> +<code>inline code</code> + +<!-- Block --> +<pre><code>// your code here</code></pre>
+
+ +
+

Lists

+
+
    +
  • First item
    • +
  • Second item
    • +
  • Third item
    • +
+
+
<ul> + <li>First item</li> + <li>Second item</li> +</ul>
+
+
+ + +
+

Special Classes

+ Developers + +

+ Three utility classes provide decorative text effects. Use them + sparingly — they are designed for display emphasis, not body text. +

+ +
+

.witchy-accent

+
+ Witchy Accent Text +
+

+ Creepster font with wide letter-spacing, a rose text shadow, and a + subtle skew. Good for labels, taglines, or section callouts. +

+
<span class="witchy-accent">Your text here</span>
+
+ +
+

.mystical-text

+
+ Mystical Display Text +
+

+ Henny Penny font with letter-spacing and a subtle purple text + shadow. Suited to display headings or special callouts. +

+
<span class="mystical-text">Your text here</span>
+
+ +
+

.spooky-title

+
+ Spooky Title Text +
+

+ Creepster font with a purple-to-rose-to-mauve gradient fill. Use + for large display titles where maximum visual impact is desired. +

+
<span class="spooky-title">Your text here</span>
+
+
+ + +
+

Dark Mode

+ Developers + +

+ Dark mode is activated by adding the .is-dark class to + the <html> element. The shared footer script + handles this automatically via the theme toggle button — you do not + need to implement the toggle yourself. +

+

+ If your page includes custom elements beyond the standard components, + add .is-dark overrides for those elements: +

+
.is-dark .your-custom-element { + background: rgba(10, 0, 9, 0.95); + color: var(--witch-lavender); + border-color: var(--witch-rose); +}
+ +

Theme Variable Remapping

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VariableLight ModeDark Mode
--foreground--witch-purple--witch-lavender
--background--witch-moon--witch-black
--accent--witch-rose--witch-mauve
--border--witch-plum--witch-rose
--highlight--witch-mauve--witch-plum
+ +

Preview

+
+
+

Light Mode

+

+ Body text uses + --witch-purple + against a near-white gradient background. +

+

Links use --witch-rose in light mode.

+

+ The main container has a soft lavender gradient with a rose + box shadow glow. +

+
+
+

Dark Mode

+

+ Body text uses + --witch-lavender + against a near-black gradient background. +

+

Links use --witch-mauve in dark mode.

+

+ The main container switches to a deep gradient with an + intensified rose glow on the box shadow. +

+
+
+
+ + +
+

Scrollbar & Selection

+ Developers + +

+ The shared stylesheet defines custom scrollbar and text selection + styles. These are applied automatically — do not override them in + page-specific stylesheets. +

+ +
+

Scrollbar

+

+ Webkit scrollbars (Chrome, Edge, Safari) are styled to match the + witch palette. Firefox uses the standard scrollbar with no + customisation. +

+
::-webkit-scrollbar { width: 10px; height: 10px; } +::-webkit-scrollbar-track { background: var(--witch-lavender); } +::-webkit-scrollbar-thumb { background: var(--witch-plum); border-radius: 5px; } +::-webkit-scrollbar-thumb:hover { background: var(--witch-purple); }
+
+ +
+

Text Selection

+

+ Selected text is highlighted in witch rose + with moon-white text. This applies across all browsers. +

+

Try selecting some text on this page to see it in action!

+
::selection { background: var(--witch-rose); color: var(--witch-moon); } +::-moz-selection { background: var(--witch-rose); color: var(--witch-moon); }
+
+
+ + +
+

Animations

+ Developers + +

+ A small set of animations are defined in the shared stylesheet and + applied to specific elements. Do not remove or override them — they + are part of the brand's playful character. +

+ +
+

Wiggle

+

+ Applied automatically to all <h1> elements. A + gentle, continuous rocking animation that gives page titles their + personality. +

+
+

Page Title

+
+
@keyframes wiggle { + 0%, 100% { transform: rotate(-2deg); } + 25% { transform: rotate(2deg); } + 50% { transform: rotate(-1deg); } + 75% { transform: rotate(1deg); } +} + +h1 { + transform: rotate(-2deg); + display: inline-block; + animation: wiggle 4s ease-in-out infinite; +}
+
+ +
+

Hover Transitions

+

+ Interactive elements use a consistent transition: all 0.3s ease + for smooth hover feedback. Key hover behaviours to preserve: +

+ + + + + + + + + + + + + + + + + + + + + + +
ElementHover Effect
ButtonsLifts up, rotates slightly, scales up, gains rose border and glow
LinksColour shifts to --witch-plum, rose underline appears
Footer linksColour shifts to --witch-mauve, soft text glow appears
Social list itemsBackground fills with rose tint, row nudges right
+
+
+ + +
+

Contact

+ Brand Use + Developers + +

+ Have a question not covered by this guide? We're happy to help. +

+
    +
  • + Brand & logo enquiries — reach us through our + website. +
    • +
  • + Developer questions — join our community and ask in + our + Discord server. +
    • +
  • + Code of Conduct — all use of NHCarrigan brand + assets must comply with our + Code of Conduct. +
    • +
+
+
+ +