Skip to main content
DigitalSanctum.
DIGITAL MARKETING

Sanctum Visual

Internal design system and brand asset portal — centralised visual identity management for all Digital Sanctum properties.

Eleventy Tailwind CSS SVG

Centralised Brand Hub

Sanctum Visual serves as the single source of truth for every Digital Sanctum property — from the core marketing site to sub-brands like Naked Tech and internal tools like Sanctum Core. Every logo, colour value, and typographic specification lives in one place with version-controlled history.

  • Single repository for all brand assets across 6+ Digital Sanctum properties
  • Version-controlled asset history with changelog for every update
  • Role-based access ensuring only authorised team members publish changes
  • Instant asset lookup via search and structured taxonomy

Key Outcome

Eliminated brand drift across all Digital Sanctum properties. Design reviews that previously took 2+ hours of cross-referencing outdated Slack messages now resolve in minutes from a single source of truth.

Visual Identity Standards

A comprehensive design token system codifies every aspect of the Digital Sanctum visual identity — colour palettes, typography stacks, spacing scales, shadow depths, and animation curves. Tokens are documented in both human-readable reference pages and machine-consumable JSON for automated build pipelines.

  • Full design token specification — colours, type, spacing, shadows, motion
  • Accessibility-first colour pairings with WCAG 2.1 AA/AAA compliance notes
  • Typographic scale from display headings to fine-print captions
  • Dark-mode and light-mode token variants for every property

Key Outcome

Reduced design-to-development handoff friction to near zero. Developers pull tokens directly from the portal instead of inspecting mockups — consistent rendering guaranteed across all properties.

SVG-First Asset Pipeline

Every icon, illustration, and brand graphic in the Digital Sanctum ecosystem is authored and stored as SVG. An automated build pipeline optimises SVGs at compile time — stripping metadata, applying viewBox normalisation, and generating responsive sprite sheets for Eleventy layouts.

  • All brand assets authored as SVGs — zero raster dependency for UI graphics
  • Automated optimisation pipeline (SVGO) integrated into the Eleventy build
  • Responsive sprite sheets with lazy-loading for performance
  • Contextual colouring via currentColor — icons adapt to any theme automatically

Key Outcome

Sub-100kB total icon footprint across the entire site ecosystem. SVG pipeline reduced page weight by approximately 40% compared to the previous image-based approach while delivering resolution-independent sharpness on all displays.

Cross-Property Consistency

When a brand update rolls out — a new service colour, an adjusted logo mark, or revised typography — Sanctum Visual propagates the change to every Digital Sanctum property. Built-in diff tooling lets the team preview how a change will affect each site before publishing.

  • Centralised brand update propagation to all connected properties
  • Before-and-after diff previews per property before any change is published
  • Automated CSS custom property generation from design token changes
  • Scheduled compliance checks flag any property that has drifted from current standards

Key Outcome

Brand-wide updates that previously took a full day of manual find-and-replace across repos now deploy in under 15 minutes with guaranteed consistency — no missed edges, no forgotten instances, no regression risk.

Want results like this?

Start a Conversation

Digital Sanctum knowledge base

Search Digital Sanctum

Find services, processes, products, case studies, and strategic intelligence. Search stays in your browser.

Type at least two characters to search the knowledge base.