Active Theme: Classic data-preset="classic"

Deep Blue & Amber Gold with standard rounded corners and glass elevation.

Color Set:

BG Pattern:

Title Font:

Main Font:

Zoom:

Button Style:

Template Code: TCclngzesssnz0bs

Design System & Component Library

Template Design System Showcase

Interactive catalog of reusable components, Material 3 color roles, and theme presets for all parked submodules.

Card Containers

Card Containers & Surface Fills

Sample container cards with generic paragraph text, badges, and layout surfaces under the active theme geometry.

Card Surface 01 Standard

Generic body copy inside a standard surface container card. Adapts corner radius and border styling automatically.

bg-base-100 • shadow-sm

Container 01

Card Surface 02 Elevated

Generic text inside an elevated container card with subtle background tinting for secondary blocks.

bg-base-200 • shadow-md

Container 02

Card Surface 03 Primary Tint

Generic text inside a primary tinted container card for high contrast callouts and notice boxes.

bg-primary/10 • border-primary

Container 03

Card Surface 04 Secondary Tint

Generic text inside a secondary tinted container card for accent highlights and features.

bg-secondary/10 • border-secondary

Container 04

Card Surface 05 Outlined

Generic text inside an outlined container card with reinforced border lines and clean surface fill.

border-2 • bg-base-100

Container 05

M3 Palette & Semantic Tokens

All components consume these standardized CSS tokens to guarantee contrast and visual harmony across dark and light modes.

Primary

--md-sys-color-primary

Main brand color for primary actions & prominent headers

Class: bg-primary

Secondary

--md-sys-color-secondary

Accent highlights, callouts & secondary buttons

Class: bg-secondary

Tertiary / Accent

--md-sys-color-tertiary

Contrasting accent color for tags, badges & special flares

Class: bg-accent

Primary Container

--md-sys-color-primary-container

Tonal background for secondary cards & featured blocks

Class: bg-primary/15

Secondary Container

--md-sys-color-secondary-container

Tonal container background for secondary elements

Class: bg-secondary/15

Surface / Base 100

--md-sys-color-surface

Primary page background and clean card surfaces

Class: bg-base-100

Surface Variant / Base 200

--md-sys-color-surface-variant

Subtle section backgrounds & muted container fills

Class: bg-base-200

Outline / Border

--md-sys-color-outline

Dividers, card borders & form input boundaries

Class: bg-base-300

Error

--md-sys-color-error

Validation errors, alert banners & destructive actions

Class: bg-error

Hero Components

Page Headers & Banners

Page header banners rendered uncontainerized full-width as they appear on live pages.

HeroStretchedGradient HeroBanner.svelte (stretched)

Stretched Hero Banner (Edge-to-Edge)

Spans 100% viewport width edge-to-edge across the screen with background gradient & Moroccan tile pattern overlay.

HeroCenteredBoxed HeroBanner.svelte (centered)

Centered Hero Banner (Boxed Container)

Constrained centered container with rounded corners and border outline (max-w-7xl mx-auto).

HeroPhotoHeader HeroHeader.svelte

Photo Hero Header

Photo-canvas background hero with dark gradient overlay for high contrast photography headers.

Article, Feature & List Cards

Prop-driven reusable card elements for articles, pillar lists, and feature grids.

CardArticleGeneric (Card.svelte)

Documentation ★ Featured

Generic Article Container

Sample text content inside a standard card container displaying paragraph copy and category tags.

By Farend Author July 27, 2026

CardImageTop (ImageCard.svelte)

News & Events ★ Featured

2026-07-29

Top 2/5 Cover Image Article Card

Featured article card featuring a 2/5 top cover image, category badge overlay, summary snippet, and Read More action button.

Read Full Article

CardFeatureSoft (FeatureCard soft)

Soft Feature Card

Tinted icon container with subtle border for pillars, features, and core values.

CardFeatureElevated (FeatureCard elevated)

Elevated Feature Card

White/surface card with top primary border line and lift-on-hover effect.

CardListScope (ListCard.svelte)

ListCard Component

Bullet point item 1 with clean checkmark styling
Bullet point item 2 with automated spacing
Bullet point item 3 for lists and service scope summaries

GridImageGallery (ImageGallery.svelte)

Responsive Image Gallery Grid (4 per Row)

Badges & Alerts

Tags, Badges & Notification Banners

Standard alert banners and badges for status indicators, categories, and form responses.

Badge.svelte Variants

Primary Badge Secondary Badge White Badge Ghost Badge Outline Badge ★ Featured Badge Tag Badge

Usage: <Badge variant="primary">Label</Badge>

Alert.svelte Variants

Success!

Your submission has been received.

Error!

There was a problem processing your request.

Photo Canvas, Pattern Tiles & Decorative Flares

5 distinct geometric tile patterns for Hero banners, photo canvas wrappers, and ambient flares.

Background Patterns & Fills (PatternTile.svelte)

Classic

Moroccan Star Zellige

Simple

Bauhaus Architectural Grid

Contemporary

Organic Wave Arcs

Modern

Cyber Hex Mesh & Nodes

Artistic

Memphis Terrazzo Shapes

Gradient

Solid Gradient (2-Color Fill)

Solid Clean

Solid Clean (1 Single Brand Color)

PhotoCanvas.svelte

Responsive picture wrapper with rounded canvas border.

Flare.svelte

Radial Flare Background

Radial gradient overlay positioned in corners to create subtle depth behind heroes and CTAs.

OrbitRings.svelte

Ring

Headings, Paragraphs & Buttons

Base typographic hierarchy, Accent Title variants, and standard action buttons.

Heading 1

Heading 1 (Title Font)

Heading 2

Heading 2 (Title Font)

Heading 3

Heading 3 (Title Font)

Accent Title Variant

Accent Title (Gradient Underline)

Standard body text using var(--font-sans). High legibility and optimized line height for long-form reading across device screens.

Sample Inline Text Link →