Roxanne

<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:media="http://search.yahoo.com/mrss/"
	
	>

<channel>
	<title>Roxanne</title>
	<link>https://designedbyroxanne.com</link>
	<description>Roxanne</description>
	<pubDate>Sun, 26 Jul 2026 11:33:41 +0000</pubDate>
	<generator>https://designedbyroxanne.com</generator>
	<language>en</language>
	
		
	<item>
		<title>Index</title>
				
		<link>https://designedbyroxanne.com/Index</link>

		<pubDate>Sun, 26 Jul 2026 11:33:41 +0000</pubDate>

		<dc:creator>Roxanne</dc:creator>

		<guid isPermaLink="true">https://designedbyroxanne.com/Index</guid>

		<description>

  roxanne

  
    Works
    About
    roxanne
    Artworks
    Fonts
  

    Menu
  

    Works
    About
    Artworks
    Fonts
  

:root {
  --rx-ink: #000;
  --rx-muted: #000;
  --rx-line: #e8e8e8;
  --rx-tag: #f1f1f1;
  --rx-radius: 0px;
  --rx-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rx-ease: cubic-bezier(.22,.61,.36,1);
  --rx-pink: #EB4F98;
}

.pill-nav, .pill-nav *, .rx, .rx * {
  box-sizing: border-box;
}

/* ---------- Navigation — 8px corners ---------- */
.pill-nav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
  border-radius: 8px;
  z-index: 1000;
  font-family: var(--rx-font);
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.nav-link {
  color: #000 !important;
  text-decoration: none;
  padding: 8px 16px;
  font-size: 15px;
  border-radius: 8px;
  transition: background .3s ease;
}

.nav-link:hover {
  background: rgba(0,0,0,.07);
}

.nav-logo {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -.09em;
  line-height: 1;
  color: #000 !important;
  text-decoration: none;
  padding: 4px 14px 6px 10px;
  transition: opacity .35s ease;
}

.nav-logo:hover {
  opacity: .6;
}

.nav-logo--mobile {
  display: none;
}

.dropdown-toggle {
  display: none;
  background: transparent;
  color: #000 !important;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font: 500 14px var(--rx-font);
  padding: 8px 16px;
  transition: background .3s ease;
}

.dropdown-toggle:hover {
  background: rgba(0,0,0,.07);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  padding: 6px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .25s var(--rx-ease),
              transform .25s var(--rx-ease),
              visibility .25s;
}

.dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.dropdown-menu a {
  display: block;
  padding: 12px 14px;
  color: #000 !important;
  text-decoration: none;
  font-size: 16px;
  border-radius: 8px;
}

.dropdown-menu a:hover {
  background: rgba(0,0,0,.06);
}

@media (max-width: 768px) {
  .desktop-nav {
    display: none;
  }

  .nav-logo--mobile {
    display: block;
  }

  .dropdown-toggle {
    display: block;
  }

  .pill-nav {
    width: calc(100% - 32px);
    top: 14px;
  }
}


document.addEventListener("DOMContentLoaded", function() {
  var toggle = document.getElementById("dropdownToggle");
  var menu = document.getElementById("dropdownMenu");

  document.querySelectorAll(".js-top").forEach(function(a) {
    a.addEventListener("click", function() {
      window.scrollTo(0, 0);
    });
  });

  if (!toggle &#124;&#124; !menu) return;

  function setOpen(open) {
    menu.classList.toggle("open", open);
    toggle.setAttribute("aria-expanded", String(open));
    toggle.querySelector(".toggle-label").textContent = open ? "Close" : "Menu";
  }

  toggle.addEventListener("click", function(e) {
    e.stopPropagation();
    setOpen(!menu.classList.contains("open"));
  });

  menu.addEventListener("click", function(e) {
    if (e.target.closest("a")) {
      setOpen(false);
    } else {
      e.stopPropagation();
    }
  });

  document.addEventListener("click", function() {
    setOpen(false);
  });

  document.addEventListener("keydown", function(e) {
    if (e.key === "Escape") setOpen(false);
  });
});


.rx {
  font-family: var(--rx-font);
  color: #000;
}

.rx h1,
.rx h2,
.rx h3,
.rx p,
.rx a,
.rx span,
.rx li,
.rx button {
  color: #000 !important;
}

.rx .footer,
.rx .footer * {
  color: #fff !important;
}

/* ---------- Creative Technology link ---------- */
.rx .intro a.creative-tech-link {
  color: var(--rx-ink) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: opacity .3s ease;
}

.rx .intro a.creative-tech-link:hover {
  opacity: .65;
}

.rx a:focus-visible,
.rx button:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
  border-radius: 0px;
}

.pill-nav a:focus-visible,
.pill-nav button:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
  border-radius: 8px;
}

.rx-bleed {
  margin-left: -20px;
  margin-right: -20px;
}

/* ---------- Intro ---------- */
.intro {
  max-width: 980px;
  margin: 150px auto 90px;
  text-align: center;
}

.intro h1 {
  font-size: clamp(26px, 3.4vw, 46px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.025em;
  margin: 0;
}

.intro h1 .soft {
  color: var(--rx-muted);
}

/* ---------- Selected work grid ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 16px;
}

.work {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.work-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.work-media {
  position: relative;
  aspect-ratio: 15.75 / 9;
  overflow: hidden;
  border-radius: 0px;
  background: transparent;
}

.work-media &#62; *,
.work-media img,
.work-media video,
.work-media iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0px !important;
  transition: transform 1.2s var(--rx-ease);
}

.work-link:hover .work-media img,
.work-link:hover .work-media video {
  transform: scale(1.03);
}

/* ---------- Terra: coming soon ---------- */
.rx .terra-coming-soon .work-media {
  cursor: progress !important;
}

.rx .terra-coming-soon .work-media video {
  transform: none !important;
}

.rx .terra-coming-soon:hover .work-media video {
  transform: none !important;
}

.rx .terra-coming-soon:hover .work-head {
  opacity: 1;
}

.rx .terra-coming-soon:hover .work-meta {
  transform: none;
}

/* ---------- Loading animation ---------- */
.coming-soon-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1.5px solid rgba(0,0,0,.2);
  border-top-color: #000;
  border-radius: 50%;
  animation: terra-spin .8s linear infinite;
  flex-shrink: 0;
}

@keyframes terra-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Work headings ---------- */
.work-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  transition: opacity .35s ease;
}

.work-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.25;
  margin: 0;
}

.work-meta {
  font-size: 14px;
  color: var(--rx-muted);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform .4s var(--rx-ease);
}

.work-link:hover .work-head {
  opacity: .6;
}

.work-link:hover .work-meta {
  transform: translateX(4px);
}

/* ---------- Tags — 4px corners ---------- */
.tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tags li {
  font-size: 12px;
  line-height: 1;
  padding: 7px 11px;
  border-radius: 4px;
  background: var(--rx-tag);
  color: #000;
}

/* ---------- Arrows ---------- */
.ico {
  display: inline-block !important;
  width: .85em !important;
  height: .85em !important;
  max-width: none !important;
  vertical-align: -.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.scroll-btns .ico {
  width: 16px !important;
  height: 16px !important;
  vertical-align: middle;
}

/* ---------- Awards and exhibitions ---------- */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 180px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rx-line);
}

.section-head h2 {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 500;
  letter-spacing: -.02em;
  margin: 0;
}

.scroll-btns {
  display: flex;
  gap: 6px;
}

.scroll-btns button {
  width: 40px;
  height: 40px;
  border-radius: 0px;
  border: 1px solid var(--rx-line);
  background: #fff;
  color: var(--rx-ink);
  font-size: 18px;
  cursor: pointer;
  transition: opacity .35s ease;
}

.scroll-btns button:hover {
  opacity: .6;
}

.portrait-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 28px 0 8px;
  scrollbar-width: none;
}

.portrait-grid::-webkit-scrollbar {
  display: none;
}

.portrait {
  flex: 0 0 auto;
  width: clamp(260px, 28vw, 480px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-snap-align: start;
}

.portrait .work-media {
  aspect-ratio: 3 / 4.3;
  border-radius: 0px;
}

/* ---------- Footer ---------- */
.footer {
  background: #000;
  color: #fff;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 200px;
  margin-bottom: -50px;
  padding: 56px 35px 0;
  overflow: hidden;
  font-family: var(--rx-font);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 80px;
}

.footer-top h3 {
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #fff;
  margin: 0 0 16px;
}

.footer-top p,
.footer-top a {
  display: block;
  font-size: 18px;
  line-height: 1.65;
  color: #fff;
  text-decoration: none;
  margin: 0;
}

.footer-top a {
  width: fit-content;
  transition: opacity .35s ease;
}

.footer-top a:hover {
  opacity: .6;
}

.footer-logo {
  display: block;
  width: 100%;
  margin: 0 0 24px;
  user-select: none;
}

.footer-logo svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  overflow: visible;
}

.footer-logo text {
  fill: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .rx-bleed {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 768px) {
  .intro {
    margin: 120px auto 56px;
  }

  .work-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .work-title {
    font-size: 16px;
  }

  .section-head {
    margin-top: 110px;
  }

  .scroll-btns {
    display: none;
  }

  .portrait {
    width: 78vw;
  }
}

@media (max-width: 900px) {
  .footer {
    margin-top: 120px;
    padding: 40px 20px 0;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    margin-bottom: 48px;
  }

  .footer-top &#62; div:first-child {
    grid-column: 1 / -1;
  }

  .footer-top p,
  .footer-top a {
    font-size: 17px;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 520px) {
  .footer-top {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rx *,
  .pill-nav * {
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .coming-soon-spinner {
    animation: none !important;
  }
}


    A graphic designer specialising in Visual Identity, Interactive Design &#38;amp; Creative Technology
  

          Terra
          
            
            Coming soon
          
        
        Website
        Interactive
        Visual Identity
        Bespoke Typeface
        Packaging
        Climate &#38;amp; Sustainability
      
    
          Farshestan
          
            View project
            
              
        Website
        Interactive
        Visual Identity
        3D Environment
      
    
          &#60;img src="https://freight.cargo.site/t/original/i/a7e57122f77a7a48760bef28c80a085a787605e2459fb9ab3e0a6752cabd13d6/Asset-13x.png" alt="UGG" loading="lazy"&#62;
        
        
          UGG EMEA
          
            ugg.com
            
              
        UI / UX
      
    
          frameCount++
          
            View project
            
              
        Website
        Interactive
        Visual Identity
      
    
          Jane
          
            View project
            
              
        Art Direction
        Website Design
       
      
          Regency Foods
          
            View project
            
              
        Visual Identity
        Website
        Packaging
      
    
          &#60;img src="https://freight.cargo.site/t/original/i/b1e68aedf87aa1f75fef1f7db0fd8c83e7145ad4ac46bdf7b8d411102e5ce37f/Screenshot-2025-06-11-at-12.55.59.png" alt="Ovo Energy" loading="lazy"&#62;
        
        
          Ovo Energy
          
            ovoenergy.com
            
              
        UI Design
        Climate &#38;amp; Sustainability
      
    
          &#60;img src="https://freight.cargo.site/t/original/i/89de0c0fdd16abd791a84d61747dcb30da71809e3a1ea810722c5cc543d7a143/studio_03_spread.png" alt="Synesthesia" loading="lazy"&#62;
        
        
          Synesthesia
          
            View project
            
              
        Interactive
        Audio Reactive
        Generative Art
        Augmented Reality
      
    
          &#60;img src="https://freight.cargo.site/t/original/i/2173d04e0ab5d5e698e4a1bd4b1296fe3d151b94ca14cd84d51d651effcf65c9/Book-Cover2-copy2.jpg" alt="Regency Foods cookbook" loading="lazy"&#62;
        
        
          Regency Foods
          
            View project
            
              
        Book Design
        Illustration
        Print
      
    
    Awards, exhibitions &#38;amp; more
    
      
          &#60;img src="https://freight.cargo.site/t/original/i/9b9654e4b543140a41b811d6df3629fc30cc53458a4da1972a3e3caea799e8da/cover.png" alt="Fire immersive installation" loading="lazy"&#62;
        
        
          Fire — Immersive Installation
          
            
        Digital Art
        TouchDesigner
      
    
          &#60;img src="https://freight.cargo.site/t/original/i/53beb8e937280c9be7430daa39d89092e7f4710341d2143dd2510c17d5777859/logo.jpeg" alt="NASA Space Apps project" loading="lazy"&#62;
        
        
          NASA Space Apps —Global Nominee
          
            
        UI / UX Design
        Development
        React.js
      
    
          Holy Art Gallery —Exhibited “Synesthesia”
          
            
        Generative Art
        p5.js
        Exhibition
      
    
          &#60;img src="https://freight.cargo.site/t/original/i/f8817f09695c565d9ca232718100f98e960169d9522d4e60156dbb6103e48102/wlf_zine-gif.gif" alt="Woman, Life, Freedom zine" loading="lazy"&#62;
        
        
          Woman, Life, Freedom —Zine
        
      
        Editorial Design
        Volunteering
        Human Rights
      
    
        ©2026
        Roxanne
      

        Social
        
        LinkedIn
        GitHub
      

        Contact
        hello@designedbyroxanne.com
        London, United Kingdom
      

        Navigate
        Works
        About
        Artworks
        Fonts
      

        roxanne
      
    
document.addEventListener("DOMContentLoaded", function() {

  /* Awards carousel */
  var grid = document.getElementById("portraitGrid");

  if (!grid) return;

  document.querySelectorAll(".scroll-btns button").forEach(function(btn) {
    btn.addEventListener("click", function() {
      var card = grid.querySelector(".portrait");
      var step = card ? card.offsetWidth + 16 : 400;

      grid.scrollBy({
        left: step * Number(btn.dataset.dir),
        behavior: "smooth"
      });
    });
  });

});
</description>
		
	</item>
		
	</channel>
</rss>