Explore editable color tokens, measure contrast and export a consistent CSS and JSON token set. A token editor, accessible contrast matrix, live component specimens and CSS variables ready to paste into a project. PopNow can add optional media after a quote; the core workflow runs locally.
- Uses PopNow for
- Images
- Needs
- Node.js
The skill is free. Optional AI images, video and sound are quoted for your approval before generation. API-key calls use your separate API balance in USD; generation through ChatGPT or Claude connected via OAuth/MCP uses your website credits.
v1.0.0 · Updated Oct 24, 2026 · 40 KB · Use it for personal and client work; please don't resell or share the package.
What you get
A token editor, accessible contrast matrix, live component specimens and CSS variables ready to paste into a project.
A validated local data model and self-contained HTML builder
Representative data, editable source and meaningful regression checks
Optional PopNow media with approval before generation
Good for
- Build a design-system playground for our warm product palette and flag text combinations below 4.5:1.
- Teams that need an editable local artifact with traceable inputs
Not for
- Contrast checks do not replace a full accessibility audit; typography, focus behavior and interaction still need review.
- A hosted backend or synchronized multi-user service
How to use it
You say
Use the PopNow skill "Design System Showcase" (design-system-showcase) for this: Build a design-system playground for our warm product palette and flag text combinations below 4.5:1.
Then try
Apply our actual data and explain any rejected fields.
Adapt the layout to our brand and quote optional PopNow media first.
What to have ready
- JSON {name,tokens:{background,surface,text,muted,accent,onAccent},radius,spacing}. Colors are six-digit hexadecimal values; sizes are whole pixels.
- Your final audience, labels and publication destination
- Owned assets and verified claims for any public version
Similar skills
View all →- Web
Beverage Brand Website Template
+25A sunny drinks or snack brand site with shop, case builder, stockist map and demo checkout in one file.
- Web
Hardware Product Website
+25Huge hairline model names on silver studio shots, frosted spec cards, a to-scale lineup and a hardware bento.
- Web
Sneaker Store Website Template
+25A complete footwear or apparel shop with catalog, product pages, bag and demo checkout in one HTML file.
- Web
Freelance Designer Website
+25A bold one-person studio site that sells fixed-price packages, with plan pages, case studies and a brief form.
- Web
Travel Agency Website Template
+25A photo-led site for tours, guides or lodges with trip search, booking requests and a trip-finder quiz.
- Web
Glassmorphism Website Template
+25Frosted glass pills on a near-black film, a huge serif headline with one italic word and an email capture.
- Web
3D Avatar Maker
+25Build a cute soft-toy 3D character in your browser and save it as a transparent PNG or a 3D page.
WebAcademic CV Website
+25Publish research, teaching and service in a structured academic CV with citation export.
- Web
Calendar Heatmap
+25A year of daily activity as a shaded calendar grid, with streaks, totals and keyboard access.
WebAgriculture Product Website
+25Compare field equipment by compatible crops, operating limits and supplied specifications.
- Web
AI SaaS Landing Page
+25Warm sand paper, hairline rails and hatched gutters around a live kanban board where an assistant plans tasks.
- Web
Animated Hero Section
+25A landing-page hero with a gently rotating headline word, two buttons and a wide image frame.
WebArchitecture Portfolio Website
+25An architecture portfolio with project filters, metric and imperial areas, detailed briefs and a printable project shortlist.
WebAudio Product Website
+25Present audio hardware with honest specifications, side-by-side comparison and a real local A/B listening test.
WebAudio Spectrum Visualizer
+25Inspect a local recording with a real frequency spectrum, peak readout and playback controls.
WebCase Study Website Template
+25An evidence-led case study page with baseline and outcome comparisons, missing-source warnings and a claim audit export.
WebCashflow Dashboard
+25Reconcile opening cash, signed transactions and closing balance with a traceable running ledger.
WebCMS Marketing Website
+25A CMS product page with an editable content schema, exact field errors, JSON preview and a valid-content export.
WebConference Speaker Page
+25A speaker page with topic and duration filters, approved host introductions, AV requirements and a downloadable event brief.
WebConstruction Website Template
+25A construction company page with an editable scope estimator, integer-cent totals, a separate contingency and CSV export.
WebConsulting Website Template
+25A consulting website with an engagement-fit finder, explicit tradeoffs and a downloadable scope brief based on stated constraints.
WebConversion Funnel Dashboard
+25Find where a journey loses people, with cohort checks, step conversion and an accessible data table.
- Web
Shader Hero Agency Website
+25A live orange-heat shader hero behind a bottom-pinned statement, pill nav and a staggered case-study grid.
WebCustomer Onboarding Portal
+25Guide a customer through dependent setup steps with owner visibility, saved exports and honest progress.
- Web
Dark SaaS Landing Page
+25A dark, motion-rich marketing site for a software product, delivered as one self-contained HTML file.
- Web
Designer Portfolio Website
+25Six tilted cards hover round a fading headline on calm grey, one red portrait card, editorial case studies.
WebDeveloper Journal Site
+25Turn structured posts into a searchable technical journal with readable code and a portable RSS feed.
- Web
Developer Portfolio Website
+25A dark personal site for engineers with case studies, writing, talks, a résumé and a contact form.
WebEbook Landing Page
+25An ebook page with real original chapter excerpts, local reading progress, text-size controls and an accessible sample download.
WebEditable Budget Grid
+25Edit quantities and unit costs, track actual spending and export a reconciled budget.
- Web
Editorial SaaS Website
+25Navy split hero, a five-line serif headline beside a documentary still, slanted bands and one cobalt accent.
WebEvent Attendance Chart
+25Compare registrations, check-ins and capacity, with weighted attendance and explicit no-show counts.
WebEvent Website Template
+25An event site with track filters, a personal agenda, overlapping-session warnings and a real UTC calendar download.
WebExperiment Comparison Chart
+25Compare conversion variants with sample sizes, percentage-point lift and honest uncertainty intervals.
WebFinancial Report Portal
+25A financial report directory with year and type filters, source-linked metric comparisons and explicit missing-data handling.
WebFlight Search Prototype
+25Search a local flight inventory by route, date and seats, then compare price, duration and stops.
- Web
Interactive Architecture Diagram
+25An offline, clickable system diagram built from a checked JSON model, with the evidence behind each box.
- Web
Interactive Grid Hero
+25A dark grid of fine strands that bends toward the cursor and rolls a glowing ring out from every click.
WebInterior Design Website Template
+25Turn a room’s dimensions, budget and priorities into an editable interior project brief with a clear allocation and export.
WebJewelry Store Website Template
+25A jewelry catalog with material and size choices, availability checks, a comparison tray and an honest inquiry-list export.
- Web
Knowledge Graph Explorer
+25Turn project notes into an offline, searchable graph where every claim links back to its source line.
- Web
KPI Dashboard Template
+25Four KPI tiles with change chips over a glowing line chart, a breakdown table and target bars on warm paper.
- Web
Landing Page from AI Mockups
+25See three full-page designs first, pick one, and your agent builds it as clean, responsive code.
WebLaunch Waitlist Referral Demo
+25A clearly labeled local waitlist simulation with stable referral codes, duplicate checks, referral counts and queue export.
WebLaw Firm Website Template
+25A restrained law firm website with a service and jurisdiction finder plus a printable consultation preparation checklist.
- Web
Magazine Website Template
+25A print-quality magazine site with articles, topics, a small shop and subscriptions, as one HTML file.
WebMembership Pricing Calculator
+25A membership pricing page with exact member, billing-period and add-on totals, transparent annual comparisons and quote export.
WebNonprofit Campaign Website
+25A nonprofit campaign page with transparent goal arithmetic, cost assumptions, volunteer filters and a shareable planning summary.
WebOnline Course Landing Page
+25A course website with prerequisite self-checks, a realistic weekly study plan, module previews and progress saved on the device.
WebOperations Dashboard Kit
+25Triage work by priority, owner and overdue status, with clear state transitions and an exportable queue.
- Web
Particle Animation Hero
+25Copy on warm paper beside a turning sphere of ink and teal dots that reshapes per idea and scatters on scroll.
- Web
Personal Brand Website
+25A portrait feathered into warm paper under a thin bracket, with light-and-bold statements on either side.
- Web
Pet Store Website Template
+25A working pet supply shop with catalog, variants, bag, refill planner and demo checkout in one HTML file.
WebPhotography Portfolio Website
+25Build a local photo portfolio with collection filters, keyboard lightbox and a printable contact sheet.
- Web
Podcast Website Template
+25A podcast site with a playable hero, episode archive, guest pages and a player that keeps playing.
WebHand-Drawn Pricing Section
+25A notebook-style pricing table with tilted ink cards, a yearly switch and dark mode, in one offline file.
WebProduct Integration Directory
+25A searchable integration catalog with capability and authentication filters, honest setup requirements and exportable checklists.
- Web
Cinematic Product Launch Page
+25Film-lit near-black page: serif title card over drifting light, letterboxed night scene, reservation form.
WebReal Estate Website Template
+25A property website with budget and bedroom filters, side-by-side listing comparison and a printable shortlist of verified facts.
- Web
Research Paper Website
+25A project page for your paper with an interactive Figure 1, results, limitations and one-click citation.
WebRevenue Mix Dashboard
+25Explain product or channel revenue with reconciled period totals and amount-to-share comparison.
WebRevenue Trend Report
+25Compare recorded revenue periods without hiding missing dates or inventing a forecast.
- Web
Admin Dashboard Template
+25A working back-office console with charts, tables, kanban and calendar, built as one offline HTML file.
- Web
SaaS Landing Page Template
+25A calm, light marketing site for a software product with a working product console, pricing and sign-up.
- Web
Scrapbook Portfolio Website
+25A multi-page online CV made of paper objects, with case studies and a printable resume.
WebSearchable Records Table
+25Turn a flat CSV into a searchable, sortable table with pagination and safe filtered export.
WebService Status Dashboard
+25Publish an honest service snapshot with stale checks, component health and incident history.
- Web
Sports Club Website Template
+25A club, gym or studio site with timetable, coach pages, memberships, court plan and booking in one file.
- Web
Testimonial Wall Section
+25A masonry or slowly drifting wall of customer quotes that only ships quotes people agreed to.
WebTravel Itinerary Website
+25Build a printable trip plan with timed activities, travel buffers, conflict checks and a clear budget.
WebUX Case Study Portfolio
+25Present design decisions with traceable evidence, clear ownership and honest outcome labels.
- Web
Workflow Automation Landing Page
+25Graphite page, small left-aligned headline, and a live node graph below that runs, retries and streams logs.
WebWriter Portfolio Website
+25Turn published work into a searchable writer portfolio with a reading queue, article previews and a downloadable media bio.
Questions
What input does this workflow need?
JSON {name,tokens:{background,surface,text,muted,accent,onAccent},radius,spacing}. Colors are six-digit hexadecimal values; sizes are whole pixels.
What does it calculate or validate?
Calculate WCAG relative luminance and contrast for body, muted and action text. Update a component preview from the same tokens and export CSS/JSON without hiding failing combinations.
What is outside its scope?
Contrast checks do not replace a full accessibility audit; typography, focus behavior and interaction still need review.
Can I use it without an API key?
Yes. The local template, validation and exports work without a key. PopNow media is optional and requires a quoted, approved API USD budget.