ArtSpeak Studio — Identity

Identity

Apply to studio shellLive-preview your expression on the ArtSpeak Studio chrome and this page. Turn off to limit changes to the preview panel only.

Start hereChurch look presetLoad colors and fonts from a sample church

ColorsPage background

--hds-canvasCard / panel background

--hds-surfacePrimary color

Primary hover colorAuto-darken (~15%)Text on primary buttons

On-primary: 3.40:1 — text may be hard to read (needs 4.5:1 for WCAG AA)--hds-on-primaryDark band background

--hds-inverse-canvasText on dark bands

--hds-on-inverseShape fill tint

--hds-shape-fill-subtleSecondary accent (optional)

Exported as colors.secondaryAccents

Neutrals (advanced)

Body text

--hds-inkSecondary text

--hds-ink-secondaryMuted text

--hds-ink-mutedBorder

--hds-borderStrong border

--hds-border-strong

FontsDisplay fontLarge decorative typeHeadline fontSection titlesBody fontParagraph textLabel / mono font--hds-font-label

Expression briefEmotional toneHero layoutModule emphasisPhotography directionInversion usageMotion postureLayout variantOptional paragraph for YAML layoutVariantPulse word (primary)Supporting pulse wordsComma-separated

Spacing & typeSection rhythm

Section gap: 40pxSection padding: 64px

--hds-panel-section-gap, --hds-space-section, --hds-section-yIn-card density

Block gap: 32px

--hds-panel-block-gapHorizontal section padding

Section X: clamp(20px, 4vw, 48px)

--hds-section-xCorner radius

sm 4px · md 8px · lg 12px

--hds-radius-sm / md / lgDisplay type scale--hds-type-scale-displayHeadline type scale

Sample headline: 2.5rem

--hds-type-scale-headlineBody type scale--hds-type-scale-bodyLetter spacing posture--hds-letter-spacing-emLine height posture--hds-line-height-factor

DecorationsGlobal accent positionDefault for section accentsAccent opacity--hds-accent-opacityAccent scale--hds-accent-scale

Hero

Treatment

Giving strip

Treatment

Generic section

Treatment

Page sections

Compose this preview page. Click a section in the preview to edit its decoration binding.

Section introsection-intro
Media listmedia-list
Event listevent-list

Add section

Overview

Explore this page

Preview how section rhythm, type, and color tokens feel across a typical page shell.

Mar 9Hope in the waitingRomans 8 · Pastor Elena Mar 2Tables of graceLuke 14 · Guest preacher

Upcoming

This week at a glance

SunMorning worshipSanctuary · 10:00 am WedMidweek Bible studyRoom 204 · 7:00 pm