Hue Shift - Pattern Library

Color System

Brand & Background Tokens

Dark BG #0f0f12

Navy #051937

Panel Red #a32a1e

Active Maroon #5b2220

Btn Primary #0f0c3b

Gold Accent #ffcd29

Light Text #f2f2f2

Surface & Alpha Tokens

Glass BG rgba(15,15,18,.62)

Dossier BG rgba(0,0,0,.50)

Panel Shell rgba(0,0,0,.25)

Border Alpha rgba(255,255,255,.20)

Gradients

Body Background Animated · 32s loop

Panel Shell 135° · red→blue

Feature Overlay Orange-right + grey-top

Rainbow Border 135° · mask-composite

WCAG 2.1 Contrast Ratios

Foreground	Background	Ratio	AA Normal	AA Large
#f2f2f2 text	#0f0f12 body bg	18.4:1	Pass	Pass
#fff text	#0f0c3b btn-primary	14.9:1	Pass	Pass
#fff text	#a32a1e panel red	4.8:1	Pass	Pass
#ffcd29 gold	#000 text bg	12.5:1	Pass	Pass
#fff text	#5b2220 maroon active	7.2:1	Pass	Pass

Typography

Typeface · System UI / Sizes · fluid with clamp()

Display

.hs-title clamp(3rem, 6vw, 5rem) fw 800 Homepage hero

NAME

.hs-heroName clamp(2.2rem, 4vw, 3.4rem) fw 900 · uppercase · ls .12em Hero frame character name

Feature Name

.hs-feature__name clamp(2rem, 4vw, 3.2rem) fw 900 · color #ffcd29 ls .06em · on #000 bg

Subtitle Label

.hs-subtitle 0.9rem · uppercase ls 0.25em · opacity .65 bg #000 · padding 10px 5px

SECTION LABEL

.hs-sub 0.8rem · ls 0.2em bg #000 · pad 3px 5px 4px Transparent in footer

HUE SHIFT

.hs-logo ls 0.3em · fw 700 Brand wordmark · nav + footer

Kicker / Chapter label text

.hs-kicker ls 0.18em Reader modals · chapter headers

FEATURED EPISODE

.hs-feature__kicker 0.75rem · ls .28em · fw 700 opacity .75 · on dark banner

Read Now →

.hs-feature__cta .85rem · uppercase · ls .14em fw 800 · bg #000 inline

PILOT NAME

.hs-panel-label 1.2rem · fw 900 · uppercase ls .20em · bg #000 Absolute bottom-left of panel

Callsign

.hs-dossier__label 0.75rem · fw 800 · ls .22em opacity .70 · dossier grid key

Squadron Leader, First Division

.hs-dossier__value Inherited size · lh 1.6 opacity .92 · dossier grid value

Body blurb - content description paragraph constrained for comfortable reading width in dark contexts.

.hs-blurb max-width 520px opacity .85 on dark bg Inherited size + line-height

Combat Specialist

.hs-chip text 0.72rem · fw 800 uppercase · ls .18em

.hs-panel-banner fw 900 · uppercase · ls .22em bg rgba(0,0,0,.85) Absolute top of .hs-panel

Buttons & Actions

Primary & Secondary Actions

Latest Chapter .btn-primary
bg #0f0c3b · border #fff · color #fff

All Chapters .btn-secondary
bg #fff · border #fff · color #000

Back Home .btn-secondary
Secondary nav action

Card CTAs - Responsive Width (.hs-cardCtas)

Read Chapter One Buy Chapter One

.hs-cardCtas .btn · width 100% on mobile & desktop (lg+) · width calc(50% - .25rem) on tablet (768-991px) · used in all-chapters.html cards, which are 2-up at that breakpoint Filter / Active States

Collection

.btn.active → bg #5b2220 · border #5b2220 · :focus-visible/:active → bg #fff color #000 Text CTA - Feature Banner

Open dossier → .hs-feature__cta · inline text, not a button
bg #000 · fw 800 · uppercase · ls .14em

Primary and secondary actions use <a class="btn"> tags, not <button>. All buttons are designed for dark backgrounds only. Chapter nav uses .rounded-pill modifier. .hs-feature__cta is an inline text CTA with black box treatment - used inside .hs-feature__content.

Chips & Badges

Role Chips

Pilot Squadron Leader Mech Class A Combat Specialist

.hs-chip · pill · bg rgba(15,15,18,.55) · border rgba(255,255,255,.14) · blur(8px) · fw800 · ls .18em · 0.72rem uppercase

Used inside .hs-heroRole beneath hero character names. .hs-heroRole is display:flex; gap:10px; flex-wrap:wrap.

Modals & Reader

Reader Modal (#extraReader, #pageReader) .modal-content bg rgba(10,10,12,.92) · .modal-header/.footer bg rgba(0,0,0,.35) · z-index 5000 Reader HUD (.hs-readerHud)

Positioned absolute left/right/bottom: 12px. Background rgba(0,0,0,.45), border rgba(255,255,255,.10), border-radius 14px, backdrop-filter: blur(10px), z-index 50.
Pagination: .hs-readerPagination - fw700 · ls .06em · text-shadow for legibility.
Hidden via .hs-readerModal.hs-hideHud toggle (JS).

Page Frame & Image

.hs-pageFrame - flex center · height calc(100vh - 260px) desktop, calc(100vh - 240px) md+.
.hs-pageImg - max-width min(1100px, 72vw) · max-height calc(100vh - 320px) · object-fit contain.
Mobile (<768px): modal-content height 100vh · modal-body flex:1 · pageImg max-height calc(100vh - 140px).

Glass & Surfaces

Glass - Header & Footer

Frosted glass surface

.hs-glass · bg rgba(15,15,18,.62) · backdrop-filter blur(12px) Panel Shell - Chapter wrapper

Deep shell with diagonal stripe overlay and gradient background.

.hs-panel-shell · gradient #360f0b→#103b7c · blur(10px) · shadow 0 18px 55px rgba(0,0,0,.45) Dossier Container

Character data container

.hs-dossier · bg rgba(0,0,0,.50) · border rgba(255,255,255,.20) · padding 18px

Feature Banner

.hs-feature - full-width linked banner

Featured Episode Pilot Name Short teaser blurb - max 52ch, opacity .85, line-height 1.6. Read Now →

.hs-feature · height 420px · border-top/bottom 10px solid #000 · img hover scale(1.08) transition .55s

All text children (__kicker, __name, __text, __cta) share background:#000; display:inline; padding:4px 4px 6px 8px for a "cut-out" label effect over the image overlay.

Promo Banner

.hs-promoBanner - full-width linked CTA banner

Digital Copy Available Hue Shift — Chapter One: Atrocities Own the full chapter and support the series on Patreon.

Get it on Patreon →

.hs-promoBanner · gradient #1a0f3b→#0f2a5c→#1a0f3b · border rgba(255,255,255,.14) · rainbow gradient ring via ::before (mask-composite exclude, 8s shift loop)

.hs-promoBanner-kicker - .72rem · uppercase · fw800 · ls .28em · color #ffcd29.
.hs-promoBanner-title - clamp(1.1rem, 2.4vw, 1.5rem) · fw900.
.hs-promoBanner-sub - .85rem · opacity .75.
.hs-promoBanner-cta - pill CTA · bg #ffcd29 → #fff on hover · fw800 · uppercase · ls .08em.
Hover/focus: border brightens to rgba(255,205,41,.55) and shadow deepens - no position shift.
Mobile (<576px): stacks to a column and the CTA becomes full width.
Used on index.html, _chapters/c-1.html, and _chapters/c-2.html to promote (or cross-promote) the Chapter One digital copy on Patreon.

Hero Frame

.hs-heroFrame - character image header

Squadron Alpha

Pilot Callsign

Pilot Squadron Leader

.hs-heroFrame · height 72vh · min-height 520px · img object-position top center scale(1.02)

.hs-heroShade - dual gradient overlay: bottom-up rgba(0,0,0,.75)→transparent at 55%, left-right rgba(0,0,0,.55)→transparent at 60%.
.hs-heroText - absolute · left/right/bottom: 22px.
Profile frames: .hs-profileFrame 240px · .hs-actionFrame 320px · both with border: 3px solid #000 on img.

Dossier Component

Label/value grid for character metadata

Callsign Blaze-7

Rank Squadron Leader, First Division

Mech Class Class A - Interceptor

Status Active

.hs-dossier__row · grid-template-columns 110px 1fr · gap 14px · border-bottom rgba(255,255,255,.08)

.hs-dossier__label - 0.75rem · fw800 · ls .22em · opacity .70 | .hs-dossier__value - opacity .92 · lh 1.6

Character Panels

.hs-panel - homepage dossier cards

Llew

.hs-panel · height 570px · bg #a32a1e

::before - rainbow gradient border via mask-composite: exclude. Opacity .55→.90 on hover.
::after - diagonal stripe texture, masked to top 60%.
img - filter: grayscale(.9) contrast(1.05) default → filter:none; scale(1.06) on hover. Touch devices: no filter.
.hs-panel-banner - absolute top · bg rgba(0,0,0,.85) · fw900 · uppercase · ls .22em · z-index 8.
.hs-panel-label - absolute bottom-left 24px · bg #000 · fw900 · ls .20em · z-index 6.

Tiles

Page & Extras Tiles

.hs-pageTile
bg #051937 · border #6b5757

Extras Item

.hs-extraTile
.hs-tileTreatment

Tile images scale responsively: 220px mobile → 240px md → 260px lg. .hs-tileTreatment shares the same rainbow border + stripe pseudo-element pattern as .hs-panel.

Navigation & Footer

Site Header (.hs-glass)

HUE SHIFT

Episodes Extras

.hs-glass · position sticky · z-index 4000 · navbar z-index 4100 · dropdowns 4200 Section Filter (.hs-subPage-header)

Collection

.hs-subPage-header · flex · gap 12px · mobile: wrap/stack · md+: row space-between Back to Top

↑ Fixed bottom-right 20px · 44×44px · opacity 0→1 via .show · hover translateY(−4px)

.hs-backTop · z-index 1000 · bg rgba(0,0,0,.75) · border rgba(255,255,255,.25) Site Footer

.hs-footer-inner flex space-between · .hs-footer-left flex gap 12px · .hs-sub transparent bg in footer

Effects & Animations

Visual Textures & Transitions

hueShiftGlow
32s · ease-in-out · 160% size
prefers-reduced-motion: none

Diagonal stripe
45° · 2px stripe / 12px gap
panels, tiles, shell

Body dot grid
10×10px tile · rgba(26,143,229)
body::before · fixed · z-index −1

Rainbow border ring
mask-composite exclude
.hs-panel · .hs-tileTreatment

Panel hover: filter: grayscale(.9)→none + scale(1.06) · transition .45s/.35s ease.
Feature hover: scale(1.08) · transition .55s ease.
Rainbow border: opacity .55→.90 on hover · transition .35s ease.
Touch devices (@media hover:none pointer:coarse): panel filter always none.

Spacing & Z-Index

Z-Index Stack

−1	Body dot-grid overlay (fixed, body::before)
0–4	Panel pseudo-element layers (stripe, content)
5–8	Panel rainbow border · banner · label
50	Reader HUD (.hs-readerHud)
1000	Back to top (.hs-backTop, fixed)
4000	Site header (header.hs-glass)
4100	Navbar within header
4200	Dropdown menus
4900	Modal backdrop
5000	Modals (.modal)

Responsive Breakpoints

Mobilemax-width 600px
Logo 60px · Tiles 220px

Tablet (md)min-width 768px
Tiles 240px · SubPage row

Desktop (lg)min-width 992px
Tiles 260px · CoverWrap 360px

XLmin-width 1200px
Bootstrap container max-width

Key Spacing Values

Feature border: 10px · Rainbow border padding ring: 10px · SubPage gap: 12px · Footer-left gap: 12px · Dossier col gap: 14px · Dossier padding: 18px · HeroText inset: 22px · Panel label offset: 24px · Logo desktop: 80px · Logo mobile: 60px

Dependencies & Conventions

Libraries

Bootstrap 5.3.3 (CDN) - grid, utilities, navbar, modal, buttons. Custom property overrides in global.css.
Swiper 11 (CDN) - chapter cover carousels, image reader. --swiper-theme-color: rgba(255,255,255,.9). Custom nav via .hs-nav (40×40px, border-radius 14px) and .hs-caret--left/right.

Class Naming (.hs- prefix)

Block .hs-panel · .hs-feature · .hs-dossier · .hs-hero
Element .hs-panel-label · .hs-feature__name · .hs-dossier__row
Modifier .hs-caret--left · .hs-caret--right
Bootstrap utilities used freely alongside: .d-flex · .gap-3 · .fw-bold · .col-md-4

Design System & Pattern Library