Technology, Trust & Education.

This interactive dashboard serves as the central hub for the Kyd Tantano Masong Brand System (Version 1.0). Explore the foundational elements designed specifically for Systeme.io implementations. The architecture ensures visual consistency, WCAG AA accessibility, and a premium user experience.

Core Principles

✔

Accessibility First

Strict adherence to contrast ratios (e.g., 1c1d1e on fefefe) and minimum 44x44px touch targets for inclusive design.
✔

Mathematical Spacing

A strict 8px scale grid system governs all padding and margins to create subconscious visual harmony.
✔

Premium Depth

Strategic use of four distinct shadow variables to create a tactile, multi-layered interface hierarchy.

Brand Color Composition

Color Palette Explorer

The KYDMASONG (www.kydmasong.net) color system relies on strong contrasting neutrals anchored by a signature Gold and Navy. Click any color swatch below to instantly copy the exact hex code (without the hash symbol, optimized for Systeme.io inputs) to your clipboard.

Primary & Neutral

Functional & Accents

Typography System

A clear typographic hierarchy establishes trust and readability. Use the interactive tester below to observe how the Poppins headings, Inter body copy, and Google Sans labels scale and interact.

Interactive Base Size Adjuster

Base Body Size: 16px

H1 - Main Page Headlines | Poppins 700 48px (Desktop)

Building Smart Digital Experiences.

H2 - Section Headlines | Poppins 700 36px (Desktop)

Why Work With Me

H3 - Subsection Headlines | Poppins 600 28px (Desktop)

Featured Portfolio Projects

H5 - Labels/Micro | Google Sans 600 16px

Category Tag

Body Text | Inter 400 | Line Height 1.6 16px (Desktop)

The comprehensive guide provides all the styling specifications needed to implement the brand. Consistency is key to a professional brand. Maintain these standards across all pages and sections to create a cohesive, premium user experience.

Components & Layout Scale

Interact with the standardized UI components configured for form integrations and CTAs. Below, view the visual representation of the strict 8-point mathematical spacing system that dictates layout rhythms.

Interactive Buttons

Primary Button

Secondary Button

Tertiary / Ghost

Form Fields

Default State

Focus State (Simulated)

Error State

The 8px Layout Spacing Scale

Visualizing the proportional relationship of padding and margins.