Illusion/sharper.ly
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Match the home page to Figma frame 253:4799

Browse Source 
The page resembled the design but had drifted in every band. Ported it
section by section against the measured frame.

Hero (253:4800)
- Add the SHARP wordmark above the headline. The frame paints "SHARP"
  only, not the full SHARP-ER lockup the navigation carries, so this is
  the SHARP mark on its own, as vector (extracted from the brand
  guideline artwork) at its true 273px rather than an upscaled PNG.
- Drop the leading project name from the headline in both locales: the
  wordmark above now carries it, as the frame composes it.
- Stop the lead paragraph rendering by default. The frame's subheading
  node is hidden, but the code fell back to the site description, so a
  paragraph always appeared.
- Fallback CTAs become "Discover SHARP-ER" / "Explore Our Work", 24px
  apart. Both the CMS and fallback paths now render through one HeroCta,
  so an editor-authored secondary CTA gets the designed white treatment
  instead of the dark-surface outline.
- The picture loses its radius and gains the frame's two flat washes and
  wide band.

Figures band
- 253:4835 is hidden="true" in the frame, so the band and its "figures
  still being confirmed" placeholder no longer render. It appears only
  once the CMS supplies real numbers.

Launch (361:10853)
- Heading renders at Display/Small instead of Heading/H2. SectionHeader
  gains `size` since display-sm was reachable only via titleAs="h1".
- The three-paragraph story becomes the frame's single centred lead with
  its four bold runs, which needed a ProseRun copy shape - a flat string
  cannot carry emphasis.
- The captions were Card.Content links with images and action labels;
  the frame draws plain centred Heading/H2 text.
- Add the three-up photo strip that bleeds past the page and clips.
- Remove the funding line, which the frame does not draw in this band.
  EU visibility still stands via the nav badge and footer statement.

Partners (393:14754)
- Heading moves from centred to start-aligned, up to Display/Small.
- Tiles move to the sunken surface (they were lighter than the page; the
  design has them darker), lose their border, 8px -> 4px radius, padding
  on the inline start only, logo 48 -> 70px, name to Body/Large Bold.

Footer
- Black ground via a new --surface-footer token, a top rule, links up to
  Body/Large Bold 18/28 at 24px spacing, and column headings to
  Body/Small Bold on --text-tertiary.
- Keeps the real IA from ROUTE_SLUGS rather than frame 140:7814's
  labels, which name six pages that do not exist.

Tokens
- New tier-1 steps for values the design uses and the ramps lacked
  (--color-black-a20, --color-green-200-a12, --opacity-50) and tier-2
  --overlay-picture-shade / --overlay-picture-tint for the hero wash.

copy.ts now names the Figma frame as the source for the home strings.
The Arabic launch lead is rebuilt from the approved Arabic column to
carry the English frame's meaning and is marked (ar-draft) pending
client sign-off - the file has no Arabic home frame to work from.

Verified: typecheck and build green, no raw hex or tier-1 token in
components/routes, no physical-direction utility, 141 i18n keys at
parity, both locales rendered and checked for RTL mirroring.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Illusion
2026-09-14 12:38:05 +02:00
co-authored by Claude Opus 5
parent 20b384039c
commit 8464c24fb1
9 changed files with 735 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/public/assets/sharp-wordmark-inverse.svg
+285
View File
@@ -0,0 +1,285 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="272.0"
height="56.8"
viewBox="209.6 153.6 272.0 56.8"
version="1.1"
id="svg906"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs892">
<clipPath
id="clip-69">
<path
clip-rule="nonzero"
d="M 0 0.320312 L 53.457031 0.320312 L 53.457031 57 L 0 57 Z M 0 0.320312 "
id="path456" />
</clipPath>
<clipPath
id="clip-70">
<path
clip-rule="nonzero"
d="M 19.445312 3.234375 C 20.039062 2.347656 21.363281 1.902344 23.410156 1.902344 C 26.96875 1.902344 29.472656 3.046875 30.933594 5.320312 C 32.394531 7.59375 33.132812 10.796875 33.132812 14.929688 C 33.132812 17.332031 32.828125 19.515625 32.230469 21.472656 C 31.632812 23.429688 30.527344 25.007812 28.9375 26.175781 C 27.347656 27.34375 24.996094 27.941406 21.910156 27.941406 L 18.542969 27.941406 L 18.542969 8.648438 C 18.542969 5.929688 18.847656 4.125 19.445312 3.234375 M 52.273438 51.480469 C 51.75 52.050781 51.269531 52.484375 50.824219 52.777344 C 50.378906 53.070312 49.820312 53.234375 49.132812 53.285156 C 48.140625 53.285156 47.378906 52.867188 46.859375 52.027344 C 46.335938 51.1875 45.839844 49.726562 45.371094 47.628906 L 43.566406 39.546875 C 42.878906 36.304688 41.40625 33.878906 39.128906 32.25 C 36.855469 30.625 33.375 29.621094 28.65625 29.199219 C 30.703125 28.972656 32.546875 28.617188 34.148438 28.132812 C 37.1875 27.21875 39.574219 25.984375 41.328125 24.449219 C 43.082031 22.910156 44.316406 21.230469 45.054688 19.425781 C 45.789062 17.621094 46.160156 15.832031 46.160156 14.050781 C 46.160156 9.703125 44.355469 6.351562 40.746094 3.972656 C 37.136719 1.597656 31.695312 0.402344 24.425781 0.402344 C 23.433594 0.402344 21.757812 0.425781 19.40625 0.476562 C 17.054688 0.527344 14.613281 0.554688 12.109375 0.554688 C 9.910156 0.554688 7.699219 0.527344 5.476562 0.476562 C 3.25 0.425781 1.484375 0.375 0.175781 0.324219 L 0.175781 1.902344 C 1.804688 1.953125 3.035156 2.15625 3.898438 2.484375 C 4.765625 2.816406 5.335938 3.453125 5.628906 4.367188 C 5.921875 5.28125 6.058594 6.707031 6.058594 8.636719 L 6.058594 47.554688 C 6.058594 49.433594 5.921875 50.84375 5.628906 51.785156 C 5.335938 52.726562 4.777344 53.363281 3.949219 53.667969 C 3.125 53.972656 1.855469 54.1875 0.175781 54.289062 L 0.175781 55.851562 C 1.484375 55.75 3.25 55.6875 5.476562 55.660156 C 7.699219 55.636719 10.0625 55.625 12.582031 55.625 C 14.777344 55.625 16.941406 55.636719 19.085938 55.660156 C 21.234375 55.6875 23.015625 55.75 24.425781 55.851562 L 24.425781 54.300781 C 22.746094 54.199219 21.503906 53.984375 20.664062 53.679688 C 19.824219 53.375 19.265625 52.738281 18.972656 51.796875 C 18.679688 50.859375 18.542969 49.445312 18.542969 47.566406 L 18.542969 29.519531 L 23.636719 29.519531 C 25.265625 29.519531 26.523438 30 27.4375 30.96875 C 28.351562 31.933594 29.066406 33.242188 29.597656 34.894531 C 30.132812 36.546875 30.5625 38.464844 30.933594 40.664062 L 32.34375 48.507812 C 32.914062 51.746094 34.121094 53.972656 35.953125 55.167969 C 37.785156 56.359375 40.109375 56.972656 42.941406 56.972656 C 45.242188 56.972656 47.199219 56.617188 48.828125 55.917969 C 50.453125 55.21875 51.96875 54.046875 53.378906 52.421875 Z M 52.273438 51.480469 "
id="path459" />
</clipPath>
<clipPath
id="clip-71">
<rect
x="0"
y="0"
width="54"
height="57"
id="rect462" />
</clipPath>
<g
id="source-89"
clip-path="url(#clip-71)">
<g
clip-path="url(#clip-69)"
id="g469">
<g
clip-path="url(#clip-70)"
id="g467">
<rect
x="-695.8"
y="-332.199998"
width="2073.6"
height="1166.39999"
fill="rgb(100%, 100%, 100%)"
fill-opacity="1"
id="rect465" />
</g>
</g>
</g>
<clipPath
id="clip-74">
<path
clip-rule="nonzero"
d="M 0.601562 0.191406 L 46.679688 0.191406 L 46.679688 55.917969 L 0.601562 55.917969 Z M 0.601562 0.191406 "
id="path478" />
</clipPath>
<clipPath
id="clip-75">
<path
clip-rule="nonzero"
d="M 32.761719 24.179688 C 32.164062 26.480469 31.058594 28.335938 29.46875 29.746094 C 27.878906 31.160156 25.527344 31.871094 22.441406 31.871094 L 19.074219 31.871094 L 19.074219 8.648438 C 19.074219 5.929688 19.378906 4.125 19.976562 3.234375 C 20.574219 2.347656 21.894531 1.902344 23.941406 1.902344 C 27.5 1.902344 30.003906 3.132812 31.464844 5.585938 C 32.925781 8.039062 33.664062 11.765625 33.664062 16.71875 C 33.664062 19.390625 33.359375 21.867188 32.761719 24.167969 M 41.277344 4.710938 C 37.667969 1.835938 32.226562 0.390625 24.957031 0.390625 C 23.964844 0.390625 22.289062 0.414062 19.9375 0.464844 C 17.585938 0.515625 15.160156 0.542969 12.640625 0.542969 C 10.441406 0.542969 8.230469 0.515625 6.007812 0.464844 C 3.785156 0.414062 2.015625 0.363281 0.707031 0.3125 L 0.707031 1.902344 C 2.335938 1.953125 3.566406 2.15625 4.429688 2.484375 C 5.296875 2.816406 5.867188 3.453125 6.160156 4.367188 C 6.453125 5.28125 6.59375 6.707031 6.59375 8.636719 L 6.59375 47.554688 C 6.59375 49.433594 6.453125 50.84375 6.160156 51.785156 C 5.867188 52.726562 5.308594 53.347656 4.46875 53.667969 C 3.632812 53.984375 2.371094 54.1875 0.707031 54.300781 L 0.707031 55.867188 C 2.4375 55.816406 4.367188 55.765625 6.515625 55.714844 C 8.664062 55.660156 10.863281 55.636719 13.097656 55.636719 C 15.921875 55.636719 18.617188 55.660156 21.183594 55.714844 C 23.75 55.765625 25.835938 55.816406 27.460938 55.867188 L 27.460938 54.148438 C 25.109375 54.097656 23.332031 53.921875 22.125 53.601562 C 20.914062 53.285156 20.101562 52.636719 19.683594 51.644531 C 19.261719 50.65625 19.058594 49.128906 19.058594 47.097656 L 19.058594 33.433594 L 23.214844 33.433594 C 27.816406 33.433594 31.640625 32.886719 34.667969 31.792969 C 37.691406 30.699219 40.09375 29.265625 41.847656 27.523438 C 43.601562 25.78125 44.847656 23.863281 45.570312 21.792969 C 46.296875 19.71875 46.664062 17.75 46.664062 15.867188 C 46.664062 11.320312 44.859375 7.609375 41.25 4.734375 "
id="path481" />
</clipPath>
<clipPath
id="clip-76">
<rect
x="0"
y="0"
width="47"
height="56"
id="rect484" />
</clipPath>
<g
id="source-92"
clip-path="url(#clip-76)">
<g
clip-path="url(#clip-74)"
id="g491">
<g
clip-path="url(#clip-75)"
id="g489">
<rect
x="-751.8"
y="-332.199998"
width="2073.6"
height="1166.39999"
fill="rgb(100%, 100%, 100%)"
fill-opacity="1"
id="rect487" />
</g>
</g>
</g>
<clipPath
id="clip-79">
<path
clip-rule="nonzero"
d="M 0.640625 0.078125 L 37.601562 0.078125 L 37.601562 55.917969 L 0.640625 55.917969 Z M 0.640625 0.078125 "
id="path500" />
</clipPath>
<clipPath
id="clip-80">
<path
clip-rule="nonzero"
d="M 0.761719 0.171875 L 18.148438 47.71875 C 19.1875 50.386719 19.367188 52.128906 18.65625 52.941406 C 17.941406 53.753906 16.265625 54.214844 13.597656 54.316406 L 13.597656 55.878906 C 14.855469 55.777344 16.558594 55.714844 18.691406 55.6875 C 20.828125 55.660156 23.117188 55.648438 25.519531 55.648438 C 27.664062 55.648438 29.800781 55.660156 31.910156 55.6875 C 34.019531 55.714844 35.875 55.777344 37.4375 55.878906 L 37.4375 54.300781 C 36.703125 54.25 35.875 53.871094 34.972656 53.160156 C 34.070312 52.445312 33.234375 51.164062 32.496094 49.269531 L 13.429688 0.160156 Z M 0.761719 0.171875 "
id="path503" />
</clipPath>
<clipPath
id="clip-81">
<rect
x="0"
y="0"
width="38"
height="56"
id="rect506" />
</clipPath>
<g
id="source-95"
clip-path="url(#clip-81)">
<g
clip-path="url(#clip-79)"
id="g513">
<g
clip-path="url(#clip-80)"
id="g511">
<rect
x="-654.8"
y="-332.199998"
width="2073.6"
height="1166.39999"
fill="rgb(100%, 100%, 100%)"
fill-opacity="1"
id="rect509" />
</g>
</g>
</g>
<clipPath
id="clip-84">
<path
clip-rule="nonzero"
d="M 0.285156 0.371094 L 43.382812 0.371094 L 43.382812 58 L 0.285156 58 Z M 0.285156 0.371094 "
id="path522" />
</clipPath>
<clipPath
id="clip-85">
<path
clip-rule="nonzero"
d="M 15.945312 11.390625 C 17.511719 10.195312 19.707031 9.597656 22.53125 9.597656 C 25.453125 9.597656 27.726562 10.3125 29.34375 11.734375 C 30.957031 13.15625 31.769531 15.152344 31.769531 17.71875 L 43.308594 17.71875 C 43.308594 14.367188 42.445312 11.351562 40.71875 8.722656 C 38.988281 6.089844 36.550781 4.03125 33.421875 2.582031 C 30.296875 1.136719 26.722656 0.410156 22.722656 0.410156 C 18.742188 0.410156 15.160156 1.070312 11.96875 2.40625 C 8.777344 3.742188 6.324219 5.597656 4.621094 7.972656 C 2.917969 10.347656 2.066406 13.042969 2.066406 16.066406 C 2.066406 21.890625 5.246094 26.527344 11.613281 29.960938 C 13.953125 31.21875 17.117188 32.488281 21.121094 33.785156 C 25.121094 35.082031 27.894531 36.3125 29.429688 37.484375 C 30.96875 38.652344 31.746094 40.332031 31.746094 42.503906 C 31.746094 44.5 30.96875 46.0625 29.429688 47.179688 C 27.894531 48.300781 25.746094 48.859375 23 48.859375 C 15.617188 48.859375 11.917969 45.769531 11.917969 39.582031 L 0.328125 39.582031 C 0.328125 43.203125 1.253906 46.378906 3.109375 49.125 C 4.964844 51.871094 7.671875 54.03125 11.207031 55.605469 C 14.738281 57.183594 18.667969 57.972656 22.976562 57.972656 C 29.175781 57.972656 34.121094 56.585938 37.78125 53.828125 C 41.441406 51.070312 43.285156 47.269531 43.285156 42.414062 C 43.285156 38.054688 41.785156 34.40625 38.785156 31.484375 C 35.785156 28.5625 30.996094 26.109375 24.4375 24.140625 C 20.867188 23.058594 18.171875 21.902344 16.339844 20.667969 C 14.511719 19.4375 13.582031 17.910156 13.582031 16.09375 C 13.582031 14.148438 14.371094 12.574219 15.933594 11.378906 "
id="path525" />
</clipPath>
<clipPath
id="clip-86">
<rect
x="0"
y="0"
width="44"
height="58"
id="rect528" />
</clipPath>
<g
id="source-98"
clip-path="url(#clip-86)">
<g
clip-path="url(#clip-84)"
id="g535">
<g
clip-path="url(#clip-85)"
id="g533">
<rect
x="-525.8"
y="-331.199998"
width="2073.6"
height="1166.39999"
fill="rgb(100%, 100%, 100%)"
fill-opacity="1"
id="rect531" />
</g>
</g>
</g>
<clipPath
id="clip-88">
<path
clip-rule="nonzero"
d="M 34.453125 0.1875 L 45.996094 0.1875 L 45.996094 22.882812 L 34.453125 22.882812 Z M 0.40625 0.1875 L 11.945312 0.1875 L 11.945312 22.882812 L 0.40625 22.882812 Z M 0.40625 22.882812 L 45.996094 22.882812 L 45.996094 32.199219 L 0.40625 32.199219 Z M 0.40625 32.199219 L 11.945312 32.199219 L 11.945312 55.96875 L 0.40625 55.96875 Z M 34.453125 32.199219 L 45.996094 32.199219 L 45.996094 55.96875 L 34.453125 55.96875 Z M 34.453125 32.199219 "
id="path541" />
</clipPath>
<clipPath
id="clip-89">
<rect
x="0"
y="0"
width="46"
height="56"
id="rect544" />
</clipPath>
<g
id="source-101"
clip-path="url(#clip-89)">
<g
clip-path="url(#clip-88)"
id="g549">
<rect
x="-576.8"
y="-332.199998"
width="2073.6"
height="1166.39999"
fill="rgb(100%, 100%, 100%)"
fill-opacity="1"
id="rect547" />
</g>
</g>
<clipPath
id="clip-92">
<path
clip-rule="nonzero"
d="M 0.519531 0.078125 L 36.636719 0.078125 L 36.636719 56 L 0.519531 56 Z M 0.519531 0.078125 "
id="path558" />
</clipPath>
<clipPath
id="clip-93">
<path
clip-rule="nonzero"
d="M 17.871094 41.503906 L 36.59375 41.503906 L 33.175781 32.199219 L 21.0625 32.199219 L 26.933594 15.144531 L 21.378906 0.1875 L 0.625 55.96875 L 12.890625 55.96875 Z M 17.871094 41.503906 "
id="path561" />
</clipPath>
<clipPath
id="clip-94">
<rect
x="0"
y="0"
width="37"
height="56"
id="rect564" />
</clipPath>
<g
id="source-104"
clip-path="url(#clip-94)">
<g
clip-path="url(#clip-92)"
id="g571">
<g
clip-path="url(#clip-93)"
id="g569">
<rect
x="-627.8"
y="-332.199998"
width="2073.6"
height="1166.39999"
fill="rgb(100%, 100%, 100%)"
fill-opacity="1"
id="rect567" />
</g>
</g>
</g>
</defs>
<use
xlink:href="#source-98"
transform="matrix(1, 0, 0, 1, 209, 153)"
id="use894" />
<use
xlink:href="#source-101"
transform="matrix(1, 0, 0, 1, 260, 154)"
id="use896" />
<use
xlink:href="#source-104"
transform="matrix(1, 0, 0, 1, 311, 154)"
id="use898" />
<use
xlink:href="#source-95"
transform="matrix(1, 0, 0, 1, 338, 154)"
id="use900" />
<use
xlink:href="#source-89"
transform="matrix(1, 0, 0, 1, 379, 154)"
id="use902" />
<use
xlink:href="#source-92"
transform="matrix(1, 0, 0, 1, 435, 154)"
id="use904" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB