Pulse · Playground

Playground

Real composition patterns drawn from the Figma exports. Each example shows the rendered result plus copy-ready markup. Built with v1 tokens only — no Phase 2 component CSS required.

Unsaved Changes Dialog

Recreates the dialog pattern from Figma Frame 1000007201.png — modal card with title, body, and two action buttons.

You Have Unsaved Changes

You have unsaved changes. If you close now, your updates will be lost. 

<div class="dialog">
  <div class="dialog-body">
    <h3>You Have Unsaved Changes</h3>
    <p>You have unsaved changes. If you close now, your updates will be lost.</p>
  </div>
  <div class="dialog-actions">
    <button class="link-btn">Discard Changes</button>
    <button class="primary-btn">Keep Editing</button>
  </div>
</div>

Data Table Row

Inspired by Figma Frame 1000007206.png — table row with editable cells, modified-by column, and inline actions. Uses status tokens for the dropdown menu.

Name Modified On Modified By Options
Rate Cards · Q1 01/15/25 James Anderson more_vert
Rule Groups · Apr 02/15/25 Sarah Johnson more_vert
Pricing Simulator 03/15/25 Michael Smith more_vert
Value Groups 04/15/25 Emily Davis more_vert

Highcharts-Style Progress Bars

From Figma Charts.png — labeled progress rows showing percentages and dollar values. Uses product color tokens.

expand_more Streaming
30% $22,980.00
expand_more Broadcast
25% $15,320.40
expand_more Podcast
45% $29,492.00

File Attachment Area

From Figma Attachment area.png — list of attached files with type icons and inline link actions.

insert_drive_file
Q1 Report 2.3 MB · Uploaded today
Open
table_chart
Pricing Spreadsheet 847 KB · Updated 3 days ago
Open
description
Campaign Brief 412 KB · Original
Open