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
Step liststep-list
Map locatormap-locator
FAQ accordionfaq-accordion
CTA bandcta-band

Add section

Overview

Explore this page

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

First visit

Three simple steps

Arrive ten minutes early and stop by the welcome desk

Join us for worship—we will help you find seating and childcare

Stay for coffee and an optional new-here conversation after the service

Find us

1200 Oak Avenue
Riverside, ST 00000

Common questions

What should I wear?

Come as you are—most people dress casually.

Is there childcare?

Nursery and kids classes are available during the 10:00 service.

Where do I park?

Free lot behind the building; street parking on Oak Ave.

Ready to visit?

Join us this Sunday—we will save you a seat and answer your questions.