Saleem M'Boge

<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>Saleem M'Boge</title>
	<link>https://saleemmboge.info</link>
	<description>Saleem M'Boge</description>
	<pubDate>Fri, 20 Feb 2026 20:08:06 +0000</pubDate>
	<generator>https://saleemmboge.info</generator>
	<language>en</language>
	
		
	<item>
		<title>Home</title>
				
		<link>https://saleemmboge.info/Home</link>

		<pubDate>Fri, 20 Feb 2026 20:08:06 +0000</pubDate>

		<dc:creator>Saleem M'Boge</dc:creator>

		<guid isPermaLink="true">https://saleemmboge.info/Home</guid>

		<description>
if (window.innerWidth &#60; 900) {
  window.location.replace('https://saleemmboge.info/info');
}


Saleem M'Boge — Studio M'Boge


a, a:visited, a:hover, a:active, a:focus {
  color: inherit !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  min-height: 100%;
  background: #111210 !important;
  overflow-x: hidden;
}

html {
  font-size: 10px;
}

:root {
  --black: #111210;
  --white: #edeae4;
  --maroon: #380808;
  --maroon-hi: #561010;
  --forest: #0b1e11;
  --forest-hi: #152d1c;
  --rule: rgba(237, 234, 228, 0.07);
  --mono: 'Space Mono', monospace;
  --cond: 'Barlow Condensed', sans-serif;
  --body: 'Barlow', sans-serif;
  --sidebar: 18rem;
}

body {
  background: #111210 !important;
  color: #edeae4 !important;
  font-family: var(--body);
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.010;
  pointer-events: none;
  z-index: 9999;
}

/* LAYOUT */

.site {
  display: grid;
  grid-template-columns: var(--sidebar) 1fr;
  min-height: 100%;
  width: 100%;
}

/* SIDEBAR */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar);
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 4rem 3rem;
  background: var(--black);
  z-index: 100;
}

.name-mark {
  font-family: var(--cond);
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
  margin-bottom: 2.4rem;
}

.page-nav {
  display: flex;
  gap: 2.4rem;
  margin-bottom: auto;
}

.nav-label-index,
.nav-label-info {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: color 0.16s, border-color 0.16s;
  user-select: none;
}

.nav-label-index {
  color: var(--white);
  border-bottom-color: rgba(237, 234, 228, 0.4);
}

.nav-label-info {
  color: rgba(237, 234, 228, 0.45);
}

.nav-label-index:hover,
.nav-label-info:hover {
  color: rgba(237, 234, 228, 0.8);
}

.sidebar-footer {
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}

.ext-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ext-links a {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(237, 234, 228, 0.42);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.14s;
}

.ext-links a::before {
  content: '↗';
  font-size: 0.58rem;
}

.ext-links a:hover {
  color: var(--white);
}

.avail {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(237, 234, 228, 0.45);
  border: 1px solid rgba(237, 234, 228, 0.12);
  padding: 0.45rem 0.9rem;
  margin-top: 1.6rem;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.avail:hover {
  background: var(--forest);
  border-color: var(--forest-hi);
  color: rgba(237, 234, 228, 0.85);
}

.avail-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4a9e5c;
  box-shadow: 0 0 6px rgba(74, 158, 92, 0.6);
  animation: pulse-green 2.4s ease-in-out infinite;
}

@keyframes pulse-green {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 6px rgba(74, 158, 92, 0.6);
  }
  50% {
    opacity: 0.35;
    box-shadow: 0 0 2px rgba(74, 158, 92, 0.2);
  }
}

/* MAIN */

.main {
  margin-left: var(--sidebar);
  background: #111210;
  width: calc(100vw - var(--sidebar));
  min-height: 100vh;
  overflow-y: auto;
}

/* PAGE SWITCHING */

#tab-index,
#tab-info {
  display: none;
}

.page-index {
  display: block;
  width: 100%;
}

.page-info {
  display: none;
  width: 100%;
}

#tab-info:checked ~ .main .page-info {
  display: block;
}

#tab-info:checked ~ .main .page-index {
  display: none;
}

#tab-info:checked ~ .sidebar .nav-label-index {
  color: rgba(237, 234, 228, 0.45);
  border-bottom-color: transparent;
}

#tab-info:checked ~ .sidebar .nav-label-info {
  color: var(--white);
  border-bottom-color: rgba(237, 234, 228, 0.4);
}

/* ANIMATIONS */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.page-index .index-header      { animation: fadeUp 0.8s 0.05s ease both; }
.page-index .thumb:nth-child(1) { animation: fadeUp 0.75s 0.10s ease both; }
.page-index .thumb:nth-child(2) { animation: fadeUp 0.75s 0.16s ease both; }
.page-index .thumb:nth-child(3) { animation: fadeUp 0.75s 0.22s ease both; }
.page-index .thumb:nth-child(4) { animation: fadeUp 0.75s 0.28s ease both; }
.page-index .thumb:nth-child(5) { animation: fadeUp 0.75s 0.34s ease both; }
.page-index .thumb:nth-child(6) { animation: fadeUp 0.75s 0.38s ease both; }
.page-index .thumb:nth-child(7) { animation: fadeUp 0.75s 0.42s ease both; }

#tab-info:checked ~ .main .info-photo-wrap {
  animation: fadeUp 0.7s 0.08s ease both;
}

#tab-info:checked ~ .main .info-bio-wrap {
  animation: fadeUp 0.7s 0.20s ease both;
}

#tab-info:checked ~ .main .info-contact {
  animation: fadeUp 0.7s 0.32s ease both;
}

/* INDEX PAGE */

.index-header {
  padding: 6rem 5rem 0 5rem;
  margin-bottom: 5rem;
  display: flex;
  justify-content: flex-end;
}

.index-count {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: rgba(237, 234, 228, 0.35);
  letter-spacing: 0.1em;
  text-align: right;
  line-height: 1.8;
}

.thumb-grid {
  padding: 0 5rem 10rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2.8rem;
  width: 100%;
}

.thumb[data-size="hero"]  { grid-column: span 12; aspect-ratio: 21 / 8; }
.thumb[data-size="half"]  { grid-column: span 6;  aspect-ratio: 4 / 3; }
.thumb[data-size="third"] { grid-column: span 4;  aspect-ratio: 4 / 3; }

.thumb {
  position: relative;
  overflow: hidden;
  background: #131211;
  cursor: pointer;
}

.thumb-img {
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
  background: #131211;
}

.thumb-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumb:hover .thumb-img {
  transform: scale(1.04);
}

.thumb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(9, 9, 8, 0);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.4rem 2.8rem;
  transition: background 0.32s ease;
}

.thumb:hover .thumb-overlay {
  background: rgba(9, 9, 8, 0.78);
}

.thumb-num {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(237, 234, 228, 0.6);
  margin-bottom: 0.5rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.thumb-name {
  font-family: var(--cond);
  font-weight: 900;
  font-size: clamp(1.8rem, 2.8vw, 3.2rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 0.9;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.24s 0.04s ease, transform 0.24s 0.04s ease;
}

.thumb-cat {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(237, 234, 228, 0.62);
  margin-top: 0.7rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.24s 0.08s ease, transform 0.24s 0.08s ease;
}

.thumb:hover .thumb-num,
.thumb:hover .thumb-name,
.thumb:hover .thumb-cat {
  opacity: 1;
  transform: none;
}

.thumb[data-accent="maroon"]:hover { box-shadow: inset 4px 0 0 var(--maroon-hi); }
.thumb[data-accent="forest"]:hover  { box-shadow: inset 4px 0 0 var(--forest-hi); }

/* INFO PAGE */

.info-float {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  padding: 6rem 5rem 8rem;
  gap: 0 6rem;
}

.info-photo-wrap {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: #161513;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: start;
}

.info-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-hint {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(237, 234, 228, 0.1);
}

.info-bio-wrap {
  grid-column: 2;
  grid-row: 1;
  padding-top: 0.5rem;
}

.info-bio-wrap p {
  font-family: var(--body);
  font-weight: 300;
  font-size: 1.45rem;
  line-height: 1.82;
  color: rgba(237, 234, 228, 0.58);
  margin-bottom: 1.8rem;
}

.info-bio-wrap p:last-child {
  margin-bottom: 0;
}

.info-contact {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  padding-top: 4rem;
}

.info-contact a {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(237, 234, 228, 0.45);
  padding: 0.4rem 0.9rem;
  border-bottom: 1px solid rgba(237, 234, 228, 0.12);
  display: block;
  margin-bottom: 1rem;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.info-contact a:hover {
  background: var(--forest);
  color: var(--white);
  border-bottom-color: var(--forest-hi);
}

/* FOOTER */

.site-footer {
  padding: 2.8rem 5rem;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-wordmark {
  font-family: var(--cond);
  font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(237, 234, 228, 0.07);
}

.footer-copy {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: rgba(237, 234, 228, 0.28);
}

/* MOBILE */

@media (max-width: 900px) {
  :root { --sidebar: 0px; }

  html, body {
    height: auto !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
  }

  .site {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  /* hide index entirely on mobile */
  .page-index { display: none !important; }
  .page-info  { display: block !important; }

  /* hide the nav switcher — info only on mobile */
  .page-nav { display: none; }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    height: auto;
    padding: 1.4rem 2rem;
    border-bottom: 1px solid var(--rule);
    background: #111210;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .name-mark {
    font-size: 1.4rem;
    margin-bottom: 0;
  }

  .sidebar-footer { display: none; }

  .main {
    margin-left: 0;
    width: 100%;
    overflow: visible !important;
    min-height: auto;
  }

  .info-float {
    display: block;
    padding: 2.4rem 1.6rem 4rem;
  }

  .info-photo-wrap {
    width: 100%;
    aspect-ratio: 3 / 4;
    margin-bottom: 3rem;
  }

  .info-bio-wrap { margin-bottom: 2.4rem; }

  .info-contact { padding-top: 0; }

  .mobile-message {
    font-family: var(--mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(237, 234, 228, 0.25);
    text-align: center;
    padding: 0 1.6rem 1rem;
    line-height: 1.8;
  }

  .site-footer { padding: 2.4rem 1.6rem; }
}


    Saleem M'Boge

    
      Index
      Info
    

        LinkedIn
        Instagram
        Vimeo
      
      
        Available for work
      
    
          &#60;img src="https://freight.cargo.site/t/original/i/6acf7e307f1a53c471164681c33912d886e12195c128a4de8c862278bcb7b574/IMG_6609.JPEG" alt="Saleem M'Boge"&#62;
           
        
          Saleem M'Boge is a multidisciplinary designer working at the intersection of culture and craft. Based in Oakland, California, his practice spans brand identity, art direction, and image-based work — built around the belief that the best design holds up over time and in use.
          He approaches each project through constraint and process, allowing the work to find its own logic. The result is design that feels considered, not decorated — systems that carry meaning without announcing it.
          Currently available for brand design roles across in-house, agency, and studio environments.
        

  Saleemmboge3@gmail.com
  Select Works 
  Digital + Paid Ads 


        Studio M'Boge
        2026 Studio M'Boge. All Rights Reserved.
      

        2023 - 2026Oakland, CA
      

    &#60;img src="https://freight.cargo.site/t/original/i/bb9af4ee4d927b4ea830f4a9ad6016eb7f191c231bf99c832feea51d3a6d56cf/Screenshot-2026-02-28-at-1.38.56PM.png" alt="NTHN" style="object-position: bottom;"&#62; --&#38;gt;
  
  
    01
    NTHN
    Brand Identity · Art Direction
  

            &#60;img src="https://freight.cargo.site/t/original/i/e63dd85379fdec9474864f60e24ec56a93639419bfa30b03ba13806843b3cd1d/trader-joes.png" alt="Trader Joe's"&#62; --&#38;gt;
          
          
            02
            Trader Joe's
            Retail Graphics · Production
          
        
            &#60;img src="https://freight.cargo.site/t/original/i/bf2318f46b16480f0a5d0a3f8a1d43a388e21aa8888b1fb7979c9ea791870a9e/FRGMTed.png" alt="FRGMTed"&#62; --&#38;gt;
          
          
            03
            FRGMTed
            Exhibition · Branding
          
        
            &#60;img src="https://freight.cargo.site/t/original/i/e0b5a429dbc9f3b27e098fdaca63316101f73a02f234a7ec636596894c660bf3/Thoughtful-Threads.png" alt="Thoughtful Threads"&#62; --&#38;gt;
          
          
            04
            Thoughtful Threads
            Branding · Event Design
          
        
            &#60;img src="https://freight.cargo.site/t/original/i/b2401c9064023a394650cc5c702d94107f3ce6aa77ca37aa0221d9d992665c41/Live-and-direct-thumbnail.png" alt="Live and Direct"&#62; --&#38;gt;
          
          
            05
            Live &#38;amp; Direct
            Publication
          
        
    &#60;img src="https://freight.cargo.site/t/original/i/938d05ccdaafaaf4bd18d15f56d72a1d4640cf228b40dea14658b75a584bf7b6/Screenshot-2026-05-20-at-8.54.59PM.png" alt="Dëkk"&#62; --&#38;gt;
  
  
    06
    Dëkk
    Editorial · Publication
  

            &#60;img src="https://freight.cargo.site/t/original/i/d867bc8f6d3719e6438158f439b7fd2144ae8c5bbcdf7fb290dccab55647afbe/Wake-Up-Thumbnail.png" alt="Wake Up"&#62; --&#38;gt;
          
          
            07
            Wake Up
            Brand Identity
          
        
        Studio M'Boge
        2026 Studio M'Boge. All Rights Reserved.
      

</description>
		
	</item>
		
	</channel>
</rss>