Illusion/sharper.ly
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
8464c24fb1714ee9ee537285d980ac62903d7e0f
sharper.ly/apps/web/app/styles/primitives.css
T
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>
2026-09-14 12:38:05 +02:00

256 lines
12 KiB
CSS
Raw Blame History

/* ============================================================================
TIER 1 - PRIMITIVES
----------------------------------------------------------------------------
Raw values only. No meaning, no roles, no component names.
"green-600", never "accent". "neutral-800", never "page-background".
Nothing in app/ may reference these directly except app/styles/semantic.css
and app/styles/typography.css. Components use TIER 2 (semantic.css).
Values sourced from the published Figma variables of
file yvKHp3Ha2rQmv9kt9tCC7j - the hexes marked [figma] are exact; the
surrounding ramp steps are derived from them (tint = mix with white,
shade = multiply toward black).
========================================================================= */
@theme static {
/* --------------------------------------------------------------------
COLOUR - base
-------------------------------------------------------------------- */
--color-white: #ffffff; /* [figma] base/white */
--color-black: #000000; /* [figma] base/black */
--color-transparent: transparent;
/* --------------------------------------------------------------------
COLOUR - neutral ramp (built around the brand Dark Grey #1d1d1b)
-------------------------------------------------------------------- */
--color-neutral-50: #f8f9fa; /* [figma] text/primary on dark */
--color-neutral-100: #e8e8e8; /* [figma] stroke/subtle */
--color-neutral-200: #d6d6d4;
--color-neutral-300: #c2c2c0; /* [figma] text/secondary */
--color-neutral-400: #949492; /* [figma] text/tertiary */
--color-neutral-500: #5c565c; /* [figma] base/grey-500 */
--color-neutral-600: #454543;
--color-neutral-700: #2e2e2c;
--color-neutral-800: #1d1d1b; /* [figma] Neutral Black/800 - brand Dark Grey */
--color-neutral-900: #0b0b0a; /* [figma] Neutral Black/900 */
/* --------------------------------------------------------------------
COLOUR - green ramp (brand Dark Turquoise #008764)
600 is the brand colour. 700 is the Figma button hover shade.
-------------------------------------------------------------------- */
--color-green-50: #f0f8f5;
--color-green-100: #dbeee9;
--color-green-200: #b3dbd1;
--color-green-300: #85c5b5;
--color-green-400: #4daa93; /* [figma] brand Green/400 - primary button disabled fill */
--color-green-500: #26997b;
--color-green-600: #008764; /* [figma] background/accent, interactive/primary, text/accent */
--color-green-700: #006b4f; /* [figma] base/turquoise-dark, interactive/primary-hover */
--color-green-800: #00563f;
--color-green-900: #00402f;
/* --------------------------------------------------------------------
COLOUR - red ramp (brand Red #dd322f)
500 is the brand colour. 600/700 are derived press states.
-------------------------------------------------------------------- */
--color-red-50: #fdf3f3;
--color-red-100: #fae2e2;
--color-red-200: #f5c2c1;
--color-red-300: #ef9d9b;
--color-red-400: #e76b69;
--color-red-500: #dd322f; /* [figma] interactive/danger, base/red */
--color-red-600: #c02c29;
--color-red-700: #a42523;
--color-red-800: #851e1c;
--color-red-900: #631715;
/* --------------------------------------------------------------------
COLOUR - alpha steps (translucent overlays, hairlines, scrims)
-------------------------------------------------------------------- */
--color-white-a04: rgb(255 255 255 / 0.04);
--color-white-a08: rgb(255 255 255 / 0.08);
--color-white-a12: rgb(255 255 255 / 0.12);
--color-white-a16: rgb(255 255 255 / 0.16);
--color-white-a24: rgb(255 255 255 / 0.24);
--color-white-a40: rgb(255 255 255 / 0.4);
--color-white-a64: rgb(255 255 255 / 0.64);
--color-black-a04: rgb(0 0 0 / 0.04);
--color-black-a08: rgb(0 0 0 / 0.08);
--color-black-a12: rgb(0 0 0 / 0.12);
--color-black-a16: rgb(0 0 0 / 0.16);
--color-black-a20: rgb(0 0 0 / 0.2); /* [figma] hero picture shade */
--color-black-a24: rgb(0 0 0 / 0.24);
--color-black-a40: rgb(0 0 0 / 0.4);
--color-black-a56: rgb(0 0 0 / 0.56);
--color-black-a72: rgb(0 0 0 / 0.72);
/* The pale mint tint the home hero washes its picture with - green-200,
not the brand green-600 the --color-green-a* steps below carry. */
--color-green-200-a12: rgb(179 219 209 / 0.12);
--color-green-a12: rgb(0 135 100 / 0.12);
--color-green-a16: rgb(0 135 100 / 0.16);
--color-green-a24: rgb(0 135 100 / 0.24);
--color-green-a40: rgb(0 135 100 / 0.4);
--color-red-a12: rgb(221 50 47 / 0.12);
--color-red-a16: rgb(221 50 47 / 0.16);
--color-red-a24: rgb(221 50 47 / 0.24);
/* --------------------------------------------------------------------
TYPEFACES
Panton (EN) and Montserrat Arabic (AR) are the licensed brand faces,
licensed into the repo - the first family in each stack is the real
one, everything after it is the free fallback that ships today.
@font-face declarations live in typography.css.
-------------------------------------------------------------------- */
--font-en: "Panton", "Figtree", ui-sans-serif, system-ui, -apple-system,
"Segoe UI", Roboto, sans-serif;
--font-ar: "Montserrat Arabic", "IBM Plex Sans Arabic",
"Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif;
--font-sans: var(--font-en);
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
"Liberation Mono", monospace;
/* --------------------------------------------------------------------
FONT SIZE ramp (px in the comment, rem in the value)
-------------------------------------------------------------------- */
--text-xs: 0.75rem; /* 12 - [figma] Label/Medium */
--text-sm: 0.875rem; /* 14 - [figma] Body/Small */
--text-md: 1rem; /* 16 - [figma] Body/Medium Bold */
--text-lg: 1.125rem; /* 18 - [figma] Body/Large Bold */
--text-xl: 1.375rem; /* 22 */
--text-2xl: 1.75rem; /* 28 - [figma] Heading/H2 */
--text-3xl: 2.25rem; /* 36 */
--text-4xl: 2.75rem; /* 44 - [figma] Display/Small */
--text-5xl: 3.5rem; /* 56 */
/* --------------------------------------------------------------------
LINE HEIGHT ramp - fixed steps, named after their px value / 4
-------------------------------------------------------------------- */
--leading-4: 1rem; /* 16 */
--leading-5: 1.25rem; /* 20 */
--leading-6: 1.5rem; /* 24 */
--leading-7: 1.75rem; /* 28 */
--leading-8: 1.875rem; /* 30 */
--leading-9: 2.25rem; /* 36 */
--leading-10: 2.75rem; /* 44 */
--leading-11: 3.25rem; /* 52 */
--leading-12: 4rem; /* 64 */
/* --------------------------------------------------------------------
LETTER SPACING ramp
-------------------------------------------------------------------- */
--tracking-tighter: -1px; /* [figma] Display/Small */
--tracking-tight: -0.6px;
--tracking-snug: -0.3px; /* [figma] Heading/H2 */
--tracking-normal: 0px;
--tracking-wide: 0.5px; /* [figma] Label/Medium */
--tracking-wider: 1px;
/* --------------------------------------------------------------------
FONT WEIGHT ramp
Panton "SemiBold" is published at weight 500 in the Figma library,
which is why medium is 500 and semibold is 600.
-------------------------------------------------------------------- */
--font-weight-regular: 400;
--font-weight-medium: 500; /* [figma] Label/Medium */
--font-weight-semibold: 600;
--font-weight-bold: 700; /* [figma] every Bold role */
--font-weight-black: 900;
/* --------------------------------------------------------------------
SPACING ramp
-------------------------------------------------------------------- */
--spacing: 0.25rem; /* base unit for p-1, gap-2, ... */
--spacing-2xs: 0.25rem; /* 4 */
--spacing-xs: 0.5rem; /* 8 - [figma] space/xs */
--spacing-sm: 0.75rem; /* 12 - [figma] space/sm */
--spacing-md: 1rem; /* 16 - [figma] space/md */
--spacing-lg: 1.5rem; /* 24 - [figma] space/lg */
--spacing-xl: 2rem; /* 32 */
--spacing-2xl: 3rem; /* 48 */
--spacing-3xl: 4rem; /* 64 */
--spacing-4xl: 6rem; /* 96 */
--spacing-5xl: 8rem; /* 128 */
/* --------------------------------------------------------------------
RADIUS ramp
-------------------------------------------------------------------- */
--radius-none: 0px;
--radius-xs: 2px;
--radius-sm: 4px; /* [figma] radius/sm */
--radius-md: 8px; /* [figma] radius/md */
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-full: 9999px;
/* --------------------------------------------------------------------
BORDER WIDTH ramp
-------------------------------------------------------------------- */
--border-width-sm: 1px;
--border-width-md: 1.5px; /* [figma] secondary button stroke */
--border-width-lg: 2px;
--border-width-xl: 3px;
/* --------------------------------------------------------------------
OPACITY ramp
-------------------------------------------------------------------- */
--opacity-0: 0;
--opacity-8: 0.08;
--opacity-16: 0.16;
--opacity-40: 0.4; /* [figma] every disabled button */
--opacity-50: 0.5; /* [figma] launch strip, flanking photos */
--opacity-64: 0.64;
--opacity-100: 1;
/* --------------------------------------------------------------------
SHADOW ramp
-------------------------------------------------------------------- */
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.06);
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.08);
--shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.12), 0 2px 4px -2px rgb(0 0 0 / 0.08);
--shadow-lg: 0 12px 28px -6px rgb(0 0 0 / 0.18), 0 4px 8px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.28);
--shadow-none: 0 0 #0000;
/* --------------------------------------------------------------------
DURATION ramp
-------------------------------------------------------------------- */
--duration-instant: 0ms;
--duration-fast: 120ms;
--duration-base: 200ms;
--duration-slow: 320ms;
--duration-slower: 520ms;
/* --------------------------------------------------------------------
EASING ramp
-------------------------------------------------------------------- */
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--ease-decelerate: cubic-bezier(0, 0, 0, 1);
--ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
--ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
/* --------------------------------------------------------------------
Z-INDEX ladder - raw ordinals, semantic layer names live in tier 2
-------------------------------------------------------------------- */
--z-0: 0;
--z-10: 10;
--z-20: 20;
--z-30: 30;
--z-40: 40;
--z-50: 50;
--z-60: 60;
--z-70: 70;
/* --------------------------------------------------------------------
CONTAINER widths
-------------------------------------------------------------------- */
--container-prose: 68ch;
--container-content: 80rem; /* 1280 */
--container-wide: 90rem; /* 1440 */
}
Reference in New Issue View Git Blame Copy Permalink