mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-21 10:36:27 +03:00
Paul BakausandClaude Opus 4.6
8427deac3e
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>
48 lines
2.9 KiB
JavaScript
48 lines
2.9 KiB
JavaScript
// Arrange command demo - shows monotonous equal spacing becoming rhythmic and intentional
|
|
export default {
|
|
id: 'arrange',
|
|
caption: 'Equal spacing everywhere → Intentional rhythm and hierarchy',
|
|
|
|
before: `
|
|
<div style="width: 100%; max-width: 240px; padding: 16px;">
|
|
<div style="text-align: center; margin-bottom: 16px;">
|
|
<div style="font-size: 14px; font-weight: bold; color: #333;">Team Members</div>
|
|
</div>
|
|
<div style="display: flex; flex-direction: column; gap: 16px;">
|
|
<div style="padding: 16px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 8px; text-align: center;">
|
|
<div style="width: 32px; height: 32px; background: #ddd; border-radius: 50%; margin: 0 auto 8px;"></div>
|
|
<div style="font-size: 13px; color: #333;">Alice Chen</div>
|
|
<div style="font-size: 12px; color: #888;">Designer</div>
|
|
</div>
|
|
<div style="padding: 16px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 8px; text-align: center;">
|
|
<div style="width: 32px; height: 32px; background: #ddd; border-radius: 50%; margin: 0 auto 8px;"></div>
|
|
<div style="font-size: 13px; color: #333;">Bob Park</div>
|
|
<div style="font-size: 12px; color: #888;">Engineer</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
|
|
after: `
|
|
<div style="width: 100%; max-width: 240px; padding: 16px; font-family: 'Instrument Sans', sans-serif;">
|
|
<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>
|
|
<div style="flex: 1;">
|
|
<div style="font-size: 0.8125rem; font-weight: 500; color: var(--color-ink);">Alice Chen</div>
|
|
<div style="font-size: 0.6875rem; color: var(--color-ash);">Designer</div>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 12px; padding: 10px 0;">
|
|
<div style="width: 28px; height: 28px; background: color-mix(in oklch, var(--color-accent) 60%, var(--color-ink)); border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 11px; font-weight: 600;">BP</div>
|
|
<div style="flex: 1;">
|
|
<div style="font-size: 0.8125rem; font-weight: 500; color: var(--color-ink);">Bob Park</div>
|
|
<div style="font-size: 0.6875rem; color: var(--color-ash);">Engineer</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
};
|