Skip to content

feat(site): proportional type scale and copy pass across marketing pages #102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
siracusa5 merged 2 commits into from
Aug 7, 2026
Merged

feat(site): proportional type scale and copy pass across marketing pages #102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a13ae8e
feat(site): proportional type scale and copy pass across marketing pages
siracusa5 Aug 7, 2026
3a169b7
fix(site): address adversarial review findings on PR #102
siracusa5 Aug 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions apps/site/src/components/PackProductPage.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,20 +270,20 @@ const {
.status i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--pack-accent); }
h1, h2, h3, p { letter-spacing: 0; }
h1 {
max-width: 15ch;
max-width: 16ch;
margin: 0;
font-size: clamp(2.4rem, 4.4vw, 4.35rem);
line-height: 0.98;
letter-spacing: -0.035em;
font-size: clamp(2.2rem, 3.6vw, 3.6rem);
line-height: 1.08;
letter-spacing: -0.03em;
text-wrap: balance;
}
.promise {
max-width: 28ch;
margin: 1.1rem 0 0;
color: var(--cc-text);
font-size: clamp(1.2rem, 1.8vw, 1.55rem);
font-size: clamp(1.1rem, 1.5vw, 1.35rem);
font-weight: 600;
line-height: 1.35;
line-height: 1.4;
text-wrap: balance;
}
.lede { max-width: 62ch; margin: 0.8rem 0 0; color: var(--cc-text-body); font-size: 1.03rem; line-height: 1.65; }
Expand Down Expand Up @@ -396,7 +396,7 @@ const {
@media (max-width: 640px) {
.pack-product { padding-inline: 1rem; }
.product-hero { padding-top: 1.25rem; }
h1 { font-size: 2.45rem; }
h1 { font-size: clamp(1.8rem, 5.5vw, 2.2rem); }
.value-list, .workflow-list { grid-template-columns: 1fr; }
.workflow-list li + li { padding-left: 0; border-left: 0; }
.product-nav { margin-inline: -1rem; overflow-x: auto; padding-inline: 1rem; }
Expand Down
4 changes: 2 additions & 2 deletions apps/site/src/pages/404.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import Base from '../layouts/Base.astro';
>
<main class="notfound">
<p class="code">404</p>
<h1>This page does not exist.</h1>
<h1>No layer has an answer for this page.</h1>
<p class="lede">
The address may be wrong, or the page may have moved. Try one of these instead:
</p>
Expand All @@ -31,7 +31,7 @@ import Base from '../layouts/Base.astro';
}
.code {
font-family: var(--cc-font-mono);
font-size: clamp(3rem, 12vw, 6rem);
font-size: clamp(2.5rem, 9vw, 5rem);
font-weight: 700;
line-height: 1;
margin: 0;
Expand Down
22 changes: 11 additions & 11 deletions apps/site/src/pages/creators.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,22 +33,22 @@ const reviewSteps = [
</section>

<section class="creator-thesis" aria-labelledby="thesis-title">
<p class="eyebrow">What you are selling</p>
<p class="eyebrow">What you’re selling</p>
<h2 id="thesis-title">A useful Pack solves one repeatable job.</h2>
<div class="thesis-columns">
<p>Do not try to fit an entire profession into one Pack. Start with a job people repeat: what they need to clarify, which rules apply, what a good result contains, and how they check it.</p>
<p>Don’t try to fit an entire profession into one Pack. Start with a job people repeat: what they need to clarify, which rules apply, what a good result contains, and how they check it.</p>
<p>Buyers can inspect the files, install them across tools, and keep their own organization-specific rules in a separate local layer that survives your updates.</p>
</div>
</section>

<section class="review-flow" aria-labelledby="review-title">
<div class="section-heading"><p class="eyebrow">Review process</p><h2 id="review-title">We review every Pack before it is listed.</h2></div>
<div class="section-heading"><p class="eyebrow">Review process</p><h2 id="review-title">We review every Pack before it’s listed.</h2></div>
<ol>{reviewSteps.map(([number, title, body]) => <li><span>{number}</span><div><h3>{title}</h3><p>{body}</p></div></li>)}</ol>
</section>

<section class="creator-economics" aria-labelledby="economics-title">
<div class="section-heading split">
<div><p class="eyebrow">Pricing</p><h2 id="economics-title">Choose the scope. We will agree on a price.</h2></div>
<div><p class="eyebrow">Pricing</p><h2 id="economics-title">Choose the scope. We’ll agree on a price.</h2></div>
<p>Publishing is free. Buyers purchase a perpetual base Pack; you may also offer optional editorial updates when the subject genuinely changes.</p>
</div>
<div class="economics-table">
Expand All @@ -69,7 +69,7 @@ const reviewSteps = [
</section>

<section class="apply" aria-labelledby="apply-title">
<p class="eyebrow">Start with one workflow</p>
<p class="eyebrow">Apply</p>
<h2 id="apply-title">Start with the workflow people already ask you about.</h2>
<p>Tell us who does the work, what they repeat, which materials you own, and how the Pack would save them time.</p>
<a class="button primary" href={applicationHref}>Apply as a founding creator</a>
Expand All @@ -82,21 +82,21 @@ const reviewSteps = [
.eyebrow { margin: 0 0 1rem; color: var(--cc-text-muted); font-family: var(--cc-font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
h1, h2, h3, p { letter-spacing: 0; }
.creator-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.55fr); gap: clamp(2.5rem, 5vw, 5.5rem); align-items: end; min-height: 33rem; padding: clamp(3.5rem, 6vw, 5.5rem) 0; border-bottom: 1px solid var(--cc-border-strong); }
h1 { max-width: 16ch; margin: 0; color: var(--cc-text); font-size: clamp(2.8rem, 4.8vw, 5.25rem); line-height: 0.96; letter-spacing: -0.05em; }
.lede { max-width: 48rem; margin: 1.5rem 0 0; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.5; }
h1 { max-width: 17ch; margin: 0; color: var(--cc-text); font-size: clamp(2.3rem, 3.6vw, 4.1rem); line-height: 1.05; letter-spacing: -0.03em; }
.lede { max-width: 48rem; margin: 1.5rem 0 0; font-size: clamp(1.05rem, 1.2vw, 1.25rem); line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.15rem; border: 1px solid var(--cc-border-strong); color: var(--cc-text); font-weight: 700; text-decoration: none; transition: background var(--cc-transition), color var(--cc-transition), border-color var(--cc-transition); }
.button.primary { border-color: var(--cc-text); background: var(--cc-text); color: var(--cc-surface-solid); }
.button.primary:hover { background: var(--cc-text-body); }
.button:not(.primary):hover { background: var(--cc-surface-soft); }
.founding-share { padding: 1.5rem 0 0 1.5rem; border-top: 0.4rem solid var(--cc-layer-personal); border-left: 1px solid var(--cc-border); }
.founding-share p { margin: 0; color: var(--cc-text-muted); font-family: var(--cc-font-mono); font-size: 0.72rem; text-transform: uppercase; }
.founding-share strong { display: block; margin-top: 0.6rem; color: var(--cc-text); font-size: clamp(3.75rem, 6vw, 6rem); line-height: 0.9; letter-spacing: -0.07em; }
.founding-share strong { display: block; margin-top: 0.6rem; color: var(--cc-text); font-size: clamp(3rem, 4.6vw, 4.75rem); line-height: 0.95; letter-spacing: -0.03em; }
.founding-share span, .founding-share small { display: block; }
.founding-share span { margin-top: 1rem; color: var(--cc-text); font-size: 1.2rem; line-height: 1.3; }
.founding-share small { margin-top: 1.5rem; color: var(--cc-text-muted); line-height: 1.5; }
.creator-thesis { padding: 7rem 0; }
.creator-thesis h2, .section-heading h2, .apply h2 { max-width: 19ch; margin: 0; color: var(--cc-text); font-size: clamp(2rem, 3.2vw, 3.75rem); line-height: 1; letter-spacing: -0.04em; }
.creator-thesis h2, .section-heading h2, .apply h2 { max-width: 19ch; margin: 0; color: var(--cc-text); font-size: clamp(1.8rem, 2.6vw, 2.9rem); line-height: 1.1; letter-spacing: -0.03em; }
.thesis-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin: 3rem 0 0 25%; }
.thesis-columns p { margin: 0; font-size: 1.08rem; line-height: 1.7; }
.review-flow, .creator-economics, .trust-boundary { padding: 6rem 0; border-top: 1px solid var(--cc-border-strong); }
Expand All @@ -120,7 +120,7 @@ const reviewSteps = [
.payout-note strong { color: var(--cc-text); }
.payout-note p { margin: 0; }
.trust-boundary { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 4rem; }
.trust-boundary h2 { max-width: 12ch; margin: 0; color: var(--cc-text); font-size: clamp(2.2rem, 4vw, 4.2rem); line-height: 0.95; }
.trust-boundary h2 { max-width: 12ch; margin: 0; color: var(--cc-text); font-size: clamp(1.9rem, 3.2vw, 3.2rem); line-height: 1.08; letter-spacing: -0.02em; }
.trust-list { border-top: 1px solid var(--cc-border-strong); }
.trust-list p { display: grid; grid-template-columns: 11rem 1fr; gap: 1.5rem; margin: 0; padding: 1.25rem 0; border-bottom: 1px solid var(--cc-border-strong); }
.trust-list strong { color: var(--cc-text); }
Expand All @@ -131,5 +131,5 @@ const reviewSteps = [
.apply > p:not(.eyebrow) { max-width: 54rem; margin: 1.5rem 0 2rem; font-size: 1.1rem; line-height: 1.65; }
.apply .button.primary { border-color: var(--cc-inverse-cta); background: var(--cc-inverse-cta); color: var(--cc-inverse-on-cta); }
@media (max-width: 820px) { .creator-hero, .section-heading.split, .trust-boundary { grid-template-columns: 1fr; } .thesis-columns { margin-left: 0; } }
@media (max-width: 620px) { .creator-hero { min-height: auto; padding-block: 3rem; } h1 { font-size: clamp(2.55rem, 10.5vw, 3.65rem); } .thesis-columns { grid-template-columns: 1fr; gap: 1.5rem; } .table-head, .table-row { grid-template-columns: minmax(0, 1fr) 5rem 5rem; font-size: 0.9rem; } .payout-note, .trust-list p { grid-template-columns: 1fr; gap: 0.5rem; } }
@media (max-width: 620px) { .creator-hero { min-height: auto; padding-block: 3rem; } h1 { font-size: clamp(2rem, 9vw, 2.6rem); } .thesis-columns { grid-template-columns: 1fr; gap: 1.5rem; } .table-head, .table-row { grid-template-columns: minmax(0, 1fr) 5rem 5rem; font-size: 0.9rem; } .payout-note, .trust-list p { grid-template-columns: 1fr; gap: 0.5rem; } }
</style>
20 changes: 10 additions & 10 deletions apps/site/src/pages/demo.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const narrativePoints = [
},
{
title: 'The other answer stays visible',
body: 'An override does not erase the value it replaced.',
body: 'An override doesn’t erase the value it replaced.',
},
{
title: 'One place to inspect both',
Expand Down Expand Up @@ -45,8 +45,8 @@ const narrativePoints = [
<p class="scenario-label">What to look for</p>
<h2>Company, team, and personal layers.</h2>
<p>
Company policy, team practice, and local judgment resolve section by section. Source
and dissent stay in view.
The same question can get a different answer at each layer. The resolver picks per
section and shows its work.
</p>
</aside>
</section>
Expand Down Expand Up @@ -272,9 +272,9 @@ const narrativePoints = [
margin: 0;
}
h1 {
max-width: 12ch;
font-size: clamp(2.6rem, 5vw, 4.5rem);
line-height: 0.96;
max-width: 13ch;
font-size: clamp(2.1rem, 3.6vw, 3.5rem);
line-height: 1.08;
}
.lede,
.scenario p,
Expand Down Expand Up @@ -342,8 +342,8 @@ const narrativePoints = [
padding: 1.3rem;
}
.scenario h2 {
font-size: clamp(1.55rem, 3vw, 2.15rem);
line-height: 1.02;
font-size: clamp(1.4rem, 2.2vw, 1.85rem);
line-height: 1.15;
margin-bottom: 0.9rem;
}
.scenario p {
Expand Down Expand Up @@ -568,8 +568,8 @@ const narrativePoints = [
}

.signals h2 {
font-size: clamp(2rem, 4vw, 3rem);
line-height: 0.98;
font-size: clamp(1.8rem, 3vw, 2.6rem);
line-height: 1.1;
max-width: 14ch;
margin-bottom: 1.5rem;
}
Expand Down
81 changes: 41 additions & 40 deletions apps/site/src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const principles = [
{
number: '02',
title: 'Missing sections fall back to the next layer.',
body: 'If your personal layer says nothing about ownership, ContextCake uses the team or company answer. You do not have to copy everything into one file.',
body: 'If your personal layer says nothing about ownership, ContextCake uses the team or company answer. You don’t have to copy everything into one file.',
layer: 'team',
},
{
Expand Down Expand Up @@ -120,8 +120,9 @@ const mcpTools = ['search', 'read_file', 'list_concepts', 'get_links', 'find_cap
<p class="eyebrow"><span>ContextCake</span> · local context and installable Packs</p>
<h1 id="hero-title">Keep your working knowledge <em>where your AI tools can use it.</em></h1>
<p class="hero-lede">
Store company guidance, team practices, and your own notes in readable local files.
ContextCake resolves those layers into answers for ChatGPT, Claude, Cursor, and other tools.
Your company’s guidance, your team’s practices, and your own notes live in plain
local files. ContextCake resolves those layers into one answer for ChatGPT, Claude,
Cursor, and other tools.
</p>
<div class="hero-actions" aria-label="Get started">
<a class="button button--primary button--download" href={appDownloadUrl} download>
Expand Down Expand Up @@ -189,7 +190,7 @@ const mcpTools = ['search', 'read_file', 'list_concepts', 'get_links', 'find_cap
<p class="section-number">01 / The idea</p>
<h2 id="thesis-title">Different rules belong to different people.</h2>
<p>
Company policy, team practice, and personal judgment do not always match. ContextCake
Company policy, team practice, and personal judgment don’t always match. ContextCake
keeps them in separate layers and resolves the answer section by section.
</p>
</section>
Expand Down Expand Up @@ -383,12 +384,12 @@ const mcpTools = ['search', 'read_file', 'list_concepts', 'get_links', 'find_cap
min-width: 0;
}
.hero h1 {
max-width: 14ch;
margin-bottom: 1.6rem;
font-size: clamp(2.9rem, 4.4vw, 5.2rem);
max-width: 15ch;
margin-bottom: 1.5rem;
font-size: clamp(2.4rem, 3.5vw, 4.1rem);
font-weight: 600;
letter-spacing: -0.05em;
line-height: 0.96;
letter-spacing: -0.03em;
line-height: 1.05;
text-wrap: balance;
}
.hero h1 em {
Expand All @@ -399,8 +400,8 @@ const mcpTools = ['search', 'read_file', 'list_concepts', 'get_links', 'find_cap
.hero-lede {
max-width: 38rem;
margin-bottom: 1.75rem;
font-size: clamp(1.05rem, 1.45vw, 1.3rem);
line-height: 1.55;
font-size: clamp(1rem, 1.1vw, 1.15rem);
line-height: 1.6;
}
.hero-actions,
.product-links,
Expand Down Expand Up @@ -481,12 +482,12 @@ const mcpTools = ['search', 'read_file', 'list_concepts', 'get_links', 'find_cap
color: var(--cc-layer-team);
}
.thesis h2 {
max-width: 15ch;
margin-bottom: 2rem;
font-size: clamp(3rem, 6.4vw, 7rem);
max-width: 16ch;
margin-bottom: 1.75rem;
font-size: clamp(2.4rem, 4.2vw, 4.5rem);
font-weight: 500;
letter-spacing: -0.055em;
line-height: 0.96;
letter-spacing: -0.035em;
line-height: 1.05;
color: var(--cc-paper);
}
:global(body.theme-paper) .thesis h2 {
Expand All @@ -495,8 +496,8 @@ const mcpTools = ['search', 'read_file', 'list_concepts', 'get_links', 'find_cap
.thesis > p:last-child {
max-width: 41rem;
margin: 0 0 0 auto;
font-size: clamp(1.15rem, 1.8vw, 1.5rem);
line-height: 1.55;
font-size: clamp(1.05rem, 1.3vw, 1.25rem);
line-height: 1.6;
color: rgba(255, 253, 246, 0.78);
}

Expand All @@ -509,11 +510,11 @@ const mcpTools = ['search', 'read_file', 'list_concepts', 'get_links', 'find_cap
padding-bottom: clamp(5rem, 10vw, 9rem);
}
.section-heading h2 {
max-width: 12ch;
font-size: clamp(2.6rem, 4.5vw, 5rem);
max-width: 13ch;
font-size: clamp(1.9rem, 3vw, 3.25rem);
font-weight: 500;
letter-spacing: -0.05em;
line-height: 0.98;
letter-spacing: -0.03em;
line-height: 1.08;
}
.principles {
list-style: none;
Expand All @@ -540,8 +541,8 @@ const mcpTools = ['search', 'read_file', 'list_concepts', 'get_links', 'find_cap
}
.principle-copy h3 {
margin-bottom: 0.5rem;
font-size: clamp(1.25rem, 2vw, 1.75rem);
line-height: 1.15;
font-size: clamp(1.15rem, 1.4vw, 1.4rem);
line-height: 1.25;
}
.principle-copy p {
max-width: 38rem;
Expand Down Expand Up @@ -582,11 +583,11 @@ const mcpTools = ['search', 'read_file', 'list_concepts', 'get_links', 'find_cap
color: var(--cc-layer-personal);
}
.product-copy h2 {
max-width: 12ch;
font-size: clamp(2.8rem, 5vw, 5.5rem);
max-width: 13ch;
font-size: clamp(2rem, 3.4vw, 3.5rem);
font-weight: 500;
letter-spacing: -0.055em;
line-height: 0.98;
letter-spacing: -0.03em;
line-height: 1.08;
color: var(--cc-text);
}
:global(body.theme-paper) .product-copy h2 {
Expand All @@ -595,7 +596,7 @@ const mcpTools = ['search', 'read_file', 'list_concepts', 'get_links', 'find_cap
.product-detail > p {
max-width: 34rem;
margin-bottom: 1.75rem;
font-size: 1.05rem;
font-size: 1rem;
line-height: 1.65;
}
.button--light {
Expand Down Expand Up @@ -633,17 +634,17 @@ const mcpTools = ['search', 'read_file', 'list_concepts', 'get_links', 'find_cap
padding-bottom: clamp(5rem, 9vw, 9rem);
}
.packs-stage h2 {
max-width: 14ch;
max-width: 15ch;
margin-bottom: 0;
font-size: clamp(2.8rem, 5vw, 5.4rem);
font-size: clamp(2rem, 3.4vw, 3.5rem);
font-weight: 500;
letter-spacing: -0.055em;
line-height: 0.96;
letter-spacing: -0.03em;
line-height: 1.08;
}
.packs-stage-detail > p {
max-width: 38rem;
margin-bottom: 2rem;
font-size: 1.08rem;
font-size: 1.02rem;
line-height: 1.7;
color: var(--home-muted);
}
Expand Down Expand Up @@ -898,14 +899,14 @@ const mcpTools = ['search', 'read_file', 'list_concepts', 'get_links', 'find_cap
border-top: 1px solid var(--cc-paper-line);
}
.closing h2 {
font-size: clamp(3.2rem, 5.5vw, 6.2rem);
font-size: clamp(2.25rem, 4vw, 3.75rem);
font-weight: 500;
letter-spacing: -0.06em;
line-height: 0.92;
letter-spacing: -0.03em;
line-height: 1.05;
}
.closing > div:first-child > p:not(.section-number) {
max-width: 37rem;
font-size: 1.05rem;
font-size: 1rem;
line-height: 1.65;
}
.closing-download {
Expand Down Expand Up @@ -991,7 +992,7 @@ const mcpTools = ['search', 'read_file', 'list_concepts', 'get_links', 'find_cap
padding-top: 3rem;
}
.hero h1 {
font-size: clamp(2.6rem, 11vw, 3.7rem);
font-size: clamp(2.1rem, 9vw, 2.75rem);
}
.hero-lede {
font-size: 1rem;
Expand All @@ -1000,7 +1001,7 @@ const mcpTools = ['search', 'read_file', 'list_concepts', 'get_links', 'find_cap
padding-inline: 1.25rem;
}
.thesis h2 {
font-size: clamp(2.8rem, 14vw, 4rem);
font-size: clamp(2rem, 10vw, 2.75rem);
}
.principles li {
grid-template-columns: 2rem 1fr;
Expand Down
Loading