---
title: "Amara Osei — Portfolio"
platform: web
slug: amara-osei-designer-portfolio-landing-page-web
screens: ["landing-page", "gallery"]
domains: []
style: "minimal"
fonts: ["Fraunces", "Space Grotesk", "IBM Plex Mono"]
roles: ["top-navigation-bar", "button", "gallery"]
score: {clean: 100, consistent: 73, accessible: 76, comprehensible: 10}
url: https://gui.farm/web/amara-osei-designer-portfolio-landing-page-web
raw: https://gui.farm/web/amara-osei-designer-portfolio-landing-page-web/design.guix
download: https://gui.farm/web/amara-osei-designer-portfolio-landing-page-web.gui
---

# Amara Osei — Portfolio

A designer's portfolio landing page showcasing selected work and projects.

- **Live preview:** https://gui.farm/web/amara-osei-designer-portfolio-landing-page-web
- **Raw source:** https://gui.farm/web/amara-osei-designer-portfolio-landing-page-web/design.guix
- **Download (.gui):** https://gui.farm/web/amara-osei-designer-portfolio-landing-page-web.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Amara Osei — Portfolio">
  <tokens>
    <!-- paper + ink -->
    <color name="paper" value="#F2EFE9" />
    <color name="card" value="#E8E2D6" />
    <color name="ink" value="#171511" />
    <color name="ink-soft" value="#57524A" />
    <color name="muted" value="#8E8779" />
    <color name="hairline" value="#DCD5C6" />
    <!-- dark bands -->
    <color name="black" value="#0F0E0C" />
    <color name="cream" value="#F2EFE9" />
    <color name="cream-dim" value="#B5B0A4" />
    <color name="hairline-dark" value="#2B2823" />
    <!-- accent -->
    <color name="accent" value="#FF4D00" />
    <color name="accent-soft" value="#FF4D001A" />
    <number name="radius-img" value="2" />
    <number name="radius-pill" value="999" />
  </tokens>
  <fonts>
    <font family="Fraunces" source="google" weights="400 500 600" styles="normal italic" />
    <font family="Space Grotesk" source="google" weights="400 500 700" styles="normal" />
    <font family="IBM Plex Mono" source="google" weights="400 500" styles="normal" />
  </fonts>
  <styles>
    <text-style
      name="Display/Hero"
      font-family="Fraunces"
      font-size="148"
      font-weight="600"
      line-height="138"
    />
    <text-style name="Display/Foot" font-family="Fraunces" font-size="92" font-weight="600" line-height="98" />
    <text-style
      name="Display/Statement"
      font-family="Fraunces"
      font-size="52"
      font-weight="500"
      line-height="64"
    />
    <text-style name="Display/Stat" font-family="Fraunces" font-size="64" font-weight="500" line-height="68" />
    <text-style name="Title/Card" font-family="Fraunces" font-size="30" font-weight="500" line-height="38" />
    <text-style name="Title/CardSm" font-family="Fraunces" font-size="26" font-weight="500" line-height="34" />
    <text-style name="Title/Service" font-family="Fraunces" font-size="44" font-weight="500" line-height="52" />
    <text-style
      name="Italic/Side"
      font-family="Fraunces"
      font-size="40"
      font-weight="400"
      font-style="italic"
      line-height="48"
    />
    <text-style
      name="Body/Lead"
      font-family="Space Grotesk"
      font-size="18"
      font-weight="400"
      line-height="30"
    />
    <text-style name="Body" font-family="Space Grotesk" font-size="15" font-weight="400" line-height="24" />
    <text-style name="Nav" font-family="Space Grotesk" font-size="13" font-weight="500" line-height="18" />
    <text-style name="Wordmark" font-family="Space Grotesk" font-size="15" font-weight="700" line-height="20" />
    <text-style name="Mono" font-family="IBM Plex Mono" font-size="11" font-weight="500" line-height="16" />
    <text-style
      name="Mono/Marquee"
      font-family="IBM Plex Mono"
      font-size="13"
      font-weight="500"
      line-height="18"
    />
    <text-style
      name="Mono/Chip"
      font-family="IBM Plex Mono"
      font-size="12"
      font-weight="500"
      line-height="16"
    />
    <text-style
      name="Mono/Tiny"
      font-family="IBM Plex Mono"
      font-size="10"
      font-weight="400"
      line-height="14"
    />
  </styles>
  <col w="1440" fill="$paper" clip="true">
    <!-- ───────────── Nav ───────────── -->
    <row
      role="top-navigation-bar"
      w="fill"
      h="84"
      p="0 80"
      gap="auto"
      align="middle-left"
      border-bottom="1 $hairline"
    >
      <text text-style="Wordmark" value="AMARA OSEI®" fill="$ink" letter-spacing="6%" />
      <row gap="36" align="middle-left">
        <row gap="5" align="top-left">
          <text text-style="Nav" value="Work" fill="$ink" />
          <text text-style="Mono/Tiny" value="04" fill="$accent" />
        </row>
        <text text-style="Nav" value="About" fill="$ink-soft" />
        <text text-style="Nav" value="Services" fill="$ink-soft" />
        <text text-style="Nav" value="Journal" fill="$ink-soft" />
      </row>
      <row gap="16" align="middle-left">
        <row gap="7" align="middle-left">
          <ellipse w="7" h="7" fill="$accent" />
          <text text-style="Mono" value="OPEN FOR Q3" fill="$ink-soft" letter-spacing="8%" />
        </row>
        <row role="button" h="40" p="0 22" radius="$radius-pill" fill="$ink" gap="8" align="middle-center">
          <text text-style="Nav" value="Let's talk" fill="$cream" />
          <img src="https://api.iconify.design/lucide/arrow-up-right.svg?color=%23F2EFE9" w="14" h="14" />
        </row>
      </row>
    </row>
    <!-- ───────────── Hero ───────────── -->
    <col w="fill" p="64 80 88 80" gap="48">
      <row w="fill" gap="auto" align="middle-left">
        <text text-style="Mono" value="PORTFOLIO — VOL. 04" fill="$muted" letter-spacing="10%" />
        <text text-style="Mono" value="UI/UX &amp; ART DIRECTION" fill="$muted" letter-spacing="10%" />
        <text text-style="Mono" value="52.37°N — 4.89°E, AMSTERDAM" fill="$muted" letter-spacing="10%" />
      </row>
      <col gap="8">
        <row gap="28" align="middle-left">
          <text text-style="Display/Hero" value="DIGITAL" fill="$ink" />
          <img
            src="https://images.unsplash.com/photo-1561070791-2526d30994b5?auto=format&amp;fit=crop&amp;w=360&amp;h=220&amp;q=80"
            w="176"
            h="106"
            radius="$radius-pill"
            fit="cover"
          />
          <text text-style="Display/Hero" value="DESIGNER" fill="$ink" />
        </row>
        <row gap="32" align="middle-left">
          <text text-style="Display/Hero" value="&amp; ART" fill="$ink" />
          <text text-style="Display/Hero" value="DIRECTOR" fill="$accent" font-style="italic" />
        </row>
      </col>
      <row w="fill" gap="auto" align="bottom-left">
        <col gap="20" w="560">
          <text
            text-style="Body/Lead"
            fill="$ink-soft"
            w="fill"
            value="I'm Amara — I help ambitious teams turn complex products into interfaces people remember. Eight years, forty-two launches, zero templates."
          />
          <row gap="14" align="middle-left">
            <text text-style="Mono/Chip" value="KLM" fill="$muted" />
            <img src="https://api.iconify.design/lucide/asterisk.svg?color=%23FF4D00" w="11" h="11" />
            <text text-style="Mono/Chip" value="ADYEN" fill="$muted" />
            <img src="https://api.iconify.design/lucide/asterisk.svg?color=%23FF4D00" w="11" h="11" />
            <text text-style="Mono/Chip" value="FRAMER" fill="$muted" />
            <img src="https://api.iconify.design/lucide/asterisk.svg?color=%23FF4D00" w="11" h="11" />
            <text text-style="Mono/Chip" value="POLESTAR" fill="$muted" />
          </row>
        </col>
        <col w="124" h="124" radius="$radius-pill" border="1 $ink" align="middle-center" gap="4">
          <text text-style="Mono/Tiny" value="SCROLL" fill="$ink" letter-spacing="20%" />
          <img src="https://api.iconify.design/lucide/arrow-down.svg?color=%23FF4D00" w="16" h="16" />
          <text text-style="Mono/Tiny" value="2026" fill="$muted" letter-spacing="20%" />
        </col>
      </row>
    </col>
    <!-- ───────────── Marquee ───────────── -->
    <row w="fill" h="64" p="0 40" gap="40" align="middle-left" fill="$black" clip="true">
      <text text-style="Mono/Marquee" value="PRODUCT DESIGN" fill="$cream" letter-spacing="15%" />
      <img src="https://api.iconify.design/lucide/asterisk.svg?color=%23FF4D00" w="14" h="14" />
      <text text-style="Mono/Marquee" value="UX STRATEGY" fill="$cream" letter-spacing="15%" />
      <img src="https://api.iconify.design/lucide/asterisk.svg?color=%23FF4D00" w="14" h="14" />
      <text text-style="Mono/Marquee" value="DESIGN SYSTEMS" fill="$cream" letter-spacing="15%" />
      <img src="https://api.iconify.design/lucide/asterisk.svg?color=%23FF4D00" w="14" h="14" />
      <text text-style="Mono/Marquee" value="ART DIRECTION" fill="$cream" letter-spacing="15%" />
      <img src="https://api.iconify.design/lucide/asterisk.svg?color=%23FF4D00" w="14" h="14" />
      <text text-style="Mono/Marquee" value="PROTOTYPING" fill="$cream" letter-spacing="15%" />
      <img src="https://api.iconify.design/lucide/asterisk.svg?color=%23FF4D00" w="14" h="14" />
      <text text-style="Mono/Marquee" value="BRAND INTERFACES" fill="$cream" letter-spacing="15%" />
      <img src="https://api.iconify.design/lucide/asterisk.svg?color=%23FF4D00" w="14" h="14" />
      <text text-style="Mono/Marquee" value="MOTION" fill="$cream" letter-spacing="15%" />
    </row>
    <!-- ───────────── Selected work ───────────── -->
    <col role="gallery" w="fill" p="104 80 112 80" gap="48">
      <row w="fill" gap="auto" align="bottom-left">
        <row gap="12" align="middle-left">
          <text text-style="Mono" value="01" fill="$accent" letter-spacing="8%" />
          <text text-style="Mono" value="— SELECTED WORK" fill="$ink" letter-spacing="8%" />
        </row>
        <text text-style="Mono" value="2019 → 2026" fill="$muted" letter-spacing="8%" />
      </row>
      <!-- row 1: wide left, narrow right staggered down -->
      <row w="fill" gap="24" align="top-left">
        <col w="744" gap="18">
          <img
            src="https://images.unsplash.com/photo-1551650975-87deedd944c3?auto=format&amp;fit=crop&amp;w=1488&amp;h=1040&amp;q=80"
            w="744"
            h="520"
            radius="$radius-img"
            fit="cover"
          />
          <row w="fill" gap="auto" align="top-left">
            <col gap="4">
              <text text-style="Title/Card" value="Halo Health" fill="$ink" />
              <text
                text-style="Mono"
                value="N°01 — PATIENT EXPERIENCE · UX, UI, DESIGN SYSTEM"
                fill="$muted"
                letter-spacing="4%"
              />
            </col>
            <row h="32" p="0 14" radius="$radius-pill" border="1 $hairline" gap="6" align="middle-center">
              <text text-style="Mono/Chip" value="2025" fill="$ink" />
              <img src="https://api.iconify.design/lucide/arrow-up-right.svg?color=%23171511" w="13" h="13" />
            </row>
          </row>
        </col>
        <col w="fill" pt="120" gap="18">
          <img
            src="https://images.unsplash.com/photo-1563013544-824ae1b704d3?auto=format&amp;fit=crop&amp;w=1024&amp;h=800&amp;q=80"
            w="fill"
            h="400"
            radius="$radius-img"
            fit="cover"
          />
          <row w="fill" gap="auto" align="top-left">
            <col gap="4">
              <text text-style="Title/CardSm" value="Mono — banking for freelancers" fill="$ink" />
              <text
                text-style="Mono"
                value="N°02 — FINTECH · PRODUCT DESIGN"
                fill="$muted"
                letter-spacing="4%"
              />
            </col>
            <row h="32" p="0 14" radius="$radius-pill" border="1 $hairline" gap="6" align="middle-center">
              <text text-style="Mono/Chip" value="2024" fill="$ink" />
              <img src="https://api.iconify.design/lucide/arrow-up-right.svg?color=%23171511" w="13" h="13" />
            </row>
          </row>
        </col>
      </row>
      <!-- row 2: narrow left staggered, wide right -->
      <row w="fill" gap="24" align="top-left">
        <col w="488" pt="72" gap="18">
          <img
            src="https://images.unsplash.com/photo-1488646953014-85cb44e25828?auto=format&amp;fit=crop&amp;w=976&amp;h=720&amp;q=80"
            w="488"
            h="360"
            radius="$radius-img"
            fit="cover"
          />
          <row w="fill" gap="auto" align="top-left">
            <col gap="4">
              <text text-style="Title/CardSm" value="Atlas Travel OS" fill="$ink" />
              <text
                text-style="Mono"
                value="N°03 — TRAVEL · UX STRATEGY, UI"
                fill="$muted"
                letter-spacing="4%"
              />
            </col>
            <row h="32" p="0 14" radius="$radius-pill" border="1 $hairline" gap="6" align="middle-center">
              <text text-style="Mono/Chip" value="2023" fill="$ink" />
              <img src="https://api.iconify.design/lucide/arrow-up-right.svg?color=%23171511" w="13" h="13" />
            </row>
          </row>
        </col>
        <col w="fill" gap="18">
          <img
            src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?auto=format&amp;fit=crop&amp;w=1536&amp;h=1000&amp;q=80"
            w="fill"
            h="500"
            radius="$radius-img"
            fit="cover"
          />
          <row w="fill" gap="auto" align="top-left">
            <col gap="4">
              <text text-style="Title/Card" value="Forma — furniture configurator" fill="$ink" />
              <text
                text-style="Mono"
                value="N°04 — E-COMMERCE · ART DIRECTION, 3D UI"
                fill="$muted"
                letter-spacing="4%"
              />
            </col>
            <row h="32" p="0 14" radius="$radius-pill" border="1 $hairline" gap="6" align="middle-center">
              <text text-style="Mono/Chip" value="2022" fill="$ink" />
              <img src="https://api.iconify.design/lucide/arrow-up-right.svg?color=%23171511" w="13" h="13" />
            </row>
          </row>
        </col>
      </row>
    </col>
    <!-- ───────────── About (black band) ───────────── -->
    <col w="fill" fill="$black" p="120 80" gap="64">
      <row w="fill" gap="auto" align="top-left">
        <col w="720" gap="28">
          <row gap="12" align="middle-left">
            <text text-style="Mono" value="02" fill="$accent" letter-spacing="8%" />
            <text text-style="Mono" value="— ABOUT" fill="$cream" letter-spacing="8%" />
          </row>
          <text text-style="Display/Statement" fill="$cream" w="fill">
            <segment value="Good design is " fill="$cream" />
            <segment value="invisible" fill="$accent" font-style="italic" />
            <segment value=" — right up until the moment it isn't. I design for both." fill="$cream" />
          </text>
          <text
            text-style="Body/Lead"
            fill="$cream-dim"
            w="600"
            value="Formerly lead product designer at a unicorn you've heard of. Now independent, working with three teams a year — never more. Slow studio, fast decisions."
          />
        </col>
        <img
          src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?auto=format&amp;fit=crop&amp;w=600&amp;h=760&amp;q=80"
          w="300"
          h="380"
          radius="$radius-img"
          fit="cover"
          border="2 $accent"
        />
      </row>
      <row w="fill" gap="auto" align="top-left" pt="40" border-top="1 $hairline-dark">
        <col gap="6">
          <text text-style="Display/Stat" value="08" fill="$cream" />
          <text text-style="Mono" value="YEARS PRACTICING" fill="$cream-dim" letter-spacing="10%" />
        </col>
        <col gap="6">
          <text text-style="Display/Stat" value="42" fill="$cream" />
          <text text-style="Mono" value="PRODUCTS SHIPPED" fill="$cream-dim" letter-spacing="10%" />
        </col>
        <col gap="6">
          <text text-style="Display/Stat" value="11×" fill="$cream" />
          <text text-style="Mono" value="DESIGN AWARDS" fill="$cream-dim" letter-spacing="10%" />
        </col>
        <col gap="6">
          <text text-style="Display/Stat" value="03" fill="$accent" />
          <text text-style="Mono" value="TEAMS PER YEAR, MAX" fill="$cream-dim" letter-spacing="10%" />
        </col>
      </row>
    </col>
    <!-- ───────────── Services ───────────── -->
    <col w="fill" p="112 80" gap="40">
      <row w="fill" gap="auto" align="bottom-left">
        <row gap="12" align="middle-left">
          <text text-style="Mono" value="03" fill="$accent" letter-spacing="8%" />
          <text text-style="Mono" value="— SERVICES" fill="$ink" letter-spacing="8%" />
        </row>
        <text text-style="Mono" value="CAPABILITIES, NOT DELIVERABLES" fill="$muted" letter-spacing="8%" />
      </row>
      <col w="fill">
        <row w="fill" p="32 0" gap="32" align="middle-left" border-top="1 $hairline">
          <text text-style="Mono/Chip" value="01" fill="$accent" />
          <text text-style="Title/Service" value="Product Design" fill="$ink" w="460" />
          <text
            text-style="Body"
            value="End-to-end: discovery, flows, interface, ship. I stay until it's live."
            fill="$ink-soft"
            w="fill"
          />
          <img src="https://api.iconify.design/lucide/arrow-up-right.svg?color=%23171511" w="22" h="22" />
        </row>
        <row w="fill" p="32 0" gap="32" align="middle-left" border-top="1 $hairline">
          <text text-style="Mono/Chip" value="02" fill="$accent" />
          <text text-style="Title/Service" value="Design Systems" fill="$ink" w="460" />
          <text
            text-style="Body"
            value="Tokens, components and documentation your engineers will actually use."
            fill="$ink-soft"
            w="fill"
          />
          <img src="https://api.iconify.design/lucide/arrow-up-right.svg?color=%23171511" w="22" h="22" />
        </row>
        <row w="fill" p="32 0" gap="32" align="middle-left" border-top="1 $hairline">
          <text text-style="Mono/Chip" value="03" fill="$accent" />
          <text text-style="Title/Service" value="Art Direction" fill="$ink" w="460" />
          <text
            text-style="Body"
            value="A visual world for brands with taste — typography first, trends last."
            fill="$ink-soft"
            w="fill"
          />
          <img src="https://api.iconify.design/lucide/arrow-up-right.svg?color=%23171511" w="22" h="22" />
        </row>
        <row
          w="fill"
          p="32 0"
          gap="32"
          align="middle-left"
          border-top="1 $hairline"
          border-bottom="1 $hairline"
        >
          <text text-style="Mono/Chip" value="04" fill="$accent" />
          <text text-style="Title/Service" value="Prototyping" fill="$ink" w="460" />
          <text
            text-style="Body"
            value="Make it feel real before anyone writes production code."
            fill="$ink-soft"
            w="fill"
          />
          <img src="https://api.iconify.design/lucide/arrow-up-right.svg?color=%23171511" w="22" h="22" />
        </row>
      </col>
    </col>
    <!-- ───────────── Footer (black) ───────────── -->
    <col w="fill" fill="$black" p="128 80 48 80" gap="56">
      <col gap="20">
        <row gap="12" align="middle-left">
          <text text-style="Mono" value="04" fill="$accent" letter-spacing="8%" />
          <text text-style="Mono" value="— CONTACT" fill="$cream" letter-spacing="8%" />
        </row>
        <col gap="0">
          <text text-style="Display/Foot" value="Let's make" fill="$cream" />
          <text text-style="Display/Foot" value="something rare." fill="$accent" font-style="italic" />
        </col>
      </col>
      <row gap="16" align="middle-left">
        <row h="56" p="0 28" radius="$radius-pill" border="1 $cream" gap="12" align="middle-center">
          <ellipse w="8" h="8" fill="$accent" />
          <text text-style="Mono/Marquee" value="hello@amaraosei.studio" fill="$cream" />
        </row>
        <row h="56" p="0 28" radius="$radius-pill" fill="$accent" gap="10" align="middle-center">
          <text text-style="Mono/Marquee" value="BOOK A CALL" fill="$black" letter-spacing="6%" />
          <img src="https://api.iconify.design/lucide/arrow-up-right.svg?color=%230F0E0C" w="15" h="15" />
        </row>
      </row>
      <row w="fill" gap="auto" align="middle-left" pt="56" border-top="1 $hairline-dark">
        <text text-style="Mono/Tiny" value="© 2026 AMARA OSEI STUDIO" fill="$cream-dim" letter-spacing="8%" />
        <row gap="28" align="middle-left">
          <text text-style="Mono/Tiny" value="X / TWITTER" fill="$cream-dim" letter-spacing="8%" />
          <text text-style="Mono/Tiny" value="DRIBBBLE" fill="$cream-dim" letter-spacing="8%" />
          <text text-style="Mono/Tiny" value="LINKEDIN" fill="$cream-dim" letter-spacing="8%" />
          <text text-style="Mono/Tiny" value="READ.CV" fill="$cream-dim" letter-spacing="8%" />
        </row>
        <text
          text-style="Mono/Tiny"
          value="AMS — 14:32 CET · MADE WITH RESTRAINT"
          fill="$cream-dim"
          letter-spacing="8%"
        />
      </row>
    </col>
  </col>
</gui>
```