← 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 iteration, validation, and

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

    ▶

    1. 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 viewport-scale type and compact labels. 4. Layer text, images, and color fields

  4. 4
    Step 4

    Responsive and Accessibility Review

    ▶

    1. 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 interaction or hides required content. 3. Verify font loading has a reliable fal

  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 check, and update `/app/results/visual_review.md`.

  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 accent-field size |

  7. 7
    Step 7

    Final Checklist

    ▶

    Run this verification before finishing: