Skip to content

docs(landing): use OpenDyslexic on prominent display text #131

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
youtalk merged 2 commits into from
Apr 27, 2026
Merged

docs(landing): use OpenDyslexic on prominent display text #131

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dff4776
docs(landing): use OpenDyslexic on prominent display elements
youtalk Apr 27, 2026
316968e
docs(landing): drop Fraunces variation axes from OpenDyslexic headings
youtalk Apr 27, 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
105 changes: 61 additions & 44 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@
<meta name="twitter:site" content="@y_kondoh">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.cdnfonts.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.cdnfonts.com/css/opendyslexic" rel="stylesheet">
<style>
:root{
--ink:#14110d;
Expand All @@ -36,6 +38,11 @@
--haze:#a89880;
--max:1320px;
--gutter:32px;
/* Dyslexia-friendly display stack used on the page's most prominent
reading: wordmark, section headlines, tagline, pull quote, big stats,
footer brand, memo numerals, sub-row substitutions. The product is for
dyslexic readers — the page should walk that talk where it counts. */
--dyslexic:"OpenDyslexic","OpenDyslexic Regular","Comic Sans MS",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
Expand Down Expand Up @@ -106,9 +113,9 @@
}
nav.top .brand{
display:flex;align-items:baseline;gap:14px;
font-family:"Fraunces",serif;
font-variation-settings:"opsz" 144,"wght" 700,"SOFT" 50;
font-size:26px;letter-spacing:-.02em;
font-family:var(--dyslexic);
font-weight:700;
font-size:22px;letter-spacing:-.01em;
}
nav.top .brand .dot{
width:9px;height:9px;border-radius:50%;background:var(--vermilion);
Expand Down Expand Up @@ -161,7 +168,15 @@
letter-spacing:-.022em;
line-height:1.04;
}
h2{font-size:clamp(36px,5vw,68px);font-variation-settings:"opsz" 96,"wght" 600,"SOFT" 30;letter-spacing:-.02em;line-height:1.05;margin-bottom:24px}
h2{
font-family:var(--dyslexic);
Copy link

Copilot AI Apr 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

h2 switches to var(--dyslexic) but still inherits the font-variation-settings declared on the shared h1,h2,h3,h4 rule above. Since OpenDyslexic isn’t a variable font, consider explicitly resetting font-variation-settings (e.g., to normal) for h2 (and similarly for h1.wordmark) or refactor the shared heading rule to avoid applying Fraunces-only settings to OpenDyslexic headings.

Suggested change
font-family:var(--dyslexic);
font-family:var(--dyslexic);
font-variation-settings:normal;

Copilot uses AI. Check for mistakes.
font-variation-settings:normal;
font-weight:700;
font-size:clamp(30px,4.2vw,56px);
letter-spacing:-.01em;line-height:1.12;
margin-bottom:24px;
}
h2 em{font-style:italic;font-weight:400;font-variation-settings:normal}
h3{font-size:clamp(22px,2.4vw,30px);font-variation-settings:"opsz" 36,"wght" 600,"SOFT" 30;line-height:1.15;margin-bottom:12px}
h4{font-size:18px;font-variation-settings:"opsz" 14,"wght" 700,"SOFT" 30;letter-spacing:0;line-height:1.2}
p{margin:0 0 16px}
Expand All @@ -187,31 +202,33 @@
.hero-folio .meta b{color:var(--ink);font-weight:700}

h1.wordmark{
font-family:"Fraunces",serif;
font-variation-settings:"opsz" 144,"wght" 800,"SOFT" 100,"WONK" 1;
font-size:clamp(96px,18vw,260px);
line-height:.86;
letter-spacing:-.045em;
margin:0 0 28px -8px;
font-family:var(--dyslexic);
font-variation-settings:normal;
font-weight:700;
font-size:clamp(80px,14vw,200px);
line-height:.92;
letter-spacing:-.025em;
margin:0 0 28px -4px;
color:var(--ink);
}
h1.wordmark em{
font-style:normal;color:var(--vermilion);
font-variation-settings:"opsz" 144,"wght" 600,"SOFT" 100,"WONK" 1;
font-weight:400;
font-variation-settings:normal;
}
h1.wordmark .period{color:var(--vermilion)}

.tagline{
font-family:"Fraunces",serif;
font-variation-settings:"opsz" 60,"wght" 400,"SOFT" 80;
font-size:clamp(22px,2.6vw,32px);
line-height:1.25;
letter-spacing:-.01em;
font-family:var(--dyslexic);
font-weight:400;
font-size:clamp(18px,2.1vw,26px);
line-height:1.4;
letter-spacing:0;
color:var(--ink-soft);
max-width:24ch;
max-width:28ch;
margin-bottom:28px;
}
.tagline em{font-style:italic;color:var(--vermilion);font-variation-settings:"opsz" 60,"wght" 500,"SOFT" 100}
.tagline em{font-style:italic;color:var(--vermilion);font-weight:700}

.hero-subline{
font-size:16px;color:var(--muted);
Expand Down Expand Up @@ -389,11 +406,11 @@
margin:32px 0;
padding:28px 0 28px 28px;
border-left:3px solid var(--vermilion);
font-family:"Fraunces",serif;
font-variation-settings:"opsz" 60,"wght" 500,"SOFT" 100;
font-size:28px;line-height:1.3;color:var(--ink);
font-family:var(--dyslexic);
font-weight:400;
font-size:23px;line-height:1.45;color:var(--ink);
font-style:italic;
max-width:30ch;
max-width:32ch;
}
.pull-quote::before{
content:"“";display:block;
Expand Down Expand Up @@ -483,7 +500,7 @@
.l1-section .folio::before{background:var(--mora-orange)}
.l1-section .folio .num{color:var(--mora-orange)}
.l1-section h2{color:var(--paper);max-width:18ch}
.l1-section h2 em{font-style:italic;color:var(--mora-orange);font-variation-settings:"opsz" 96,"wght" 600,"SOFT" 100}
.l1-section h2 em{font-style:italic;color:var(--mora-orange);font-weight:400}
.l1-section p.lede{color:var(--washi)}

.subs-grid{
Expand All @@ -497,9 +514,9 @@
gap:18px;align-items:center;
padding:22px 0;
border-top:1px solid rgba(251,243,227,.16);
font-family:"Fraunces",serif;
font-variation-settings:"opsz" 96,"wght" 500,"SOFT" 80;
font-size:38px;
font-family:var(--dyslexic);
font-weight:700;
font-size:30px;
transition:padding-left .3s;
}
.sub-row:hover{padding-left:14px}
Expand Down Expand Up @@ -547,17 +564,17 @@
.stat:last-child{border-right:none}
.stat:hover{background:var(--washi)}
.stat .big{
font-family:"Fraunces",serif;
font-variation-settings:"opsz" 144,"wght" 700,"SOFT" 50,"WONK" 1;
font-size:clamp(48px,6vw,84px);
line-height:1;
letter-spacing:-.04em;
font-family:var(--dyslexic);
font-weight:700;
font-size:clamp(42px,5vw,72px);
line-height:1.05;
letter-spacing:-.02em;
color:var(--ink);
margin-bottom:10px;
display:block;
}
.stat .big sup{
font-size:.4em;font-variation-settings:"opsz" 48,"wght" 600,"SOFT" 50;
font-size:.4em;
color:var(--vermilion);vertical-align:top;margin-left:2px;
font-weight:700;
}
Expand All @@ -581,12 +598,12 @@
}
.memo:hover{transform:translateY(-4px);box-shadow:0 16px 36px -18px rgba(20,17,13,.3)}
.memo .num{
font-family:"Fraunces",serif;
font-variation-settings:"opsz" 144,"wght" 800,"SOFT" 80;
font-size:88px;line-height:.85;
font-family:var(--dyslexic);
font-weight:700;
font-size:64px;line-height:.95;
color:var(--vermilion);
margin:-8px 0 8px -2px;
letter-spacing:-.04em;
margin:-4px 0 8px -2px;
letter-spacing:-.02em;
}
.memo h4{font-size:22px;margin-bottom:14px;font-variation-settings:"opsz" 36,"wght" 700,"SOFT" 30}
.memo p{font-size:15px;line-height:1.6;color:var(--ink-soft)}
Expand Down Expand Up @@ -692,9 +709,9 @@
}
footer .inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;align-items:start}
footer .brand-large{
font-family:"Fraunces",serif;
font-variation-settings:"opsz" 144,"wght" 800,"SOFT" 100,"WONK" 1;
font-size:96px;line-height:.85;letter-spacing:-.04em;
font-family:var(--dyslexic);
font-weight:700;
font-size:76px;line-height:.95;letter-spacing:-.02em;
color:var(--paper);margin:0 0 18px;
}
footer .brand-large em{color:var(--mora-orange);font-style:normal}
Expand Down Expand Up @@ -950,7 +967,7 @@ <h2>One iPad. Five days. The whole loop.</h2>
<!-- ============== 03 · WHAT IT DOES ============== -->
<section id="what">
<div class="folio"><span class="num">03</span> What It Does</div>
<h2>Four pieces. <em style="color:var(--vermilion);font-style:italic;font-variation-settings:'opsz' 96,'wght' 600,'SOFT' 100">One daily quest.</em></h2>
<h2>Four pieces. <em style="color:var(--vermilion)">One daily quest.</em></h2>
<p class="lede">Each day is a short A-Day session: warmup → decode → sentences → summary. The yokai shell turns it into a quest the kid wants to come back to, instead of a drill he has to be coaxed into.</p>

<div class="pillars">
Expand Down Expand Up @@ -1028,7 +1045,7 @@ <h4>Why protocol-first matters</h4>
<!-- ============== 05 · THE NUMBERS ============== -->
<section>
<div class="folio"><span class="num">05</span> The Numbers</div>
<h2>Five days. <em style="color:var(--vermilion);font-style:italic;font-variation-settings:'opsz' 96,'wght' 600,'SOFT' 100">A working app.</em></h2>
<h2>Five days. <em style="color:var(--vermilion)">A working app.</em></h2>
<p class="lede">Hackathon constraints met head-on. Every number measured, not estimated.</p>

<div class="stats">
Expand Down Expand Up @@ -1064,7 +1081,7 @@ <h2>Five days. <em style="color:var(--vermilion);font-style:italic;font-variatio
<!-- ============== 06 · BUILT WITH OPUS 4.7 ============== -->
<section id="how">
<div class="folio"><span class="num">06</span> Built with Opus 4.7</div>
<h2>The model isn’t a coworker. <em style="color:var(--vermilion);font-style:italic;font-variation-settings:'opsz' 96,'wght' 600,'SOFT' 100">It’s a workshop.</em></h2>
<h2>The model isn’t a coworker. <em style="color:var(--vermilion)">It’s a workshop.</em></h2>
<p class="lede">I’m not a Swift engineer by trade. Three Claude Code workflow patterns let one person ship a real iPad app in five days.</p>

<div class="workflow">
Expand Down Expand Up @@ -1108,7 +1125,7 @@ <h4>OSLog → Claude’s context, live.</h4>
<!-- ============== 07 · ARCHITECTURE ============== -->
<section class="arch-section">
<div class="folio"><span class="num">07</span> Architecture</div>
<h2>Five Swift packages. <em style="color:var(--vermilion);font-style:italic;font-variation-settings:'opsz' 96,'wght' 600,'SOFT' 100">One way down.</em></h2>
<h2>Five Swift packages. <em style="color:var(--vermilion)">One way down.</em></h2>
<p class="lede">A thin iOS app target wires SwiftData and presents <code>RootView</code>. All real logic lives in five local SPM packages with strictly one-way dependencies — the kind of layering that lets a single author keep moving without untangling cycles every other day.</p>

<div class="arch-grid">
Expand Down
Loading