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