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

Colors

Page 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

Fonts

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

Custom fonts

Preview only — production fonts still come from brand assets. Share links can host these fonts temporarily via a fontPackId (not embedded in the URL).

Select or create a profile to upload fonts for preview.

Expression brief

Emotional toneHero layoutModule emphasisPhotography directionInversion usageMotion posturesubtle = scroll reveals (recommended contemporary). static = traditional. hero = video/rotator/line-reveal. GSAP not required.Layout variantOptional paragraph for YAML layoutVariantPulse word (primary)Supporting pulse wordsComma-separated

Spacing & type

ADR-024 — pick a layer, then review its steps. Posture scales the whole layer ladder.

Spacing layer

Macro · Component · Inset

Section rhythm, band padding, large layout gaps

Macro posture

Emits --hds-macro-sm, --hds-macro-md, --hds-macro-lg, --hds-macro-xl, --hds-macro-2xl

sm--hds-macro-smclamp(2.4rem, calc(0.0118518519 * (100vw - 22.5rem) + 2.4rem), 3.2rem)
md--hds-macro-mdsection default
lg--hds-macro-lgclamp(3.75rem, calc(0.0185185185 * (100vw - 22.5rem) + 3.75rem), 5rem)
xl--hds-macro-xlclamp(4.6875rem, calc(0.0231481481 * (100vw - 22.5rem) + 4.6875rem), 6.25rem)
2xlwing--hds-macro-2xlclamp(5.859375rem, calc(0.0289351852 * (100vw - 22.5rem) + 5.859375rem), 7.8125rem)

Type layer

Display · Body · UI

Page titles, headlines, section titles

Roles: display → xl · headline → lg · title → sm

Display scale

1.00× baseline

Emits --hds-type-display-sm, --hds-type-display-md, --hds-type-display-lg, --hds-type-display-xl

sm--hds-type-display-smtitle role
md--hds-type-display-mdclamp(1.5rem, 3vw, 1.75rem)
lg--hds-type-display-lgheadline role
xl--hds-type-display-xldisplay role

Layer specimenDisplay · full hierarchy in Type mode

Welcome home.

A place to belong.

Sunday at 9 & 11.

Section opener

This Sunday

Come as you are.

Sundays at 9 & 11 — worship, belong, take a next step.

Layout chrome (advanced)

Horizontal section padding

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

--hds-section-xCorner radius

sm 4px · md 8px · lg 12px

--hds-radius-sm / md / lg

Panel gaps still follow Macro/Component posture: section 40px, block 32px. Sample headline 2.5rem.

Letter spacing posture--hds-letter-spacing-emLine height posture--hds-line-height-factor

Decorations

Global 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
Metric highlightmetric-highlight

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

Our reach

120

Families connected each month

Through worship, groups, and neighborhood partnerships, we keep showing up for one another across every stage of life.