Style guideObserved on the current site · September 2026

ATX Writing Club / Field manual 01

A quiet, tactile editorial system.

This is a descriptive record of the website as it exists now—not an aspirational redesign. It names the shared visual rules, deliberate exceptions and responsive behaviors that keep every page recognizably ATX Writing Club.

A living reference

Begin with what is already here.

These rules were measured from the current pages and their behavior across phones, tablets and desktops. Shared patterns create continuity; the few exceptions below are intentional parts of the experience, not invitations to flatten every page into the same template. This guide covers the public ATX Writing Club website only; the member dashboard is a separate product and its styles are outside this guide.

Principles

The decisions that should survive every careful visual revision.

Editorial, not promotional

Let pacing, photography and precise language do the work. Avoid loud gradients, oversized slogans, ornamental UI and generic marketing chrome.

Warm restraint

Build with paper tones, ink and a narrow rust accent. Semantic colors are rare and must communicate a real state.

Space is hierarchy

Type deliberately stays quiet. Large chapter spacing, rules and shifts in surface create structure instead of a conventional display-type ladder.

Images are objects

Photography appears as full-bleed chapters, documentary pauses or contained objects. Do not lay routine body copy over an image.

Structure may repeat; stories may not

Event and membership routes share architecture, but image sequences, crops and chapter compositions should remain route-specific.

Motion never owns attention

Animate state and continuity, never spectacle. No animation may change layout dimensions, and reduced motion is a first-class state.

Color

Warm stone paper, near-black ink and one restrained tobacco-clay family.

Paper

#F7F5EF

Primary page background

Paper low

#EFEEE9

Cards, quiet panels, form surfaces

Paper deep

#E7E2D9

Footer and stronger warm separation

Sand

#B8AEA0

Secondary rules and quiet controls

Ink

90% black

Primary text

Muted

#625D55

Supporting copy and captions

Line

#D3C7B8

Default 1px dividers and inputs

Clay

#9C4F2C

Primary action and brand accent

Deep clay

#7F3F26

Wordmark, focus, links, hover

Soft clay

#F1DFD3

Text selection and soft highlight

Chapter rust

#743E27

Chapter labels and hierarchy

Full

#D3302F

Closed/full availability only

Review green

#3F7D2F

Positive review/status only

Mobile action

#9C4F2C

Floating mobile conversion control

Dialog ink

#382B1F

Warm high-contrast modal text

Header glass

84% paper

Paper-backed translucent masthead

Core palette

Paper, low paper and deep paper create the surface ladder; ink and muted brown carry the copy; clay owns brand and action. New elements should reuse those roles before adding another hue.

Contrast over photography

Film-backed heroes use white marks and copy over a controlled dark scrim. Pale routes use ink and clay on paper. Never rely on color alone for availability, selection or completion.

Current exceptions: the waitlist uses a denser, warmer version of the same paper-and-clay family. Career detail pages use a cleaner white, neutral charcoal and a slightly different rust so they read as focused recruitment documents.

Typography

One editorial voice, a compact display voice, and a factual mono voice.

Heldane Display / identity

ATX Writing Club

Covik / editorial

Writing grows through rhythm, attention, and company.

Spectral / dialog

Where are you in your writing journey?

Covik Mono / metadata

AUTUMN 2026 · AUSTIN, TEXAS · 03 HOURS

Typography roles
Role	Face	Size / line	Weight	Tracking	Use
Body	Covik	16 / 24	300	+0.25px	Default prose and long-form editorial copy
Page title	Covik	32 / 48	500	−0.15px	Primary page heading; clay deep by default
Section heading	Covik	16 / 24	300	+0.25px	Quiet editorial hierarchy; spacing creates emphasis
Label	Covik	14 / 20	400	+0.45px	Section and chapter labels; sentence case
Metadata	Covik Mono	12 / 18	400	+0.45px	Numbers, dates, facts and compact utility text
Controls & navigation	Covik	14–16 / 20–24	400	+0.45px	Navigation, buttons, form labels and compact actions
Dialog title	Spectral	28 / 32	300	−0.5px	Waitlist and compact conversion titles
Wordmark	Heldane Display	21 / 21	500	−0.025em	Live text brand identity; 28px in desktop rail

Body measure is 42ch. Long journal articles cap at approximately 650px.
Sentence case is the default. Uppercase is reserved for small mono metadata, never for primary calls to action.
Page-family title exceptions are real: journal detail 36/40 desktop, commerce 18/20–24, contact 32/40, and FAQ/legal/404 25.6/38.4.
Career details intentionally use Arial body copy and Georgia headings; they are a separate recruitment-document pattern.

Layout & space

A mobile-first reading column becomes an editorial canvas beside the season rail.

20pxMobile section gutter

40pxTablet section gutter

48pxWide section gutter

1200pxMaximum content wrap

42chDefault prose measure

59–60pxSection ledger height

Responsive layout rules
Viewport	Shell	Gutter	Collection behavior
0–767px	37px announcement + 52px sticky masthead	20px	Single reading column; native horizontal snap rails with a visible next-card peek
768–1099px	370px fixed season rail; content fills remainder	40px	Layouts may collapse to one column; shop uses three columns
1100–1279px	370px fixed season rail	48px	Two-column editorial splits; collections target 31% cards
1280px+	380px fixed season rail	48px	Full editorial composition; shop uses four columns

Spacing grammar

The system is intentionally not a rigid 4px scale. Repeated working values are 8, 10, 12, 16, 20, 24, 28, 32, 40, 48 and 64px. Use 20/40/48 for page gutters, 40/48/64 for chapter rhythm, and the smaller values only inside components. Preserve generous separation before adding decoration.

Shape & depth

Mostly square, precisely handled, and almost entirely shadowless.

0px

Full-bleed media, editorial frames, footer, desktop drawer

2px

Tiny focus frames, bar handles and micro controls

3px

Editorial cards, section imagery, career panel and compact surfaces

4px

Default cards, fields, buttons, navigation and waitlist controls

8px

Homepage offer panel only

12px 12px 0 0

Mobile context-information sheet only

50% / 999px

Status dots, menu circle and true pill geometry

Borders

The default separator is a clearly visible warm-stone 1px line. Section rules create rhythm; they should not box every element. Image-backed states may use a white rule at 18% opacity.

Elevation

Use surface contrast before shadow. The standard menu circle is the notable exception, with a soft 2px downward lift and a short 5px blur. Modals and editorial cards remain flat.

Responsive exception: shared editorial frames become square below 768px. Buttons, waitlist controls, drawers, pills and the homepage offer panel retain their deliberate curves.

Components

Shared behavior and state are as important as appearance.

Announcement bar

One seasonal line. 37px tall on mobile and 40px on desktop. Paper-backed pages use clay text; film-backed mobile heroes use light text.

Masthead

A 52px mobile sticky header. Paper state is warm white with a fine rule; image state is transparent with a light wordmark and no blur. The 340ms crossfade must not move content or change its occupied height.

Desktop season rail

Permanent from 768px. Fixed at the left, 370px wide through 1279px and 380px from 1280px. It owns brand, season, location, price and availability.

Navigation drawer

Full-height sheet with a 56px circular desktop trigger and a 56×52px mobile trigger. Menu rows remain at least 44px tall. Focus stays contained and returns to the trigger.

Section context bar

On mobile, the current chapter can replace the masthead after scrolling. Both states occupy the same 52px slot and crossfade without a jump; image chapters return to the transparent, light-on-film state.

Buttons

Primary controls are clay, sentence case, 16/24, at least 56px tall, 16px padded and 4px rounded. Hover deepens, active moves down 1px, and keyboard focus uses a clearly offset 2px outline.

Inputs

Labels sit above full-width fields. Inputs use a paper surface, 1px warm border, 4px radius and at least 54px height; text areas begin at 130px. Error and success meaning never relies on color alone.

Cards

Quiet low-paper surface, normally 20px mobile / 24px desktop padding. Cards rely on space and tone rather than shadow. Dense collections become native horizontal snap rails on narrow screens.

Section bars

59–60px ledger-like bands with a 1px warm line, restrained 14/20 labeling and no decorative capitalization. They provide rhythm between editorial chapters.

Footer

Paper-deep field, two columns on mobile and three on desktop. Links are 14/20 with 8px rhythm; legal copy is 12/18 above a sand rule.

Waitlist flow

A viewport-contained introduction plus nine screens with no internal scroll. Use 4px geometry, Spectral titles, warm dialog ink, stable progress and full-width 59px actions. Mobile stacks; desktop reflows into one larger canvas.

Context drawer

Bottom sheet on mobile, right rail on desktop. Compact factual copy, a strong 94px mobile header, scrolling only inside the explanatory body, and a restrained dark overlay.

Mobile conversion

Fixed above the safe area, 268px wide, 58px minimum height, and visually still except for the subtle status dot. It must not obscure final page content.

Primary action

Email address

Status

Winter waitlist open

Imagery

Grounded documentary photography rooted in Austin and the work of writing.

Use

Writers at work, manuscripts, gatherings and tactile details
Natural or practical side light, deeper blacks and quiet, believable moments
Route-specific crops and varied image sequences
Full-bleed chapters, 3:2 / 2:1 / 4:5 objects, and square benefit imagery
Edge-to-edge crops with deliberate focal positioning

Avoid

Generic stock-office gestures or polished corporate portraiture
Decorative illustration where photography or typography should lead
Copy placed over ordinary card imagery
Repeating the same five-image run across membership and event pages
Golden or pastel color casts, aggressive filters or invented Austin details

Hero and chapter video must include a poster, preserve the intended crop, and remain legible when motion is unavailable. Supporting images render shorter on mobile with their text below—not over—the image. Documentary placements receive a restrained contrast lift, slight desaturation and a small brightness reduction; product imagery and brand marks do not.

Motion

Slow state cues, short navigation transitions and no layout shift.

Status pulse

3.2–3.4 seconds for seasonal and join indicators. The surface stays still; only the dot breathes.

Navigation

150–200ms for drawer panels and icon changes; 340ms for masthead state crossfades.

Editorial reveal

580ms fade with a 10px rise. Parallax is restrained to a 1.045 image scale.

Carousels

Native horizontal scrolling and snap. Controls report position; content remains usable without animation.

Reduced motion contract

Disable pulses, reveals, parallax transforms, animated menu states and masthead crossfades when a visitor requests reduced motion. Carousels still scroll natively, without forced animated travel.

Accessibility

The visual system is only complete when its states remain perceivable and operable.

StructurePreserve semantic headings, landmarks, labels and reading order.
FocusEvery control has a visible 2px focus treatment with roughly 3px offset.
TouchInteractive targets are at least 44px; primary fields and actions are 54–59px.
ModalsProvide a name, trap focus, support Escape, restore focus and lock the page behind.
ImagesWrite meaningful alt text for information; use empty alt for decorative media.
ColorPair state color with text, position, iconography or another non-color cue.
ViewportThe nine-screen waitlist fits without internal scrolling on supported desktop and mobile sizes.
ZoomCopy, controls and reading order remain usable at 200% text enlargement.

Page families

A shared voice with meaningful variations for different kinds of content.

01
Home
/
Image-led opening with a centered offer card at larger widths and a stacked story on smaller screens. The mobile Join control floats above the safe area; only its status dot moves.
02
Story, membership & events
/about · /membership · /events · /events/…
Seasonal, image-led chapters share the same rail and hero logic. Event pages keep route-specific facts, crops and sequences; on mobile, supporting facts move below shorter images.
03
How it works
/how-it-works
A ledger-like explainer with numbered chapters, restrained dividers and its own footer spacing. It favors sequence and clarity over promotional panels.
04
Journal
/journal · /journal/…
The index behaves as an editorial archive; stories use a narrow reading column of roughly 650px, spacious article rhythm and image captions that read as part of the essay.
05
Shop & product
/shop · /shop/… · /cart
The index grows from a narrow swipeable collection to three and four columns. Product pages retain full commerce hierarchy, portrait imagery and size controls while clearly showing the coming-soon state.
06
Waitlist & checkout
/waitlist · /checkout
These routes suppress the desktop season rail and use the full viewport. Conversion content is direct, honest and contained; unavailable commerce never imitates an active checkout.
07
FAQ, terms & system pages
/faq · /terms · missing routes
Quiet paper pages use compact title scales, ruled rows and long-form reading rhythm. Information density increases, but hierarchy stays typographic and shadowless.
08
Contact & careers
/contact · /careers · /careers/…
Contact uses the shared labeled form language. The careers index stays within the editorial system; role details intentionally shift to a neutral document panel with Arial body copy, Georgia headings and one final Apply action.
09
Style guide
/style-guide
The reference page uses an oversized editorial opening, a sticky chapter index on wide screens and a native horizontal index below 1100px. Its tables scroll within the reading column rather than widening the page.

Rules for evolution

Change carefully, and keep the whole journey in view.

Adjust shared color, radius and typography decisions as a coordinated family, not as isolated component makeovers.
Review the waitlist, context drawer and career detail pages separately because each has a purposeful visual variation.
Recheck one page from every family at phone, tablet and desktop widths after a system-wide change.
Protect focus, reduced-motion behavior, modal fit, horizontal rails, image-backed headers and the desktop season rail as the visual language evolves.