mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
/hallmark Fraunces wordmark · OG image · Hyperlane example · footer current-theme fix
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Youssef
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
2919689cb2
commit
d130808b54
@@ -6,16 +6,9 @@
|
||||
|
||||
Powered by Together AI.
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td><img src="site/_tests/_thumbs/hero-static-hour.jpg" alt="Static Hour — atmospheric podcast platform on dark canvas, italic editorial serif" /></td>
|
||||
<td><img src="site/_tests/_thumbs/hero-najm.jpg" alt="NAJM — Moroccan fashion brand, oversized condensed sans with bright accent" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="site/_tests/_thumbs/hero-tally-hero.jpg" alt="Tally — modern-minimal billing platform, live invoice card and chart" /></td>
|
||||
<td><img src="site/_tests/_thumbs/hero-nexus.jpg" alt="Nexus — developer tool, split hero with italic-emphasis sans" /></td>
|
||||
</tr>
|
||||
</table>
|
||||
<p align="center">
|
||||
<img src="site/OG-hallmark.png" alt="Hallmark — A design skill that refuses to look AI-generated" />
|
||||
</p>
|
||||
|
||||
Hallmark encodes the anti-AI-slop consensus — typography, colour, layout, motion, microinteractions, structural variety — into one opinionated rule-set. It picks a macrostructure for the brief, dresses it in one of twenty-three themes, runs sixty slop-test gates plus a pre-emit self-critique before handing back, and refuses the on-distribution defaults every LLM was trained into.
|
||||
|
||||
@@ -66,28 +59,28 @@ Generated by exercising the skill across contrasting briefs. No two share a macr
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td width="25%"><img src="site/_tests/_thumbs/01-tide.png" alt="Tide — Quote-Led + Atelier" /></td>
|
||||
<td width="25%"><img src="site/_tests/_thumbs/02-streampipe.png" alt="Streampipe — Workbench + Terminal" /></td>
|
||||
<td width="25%"><img src="site/_tests/_thumbs/03-maple.png" alt="Maple Street Bread — Long Document + Linen" /></td>
|
||||
<td width="25%"><img src="site/_tests/_thumbs/04-meridian.png" alt="Meridian — Manifesto + Manifesto" /></td>
|
||||
<td width="25%"><video src="https://github.com/Luffixos/hallmark/raw/main/site/_tests/_thumbs/SaaS-loop.mp4" autoplay loop muted playsinline></video></td>
|
||||
<td width="25%"><video src="https://github.com/Luffixos/hallmark/raw/main/site/_tests/_thumbs/wayfare-loop.mp4" autoplay loop muted playsinline></video></td>
|
||||
<td width="25%"><video src="https://github.com/Luffixos/hallmark/raw/main/site/_tests/_thumbs/slow-pour-loop.mp4" autoplay loop muted playsinline></video></td>
|
||||
<td width="25%"><video src="https://github.com/Luffixos/hallmark/raw/main/site/_tests/_thumbs/BananaStudio-loop.mp4" autoplay loop muted playsinline></video></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Tide</b><br/><sub>Quote-Led · Atelier · indie podcast</sub></td>
|
||||
<td><b>Streampipe</b><br/><sub>Workbench · Terminal · CSS-art mockup</sub></td>
|
||||
<td><b>Maple Street Bread</b><br/><sub>Long Doc · Linen · hand-built SVG loaf</sub></td>
|
||||
<td><b>Meridian</b><br/><sub>Manifesto · 11-section practice</sub></td>
|
||||
<td><b>SaaS</b><br/><sub>SaaS product page · modern-minimal</sub></td>
|
||||
<td><b>Wayfare</b><br/><sub>Travel booking · atmospheric</sub></td>
|
||||
<td><b>Slow Pour</b><br/><sub>Small-batch coffee subscription</sub></td>
|
||||
<td><b>BananaStudio</b><br/><sub>Creative studio · playful motion</sub></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="site/_tests/_thumbs/05-tracejam.png" alt="Tracejam — Bento Grid + Pastel" /></td>
|
||||
<td><img src="site/_tests/_thumbs/06-anya.png" alt="Anya — Long Document + Studio" /></td>
|
||||
<td><img src="site/_tests/_thumbs/07-foundry.png" alt="Foundry — Stat-Led + Plain (pure white)" /></td>
|
||||
<td><img src="site/_tests/_thumbs/08-cohort.png" alt="Cohort — Marquee Hero + Salon" /></td>
|
||||
<td><video src="https://github.com/Luffixos/hallmark/raw/main/site/_tests/_thumbs/anya-loop.mp4" autoplay loop muted playsinline></video></td>
|
||||
<td><video src="https://github.com/Luffixos/hallmark/raw/main/site/_tests/_thumbs/Najm-loop.mp4" autoplay loop muted playsinline></video></td>
|
||||
<td><video src="https://github.com/Luffixos/hallmark/raw/main/site/_tests/_thumbs/Soroe-loop.mp4" autoplay loop muted playsinline></video></td>
|
||||
<td><video src="https://github.com/Luffixos/hallmark/raw/main/site/_tests/_thumbs/Hyperlane-example.mp4" autoplay loop muted playsinline></video></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Tracejam</b><br/><sub>Bento · Pastel · clipped-edge mockup</sub></td>
|
||||
<td><b>Anya</b><br/><sub>Long Doc · Studio · personal one-pager</sub></td>
|
||||
<td><b>Foundry</b><br/><sub>Stat-Led · Plain (#fff) · animated counter</sub></td>
|
||||
<td><b>Cohort</b><br/><sub>Marquee Hero · Salon · continuous scroll</sub></td>
|
||||
<td><b>Anya</b><br/><sub>Software architect personal site</sub></td>
|
||||
<td><b>NAJM</b><br/><sub>Moroccan fashion brand</sub></td>
|
||||
<td><b>Søroe</b><br/><sub>Small ceramics studio</sub></td>
|
||||
<td><b>Hyperlane</b><br/><sub>Developer infrastructure</sub></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
@@ -100,7 +93,7 @@ Each page is its own self-contained HTML + CSS — no shared theme, no shared la
|
||||
- **[`SKILL.md`](skill/SKILL.md)** — the routing file. Six-step design flow (including `Step 2.5 · Check project memory` reading `.hallmark/log.json`), 55-gate slop test, output contract, always-on `tokens.css` export.
|
||||
- **[`references/`](skill/references/)** — short, opinionated rule files: typography, colour, layout, motion, microinteractions, interaction-and-states (with the input-state checklist), responsive, copy, anti-patterns, the 21 named macrostructures, the **40 component archetypes** with variation knobs (9 hero · 6 feature · 4 CTA · 4 testimonial · **8 footer · 9 nav**), the **4 hero polish patterns** (in `hero-enrichment.md`), the 6 primitive structure axes, the vision-extraction protocol for `study`, hero enrichment, custom-craft (CSS art over Lottie), assets, the slop-test gates, four genre rule-overlays (each with nav + footer voice routing), per-verb dispatchers, and the export-formats reference (Tailwind / DTCG / shadcn / tokens.css).
|
||||
- **[`docs/`](docs/)** — human-reading content: **[`recipes.md`](docs/recipes.md)** (8 worked briefs + a canonical try-it prompt) and **[`study-examples.md`](docs/study-examples.md)** (3 worked DNA-extractions). Not auto-loaded by the skill.
|
||||
- **[`site/`](site/)** — a self-demonstrating landing page. Hand-written HTML + CSS + ES module, no framework, no build step. **Twenty-two themes** clustered into four genres: **editorial** (Specimen, Atelier, Newsprint, Salon, Linen, Almanac, Garden, Studio, Sport, Riso, Brutal, Manifesto), **modern-minimal** (Quiet, Coral, Violet), **atmospheric** (Midnight, Terminal, Bloom, Aurora, Halo), **playful** (Pastel, Plume). Switching themes literally rebuilds the page — different hero archetype, different footer archetype, different nav archetype.
|
||||
- **[`site/`](site/)** — a self-demonstrating landing page. Hand-written HTML + CSS + ES module, no framework, no build step. **Twenty-three themes** clustered into four genres: **editorial** (Specimen, Editorial, Atelier, Newsprint, Salon, Linen, Almanac, Garden, Studio, Sport, Riso, Brutal, Manifesto), **modern-minimal** (Quiet, Coral, Violet), **atmospheric** (Midnight, Terminal, Bloom, Aurora, Halo), **playful** (Pastel, Plume). Switching themes literally rebuilds the page — different hero archetype, different footer archetype, different nav archetype.
|
||||
|
||||
---
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
+39
-13
@@ -58,11 +58,6 @@
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.banner__name {
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.22em;
|
||||
}
|
||||
|
||||
.banner__ver {
|
||||
font-size: 0.625rem;
|
||||
color: var(--color-muted);
|
||||
@@ -3129,19 +3124,49 @@ body:not(.easter-open) > footer {
|
||||
}
|
||||
|
||||
.foot--colophon .foot__wordmark {
|
||||
font-family: var(--font-display);
|
||||
font-weight: var(--display-weight, 500);
|
||||
font-style: var(--display-style, normal);
|
||||
font-size: clamp(3rem, 7vw + 0.5rem, 6.5rem);
|
||||
line-height: 0.85;
|
||||
letter-spacing: var(--tracking-display, -0.025em);
|
||||
display: inline-flex;
|
||||
color: var(--color-ink);
|
||||
font-optical-sizing: auto;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* The brand mark is locked to Fraunces in every theme — themes still
|
||||
re-render everything else, but the wordmark is brand-locked so the
|
||||
site is always recognisable as "Hallmark" regardless of the theme. */
|
||||
.brand-mark {
|
||||
font-family: "Fraunces", "Newsreader", "Playfair Display", serif;
|
||||
font-optical-sizing: auto;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.brand-mark__slash {
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.20em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.brand-mark__name {
|
||||
font-weight: 300;
|
||||
letter-spacing: 0;
|
||||
margin-inline-start: 0.05em;
|
||||
}
|
||||
|
||||
/* Footer wordmark variant — same proportions, much larger. */
|
||||
.brand-mark--lg {
|
||||
font-size: clamp(3rem, 7vw + 0.5rem, 6.5rem);
|
||||
line-height: 0.85;
|
||||
}
|
||||
|
||||
/* Keep manifesto/brutal/sport from upper-casing the brand mark — the
|
||||
wordmark is locked, theme typography lives elsewhere. */
|
||||
[data-theme="manifesto"] .foot--colophon .foot__wordmark,
|
||||
[data-theme="brutal"] .foot--colophon .foot__wordmark,
|
||||
[data-theme="sport"] .foot--colophon .foot__wordmark { text-transform: uppercase; }
|
||||
[data-theme="sport"] .foot--colophon .foot__wordmark { text-transform: none; }
|
||||
|
||||
.foot__version {
|
||||
font-family: var(--font-mono);
|
||||
@@ -3881,6 +3906,7 @@ html[data-theme="halo"] aside {
|
||||
scroll-snap-align: start;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto;
|
||||
min-width: 0;
|
||||
color: inherit;
|
||||
background: var(--color-paper);
|
||||
border: var(--rule-card, 1px) solid var(--color-rule);
|
||||
|
||||
+1
-1
@@ -892,7 +892,7 @@
|
||||
--color-rule-2: oklch(72% 0.010 50);
|
||||
--color-muted: oklch(52% 0.012 50);
|
||||
--color-neutral: oklch(38% 0.012 45);
|
||||
--color-ink-2: oklch(28% 0.012 40);
|
||||
--color-ink-2: oklch(26% 0.012 40);
|
||||
--color-ink: oklch(20% 0.010 35);
|
||||
--color-accent: oklch(64% 0.165 28); /* warm coral */
|
||||
--color-accent-ink: oklch(98% 0.005 50);
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="32" height="32" fill="black"/>
|
||||
<path d="M9.73702 16.24C9.5694 16.6362 9.37892 17.0934 9.16559 17.6115C8.95988 18.1219 8.74654 18.6705 8.52559 19.2572C8.30464 19.8438 8.07988 20.4381 7.85131 21.04C7.63035 21.6419 7.4094 22.2324 7.18845 22.8115C6.97511 23.3829 6.7694 23.9162 6.5713 24.4115C6.38083 24.9067 6.20178 25.3334 6.03416 25.6915C5.89702 25.9886 5.67988 26.1715 5.38273 26.24C5.09321 26.3162 4.76559 26.2705 4.39988 26.1029C4.02654 25.9276 3.77131 25.7067 3.63416 25.44C3.50464 25.1734 3.50845 24.8915 3.64559 24.5943C3.81321 24.2362 4.01131 23.821 4.23988 23.3486C4.47607 22.8762 4.73511 22.3696 5.01702 21.8286C5.30654 21.2876 5.59988 20.7353 5.89702 20.1715C6.20178 19.6 6.49892 19.0362 6.78845 18.48C7.08559 17.9238 7.35607 17.3981 7.59988 16.9029C7.85131 16.4 8.06845 15.9505 8.2513 15.5543C8.43416 15.1581 8.62845 14.701 8.83416 14.1829C9.03988 13.6572 9.25321 13.101 9.47416 12.5143C9.70273 11.9276 9.9275 11.3334 10.1484 10.7315C10.377 10.1219 10.598 9.53146 10.8113 8.96003C11.0323 8.38098 11.2418 7.84384 11.4399 7.3486C11.638 6.85336 11.8132 6.43051 11.9656 6.08003C12.1104 5.79051 12.3275 5.60765 12.617 5.53146C12.9065 5.45527 13.2342 5.50479 13.5999 5.68003C13.9732 5.84765 14.2246 6.0686 14.3542 6.34289C14.4913 6.60955 14.4913 6.89146 14.3542 7.1886C14.1942 7.5467 13.9923 7.96574 13.7484 8.44574C13.5123 8.92574 13.2494 9.44003 12.9599 9.9886C12.6704 10.5296 12.3732 11.0857 12.0684 11.6572C11.7713 12.221 11.478 12.781 11.1884 13.3372C10.8989 13.8934 10.6284 14.4191 10.377 14.9143C10.1332 15.4096 9.91988 15.8515 9.73702 16.24Z" fill="white"/>
|
||||
<path d="M18.9372 7.68003V22.8C18.9372 22.96 18.9753 23.0857 19.0515 23.1772C19.1353 23.2686 19.2534 23.3296 19.4058 23.36L20.0344 23.4743C20.2477 23.5276 20.3544 23.6191 20.3544 23.7486C20.3544 23.9162 20.2325 24 19.9887 24H16.2515C16.1372 24 16.0496 23.9772 15.9887 23.9315C15.9353 23.8857 15.9087 23.8248 15.9087 23.7486C15.9087 23.68 15.9353 23.6267 15.9887 23.5886C16.042 23.5429 16.1258 23.5048 16.2401 23.4743L16.903 23.36C17.0553 23.3219 17.1696 23.261 17.2458 23.1772C17.3296 23.0934 17.3715 22.9715 17.3715 22.8115V8.92574C17.3715 8.7886 17.3449 8.68955 17.2915 8.6286C17.2458 8.56765 17.162 8.53336 17.0401 8.52574L16.0801 8.51432C15.9734 8.5067 15.8972 8.48765 15.8515 8.45717C15.8058 8.41908 15.783 8.36955 15.783 8.3086C15.783 8.24003 15.8058 8.1867 15.8515 8.1486C15.9049 8.10289 15.9925 8.05717 16.1144 8.01146L17.863 7.44003C18.0306 7.3867 18.1677 7.3486 18.2744 7.32574C18.3811 7.29527 18.4725 7.28003 18.5487 7.28003C18.6782 7.28003 18.7734 7.31431 18.8344 7.38289C18.903 7.45146 18.9372 7.55051 18.9372 7.68003ZM18.663 16.0343L18.343 15.7143L18.8572 15.2686C19.6877 14.5448 20.3963 14.0305 20.983 13.7257C21.5772 13.421 22.1601 13.2686 22.7315 13.2686C23.6077 13.2686 24.282 13.5543 24.7544 14.1257C25.2268 14.6972 25.5239 15.4896 25.6458 16.5029L26.423 22.7315C26.4458 22.9143 26.4992 23.0591 26.583 23.1657C26.6744 23.2648 26.8039 23.3334 26.9715 23.3715L27.543 23.4857C27.6496 23.5086 27.7296 23.5429 27.783 23.5886C27.8363 23.6267 27.863 23.68 27.863 23.7486C27.863 23.8248 27.8325 23.8857 27.7715 23.9315C27.7182 23.9772 27.6306 24 27.5087 24H23.7487C23.4972 24 23.3715 23.9162 23.3715 23.7486C23.3715 23.6191 23.4782 23.5276 23.6915 23.4743L24.3544 23.36C24.5296 23.3296 24.663 23.261 24.7544 23.1543C24.8458 23.0476 24.8801 22.9067 24.8572 22.7315L24.0801 16.7429C23.9734 15.8972 23.7525 15.2648 23.4172 14.8457C23.082 14.4191 22.5982 14.2057 21.9658 14.2057C21.562 14.2057 21.1353 14.32 20.6858 14.5486C20.2363 14.7772 19.7296 15.1315 19.1658 15.6115L18.663 16.0343Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="32" height="32" fill="white"/>
|
||||
<path d="M9.73702 16.24C9.5694 16.6362 9.37892 17.0934 9.16559 17.6115C8.95988 18.1219 8.74654 18.6705 8.52559 19.2572C8.30464 19.8438 8.07988 20.4381 7.85131 21.04C7.63035 21.6419 7.4094 22.2324 7.18845 22.8115C6.97512 23.3829 6.7694 23.9162 6.57131 24.4115C6.38083 24.9067 6.20178 25.3334 6.03416 25.6915C5.89702 25.9886 5.67988 26.1715 5.38273 26.24C5.09321 26.3162 4.76559 26.2705 4.39988 26.1029C4.02654 25.9276 3.77131 25.7067 3.63416 25.44C3.50464 25.1734 3.50845 24.8915 3.64559 24.5943C3.81321 24.2362 4.01131 23.821 4.23988 23.3486C4.47607 22.8762 4.73511 22.3696 5.01702 21.8286C5.30654 21.2876 5.59988 20.7353 5.89702 20.1715C6.20178 19.6 6.49892 19.0362 6.78845 18.48C7.08559 17.9238 7.35607 17.3981 7.59988 16.9029C7.85131 16.4 8.06845 15.9505 8.25131 15.5543C8.43416 15.1581 8.62845 14.701 8.83416 14.1829C9.03988 13.6572 9.25321 13.101 9.47416 12.5143C9.70273 11.9276 9.9275 11.3334 10.1484 10.7315C10.377 10.1219 10.598 9.53146 10.8113 8.96003C11.0323 8.38098 11.2418 7.84384 11.4399 7.3486C11.638 6.85336 11.8132 6.43051 11.9656 6.08003C12.1104 5.79051 12.3275 5.60765 12.617 5.53146C12.9065 5.45527 13.2342 5.50479 13.5999 5.68003C13.9732 5.84765 14.2246 6.0686 14.3542 6.34289C14.4913 6.60955 14.4913 6.89146 14.3542 7.1886C14.1942 7.5467 13.9923 7.96574 13.7484 8.44574C13.5123 8.92574 13.2494 9.44003 12.9599 9.9886C12.6704 10.5296 12.3732 11.0857 12.0684 11.6572C11.7713 12.221 11.478 12.781 11.1884 13.3372C10.8989 13.8934 10.6284 14.4191 10.377 14.9143C10.1332 15.4096 9.91988 15.8515 9.73702 16.24Z" fill="black"/>
|
||||
<path d="M18.9372 7.68003V22.8C18.9372 22.96 18.9753 23.0857 19.0515 23.1772C19.1353 23.2686 19.2534 23.3296 19.4058 23.36L20.0344 23.4743C20.2477 23.5276 20.3544 23.6191 20.3544 23.7486C20.3544 23.9162 20.2325 24 19.9887 24H16.2515C16.1372 24 16.0496 23.9772 15.9887 23.9315C15.9353 23.8857 15.9087 23.8248 15.9087 23.7486C15.9087 23.68 15.9353 23.6267 15.9887 23.5886C16.042 23.5429 16.1258 23.5048 16.2401 23.4743L16.903 23.36C17.0553 23.3219 17.1696 23.261 17.2458 23.1772C17.3296 23.0934 17.3715 22.9715 17.3715 22.8115V8.92574C17.3715 8.7886 17.3449 8.68955 17.2915 8.6286C17.2458 8.56765 17.162 8.53336 17.0401 8.52574L16.0801 8.51432C15.9734 8.5067 15.8972 8.48765 15.8515 8.45717C15.8058 8.41908 15.783 8.36955 15.783 8.3086C15.783 8.24003 15.8058 8.1867 15.8515 8.1486C15.9049 8.10289 15.9925 8.05717 16.1144 8.01146L17.863 7.44003C18.0306 7.3867 18.1677 7.3486 18.2744 7.32574C18.3811 7.29527 18.4725 7.28003 18.5487 7.28003C18.6782 7.28003 18.7734 7.31431 18.8344 7.38289C18.903 7.45146 18.9372 7.55051 18.9372 7.68003ZM18.663 16.0343L18.343 15.7143L18.8572 15.2686C19.6877 14.5448 20.3963 14.0305 20.983 13.7257C21.5772 13.421 22.1601 13.2686 22.7315 13.2686C23.6077 13.2686 24.282 13.5543 24.7544 14.1257C25.2268 14.6972 25.5239 15.4896 25.6458 16.5029L26.423 22.7315C26.4458 22.9143 26.4992 23.0591 26.583 23.1657C26.6744 23.2648 26.8039 23.3334 26.9715 23.3715L27.543 23.4857C27.6496 23.5086 27.7296 23.5429 27.783 23.5886C27.8363 23.6267 27.863 23.68 27.863 23.7486C27.863 23.8248 27.8325 23.8857 27.7715 23.9315C27.7182 23.9772 27.6306 24 27.5087 24H23.7487C23.4972 24 23.3715 23.9162 23.3715 23.7486C23.3715 23.6191 23.4782 23.5276 23.6915 23.4743L24.3544 23.36C24.5296 23.3296 24.663 23.261 24.7544 23.1543C24.8458 23.0476 24.8801 22.9067 24.8572 22.7315L24.0801 16.7429C23.9734 15.8972 23.7525 15.2648 23.4172 14.8457C23.082 14.4191 22.5982 14.2057 21.9658 14.2057C21.562 14.2057 21.1353 14.32 20.6858 14.5486C20.2363 14.7772 19.7296 15.1315 19.1658 15.6115L18.663 16.0343Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
@@ -1,15 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<style>
|
||||
.bg { fill: #f5efe2; }
|
||||
.fg { fill: #1a1410; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.bg { fill: #1a1410; }
|
||||
.fg { fill: #f5efe2; }
|
||||
}
|
||||
</style>
|
||||
<rect class="bg" width="32" height="32"/>
|
||||
<text class="fg" x="50%" y="72%"
|
||||
font-family="'Fraunces', 'Tiempos', 'Georgia', serif"
|
||||
font-size="24" font-weight="500" font-style="italic"
|
||||
text-anchor="middle">H</text>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 489 B |
+21
-12
@@ -13,14 +13,23 @@
|
||||
<meta property="og:description"
|
||||
content="A design skill for AI coding assistants. Encodes the anti-slop consensus into one ruleset. Powered by Together AI." />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="OG-hallmark.png" />
|
||||
<meta property="og:image:alt" content="Hallmark — A design skill that refuses to look AI-generated" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Hallmark — A design skill that refuses to look AI-generated" />
|
||||
<meta name="twitter:description"
|
||||
content="A design skill for AI coding assistants. Encodes the anti-slop consensus into one ruleset. Powered by Together AI." />
|
||||
<meta name="twitter:image" content="OG-hallmark.png" />
|
||||
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
||||
<link rel="icon" type="image/svg+xml" href="favicon-light.svg" media="(prefers-color-scheme: light)" />
|
||||
<link rel="icon" type="image/svg+xml" href="favicon-dark.svg" media="(prefers-color-scheme: dark)" />
|
||||
<link rel="icon" type="image/svg+xml" href="favicon-light.svg" />
|
||||
|
||||
<!-- Google Fonts — Anton, Albert Sans, Fraunces, Geist, Geist Mono, Hanken Grotesk, Inter, Inter Tight, Newsreader, Playfair Display, Public Sans. -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700;800&family=Anton&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Hanken+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Inter+Tight:ital,wght@0,500;0,600;0,700;0,800;1,500;1,600;1,700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&family=Playfair+Display:ital,wght@1,400;1,500;1,600&family=Public+Sans:wght@400;500;600;700&display=swap" />
|
||||
href="https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700;800&family=Anton&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,900;1,9..144,400;1,9..144,500&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Hanken+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Inter+Tight:ital,wght@0,500;0,600;0,700;0,800;1,500;1,600;1,700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&family=Playfair+Display:ital,wght@1,400;1,500;1,600&family=Public+Sans:wght@400;500;600;700&display=swap" />
|
||||
|
||||
<link rel="stylesheet" href="css/tokens.css" />
|
||||
<link rel="stylesheet" href="css/base.css" />
|
||||
@@ -43,7 +52,7 @@
|
||||
<!-- BANNER — sticky top, thin, holds the theme picker -->
|
||||
<header class="banner" role="banner">
|
||||
<a class="banner__mark" href="#top" aria-label="Hallmark — top of page">
|
||||
<span class="banner__name">Hallmark</span>
|
||||
<span class="brand-mark" aria-hidden="true"><span class="brand-mark__slash">/</span><span class="brand-mark__name">hallmark</span></span>
|
||||
<span class="banner__ver tnum">v1.0</span>
|
||||
</a>
|
||||
|
||||
@@ -184,7 +193,7 @@
|
||||
|
||||
<p class="examples__intro">One-shotted. No shared theme. No shared layout.</p>
|
||||
|
||||
<div class="examples-rail" role="list" aria-label="Eight example landing pages">
|
||||
<div class="examples-rail" role="list" aria-label="Example landing pages">
|
||||
|
||||
<div class="ex-card" role="listitem">
|
||||
<div class="ex-card__thumb ex-card__thumb--video" aria-hidden="true">
|
||||
@@ -214,13 +223,6 @@
|
||||
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a creative studio with playful motion</p>
|
||||
</div>
|
||||
|
||||
<div class="ex-card" role="listitem">
|
||||
<picture class="ex-card__thumb" aria-hidden="true">
|
||||
<img src="_tests/_thumbs/05-tracejam.png" alt="" loading="lazy" decoding="async" width="1024" height="640" />
|
||||
</picture>
|
||||
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build an observability dashboard, dark</p>
|
||||
</div>
|
||||
|
||||
<div class="ex-card" role="listitem">
|
||||
<div class="ex-card__thumb ex-card__thumb--video" aria-hidden="true">
|
||||
<video data-hover-play src="_tests/_thumbs/anya-loop.mp4" autoplay loop muted playsinline preload="metadata" width="1784" height="1080"></video>
|
||||
@@ -242,6 +244,13 @@
|
||||
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a small ceramics studio site</p>
|
||||
</div>
|
||||
|
||||
<div class="ex-card" role="listitem">
|
||||
<div class="ex-card__thumb ex-card__thumb--video" aria-hidden="true">
|
||||
<video data-hover-play src="_tests/_thumbs/Hyperlane-example.mp4" autoplay loop muted playsinline preload="metadata" width="1784" height="1080"></video>
|
||||
</div>
|
||||
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a developer infrastructure landing page</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@@ -941,7 +950,7 @@
|
||||
<div class="foot foot--colophon">
|
||||
|
||||
<div class="foot__masthead">
|
||||
<span class="foot__wordmark">Hallmark</span>
|
||||
<span class="foot__wordmark" aria-label="Hallmark"><span class="brand-mark brand-mark--lg" aria-hidden="true"><span class="brand-mark__slash">/</span><span class="brand-mark__name">hallmark</span></span></span>
|
||||
<span class="foot__version tnum">v1.0 · MMXXVI</span>
|
||||
</div>
|
||||
|
||||
|
||||
+4
-2
@@ -779,8 +779,8 @@ function applyTheme(theme) {
|
||||
if (!THEMES[theme]) return;
|
||||
const apply = () => {
|
||||
root.dataset.theme = theme;
|
||||
setPressed(theme);
|
||||
swapArchetypes(theme);
|
||||
setPressed(theme);
|
||||
try { localStorage.setItem(STORAGE_KEY, theme); } catch (e) { }
|
||||
};
|
||||
if (!reduced && document.startViewTransition) {
|
||||
@@ -801,9 +801,11 @@ const initial = THEMES[queried] ? queried
|
||||
: (root.dataset.theme || "specimen");
|
||||
|
||||
// First paint — populate slots without a transition (no flash).
|
||||
// Run swapArchetypes BEFORE setPressed so the footer template is materialised
|
||||
// before setPressed writes the current-theme name into it.
|
||||
root.dataset.theme = initial;
|
||||
setPressed(initial);
|
||||
swapArchetypes(initial);
|
||||
setPressed(initial);
|
||||
try { localStorage.setItem(STORAGE_KEY, initial); } catch (e) { }
|
||||
|
||||
dots.forEach((btn) => {
|
||||
|
||||
Reference in New Issue
Block a user