skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-12 06:06:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Improve typeset and arrange demos

Browse Source 
Typeset: make the before worse (all text same size/color = no
hierarchy) and the after more dramatic (bigger heading, more size
contrast). The transformation should be instantly visible on hover.

Arrange: fix heading split (eyebrow+heading was a typeset change,
not arrange) — keep it as a single heading to stay on-brand.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-03-16 11:25:54 -07:00
co-authored by Claude Opus 4.6
parent 577c9c872c
commit 8427deac3e
2 changed files with 11 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/demos/commands/arrange.js
+1 -4
View File
@@ -25,10 +25,7 @@ export default {
after: `
<div style="width: 100%; max-width: 240px; padding: 16px; font-family: 'Instrument Sans', sans-serif;">
<div style="margin-bottom: 20px;">
<div style="font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ash); margin-bottom: 4px;">Team</div>
<div style="font-size: 1.05rem; font-weight: 600; color: var(--color-ink);">Members</div>
</div>
<div style="font-size: 0.8125rem; font-weight: 600; color: var(--color-ink); margin-bottom: 16px;">Team Members</div>
<div style="display: flex; flex-direction: column; gap: 6px;">
<div style="display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-mist);">
<div style="width: 28px; height: 28px; background: var(--color-accent); border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 11px; font-weight: 600;">AC</div>
public/js/demos/commands/typeset.js
+10 -10
View File
@@ -1,23 +1,23 @@
// Typeset command demo - shows generic typography becoming intentional and hierarchical
// Typeset command demo - shows flat, hierarchyless text becoming intentional typography
export default {
id: 'typeset',
caption: 'Generic system fonts → Intentional type hierarchy',
caption: 'No type hierarchy → Clear, intentional typography',
before: `
<div style="width: 100%; max-width: 240px; padding: 16px; font-family: Arial, sans-serif;">
<div style="font-size: 15px; font-weight: bold; color: #333; margin-bottom: 6px;">Project Update</div>
<div style="font-size: 14px; font-weight: bold; color: #555; margin-bottom: 8px;">Q1 Design Sprint</div>
<p style="font-size: 14px; color: #666; line-height: 1.4; margin: 0 0 8px;">The team completed the redesign of the dashboard. All components have been reviewed and approved by stakeholders.</p>
<div style="font-size: 13px; color: #888;">Updated 2 hours ago</div>
<div style="font-size: 14px; font-weight: bold; color: #444; margin-bottom: 8px;">Project Update</div>
<div style="font-size: 14px; color: #444; margin-bottom: 8px;">Q1 Design Sprint</div>
<div style="font-size: 14px; color: #444; line-height: 1.4; margin-bottom: 8px;">The team completed the redesign of the dashboard. All components have been reviewed and approved by stakeholders.</div>
<div style="font-size: 14px; color: #444;">Updated 2 hours ago</div>
</div>
`,
after: `
<div style="width: 100%; max-width: 240px; padding: 16px; font-family: 'Instrument Sans', sans-serif;">
<div style="font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ash); margin-bottom: 8px;">Project Update</div>
<div style="font-family: 'Cormorant Garamond', serif; font-size: 1.375rem; font-weight: 600; color: var(--color-ink); line-height: 1.15; margin-bottom: 10px;">Q1 Design Sprint</div>
<p style="font-size: 0.875rem; color: color-mix(in oklch, var(--color-ink) 70%, transparent); line-height: 1.6; margin: 0 0 12px; max-width: 32ch;">The team completed the redesign of the dashboard. All components reviewed and approved.</p>
<div style="font-size: 0.75rem; color: var(--color-ash); font-variant-numeric: tabular-nums;">Updated 2 hours ago</div>
<div style="font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ash); margin-bottom: 6px;">Project Update</div>
<div style="font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 600; color: var(--color-ink); line-height: 1.1; margin-bottom: 12px;">Q1 Design Sprint</div>
<p style="font-size: 0.8125rem; color: color-mix(in oklch, var(--color-ink) 65%, transparent); line-height: 1.65; margin: 0 0 14px; max-width: 30ch;">The team completed the redesign of the dashboard. All components reviewed and approved.</p>
<div style="font-size: 0.6875rem; color: var(--color-ash); font-variant-numeric: tabular-nums;">Updated 2 hours ago</div>
</div>
`
};