the sticker dossier standard
Standard for every 561 build, deck, and document
Every 561 page, deck, report, and proposal is built as a stack of full-bleed bands that strictly alternate cream and navy. Cream comes from the page itself. Navy bands are opt-in sections. The alternation is what gives scrolling its rhythm, and it is not optional.
The scaffold: the body carries dz-page graph-paper, content sits inside a 1240px dz-wrap, and each band is a dz-section. Navy bands add dz-band graph-grid-light so the grid stays visible against dark ink.
The hybrid rule: hero moments, covers, and closing CTAs go full collage. Dense material stays clean. Pricing tables, data, and terms get graph paper, condensed headers, and at most one sticker accent, because legibility beats energy the moment a client is reading numbers.
Non-negotiable: never two same-color bands in a row, and no half-empty viewports. If a section has dead air, add a doodle, a stamp, or a pull-stat, or tighten the section. If it looks safe, it is wrong.
<link rel="stylesheet"
href="https://use.typekit.net/vmt1ngp.css">
<link rel="stylesheet" href="sticker.css">
<link rel="stylesheet" href="dossier.css">
<script>
document.documentElement
.classList.add('js');
</script>
<body class="dz-page graph-paper">
<section class="dz-section">
cream band
</section>
<section class="dz-section
dz-band graph-grid-light">
navy band
</section>
</body>
<script src="dossier-reveal.js"></script>
Load order is fixed. dossier.css must come after sticker.css.
Cream #f1f1e6 with a 46px grid at 5% navy. This is the dominant surface. Navy is the accent band, not the default background.
The document surface. Compare against the navy band you are reading on now.
what changed from v1The March guide documented a dark-first system built on glass surfaces, four gradient tokens, a five-step radius scale, and light and dark theme modes. All of it is retired. Rounded corners are banned outright, gradients are gone, glass is gone, and cream is now the primary surface rather than an alternate mode. The old guide also named Barlow Condensed and Inter as the brand faces. Those are fallbacks. The real faces are Obviously Narrow and Acumin Pro, and Inter is explicitly not permitted as a face.
Eight colors. Cream and navy carry the page. Cobalt is the accent voice: italic type, chips, links, stamps. Orange is reserved for the URL and the single call to action, which is why it must not be spent on decoration. Lime appears sparingly and on navy only.
Document discipline: a dossier, proposal, or report uses cream, navy, cobalt, orange, and lime only. Blue, amber, and sky belong to social pieces where more voices help. Bringing them into a client document flattens the hierarchy and the cobalt accent stops reading as the accent.
Print reality: cobalt and lime sit outside the process CMYK gamut and will shift noticeably duller on press. Anything going to a printer needs either a Pantone match signed off first or a substitution to navy and orange. Do not send an unconverted cobalt to a printer and assume it lands.
--sk-navy: #1a3648 --sk-cream: #f1f1e6 --sk-cobalt: #2540ff --sk-orange: #ec6a2a --sk-lime: #c2f53f /* social only */ --sk-blue: #2d6b97 --sk-amber: #ff8400 --sk-sky: #54baf8
Two faces, both from Adobe Typekit kit vmt1ngp. Obviously Narrow at 700 does all display work, always uppercase, always tight. Its 700 italic is the cobalt accent voice. Acumin Pro handles every word of running copy. There is no system-font fallback in production. Brush Up joined in August 2026 as an accent face only, never as a third working face.
Obviously Narrow 700 uppercase with the 700 italic cobalt accent beneath it. The signature pairing.
The same pairing with Brush Up in place of the italic. Brush Up is a caps-only rough brush face, so lowercase input renders as caps. It reads much smaller than Obviously Narrow at the same size, so set it around 1.7× the italic it replaces.
The evidence: the workhorse paragraph. Hierarchy inside running copy comes from a bold inline lead-in like this one, never from a small uppercase label floated above the text.
Why now: the client is hiring for a role this system replaces, so the window is open and the budget already exists.
Bold inline lead-in inside the paragraph.
Why now
The client is hiring for a role this system replaces.
Uppercase micro-label floated above copy. Reads as a form. Banned.
Two lockups, horizontal and stacked, each with reversed variants. Pick by the space available, then by the background. The wordmark sets "561" in navy and "media" in orange, with "PALM BEACH" in medium blue.
Horizontal, full color. Cream or white backgrounds.
Horizontal, reversed. Navy bands and photography.
Stacked, full color. Square and narrow spaces.
Stacked, reversed with the orange retained.
Stacked, single color white. Use when color would clash.
Clear space. Nothing enters the dashed field.
Clear space: keep a margin equal to the cap height of "561" on all four sides. Nothing crosses it, including graph-paper-breaking stickers, tape labels, and image edges.
Minimum size: 140px wide for the horizontal lockup, 90px wide for the stacked. Below that the "PALM BEACH" line stops resolving and you should switch lockups or drop the descriptor.
Never: recolor the wordmark outside the approved variants, add effects of any kind, stretch or condense it, place the full-color version on navy, rebuild it from a font, or tilt it. Stickers tilt. The logo does not.
where the masters liveThe lockups on this page are the web PNGs. The Illustrator vector masters are on the Z Drive under
561Media / 2023 / Branding, inMain Horizontal LogoandMain Stacked Logo. Use those for print, signage, and anything large format, and never scale up a PNG instead. Open item: the clear-space and minimum-size figures above were written down for the first time in this revision and still need sign-off.
The pieces that make a 561 page look hand-assembled rather than templated. Every one of them is square. There is exactly one sticker shape, and the dossier layer force-flattens any radius it finds, so legacy markup cannot smuggle a rounded corner back in.
<span class="stk dz-square stk-cobalt tilt-r">Cobalt</span>
5px white border, square, soft drop shadow, hand-placed tilt. Tilts under a dossier page resolve to a subtler -6, 5, -3.5, and 7 degrees.
Translucent white, torn clip-path edge. For dates, status, and asides.
A score is a stamped sticker, never a numeral in a box.
Transparent fill with a 2.5px navy text-stroke. Section numbers, card ranks, cover numerals.
Strokes follow currentColor. Cobalt arrows, orange squiggle under a headline. Pair sparingly with stickers.
Filled squares are cobalt on cream, lime on navy. Never a progress bar, never a donut chart.
Assembled blocks, not raw parts. A proposal, report, or audit is built by choosing from these. New proposals start from proposal-starter.html rather than from a blank file.
One display-scale sentence with the key phrase in a cobalt-italic-on-cream chip, then stat stickers. The chip wraps cleanly across lines.
The opening paragraph carries the finding in plain language, with no label above it. It runs at 18px so the eye lands here first.
The evidence: hierarchy comes from bold inline lead-ins like this one. Every claim carries its source beside it as a clickable link so nothing is asserted without a trail.
Ghost rank numeral behind, display-scale title, tilted stamp, dimension strip, then an 8/4 column split. Not stacked text.
the suggested openerUse the note for a script, a quote, or an aside the reader is meant to lift and reuse. Slight tilt, visible tape corners.
Dense material stays clean. Thin rules, condensed figures, cobalt total, zero stickers.
Access, audit, and the baseline snapshot. Nothing ships yet.
Build the intake path and wire the CRM.
Copy, design pass, and internal QA against the brief.
Launch, then watch the first real traffic.
Read the numbers, cut what underperforms.
Thick top rule per cell, hairline dividers. Available in five, six, and seven column widths.
The dossier layer is a document system. It defines no buttons, fields, or nav, which left every web build to invent its own or fall back on framework defaults. This section closes that gap by deriving interactive components from the same rules: square corners, condensed caps, cobalt focus, transform-only hover.
Status: the CSS for these classes lives in this page only. Promote it into ~/561-design-kit/dossier.css before depending on it in a client build, or the class names will resolve to nothing.
On cream. Orange is the primary and appears once per view.
On navy. Secondary flips to cream, ghost flips to a cream inset border.
Hover: translateY(-2px) over 150ms ease-out plus a background shift. Transform and color only, per the house motion spec. Never animate the shadow, the padding, or the width.
Focus: a 3px cobalt outline at 3px offset, switching to lime on navy bands. The old orange focus glow is retired, because orange now means "this is the action" and cannot also mean "this has keyboard focus".
One primary per view. If a screen appears to need two orange buttons, the screen has two competing goals and the layout is the problem.
<button class="dz-btn dz-btn-primary"> Get the audit </button> <a class="dz-btn dz-btn-ghost" href="#"> Learn more </a> /* sizes */ .dz-btn-sm 15px / 12px 20px .dz-btn 19px / 18px 32px .dz-btn-lg 24px / 24px 40px
Field labels are the one exception to the micro-label ban. A visible label above its input is an accessibility requirement, not a decorative eyebrow. Set it in Acumin Pro 600 at 15.5px, sentence case, never uppercase condensed.
Borders: 2px navy, square, white fill. Focus moves the border to cobalt and adds the matching outline, so focus is visible even where outlines are suppressed.
Checkboxes and radios are both squares. A round radio would be the only circle in the entire system, so it is drawn square and checked state fills with cobalt inside a white inset.
Open question on errors: the palette has no dedicated error color, so error text currently uses a darkened orange for contrast while the field border uses brand orange. That overloads orange, which elsewhere means the primary action. Either add a true error red to the palette or accept the overload. This needs a decision.
Use .dz-panel for interactive web surfaces and .dz-card for document spreads. The bar at the top of this page is .dz-nav.
Motion is a system, not a per-project improvisation. The tier is set in the design brief and never mixed within one site. The full spec lives in ~/561-design-kit/motion.md. What follows is the part that binds every build.
For work where the site is the credibility argument. Scroll-scrubbed sequences, clip-path reveals, line-staggered text, one pinned panel maximum.
The default for most client work. Staggered scroll reveals, parallax-lite on media at 8% travel maximum, real hover craft, one signature moment.
Conversion-first local service. Entrance fade-up on the first viewport only. Everything below the fold renders static. Nothing else.
Entrances ease out. Exits ease in, and are always faster than entrances. Section reveals use cubic-bezier(0.16, 1, 0.3, 1). Stagger siblings 40 to 60ms and never chain more than six.
<!-- in head, before paint -->
<script>document.documentElement
.classList.add('js');</script>
<section class="dz-section reveal">
<!-- before /body -->
<script src="dossier-reveal.js"></script>
Why the gate matters: hide-states live behind html.js so a page with JavaScript off, or a crawler, sees full content instead of a blank column.
Do not remove the safety sweep in dossier-reveal.js. An IntersectionObserver on its own strands hidden sections on deep links, scrollbar jumps, and the End key. That was a real bug, found and fixed on 7/14. A report must never show a blank section.
Primary nav. The primary call to action. The phone number on any local service site. Anything above the fold on a Tier C build after its initial entrance.
Animate transform and opacity only. Never width, height, top, left, margin, padding, or box-shadow on scroll or hover. clip-path is allowed for Tier A and B reveals, but test it on Safari.
Honored at build time, not retrofitted. Reveal animations must resolve to fully visible, never stranded at opacity 0. The kit handles this, and anything you add on top has to match.
@media (prefers-reduced-motion: reduce) {
html.js .reveal {
opacity: 1;
transform: none;
transition: none;
}
}
These are as binding as the CSS. Most of them exist because a build shipped the wrong way once. If a review finds one of these, the work goes back regardless of how good the rest of it looks.
.pill, .tag, and .oval are deprecated and the dossier layer flattens them..dz-meta, and it sits below its title.vmt1ngp only, with Brush Up from the same kit as an accent face. Monospace is exempt for code.before you start any buildWrite the design brief first. Blind judging showed brief structure, not model choice, drives design quality, with a 78 point win-rate swing between the best and worst briefs. Run the
design-briefskill, lock the direction, then build. New proposals start fromproposal-starter.html, never from a blank file.