← All runbooks
adewale / swiss-poster-skill-swiss-poster

Swiss Poster Design System

Apply the Swiss Poster design system to a webpage or frontend surface using Tailwind CSS and disciplined visual composition. The runbook converts the source skill's design guidance into an auditable implementation workflow with explicit outputs, bounded…

agent codexmodel gpt-5.5snapshot python312-uveval programmatic7 stepsv1.0.0

Deploy Swiss Poster Design System to your jetty.io

One-click installs this runbook into a collection on your Jetty account. You can run it from the Spot dashboard, schedule it, or pipe inputs in via the API.

Deploy on jetty.io →View source
The shape of the run

7 steps · start to finish.

  1. 1
    Step 1

    Environment Setup

    ▶
    1. Confirm the target page or component is identified and the local project can be built or previewed.
    2. Create /app/results if it does not already exist.
    3. Inspect the existing design system, Tailwind configuration, font loading, and responsive breakpoints.
    4. If Tailwind is not available, translate the source utility guidance into the project's native CSS approach without changing the visual principles.
  2. 2
    Step 2

    Source Principles

    ▶

    Use these source sections as the implementation checklist:

  3. 3
    Step 3

    Design Application

    ▶

    Establish a 12-column compositional grid, then deliberately let primary elements break it. 2. Add IBM Plex Sans or the closest available grotesque fallback. 3. Create extreme scale contrast between…

  4. 4
    Step 4

    Responsive and Accessibility Review

    ▶

    Review desktop and mobile viewports for clipped text, illegible contrast, accidental overlap, and inaccessible focus states. 2. Keep intentional crop and bleed, but correct any overlap that blocks…

  5. 5
    Step 5

    Iterate on Errors (max 3 rounds)

    ▶

    If visual review or build validation fails, run up to max 3 rounds of targeted fixes. In each round, record the failed check, apply only the necessary adjustment, rerun the relevant build or preview…

  6. 6
    Step 6

    Common Fixes

    ▶

    Issue · Fix Display type overflows unpredictably · Use stable clamp() bounds and explicit line-height · Page reads as generic Swiss minimalism · Increase scale contrast, crop, overlap, or…

  7. 7
    Step 7

    Final Checklist

    ▶

    Run this verification before finishing: