Map font sizes to type scale, share icons, extract shell CSS, validat…

src/app/contrast-test/page.tsx

@@ -12,7 +12,7 @@ export default function ContrastTestPage() {
       <h1
         style={{
           fontFamily: 'var(--font-display)',
-          fontSize: 32,
+          fontSize: 'var(--type-h1)',
           fontWeight: 800,
           color: 'var(--ink)',
           marginBottom: 8,
@@ -23,7 +23,7 @@ export default function ContrastTestPage() {
       <p
         style={{
           fontFamily: 'var(--font-body)',
-          fontSize: 16,
+          fontSize: 'var(--type-body)',
           color: 'var(--ink-60)',
           marginBottom: 32,
         }}
@@ -36,7 +36,7 @@ export default function ContrastTestPage() {
         <h2
           style={{
             fontFamily: 'var(--font-display)',
-            fontSize: 22,
+            fontSize: 'var(--type-h3-sm)',
             fontWeight: 700,
             color: 'var(--ink)',
             marginBottom: 16,
@@ -113,7 +113,7 @@ export default function ContrastTestPage() {
         <h2
           style={{
             fontFamily: 'var(--font-display)',
-            fontSize: 22,
+            fontSize: 'var(--type-h3-sm)',
             fontWeight: 700,
             color: 'var(--ink)',
             marginBottom: 16,
@@ -135,7 +135,7 @@ export default function ContrastTestPage() {
         <h2
           style={{
             fontFamily: 'var(--font-display)',
-            fontSize: 22,
+            fontSize: 'var(--type-h3-sm)',
             fontWeight: 700,
             color: 'var(--ink)',
             marginBottom: 16,
@@ -158,7 +158,7 @@ export default function ContrastTestPage() {
           <div
             style={{
               fontFamily: 'var(--font-data)',
-              fontSize: 14,
+              fontSize: 'var(--type-small)',
               color: 'var(--ink)',
             }}
           >
@@ -168,7 +168,7 @@ export default function ContrastTestPage() {
           <div
             style={{
               fontFamily: 'var(--font-data)',
-              fontSize: 14,
+              fontSize: 'var(--type-small)',
               color: 'var(--ink)',
             }}
           >
@@ -182,7 +182,7 @@ export default function ContrastTestPage() {
         <h2
           style={{
             fontFamily: 'var(--font-display)',
-            fontSize: 22,
+            fontSize: 'var(--type-h3-sm)',
             fontWeight: 700,
             color: 'var(--ink)',
             marginBottom: 16,
@@ -203,14 +203,19 @@ export default function ContrastTestPage() {
           }}
         >
           <p
-            style={{ fontFamily: 'var(--font-body)', fontSize: 16, color: 'var(--ink)', margin: 0 }}
+            style={{
+              fontFamily: 'var(--font-body)',
+              fontSize: 'var(--type-body)',
+              color: 'var(--ink)',
+              margin: 0,
+            }}
           >
             Primary text using --ink (full contrast)
           </p>
           <p
             style={{
               fontFamily: 'var(--font-body)',
-              fontSize: 16,
+              fontSize: 'var(--type-body)',
               color: 'var(--ink-60)',
               margin: 0,
             }}
@@ -220,7 +225,7 @@ export default function ContrastTestPage() {
           <p
             style={{
               fontFamily: 'var(--font-body)',
-              fontSize: 16,
+              fontSize: 'var(--type-body)',
               color: 'var(--ink-40)',
               margin: 0,
             }}
@@ -230,7 +235,7 @@ export default function ContrastTestPage() {
           <p
             style={{
               fontFamily: 'var(--font-data)',
-              fontSize: 13,
+              fontSize: 'var(--type-caption)',
               color: 'var(--ink-40)',
               margin: 0,
             }}
@@ -245,7 +250,7 @@ export default function ContrastTestPage() {
         <h2
           style={{
             fontFamily: 'var(--font-display)',
-            fontSize: 22,
+            fontSize: 'var(--type-h3-sm)',
             fontWeight: 700,
             color: 'var(--ink)',
             marginBottom: 16,
@@ -260,7 +265,7 @@ export default function ContrastTestPage() {
             borderRadius: 'var(--radius-card)',
             padding: 20,
             fontFamily: 'var(--font-body)',
-            fontSize: 14,
+            fontSize: 'var(--type-small)',
             lineHeight: 1.6,
             color: 'var(--ink-60)',
           }}
@@ -313,7 +318,7 @@ export default function ContrastTestPage() {
         <h3
           style={{
             fontFamily: 'var(--font-display)',
-            fontSize: 18,
+            fontSize: 'var(--type-h5)',
             fontWeight: 700,
             color: 'var(--ink)',
             marginTop: 0,
@@ -325,7 +330,7 @@ export default function ContrastTestPage() {
         <ol
           style={{
             fontFamily: 'var(--font-body)',
-            fontSize: 14,
+            fontSize: 'var(--type-small)',
             lineHeight: 1.6,
             color: 'var(--ink-60)',
             margin: 0,

src/app/creator/page.tsx

@@ -67,7 +67,7 @@ function CreatorPageInner() {
         <p
           style={{
             fontFamily: 'var(--font-body)',
-            fontSize: 16.5,
+            fontSize: 'var(--type-body-lg)',
             lineHeight: 1.5,
             color: 'var(--ink-60)',
             margin: 0,

src/app/layout.tsx

@@ -51,7 +51,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
                 color: 'var(--ink)',
                 fontFamily: 'var(--font-body)',
                 fontWeight: 600,
-                fontSize: 14,
+                fontSize: 'var(--type-small)',
                 borderRadius: 'var(--radius-pill)',
                 border: '2px solid var(--solar)',
                 textDecoration: 'none',

src/app/project/[id]/page.tsx

@@ -49,7 +49,7 @@ export default function ProjectDetailPage() {
           style={{
             fontFamily: 'var(--font-display)',
             fontWeight: 800,
-            fontSize: 24,
+            fontSize: 'var(--type-h3)',
             color: 'var(--ink)',
             margin: 0,
           }}
@@ -59,7 +59,7 @@ export default function ProjectDetailPage() {
         <p
           style={{
             fontFamily: 'var(--font-body)',
-            fontSize: 15,
+            fontSize: 'var(--type-data)',
             color: 'var(--ink-60)',
             margin: 0,
           }}

src/components/AddressChip.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useState, type CSSProperties } from 'react'
+import { CheckIcon, CopyIcon, ExternalIcon } from './icons'
 import { useTranslations } from 'next-intl'
 
 /**
@@ -61,7 +62,7 @@ export function AddressChip({
         title={value}
         style={{
           fontFamily: 'var(--font-data)',
-          fontSize: 13,
+          fontSize: 'var(--type-caption)',
           color: 'var(--ink)',
           letterSpacing: '0.01em',
         }}
@@ -74,7 +75,7 @@ export function AddressChip({
         onClick={copy}
         style={iconBtn}
       >
-        {copied ? <CheckIcon /> : <CopyIcon />}
+        {copied ? <CheckIcon style={{ color: 'var(--growth)' }} /> : <CopyIcon />}
       </button>
       {explorerUrl && (
         <a
@@ -104,36 +105,3 @@ const iconBtn: CSSProperties = {
   color: 'var(--ink-60)',
   textDecoration: 'none',
 }
-
-const ico: CSSProperties = {
-  width: 15,
-  height: 15,
-  fill: 'none',
-  stroke: 'currentColor',
-  strokeWidth: 1.5,
-  strokeLinecap: 'round',
-  strokeLinejoin: 'round',
-}
-
-function CopyIcon() {
-  return (
-    <svg viewBox="0 0 24 24" style={ico} aria-hidden="true">
-      <rect x="9" y="9" width="11" height="11" rx="2" />
-      <path d="M5 15V5a2 2 0 0 1 2-2h10" />
-    </svg>
-  )
-}
-function CheckIcon() {
-  return (
-    <svg viewBox="0 0 24 24" style={{ ...ico, stroke: 'var(--growth)' }} aria-hidden="true">
-      <path d="M20 6 9 17l-5-5" />
-    </svg>
-  )
-}
-function ExternalIcon() {
-  return (
-    <svg viewBox="0 0 24 24" style={ico} aria-hidden="true">
-      <path d="M7 17 17 7M9 7h8v8" />
-    </svg>
-  )
-}

src/components/AmountInput.tsx

@@ -65,15 +65,21 @@ export function AmountInput({
           htmlFor={id}
           style={{
             fontFamily: 'var(--font-body)',
-            fontSize: 13.5,
+            fontSize: 'var(--type-small)',
             fontWeight: 600,
             color: 'var(--ink)',
           }}
         >
           {label}
         </label>
         {balance != null && (
-          <span style={{ fontFamily: 'var(--font-data)', fontSize: 12.5, color: 'var(--ink-60)' }}>
+          <span
+            style={{
+              fontFamily: 'var(--font-data)',
+              fontSize: 'var(--type-caption)',
+              color: 'var(--ink-60)',
+            }}
+          >
             {balanceLabel} {balance} {currency}
           </span>
         )}
@@ -114,7 +120,7 @@ export function AmountInput({
         <span
           style={{
             fontFamily: 'var(--font-data)',
-            fontSize: 15,
+            fontSize: 'var(--type-data)',
             color: 'var(--ink-60)',
             fontWeight: 500,
           }}
@@ -232,7 +238,7 @@ const chipStyle: CSSProperties = {
   cursor: 'pointer',
   fontFamily: 'var(--font-body)',
   fontWeight: 600,
-  fontSize: 13.5,
+  fontSize: 'var(--type-small)',
   color: 'var(--ink)',
 }
 

src/components/Badge.tsx

@@ -48,7 +48,7 @@ export function Badge({ tone = 'neutral', icon = null, children, style, ...rest
         padding: '0 10px',
         fontFamily: 'var(--font-body)',
         fontWeight: 600,
-        fontSize: 12.5,
+        fontSize: 'var(--type-caption)',
         letterSpacing: tone === 'testnet' ? '0.04em' : 0,
         textTransform: tone === 'testnet' ? 'uppercase' : 'none',
         borderRadius: 'var(--radius-pill)',

src/components/LiquidityMeter.tsx

@@ -34,14 +34,20 @@ export function LiquidityMeter({
           marginBottom: 8,
         }}
       >
-        <span style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--ink-60)' }}>
+        <span
+          style={{
+            fontFamily: 'var(--font-body)',
+            fontSize: 'var(--type-small)',
+            color: 'var(--ink-60)',
+          }}
+        >
           Available to withdraw now
         </span>
         <span
           style={{
             fontFamily: 'var(--font-data)',
             fontWeight: 600,
-            fontSize: 16,
+            fontSize: 'var(--type-body)',
             color: 'var(--ink)',
           }}
         >
@@ -76,7 +82,7 @@ export function LiquidityMeter({
         <p
           style={{
             fontFamily: 'var(--font-body)',
-            fontSize: 12.5,
+            fontSize: 'var(--type-caption)',
             lineHeight: 1.5,
             color: 'var(--ink-60)',
             margin: '8px 0 0',

src/components/ProjectCard.tsx

@@ -1,5 +1,6 @@
 import { useState, type CSSProperties } from 'react'
 import { ScoreGauge } from './ScoreGauge'
+import { PinIcon } from './icons'
 
 /**
  * Heliobond ProjectCard — a project in the living atlas. Photo, name, location,
@@ -78,7 +79,7 @@ export function ProjectCard({
             background: 'var(--surface)',
             border: '1px solid var(--ink-12)',
             fontFamily: 'var(--font-body)',
-            fontSize: 12.5,
+            fontSize: 'var(--type-caption)',
             fontWeight: 600,
             color: 'var(--ink)',
           }}
@@ -92,7 +93,7 @@ export function ProjectCard({
           style={{
             fontFamily: 'var(--font-display)',
             fontWeight: 700,
-            fontSize: 20,
+            fontSize: 'var(--type-h4)',
             lineHeight: 1.2,
             margin: '0 0 14px',
             letterSpacing: '-0.01em',
@@ -119,7 +120,7 @@ export function ProjectCard({
             <div
               style={{
                 fontFamily: 'var(--font-body)',
-                fontSize: 12,
+                fontSize: 'var(--type-eyebrow)',
                 color: 'var(--ink-60)',
                 marginBottom: 2,
               }}
@@ -130,7 +131,7 @@ export function ProjectCard({
               style={{
                 fontFamily: 'var(--font-data)',
                 fontWeight: 600,
-                fontSize: 17,
+                fontSize: 'var(--type-body-lg)',
                 color: 'var(--ink)',
               }}
             >
@@ -154,22 +155,3 @@ export function ProjectCard({
     </article>
   )
 }
-
-function PinIcon() {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      width="14"
-      height="14"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
-      <circle cx="12" cy="10" r="3" />
-    </svg>
-  )
-}