1a3a67f1f21a90b701db3a6ef8e70f37a66ac86a
4
Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
  IllusionandClaude Opus 5
|
19fab4a783
|
Match the shipped styling to the Claude Design drafts
An audit of all twelve draft files against the build turned up a set of mismatches, most of them in the tier-2 token layer rather than in any one component. Tier 1 is untouched throughout - only the meanings moved. SHAPE. The drafts draw three corners, not five: 2px for a tag, thumbnail, flag or checkbox, 4px for anything with a box, and fully round for a filter chip or status pill. Nothing in any draft is 8px or 12px. --radius-card and --radius-surface therefore come down to radius/sm, a --radius-chip is added for the 2px tier, and --radius-control-lg - a quirk of the Figma Button frame's ghost cells - is retired along with its four consumers. ELEVATION. A shadow is a fraction of the ground it falls on, and the ramp was tuned for a white page: on the drafts' near-black ground a 12-28% black is invisible. Tier 1 gains the two deep steps the drafts actually draw (--shadow-dark-lg/xl), and --elevation-card/-popover/-modal move into the per-surface blocks so the dark surface can take them while the light one keeps the soft ramp. A resting card now has no shadow at all - the drafts separate with a hairline - and the black is spent on what floats. CARDS. The hover was a white-24% hairline and a faint glow; the drafts turn the hairline accent green, lift the card 6px and land a deep black under it. The lift is pointer-only and is dropped under prefers-reduced-motion. GHOST IS A TEXT LINK. The drafts never fill a ghost control - every "All updates ->" is plain text that turns green while the label-to-arrow gap opens. The tokens carry no fill in any state and the variant opts out of the 3px lift, which also retires the WCAG workaround the old Figma hover forced (green label on a green fill, 1.40:1). NAVIGATION. A nav label rests in text/secondary and brightens to primary; the current section stays primary and is marked by the accent rule, not by green text. HERO STRIPE. The middle block was painted near-black against a comment claiming the redesign had dropped white; the drafts paint it #F8F9FA. Back to background/inverse, and to the drafts' 390 : 495 : 363 split. styles/README.md is updated to match, including a contrast table that still described --surface-raised as the retired #2e2e2c. Not changed, because each is a decision rather than a defect: the drafts set every eyebrow, tag and meta line in IBM Plex Mono at 10-11px with 1.2-1.4px tracking (a third typeface, and no Arabic counterpart); draft headings are weight 800, which needs a font file we do not have; and the EU badge statement stays at --text-primary, since the visibility lockup is contractual. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> |
||
|
IllusionandClaude Opus 5
|
aedef6daeb
|
Rebuild the site to the Claude Design drafts
Carries the 11 page drafts plus the shared SiteNav and SiteFooter onto the project's own design system: tier-2 tokens, the published type roles, logical properties throughout, and both locales. Surfaces - The page stands on #0B0B0A with #1D1D1B bands lifted off it, as the drafts do; the body previously painted the band colour, so every band was a step too light. - A card is drawn one step off whatever it stands on (#1D1D1B on the ground, #141413 inside a band). Components paint --surface-card and a band re-points it for its subtree, so a card can never come out the same colour as its band. Shell - Nav: translucent ground with a blur, chevrons on group triggers, an accent rule under the current section, the drafts' compact dropdown card, and an EN | AR toggle in place of the globe menu. - Footer: the drafts' four-column grid, one-line brand text, Facebook as a bordered button, the EU lockup, the implemented-by row and the funding disclaimer. Pages - Home: hero with counting figures, launch band, three areas of change, newsroom, FAQ accordion and the consortium band. - The nine interior pages rebuilt and then audited section by section against their drafts. - Applications: the three-step application form now posts real submissions to the Strapi `application` type, validated server-side and working without JavaScript. Motion - Every animation in the drafts, as classes in _page-kit/motion.css: staggered entrances, scroll-driven reveals, the drifting washes (each page carries its own geometry), the sheen, the counting figures and the accordion. The drafts' coloured hover glow is deliberately not shipped. CMS - New `faq` collection type behind the home page's accordion. - `role` added to the consortium member component so an editor can supply the chip and the deliverable separately. Content - No invented figure, date, name or commitment ships: the five-working-day reply, the placeholder email and Facebook handle, the sample news, events, publications and FAQs, the invented application rules and the TBD counters are all withheld pending real content. Figures that survived (3 consortium partners, 4 areas of work, 16 human security sub-projects, Dec 2025 - Dec 2027) are verified against docs/ and the bundled draft copy. Verified: pnpm typecheck (web + CMS) and pnpm --filter web build pass; all 20 page/locale URLs render 200 through the built SSR handler, including with the CMS unreachable; no raw hex or physical-direction utility in components or routes. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> |
||
|
IllusionandClaude Opus 5
|
8464c24fb1
|
Match the home page to Figma frame 253:4799
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> |
||
|
Illusion
|
20b384039c
|
initial commit |