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

update

Browse Source
This commit is contained in:
Abdul Wahab
2026-09-01 10:02:39 +05:00
parent 9af6fc1cb7
commit 6444deb361
3 changed files with 175 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
picker/pages/index.astro
+27 -32
View File
@@ -196,7 +196,6 @@ const roles = [
<label class="picker-strategy-option">
<input type="radio" name="color-strategy" value="restrained" checked />
<span class="picker-strategy-indicator" aria-hidden="true"></span>
<span class="picker-strategy-copy">
<strong>Restrained</strong>
<span>Mostly neutral. The primary appears in a few deliberate places.</span>
@@ -205,7 +204,6 @@ const roles = [
<label class="picker-strategy-option">
<input type="radio" name="color-strategy" value="committed" />
<span class="picker-strategy-indicator" aria-hidden="true"></span>
<span class="picker-strategy-copy">
<strong>Committed</strong>
<span>One strong color does real work across the page.</span>
@@ -214,7 +212,6 @@ const roles = [
<label class="picker-strategy-option">
<input type="radio" name="color-strategy" value="full-palette" />
<span class="picker-strategy-indicator" aria-hidden="true"></span>
<span class="picker-strategy-copy">
<strong>Full palette</strong>
<span>All four colors on duty, each with a clear job.</span>
@@ -223,7 +220,6 @@ const roles = [
<label class="picker-strategy-option">
<input type="radio" name="color-strategy" value="drenched" />
<span class="picker-strategy-indicator" aria-hidden="true"></span>
<span class="picker-strategy-copy">
<strong>Drenched</strong>
<span>The page itself is the color. Everything else sits on top.</span>
@@ -322,66 +318,66 @@ const roles = [
<div class="picker-strategy-preview picker-preview-type" data-type-preview aria-hidden="true">
<div class="ps-desktop">
<div class="ps-nav">
<div class="ps-brand-block"></div>
<div class="ps-nav-bars"><i></i><i></i><i></i><i></i></div>
<div class="ps-nav-action"></div>
<div class="ps-brand-block">AC</div>
<div class="ps-nav-bars"><i>Product</i><i>Stories</i><i>Pricing</i><i>About</i></div>
<div class="ps-nav-action">Sign in</div>
</div>
<div class="ps-hero">
<div class="ps-hero-copy">
<h2 class="pt-headline" data-type-headline></h2>
<p class="pt-body" data-type-body></p>
<div class="ps-actions"><i></i><i></i></div>
<div class="ps-actions"><i>Get started</i><i>Learn more</i></div>
</div>
<div class="ps-image"></div>
</div>
<div class="ps-proof">
<div class="ps-proof-item"><i></i><span></span></div>
<div class="ps-proof-item"><i></i><span></span></div>
<div class="ps-proof-item"><i></i><span></span></div>
<div class="ps-proof-item"><i></i><span></span></div>
<div class="ps-proof-item"><i></i><span>4.9 rating</span></div>
<div class="ps-proof-item"><i></i><span>12k members</span></div>
<div class="ps-proof-item"><i></i><span>Est. 2019</span></div>
<div class="ps-proof-item"><i></i><span>Free shipping</span></div>
</div>
<div class="ps-editorial">
<div class="ps-editorial-copy">
<strong></strong>
<span><i></i><i></i></span>
<em></em>
<strong>Made to last</strong>
<span><i>Every piece starts as a sketch and</i><i>earns its place in the collection.</i></span>
<em>Read the story</em>
</div>
<div class="ps-gallery">
<div class="ps-gallery-item"><i></i><span><b></b><b></b></span></div>
<div class="ps-gallery-item"><i></i><span><b></b><b></b></span></div>
<div class="ps-gallery-item"><i></i><span><b></b><b></b></span></div>
<div class="ps-gallery-item"><i></i><span><b></b><b></b></span></div>
<div class="ps-gallery-item"><i></i><span><b>Morning set</b><b>From $48</b></span></div>
<div class="ps-gallery-item"><i></i><span><b>Studio series</b><b>From $64</b></span></div>
<div class="ps-gallery-item"><i></i><span><b>Archive No. 3</b><b>From $32</b></span></div>
<div class="ps-gallery-item"><i></i><span><b>Limited run</b><b>From $96</b></span></div>
</div>
</div>
<div class="ps-footer">
<div class="ps-footer-links"><i></i><i></i><i></i><i></i></div>
<div class="ps-footer-mark"></div>
<div class="ps-footer-links"><i>Privacy</i><i>Terms</i><i>Contact</i><i>Careers</i></div>
<div class="ps-footer-mark">© 2026 AC</div>
</div>
</div>
<div class="ps-phone">
<div class="ps-phone-top">
<div class="ps-brand-block"></div>
<div class="ps-nav-action"></div>
<div class="ps-brand-block">AC</div>
<div class="ps-nav-action">Menu</div>
</div>
<div class="ps-phone-body">
<div class="ps-image"></div>
<h2 class="pt-headline" data-type-headline></h2>
<p class="pt-body" data-type-body></p>
<div class="ps-actions"><i></i><i></i></div>
<div class="ps-actions"><i>Get started</i><i>Learn more</i></div>
<div class="ps-proof">
<div class="ps-proof-item"><i></i><span></span></div>
<div class="ps-proof-item"><i></i><span></span></div>
<div class="ps-proof-item"><i></i><span>4.9 rating</span></div>
<div class="ps-proof-item"><i></i><span>12k members</span></div>
</div>
<div class="ps-editorial-copy">
<strong></strong>
<span><i></i><i></i></span>
<strong>Made to last</strong>
<span><i>Every piece starts as a sketch and</i><i>earns its place in the collection.</i></span>
</div>
<div class="ps-gallery">
<div class="ps-gallery-item"><i></i><span><b></b><b></b></span></div>
<div class="ps-gallery-item"><i></i><span><b></b><b></b></span></div>
<div class="ps-gallery-item"><i></i><span><b>Morning set</b><b>From $48</b></span></div>
<div class="ps-gallery-item"><i></i><span><b>Studio series</b><b>From $64</b></span></div>
</div>
</div>
<div class="ps-phone-footer"><i></i><i></i><i></i></div>
<div class="ps-phone-footer"><i>Privacy</i><i>Terms</i><i>Contact</i></div>
</div>
</div>
</div>
@@ -389,7 +385,6 @@ const roles = [
<template data-pair-card>
<label class="picker-strategy-option picker-type-option">
<input type="radio" name="font-pair" />
<span class="picker-strategy-indicator" aria-hidden="true"></span>
<span class="picker-type-copy">
<strong class="picker-type-sample-heading" data-pair-heading></strong>
<span class="picker-type-desc">Paired with <b data-pair-body></b>. <span data-pair-why></span></span>
picker/styles/picker.css
+132 -41
View File
@@ -1086,10 +1086,11 @@ html.light .ks-button.ks-button-ghost:hover {
white-space: nowrap;
}
/* Selection reads from the card itself: a champagne-tinted ground plus a
doubled hairline (border + inset ring), no radio dot spending a column. */
.picker-strategy-option {
position: relative;
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
gap: 14px;
align-items: start;
padding: 16px 18px;
@@ -1099,36 +1100,14 @@ html.light .ks-button.ks-button-ghost:hover {
cursor: pointer;
transition:
background-color 180ms var(--ks-ease),
border-color 180ms var(--ks-ease);
border-color 180ms var(--ks-ease),
box-shadow 180ms var(--ks-ease);
}
.picker-strategy-option:hover {
border-color: var(--ks-patina-deep);
}
.picker-strategy-indicator {
position: relative;
width: 17px;
height: 17px;
margin-top: 2px;
color: var(--ks-patina-deep);
border: 1px solid currentColor;
border-radius: 50%;
}
.picker-strategy-indicator::after {
content: "";
position: absolute;
inset: 4px;
background: currentColor;
border-radius: 50%;
opacity: 0;
transform: scale(0.5);
transition:
opacity 160ms var(--ks-ease),
transform 160ms var(--ks-ease);
}
.picker-strategy-copy {
display: grid;
gap: 5px;
@@ -1150,15 +1129,11 @@ html.light .ks-button.ks-button-ghost:hover {
.picker-strategy-option:has(input:checked) {
background: color-mix(in oklab, var(--ks-patina-deep) 7%, var(--ks-lacquer-raised));
border-color: var(--ks-patina-deep);
box-shadow: inset 0 0 0 1px var(--ks-patina-deep);
}
.picker-strategy-option:has(input:checked) .picker-strategy-indicator {
color: var(--ks-patina-deep);
}
.picker-strategy-option:has(input:checked) .picker-strategy-indicator::after {
opacity: 1;
transform: scale(1);
.picker-strategy-option:has(input:checked) .picker-strategy-copy strong {
color: var(--ks-link-on-paper);
}
.picker-strategy-option:has(input:focus-visible) {
@@ -1802,7 +1777,6 @@ html.light .ks-button.ks-button-ghost:hover {
}
.picker-type-option {
grid-template-columns: 17px minmax(0, 1fr);
gap: 14px;
padding: 18px 20px;
}
@@ -1837,10 +1811,27 @@ html.light .ks-button.ks-button-ghost:hover {
font-weight: 700;
}
/* One golden-ratio ladder rules every piece of text on the artboards:
micro-copy sits one step below the body size, the headline two steps
above it. The phone artboard re-bases the same ladder smaller, so both
artboards stay on scale. A future type-scale step replaces the ratio;
until then the preview follows this one everywhere. */
.picker-preview-type {
--pt-heading: var(--ks-font-display);
--pt-body: var(--ks-font);
--pt-heading-weight: 600;
--pt-ratio: 1.618;
--pt-base: clamp(0.58rem, 0.75vw, 0.72rem);
}
/* The derived steps are declared on both artboard roots because custom
properties resolve their var() references where they are declared: the
phone re-bases --pt-base, so it needs its own ladder computation. */
.picker-preview-type,
.picker-preview-type .ps-phone {
--pt-micro: calc(var(--pt-base) / var(--pt-ratio));
--pt-title: calc(var(--pt-base) * var(--pt-ratio));
--pt-display: calc(var(--pt-base) * var(--pt-ratio) * var(--pt-ratio));
}
.picker-preview-type .ps-hero-copy {
@@ -1860,9 +1851,9 @@ html.light .ks-button.ks-button-ghost:hover {
margin: 0 0 12px;
color: var(--pvs-headline);
font-family: var(--pt-heading);
font-size: clamp(1.2rem, 1.7vw, 1.8rem);
font-size: var(--pt-display);
font-weight: var(--pt-heading-weight);
line-height: 1.04;
line-height: 1.15;
letter-spacing: -0.02em;
overflow-wrap: break-word;
text-wrap: balance;
@@ -1873,21 +1864,122 @@ html.light .ks-button.ks-button-ghost:hover {
margin: 0 0 16px;
color: var(--pvs-copy);
font-family: var(--pt-body);
font-size: clamp(0.64rem, 0.82vw, 0.82rem);
line-height: 1.45;
font-size: var(--pt-base);
line-height: 1.55;
}
/* Phone artboard type: the same ladder re-based to handset scale. */
.picker-preview-type .ps-phone {
--pt-base: clamp(0.42rem, 0.55vw, 0.52rem);
}
/* Phone artboard type: same specimen at handset scale. */
.ps-phone .pt-headline {
max-width: none;
margin: 8px 0 0;
font-size: clamp(0.82rem, 1.05vw, 1.05rem);
}
.ps-phone .pt-body {
max-width: none;
margin: 4px 0 0;
font-size: clamp(0.5rem, 0.62vw, 0.64rem);
}
/* On the type screen the wireframe's bar glyphs become micro-copy, so the
pair is judged on real glyphs in every slot: nav, buttons, proof row,
cards, footer. Each element keeps the color slot its bar used, moved
from background to ink; sizes come from the ladder above. */
.picker-preview-type :is(
.ps-nav-bars i,
.ps-proof-item span,
.ps-editorial-copy span i,
.ps-editorial-copy > em,
.ps-gallery-item b,
.ps-footer-links i,
.ps-footer-mark,
.ps-phone-footer i
) {
width: auto;
height: auto;
overflow: hidden;
background: none;
border-radius: 0;
font-family: var(--pt-body);
font-size: var(--pt-micro);
font-style: normal;
font-weight: 500;
line-height: 1.4;
white-space: nowrap;
}
.picker-preview-type .ps-nav-bars i,
.picker-preview-type .ps-footer-links i,
.picker-preview-type .ps-footer-mark,
.picker-preview-type .ps-phone-footer i {
color: var(--pvs-bars);
}
/* The lettermark takes the heading face: a logo is display type. */
.picker-preview-type .ps-brand-block {
width: auto;
height: auto;
background: none;
color: var(--pvs-cta);
font-family: var(--pt-heading);
font-size: var(--pt-title);
font-weight: var(--pt-heading-weight);
letter-spacing: 0.04em;
line-height: 1;
}
/* Buttons keep their fills; the label borrows the page ground as ink. */
.picker-preview-type .ps-nav-action,
.picker-preview-type .ps-actions i {
width: auto;
height: auto;
display: grid;
place-items: center;
padding: 0.55em 1.3em;
color: var(--pvs-ground);
font-family: var(--pt-body);
font-size: var(--pt-micro);
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
.picker-preview-type .ps-proof-item span {
color: var(--pvs-bars);
}
.picker-preview-type .ps-editorial-copy strong {
width: auto;
height: auto;
background: none;
color: var(--pvs-title);
font-family: var(--pt-heading);
font-size: var(--pt-title);
font-weight: var(--pt-heading-weight);
line-height: 1.2;
white-space: nowrap;
}
.picker-preview-type .ps-editorial-copy span i {
color: var(--pvs-copy);
}
.picker-preview-type .ps-editorial-copy > em {
width: auto;
height: auto;
margin-top: 3px;
background: none;
color: var(--pvs-signal);
}
.picker-preview-type .ps-gallery-item b {
color: var(--pvs-bars);
}
.picker-preview-type .ps-gallery-item b:first-child {
color: var(--pvs-title);
}
.picker-palette-hint {
@@ -1928,7 +2020,6 @@ html.light .ks-button.ks-button-ghost:hover {
.picker-tip::after,
.picker-palette-hint,
.picker-strategy-option,
.picker-strategy-indicator::after,
.picker-strategy-preview :is(
.ps-desktop,
.ps-phone,
skill/reference/visual-cues.md
+16 -8
View File
@@ -69,8 +69,11 @@ Compose exactly four hex values with a 60-30-10 balance. These are
website/app colors, headed for design tokens, not scene colors:
- neutral (~60%, the dominant): the surface, what most of a screen will
be. An off-white or near-white with a temperature tint, or a near-black
when the mood calls for dark. Never pure #FFFFFF or #000000.
be. An off-white or near-white with a temperature tint, at least as
pale as #ECEAE6: a mid-tone neutral that reads fine as a scene material
turns into a gray slab once it is a screen background. Near-black is
the one alternative, when the mood calls for dark; there is no
in-between. Never pure #FFFFFF or #000000.
- primary (~30%): the brand color, the mood's main carrier. Must read
clearly against the neutral.
- secondary: structure and support: an adjacent hue, or the primary
@@ -121,7 +124,9 @@ Written like screenplay direction, not a keyword list: subject doing something,
Name every color in plain language only, as a rich material description ("deep wine-plum, the color of reduced port"), tied to its carrier. **Never put a hex code, or any number, in an image prompt**: image models that render text well will paint it onto the image as a label or a swatch strip, and even one stray numeral fails the wordless check below. The hexes already travel in the PALETTE report line, and the compile step snaps them to rendered pixels; the prompt's job is the color's look, not its code. For the same reason, say what fills the frame instead of listing what to omit; a bare "no text" line is the weakest form of the instruction and the wordless sentence below is the strong form. Keep both.
Light the scene to reveal color, not to set a mood. In a dim, dusky, or nocturnal rendering every color sinks into one warm-brown murk the user cannot sample from, so bright, generous light is a hard rule even when the concept's moment is dark: an "after hours" or "dawn" concept keeps its props and story but is lit like a studio still, not like the hour. Dark palettes are welcome; dark renderings are not; a near-black primary should read as a rich, clearly-lit surface, not as underexposure. Fill every `[bracketed]` slot; never leave template language in the prompt.
Light the scene to reveal color, not to set a mood. In a dim, dusky, or nocturnal rendering every color sinks into one warm-brown murk the user cannot sample from, so bright, generous light is a hard rule even when the concept's moment is dark: an "after hours" or "dawn" concept keeps its props and story but is lit like a studio still, not like the hour. Dark palettes are welcome; dark renderings are not; a near-black primary should read as a rich, clearly-lit surface, not as underexposure.
The neutral's ground pays the highest price for shading. The compile step snaps each role to the pixels the hero actually rendered, and the picker shows the snapped value, so a nominally off-white linen that renders in mid-gray shadow ships a mid-gray surface color to the user. Describe the neutral's material as pale in the prompt ("pale unbleached linen, near-white in even light") and keep its field lit edge to edge, so the rendered ground stays as pale as the composed hex. Fill every `[bracketed]` slot; never leave template language in the prompt.
```text
One full-bleed photograph, square format, framed close: [one scene from
@@ -133,7 +138,8 @@ four-color story: every surface in frame carries one of the four colors,
each color one large unbroken field, none reduced to a sliver, no
stretch of frame left to a color outside the four: [the neutral's
carrier], [plain-language color with a material-world comparison], as
the ground and backdrop, about half the frame; [the primary's carrier],
the ground and backdrop, about half the frame, evenly lit edge to edge
with no shadow gradient across it; [the primary's carrier],
[color description], one continuous mass over roughly a third of the
frame, carried by the main subject; [the secondary's carrier], [color
description], a clear supporting field beside it; [the tertiary's
@@ -266,10 +272,12 @@ generation tooling.
every surface in frame carries one of the four colors, and
everything is in crisp sharp focus, no blur anywhere."
- Light: if the image is dim, dusky, or nocturnal, with palette
colors sinking into shadow instead of reading bright and true,
regenerate once, same prompt, plus "Render the scene in bright,
generous daylight-quality studio light; every color fully lit and
clearly readable, no darkness anywhere in the frame."
colors sinking into shadow, or the neutral's ground renders
visibly darker than its composed color (off-white linen reading
as mid-gray), regenerate once, same prompt, plus "Render the
scene in bright, generous daylight-quality studio light; every
color fully lit and clearly readable, the ground pale and evenly
lit edge to edge, no darkness anywhere in the frame."
5. Reply with exactly these three lines and nothing else, the path
being the file you verified in step 4: