Parkside SystemReference v2
Every token and component, rendered once on the neutral shell. Open it beside whatever you are building and match against it.
About this page
Three blocks transfer to a client page byte for byte: TOKENS, BASE, and PRINT. Everything between their START and END markers is the system. Nothing outside them controls color, type, or spacing.
The component markup in sections 03 through 05 transfers too, along with the header and the footer. The classes starting ref- exist to display the system on this page and never go on a client page.
Each page type has a template in system/templates, built from these blocks with placeholder content. Start a new page from its template.
Color
The neutral shell runs on every page type. The page recedes so the client judges their own material, and cards sit a step off white so nested panels read forward.
Ink muted is the floor for text, around 5:1 on the card. Muted is decorative only: placeholder slots and finished steps, never a label.
Outline edges cards, panels, and pills. Hairline separates rows. Group rule opens a group of rows, heavier than a hairline and lighter than ink.
One accent per page at most. Gold takes ink and never white. Blue takes white and never ink.
Every page is light only. There is no dark mode and no theme toggle.
Type scale
System font stack throughout. Body is 19px and every other size is set against it.
Hi everyone, this page is what we'll go through together.
Body copy caps at 64ch and row copy at 58ch. The 1120px container sizes the layout and the cap sizes the reading. Reference numbers and dates sit at 17px with tightened tracking. The tiny tracked number style is retired.
Components
Used by every page type. Pages differ in their body, not their parts.
Two pills and nothing else: the client name on the filled tier, then the shared date on the meta tier. Mood boards get no Confidential pill.
Sentence case at every size. Filled names the page, once. Light for a secondary name. Meta for dates and steps. Done for a finished step. The small size marks an item inside a row.
A subhead inside a section, with an optional reference number.
A group label opens a set on the group rule, with clear air above.
- Kickoff meeting. With everyone on your project team, covering:
- The scope of work and the schedule
- The materials your team provided
- Review meeting. We go through it together.
- Project brief. A written summary of the kickoff.
Functional
A heading and a short description, when two options sit side by side.
Evocative
Two columns is the maximum inside a section.
Two panels sit side by side, 24px apart, only when each holds a few short lines and the two have to be read together. Otherwise stack them in one column, duo one. A scope of work with long Includes and You get lists is stacked.
Schedule changes
A fact attached to the item it touches, stated plainly.
A label naming the content and an angled arrow, on a hairline that darkens on hover. The address lives in the href and never in the copy.
Read the full Terms of ServiceDetail
Ready to hand off
One dark card at the bottom of the page, with one call to action.
Download the filesLogo left, two pills opposite: the project name on the light tier, then the step on the meta tier.
Page types
Every type shares the shell: header, dark hero with the contents beside the title, numbered section cards, footer. Each has a template.
Internal. One card listing each step as a numbered row with its shared date. Pending steps sit muted with no link. Marked noindex, nofollow, and never sent to a client.
Hero, project brief, scope of work, fees, schedule, out of scope, terms, and one call to action at the bottom. Phase 01 is a fixed number, Phase 02 a range, Phase 03 a floor written as "Starts at." No template yet. The proposal reference pages in CLAUDE.md still apply.
Carried into the kickoff meeting. Opening statement, the client's own brief in a document panel with a note on anything outside scope, the scope of work written out phase by phase with Includes and You get stacked, the schedule, what the client owes, and open questions with no written recommendation.
An About card saying nothing is final, then one section per decision: name, layout, visual style, color, type, content. Project sequence and Parked close the page. The parts are in section 05.
The client's comments on a round, compiled and answered item by item before the next one. An About card with notes and the earlier round linked as a file with page thumbnails, then one section per category of item rows.
- The direction for this item, one line per point
- Printed in one color and black
- Reference: the mood board layout grid
- A question for the call?
- Same design as the 8oz
The finished identity handed over. A cover image above the hero, then a recap of the references that led here, the primary mark positive and reversed, secondary applications, variations as pairs, applications in context, the brand kit, the sequence, and a dark download card.
Same shell. Client-branded versions leave the system and keep only its structure.
Mood board parts
Anything a client is asked to judge sits on neutral white or black. Type specimens sit on the ground being proposed for their page.
Numbered captions so a client can say "not 03-04" instead of describing it. Add ref to a frame holding reference art so it sits on white, uncropped.
Where the color comes from.
Where the color comes from.
Show a proposed palette on both. A client judging a color against one ground alone is judging it wrong.
Structural copy
These carry business consequence and should not be rewritten from scratch each time. Voice rules live in the writing style skill. These are the structures.
This proposal is based on our conversation to date. Please carefully review the deliverables outlined below. If anything doesn't look right, let me know before approving.
Please make sure everyone who approves direction is involved from the start. If someone new joins partway through and their input changes approved direction, that becomes a change in scope and I'll quote the adjustment before anything gets redone.
Approving a phase closes it. The direction you approve carries forward into the phases that follow.
A four column grid of open questions, numbered 01 to 04, placed after the brief and before the body. It puts the unknowns in the client's court early rather than surfacing them as problems later.
Tell me what you do not want. The colors to stay away from, the words that feel wrong, the references that miss. That is faster and more useful than telling me what works.
Numbered list of what was raised and set aside, each with a reason and a tag for where it came from. Framed as parked, not rejected. Protects scope without reading as a series of refusals.