Salem 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>Salem M'Boge</title>
	<link>https://saleemmboge.info</link>
	<description>Salem 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>Salem M'Boge</dc:creator>

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

		<description>

Saleem M'Boge — Studio M'Boge


*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  min-height: 100%;
  background: #111210;
  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: var(--black);
  color: var(--white);
  font-family: var(--body);
}

a {
  color: inherit;
  text-decoration: none;
}

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: 'uarr;';
  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: var(--black);
  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;
    overflow-y: scroll;
  }

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

  .sidebar {
    position: relative;
    width: 100%;
    height: auto;
    border-bottom: 1px solid var(--rule);
    padding: 2rem 2rem 1.6rem;
  }

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

  .page-nav {
    margin-bottom: 1.4rem;
  }

  .sidebar-footer {
    padding-top: 1.4rem;
  }

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

  .index-header {
    padding: 2.4rem 1.6rem 0;
    margin-bottom: 2rem;
  }

  .thumb-grid {
    padding: 0 1.6rem 4rem;
    gap: 1.2rem;
  }

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

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

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

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

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

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


    Saleem M'Boge

    
      Index
      Info
    

        LinkedIn
        Instagram
        Vimeo
      
      
        Available for work
      
    
          Portrait
        

          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
          
        
        Studio M'Boge
        2026 Studio M'Boge. All Rights Reserved.
      

        2023 - 2026Oakland, CA
      

    01
    NTHN
    Brand Identity · Art Direction
  

            02
            Trader Joe's
            Retail Graphics · Production
          
        
            03
            FRGMTed
            Exhibition · Branding
          
        
            04
            Thoughtful Threads
            Branding · Event Design
          
        
            05
            Live &#38;amp; Direct
            Publication
          
        
            06
            Goodtime Cafe
            Product Dev · Totes · Art Direction
          
        
            07
            Wake Up
            Brand Identity
          
        
        Studio M'Boge
        2026 Studio M'Boge. All Rights Reserved.
      

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