MakePortfolio
Approved Figma Make composition, work filters, expandable brand cases, website previews and shared navigation/footer.
Questo caso studio è presentato nella versione originale in inglese.
This site, documented
Design systems.
Made tangible.
The values below come from the same file that generates this site’s CSS variables.
lib/design-tokens.tscolour
| Token | Value |
|---|---|
--colour-canvas | #080808 |
--colour-surface | #17181c |
--colour-text | #f7f4f5 |
--colour-muted | #b8bac4 |
--colour-line | #454752 |
--colour-paper | #ffffff |
--colour-ink | #18191e |
--colour-rose | #ff4fa3 |
--colour-violet | #8c5cff |
--colour-focus | #ff8fc5 |
--colour-focusOnLight | #9c1f53 |
--colour-controlBorderLight | #716776 |
type
| Token | Value |
|---|---|
--type-family | Manrope, sans-serif |
--type-mono | DM Mono, monospace |
--type-display | clamp(3.25rem, 8.6vw, 7.5rem) |
--type-heading | clamp(2.4rem, 5.5vw, 5rem) |
--type-body | 1.125rem |
--type-label | 0.8125rem |
--type-leading | 1.55 |
--type-tracking | -0.055em |
--type-weight | 600 |
spacing
| Token | Value |
|---|---|
--spacing-xs | 0.5rem |
--spacing-sm | 1rem |
--spacing-md | 1.5rem |
--spacing-lg | 2rem |
--spacing-xl | 4rem |
--spacing-section | clamp(4rem, 9vw, 8rem) |
radius
| Token | Value |
|---|---|
--radius-tile | 24px |
--radius-media | 18px |
--radius-button | 999px |
motion
| Token | Value |
|---|---|
--motion-duration | 650ms |
--motion-easing | cubic-bezier(0.16, 1, 0.3, 1) |
--motion-distance | 28px |
--motion-floatDuration | 5s |
--motion-orbitDuration | 40s |
Components in use
MakeMotionProvider
Device reduced-motion preference for the approved flamingo composition and reveals.
Shell
Sticky navigation, active section label, locale switch and CV link.
HiringStrip
CV, location, nationality and email, without a form.
ProjectMotion
Scroll-linked product image and a single project narrative.
CaseStudy
The same evidence-led sections for every case.
EvidenceTodo
Visible, identified missing material, never a fabricated result.
Fact
A documented fact with a reduced-motion-aware reveal.
States, not just styles.
Use Tab to inspect focus states. Enable reduced motion in your system to disable scroll effects.
Download CV