Hillary Ramos

<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>Hillary Ramos</title>
	<link>https://hillaryramos.studio</link>
	<description>Hillary Ramos</description>
	<pubDate>Thu, 03 Sep 2026 09:50:58 +0000</pubDate>
	<generator>https://hillaryramos.studio</generator>
	<language>en</language>
	
		
	<item>
		<title>Hola</title>
				
		<link>https://hillaryramos.studio/Hola</link>

		<pubDate>Wed, 23 Apr 2025 15:49:10 +0000</pubDate>

		<dc:creator>Hillary Ramos</dc:creator>

		<guid isPermaLink="true">https://hillaryramos.studio/Hola</guid>

		<description>Digital&#38;nbsp;Designer,&#38;nbsp;Creative Technologist, Writer, Art Director &#38;amp; Artist
I design the systems and the experience.


	HILLARY RAMOS&#38;nbsp;works across design, technology, art and writing, with a practice centred on systems: the structures, behaviors and relationships that shape how ideas are experienced.

&#38;nbsp; &#38;nbsp; &#38;nbsp;Her work moves between identity, digital products, creative technology, objects, spaces and cultural projects, with a particular interest in what happens when language, interaction and technology start behaving like a material, and brands begin to behave like living ecosystems.


.hillary-exe {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 20px 0;
  padding: 12px 16px;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.08);
  font-family: "Nitti Grotesk", sans-serif;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.02em;
}


/* TOP AND BOTTOM LINES */

.exe-top,
.exe-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 6px 0;
}

.exe-top {
  border-top: 1px solid rgba(194, 124, 124, 0.55);
  border-bottom: 1px solid rgba(194, 124, 124, 0.55);
}

.exe-bottom {
  border-top: 1px solid rgba(194, 124, 124, 0.55);
  border-bottom: 1px solid rgba(194, 124, 124, 0.55);
}


/* MAIN BODY */

.exe-body {
  position: relative;
  padding: 16px 0;
}

.exe-row {
  display: grid;
  grid-template-columns: 85px minmax(0, 1fr);
  gap: 12px;
  padding: 4px 0;
}

.exe-label {
  opacity: 0.42;
}

.exe-value {
  text-transform: uppercase;
  min-width: 0;
}


/* PHOTO */

.exe-photo {
  position: absolute;
  right: 0;
  top: 8px;
  width: 64px;
  z-index: 5;
  transform: rotate(2deg);
}

.exe-photo img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  filter: grayscale(100%);
}

.exe-photo span {
  display: block;
  margin-top: 3px;
  font-size: 7px;
  text-align: right;
  opacity: 0.4;
}


/* OUTPUT DIVIDER */

.exe-output {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dotted rgba(194, 124, 124, 0.55);
}


/* CHANGING CURRENTLY */

.currently-changing {
  position: relative;
  display: block;
  height: 1.3em;
  overflow: hidden;
  white-space: nowrap;
}

.currently-changing span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  animation: currently 35s infinite;
}

.currently-changing span:nth-child(1) {
  animation-delay: 0s;
}

.currently-changing span:nth-child(2) {
  animation-delay: 5s;
}

.currently-changing span:nth-child(3) {
  animation-delay: 10s;
}

.currently-changing span:nth-child(4) {
  animation-delay: 15s;
}

.currently-changing span:nth-child(5) {
  animation-delay: 20s;
}

.currently-changing span:nth-child(6) {
  animation-delay: 25s;
}

.currently-changing span:nth-child(7) {
  animation-delay: 30s;
}

@keyframes currently {

  0%, 12% {
    opacity: 1;
  }

  14%, 100% {
    opacity: 0;
  }

}


/* CHANGING OUTPUT */

.output-changing {
  position: relative;
  display: block;
  height: 1.3em;
  overflow: hidden;
  white-space: nowrap;
}

.output-changing span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  animation: output 45s infinite;
}

.output-changing span:nth-child(1) {
  animation-delay: 0s;
}

.output-changing span:nth-child(2) {
  animation-delay: 5s;
}

.output-changing span:nth-child(3) {
  animation-delay: 10s;
}

.output-changing span:nth-child(4) {
  animation-delay: 15s;
}

.output-changing span:nth-child(5) {
  animation-delay: 20s;
}

.output-changing span:nth-child(6) {
  animation-delay: 25s;
}

.output-changing span:nth-child(7) {
  animation-delay: 30s;
}

.output-changing span:nth-child(8) {
  animation-delay: 35s;
}

.output-changing span:nth-child(9) {
  animation-delay: 40s;
}

@keyframes output {

  0%, 10% {
    opacity: 1;
  }

  12%, 100% {
    opacity: 0;
  }

}


/* MOBILE */

@media (max-width: 600px) {

  .hillary-exe {
    font-size: 10px;
    padding: 10px 12px;
  }

  .exe-row {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .exe-photo,
  .exe-photo img {
    width: 52px;
    height: 52px;
  }

}


    HILLARY.EXE
    CREATIVE SYSTEM / 001
  

      &#60;img src="https://freight.cargo.site/t/original/i/9fe9a43f2bc3adc830f7ca4c99f3524907fe6cdc933db26e0940470d3cb35c68/operator-exe.jpeg" alt="Hillary Ramos"&#62;
      OPERATOR
    

      STATUS
      THINKING...
    

      LOCATION
      OSLO
    

      CURRENTLY

      
        MAKING THINGS BEHAVE
        ASKING BETTER QUESTIONS
        OVERTHINKING A TYPEFACE
        LOOKING FOR THE WEIRD SOLUTION
        PROBABLY OPENING ANOTHER TAB
        FOLLOWING A RABBIT HOLE
        MAKING SOMETHING UNNECESSARILY ELABORATE
      

      INPUT
      CURIOSITY
    

      PROCESS
      RESEARCH / CONNECT / MAKE
    

      TOOLS
      IMAGE / WORD / OBJECT / CODE / BODY
    

      OUTPUT

      
        A WEBSITE
        A STRANGE OBJECT
        A BETTER QUESTION
        SOME CODE
        A BRAND DECK
        A PAINTING
        AN EMAIL NEWSLETTER
        A SYSTEM
        ???
      

    SYSTEM STATUS // SEEMS FINE
    V. 202
	👩🏻‍💻
      CONTACT
      
        Instagram &#124; LinkedIn
        Email ⌯⌲


&#60;img width="373" height="373" width_o="373" height_o="373" data-src="https://freight.cargo.site/t/original/i/bea1c6c48e624929e7585cf0c33b17775583ceab81f85893a1be1368acae30f3/hrr-it-me.png" data-mid="230596690" border="0" data-scale="100" src="https://freight.cargo.site/w/373/i/bea1c6c48e624929e7585cf0c33b17775583ceab81f85893a1be1368acae30f3/hrr-it-me.png" /&#62;Former Design Director at Shoppe Object, and Senior Designer &#38;amp; Strategist at Aesthetic Movement. From New York and Puerto Rico. Currently based in Oslo, working internationally.

</description>
		
	</item>
		
		
	<item>
		<title>Nice Words</title>
				
		<link>https://hillaryramos.studio/Nice-Words-1</link>

		<pubDate>Wed, 23 Apr 2025 15:49:21 +0000</pubDate>

		<dc:creator>Hillary Ramos</dc:creator>

		<guid isPermaLink="true">https://hillaryramos.studio/Nice-Words-1</guid>

		<description>Nice Words


      “Hillary is a great creative partner – a doer and thinker, enthusiastic investigator and a thoughtful executor of beautiful work. She is thorough and precise, as any good designer should be, but her very special talent lies in her enthusiasm to work toward better, collective success on projects via a holistic approach. She is the one who goes the extra mile; happy to think big, climb a ladder, visit the printing press, whip out the camera, edit the videos, figure out the backend code, maintain the systems, dot the I’s and cross the T’s. Hillary ensures that the work you create together will succeed and has a knack for making the journey a little bit fun. What more could you really want?”
      
        – Minya Quirk
        Press
        Creative Director &#38;amp; Founder
        Capsule Show
        Shoppe Object
        Afternoon Light
      
    
      “Hillary Ramos is an innovative thinker, an intuitive problem solver, a talented designer, a dedicated collaborator, and a wonderful human being. Everything she works on – and even everyone she works with – benefits greatly from her presence. I would jump at the chance to work with her on any project she sets her eyes on.”
      
        – Jesse James
        LinkedIn
        Creative Director &#38;amp; Founder
        Shoppe Object
        Aesthetic Movement
        Sir&#124;Madam
        President &#38;amp; Show Director
        International Market Centers
        (IMC/ANDMORE)
      
    
</description>
		
	</item>
		
		
	<item>
		<title>Ofrendas</title>
				
		<link>https://hillaryramos.studio/Ofrendas-1</link>

		<pubDate>Wed, 23 Apr 2025 15:49:35 +0000</pubDate>

		<dc:creator>Hillary Ramos</dc:creator>

		<guid isPermaLink="true">https://hillaryramos.studio/Ofrendas-1</guid>

		<description>Ofrendas

WAYS WE MIGHT WORK TOGETHER

How can we continually reimagine our digital output and infrastructures, and the way brands think, communicate and show up in the world? Can we use design, computation and emerging technology to turn open-ended human problems into tangible experiences?


        Discovery / Hello
        Have a project, a half-formed idea, a problem you can't quite name, or simply a feeling that something could be better? Let's talk. A 15-minute call is enough to put the hopes, dreams, realities, limitations, budget and timeline on the table – and figure out what might happen next. You don't need to know everything yet. That's part of the fun.
      
      
        Design &#38;amp; Creative Direction
        From the first idea to the finished expression: brand strategy, visual identity, art direction, digital design, editorial, campaigns and content systems. I help clarify what a brand is trying to say, then figure out how it should look, sound, move and behave.
      
      
        Digital Muscle
        Sometimes you don't need a whole new creative department. You just need someone who can drop into the mess of an existing system, understand what's happening, and get the thing moving. Web updates. Production. Templates. Image wrangling. Print. Signage. Catalogs. Campaign support. Systems that need fixing. Ideas that need an extra brain. Big or small, polished or gloriously last-minute... I'm happy in the muck. Senior creative support, and a creative right hand, without the overhead.
      
      
        Interior Design &#38;amp; Curation
        I have a soft spot for objects, spaces and the strange little ecosystems that form around them. Drawing on years spent working across design, retail, interiors and independent brands, I can help source, curate and shape spaces and product selections with a strong point of view.
      
      
        Art Direction &#38;amp; Content Creation
        Brands need to keep making things, but not everything needs to feel like an advertisement. I can help shape and produce the visual world around a brand: photography, video, digital, print, editorial and flexible content systems that can travel across platforms and seasons. The goal is a landscape that feels alive, recognisable and true to the brand, including when it has to sell something.
      
    
👩🏻‍💻
      CONTACT
      
        Instagram&#38;nbsp;&#124;&#38;nbsp;LinkedIn
        Email ⌯⌲
      
    
</description>
		
	</item>
		
		
	<item>
		<title>Approach</title>
				
		<link>https://hillaryramos.studio/Approach</link>

		<pubDate>Mon, 31 Aug 2026 12:15:43 +0000</pubDate>

		<dc:creator>Hillary Ramos</dc:creator>

		<guid isPermaLink="true">https://hillaryramos.studio/Approach</guid>

		<description>
	
Approach

I like starting with questions rather than any prescribed solution. I look for the thing underneath the thing: what is actually trying to happen, where the friction is, what people need, and what the system is currently making possible or impossible.


I work iteratively and across disciplines, moving between strategy, language, image, interaction, technology and physical making as the problem requires. I really like ambitious ideas, useful constraints, strange detours, and making things that work as well as they look.


Most of all, I care about making things more intentional: clearer, more generous, more interesting, and a little more alive.


	⤹ {˖hover⇣fun} ↴
PRACTICE

Create &#38;amp; Shape IdentitiesStrategy, discovery, positioningBrandingIllustrationArt direction
Photography

Build the World &#38;amp; ExperiencesWebsite designDigital productUX/UIPlatforms &#38;amp; creative systems
Let Things MoveEmail NewslettersMotion, animation
Interactive experiencesCreative codingTemplates, toolkits, workflows

Make it IRL / Physical 
Editorial &#38;amp; Print Design
Catalog Design
Book Typesetting
OOH / Signage Installations, events, objects

Keep It Alive 

Content creationAdobe everything

Ads &#38;amp; Marketing
Ongoing creative direction+ whatever unexpected combination of the above a project happens to require :-)
OTHER PRACTICES

ArtistSound healing ceremony facilitator 
Dance &#38;amp; performance
Choreography

BreathworkSomatic awareness education 
Researched design writingPoetry, Painting
Film &#38;amp; Video
Collaborations
Consultancy


	SELECTED COLLABORATIONSDesignShoppe ObjectAesthetic MovementThe Floral SocietySir&#124;MadamMinor HistoryOdeme &#38;amp; IzolaLaura DelmanSock Art LAGraphic Image NYImmodest Cotton
Alex AsheSound &#38;amp; Culture
Guadalupe MaravillaMoMABrooklyn MuseumHenie OnstadSocrates Sculpture ParkPPOWICA BostonThe Contemporary AustinMARFA
Venice Biennale 2026PerformanceBallet HispanicoJennifer &#38;amp; Kevin McCoyJacob’s PillowDeMa Dance Co
Yesid LopezBoom FestivalEvolfoNick Hakim
</description>
		
	</item>
		
		
	<item>
		<title>Impressions Aesop</title>
				
		<link>https://hillaryramos.studio/Impressions-Aesop</link>

		<pubDate>Wed, 26 Aug 2026 13:58:48 +0000</pubDate>

		<dc:creator>Hillary Ramos</dc:creator>

		<guid isPermaLink="true">https://hillaryramos.studio/Impressions-Aesop</guid>

		<description>


  :host{
    --cream:#ece7da;--stone:#f3ecd6;--plinth:#e2dccd;--kraft:#d7c8a2;
    --amber:#6b3f22;--espresso:#221c17;--sage:#7f8168;--hair:#cbc2b0;--ink:#221c17;
    --serif:inherit;
    --suisse:inherit;
    --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --col:720px;
  }
  *{box-sizing:border-box}
  
  .imp-root{margin:0;background:var(--cream);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.72;-webkit-font-smoothing:antialiased}
  .wrap{max-width:960px;margin:0 auto;padding:0 clamp(20px,5vw,44px)}
  .section{padding:clamp(64px,11vh,124px) 0}
  .measure{max-width:var(--col)}
  .eyebrow{font-family:var(--suisse);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);margin:0 0 22px}
  h1,h2,h3{font-weight:500;margin:0}
  h1{font-size:clamp(46px,9vw,92px);line-height:1.02;letter-spacing:-.02em;margin:0 0 26px}
  h2{font-size:clamp(28px,4.4vw,40px);line-height:1.12;letter-spacing:-.01em;margin:0 0 26px}
  h3{font-size:20px;letter-spacing:.01em;margin:0 0 10px}
  p{margin:0 0 20px}
  .lede{font-size:clamp(21px,2.6vw,26px);line-height:1.5;color:var(--espresso)}
  .rule{height:1px;background:var(--hair);border:0;margin:0}
  .seal{display:inline-block;width:16px;height:16px;border:1px solid var(--amber);border-radius:50%;position:relative;vertical-align:middle}
  .seal::before,.seal::after{content:"";position:absolute;background:var(--amber)}
  .seal::before{left:50%;top:3px;bottom:3px;width:1px;transform:translateX(-.5px)}
  .seal::after{top:50%;left:3px;right:3px;height:1px;transform:translateY(-.5px)}

  .hero{padding-top:clamp(80px,16vh,180px)}
  .hero .kicker{font-family:var(--suisse);font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin:0 0 30px}
  .hero .sub{font-family:var(--suisse);font-weight:400;font-size:clamp(19px,2.6vw,25px);line-height:1.5;color:var(--espresso);max-width:34ch}

  .cover{padding-top:clamp(80px,15vh,168px);padding-bottom:clamp(48px,9vh,92px)}
  .cover-kicker{font-family:var(--suisse);font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin:0 0 30px}
  .cover-q{font-family:var(--serif);font-weight:500;font-size:clamp(34px,6.2vw,68px);line-height:1.04;letter-spacing:-.02em;margin:0 0 26px;max-width:18ch}
  .cover-disc{font-family:var(--suisse);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#2b5e46;margin:0 0 34px}
  .cover-statement{font-family:var(--serif);font-size:clamp(20px,2.6vw,26px);line-height:1.5;color:var(--espresso);max-width:40ch;margin:0 0 46px}
  .spec{margin:0;border-top:1px solid var(--hair);max-width:var(--col)}
  .spec-row{display:flex;gap:24px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--hair)}
  .spec-row dt{flex:0 0 132px;font-family:var(--suisse);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);margin:0}
  .spec-row dd{margin:0;font-size:18px;color:var(--espresso)}
  .spec-row dd.mono{font-family:var(--mono);font-size:14px;letter-spacing:.01em;color:var(--amber)}
  @media (max-width:600px){.spec-row{flex-direction:column;gap:6px}.spec-row dt{flex:none}}
  .introband{background:#e6e0d2}
  .introlead{font-size:clamp(19px,2.4vw,24px);line-height:1.5;color:var(--espresso);max-width:46ch}
  .introband .mockgrid{grid-template-columns:1fr}
  .introband .frame{aspect-ratio:16/9}

  .concept{background:#f5f2ea}
  .stagewrap{margin-top:40px;background:#ffffff;border:1px solid var(--hair);box-shadow:0 16px 40px rgba(34,28,23,.10);padding:clamp(26px,5vw,52px);display:flex;gap:clamp(26px,5vw,54px);flex-wrap:wrap;align-items:flex-start}
  .stage{flex:1 1 300px;max-width:420px;box-shadow:0 12px 26px rgba(34,28,23,.14);line-height:0}
  canvas{width:100%;height:auto;display:block;background:var(--stone);transition:opacity .18s ease}
  .controls{flex:1 1 260px;min-width:250px}
  .controls .cap{font-family:var(--mono);font-size:12px;line-height:1.7;color:#655c50;margin:0 0 22px}
  .row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
  button{flex:1 1 auto;min-width:120px;font-family:var(--suisse);font-weight:500;font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:13px 14px;border:1px solid var(--amber);background:transparent;color:var(--amber);cursor:pointer;transition:background .18s ease,color .18s ease}
  button:hover{background:var(--amber);color:var(--cream)}
  button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  button[aria-pressed="true"]{background:var(--espresso);border-color:var(--espresso);color:var(--cream)}
  .locate{width:100%;border-style:dashed}
  .lbl{font-family:var(--suisse);font-weight:500;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#7a7264;margin:0 0 10px}
  .readout{border:1px solid var(--hair);background:var(--cream);padding:16px 18px;margin-bottom:20px;min-height:100px}
  .readout .k{font-family:var(--suisse);font-weight:500;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#8a8071;margin:0 0 8px}
  .readout .v{font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--espresso);margin:0}
  .readout .sw{display:inline-block;width:11px;height:11px;border:1px solid var(--hair);vertical-align:middle;margin:0 3px}
  .swatches{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
  .chip{width:32px;height:32px;padding:0;min-width:0;flex:0 0 auto;border:1px solid var(--hair);cursor:pointer;background-size:100% 100%}
  .chip[aria-pressed="true"]{outline:2px solid var(--espresso);outline-offset:2px;background-color:transparent}
  .pchip{padding:6px 12px;font-family:var(--suisse);font-weight:500;font-size:11px;border:1px solid var(--hair);background:transparent;color:var(--ink);cursor:pointer;text-transform:none;letter-spacing:.02em;flex:0 0 auto;min-width:0}
  .pchip[aria-pressed="true"]{outline:2px solid var(--espresso);outline-offset:2px}
  .fineprint{font-family:var(--mono);font-size:11px;color:#8a8071;line-height:1.7;margin:0}

  .mech h3{color:var(--amber);margin-top:46px}
  .mech .measure p{color:#4a423a}
  .fig{margin:26px 0 4px;border:1px solid var(--hair);background:var(--cream);padding:22px 22px 18px}
  .fig svg{display:block;width:100%;height:auto}
  .figcap{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:#7a7264;margin:14px 0 0}

  .reads h3{color:var(--amber);margin-top:34px}
  .reads .measure p{color:#3f3a33}

  .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:44px}
  .cols h3{color:var(--amber)}
  .cols p{font-size:16px;line-height:1.6;color:#4a423a;margin:0}

  .mockgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:36px}
  .mock{margin:0}
  .frame{position:relative;aspect-ratio:4/5;border:1px solid var(--hair);background:var(--cream);overflow:hidden;display:flex;align-items:center;justify-content:center}
  .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .ph{font-family:var(--suisse);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#a49c8c;text-align:center;padding:0 16px}
  .mock figcaption{font-family:var(--mono);font-size:11px;color:#7a7264;margin-top:12px;letter-spacing:.02em}

  .dark{background:#f5f2ea;color:#3a332b}
  .dark .eyebrow{color:#2b5e46}
  .dark h2{color:var(--espresso)}
  .dark p{color:#4a423a}
  .strategy .eyebrow{color:#ffffff}
  .strategy h2{color:#ffffff}
  .strategy .beforeafter{background:var(--cream);border-color:var(--hair)}
  .strategy .ba-row{color:var(--espresso)}
  .strategy .ba-row .k{color:var(--amber)}
  .strategy .arc-step{border-bottom-color:rgba(35,40,32,.22)}
  .strategy .arc-step:first-child{border-top-color:rgba(35,40,32,.22)}
  .strategy .arc-step .s{color:#ffffff}
  .strategy .arc-step .g{color:var(--espresso)}
  .strategy .outcomes h3{color:var(--amber)}
  .strategy .outcomes li{color:var(--espresso)}

  .closing .signoff{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.4vw,23px);color:var(--amber);margin-top:6px}
  .faq-list{margin-top:36px;max-width:var(--col);border-top:1px solid var(--hair)}
  .faq-item{border-bottom:1px solid var(--hair)}
  .faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:22px;padding:20px 0;font-family:var(--serif);font-weight:500;font-size:clamp(19px,2.3vw,23px);line-height:1.3;color:var(--espresso)}
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary::after{content:"+";font-family:var(--suisse);font-size:22px;color:var(--amber);flex:0 0 auto;line-height:1;transition:transform .2s ease}
  .faq-item[open] summary::after{transform:rotate(45deg)}
  .faq-a{padding:0 0 24px}
  .faq-a p{margin:0;max-width:62ch;font-size:17px;line-height:1.66;color:#4a423a}

  .foot{padding:56px 0 72px}
  .foot p{font-family:var(--mono);font-size:12px;line-height:1.9;color:#6f665a;margin:0 0 6px;letter-spacing:.02em}

  .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}

  .technote{margin-top:38px;background:#e7dfce;border:1px solid var(--hair);padding:0 clamp(20px,3vw,30px)}
  .technote&#62;summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-family:var(--suisse);font-weight:500;font-size:clamp(22px,4vw,36px);letter-spacing:.02em;text-transform:uppercase;color:var(--espresso)}
  .technote&#62;summary::-webkit-details-marker{display:none}
  .technote&#62;summary::after{content:"+";font-size:26px;line-height:1;transition:transform .2s ease}
  .technote[open]&#62;summary::after{transform:rotate(45deg)}
  .technote-body{padding:2px 0 26px;max-width:var(--col)}
  .technote-body h3{color:var(--amber);margin:28px 0 8px;font-size:17px}
  .technote-body p{color:#4a423a;font-size:16px;line-height:1.62;margin:0 0 16px}
  .strategy{background:#bec6af}
  .beforeafter{margin-top:36px;border:1px solid var(--hair);background:var(--cream);padding:20px 24px}
  .ba-row{font-family:var(--mono);font-size:13px;line-height:2;color:var(--espresso);margin:0}
  .ba-row .k{display:inline-block;min-width:108px;color:#8a8071}
  .arc{margin:40px 0 8px;max-width:var(--col)}
  .arc-step{padding:14px 0;border-bottom:1px solid var(--hair)}
  .arc-step:first-child{border-top:1px solid var(--hair)}
  .arc-step .s{font-family:var(--suisse);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin:0 0 3px}
  .arc-step .g{margin:0;font-size:16px;color:#4a423a}
  .outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:44px;background:var(--cream);border:1px solid var(--hair);padding:clamp(26px,4vw,40px)}
  .outcomes h3{color:var(--amber);font-size:12px;margin:0 0 12px;font-family:var(--suisse);font-weight:500;letter-spacing:.13em;text-transform:uppercase}
  .outcomes ul{margin:0;padding:0;list-style:none}
  .outcomes li{font-size:16px;color:#4a423a;line-height:1.5;padding:3px 0 3px 16px;position:relative}
  .outcomes li::before{content:"";position:absolute;left:0;top:12px;width:4px;height:4px;border-radius:50%;background:#2b5e46}
  .codein{flex:1 1 100%;min-width:0;font-family:var(--mono);font-size:12px;padding:12px;border:1px solid var(--hair);background:var(--cream);color:var(--espresso)}
  .codein:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  .strategy .outcomes{margin-bottom:4px}
  @media (max-width:760px){.outcomes{grid-template-columns:1fr;gap:24px}}
  .decisions-list{margin-top:36px;max-width:var(--col);border-top:1px solid var(--hair)}
  .decision{padding:22px 0;border-bottom:1px solid var(--hair)}
  .decision .d{font-family:var(--suisse);font-weight:500;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--amber);margin:0 0 8px}
  .decision p:last-child{margin:0;font-size:17px;line-height:1.6;color:#4a423a}
  .decisions{background:#d3d8c7}
  .decisions .eyebrow{font-size:clamp(22px,4vw,38px);letter-spacing:.02em;color:#2b5e46;margin:0 0 18px}
  .decisions h2{color:var(--espresso)}
  .decisions .decisions-list{border-top-color:rgba(35,34,32,.22)}
  .decisions .decision{border-bottom-color:rgba(35,34,32,.22)}
  .decisions .decision .d{color:#2b5e46}
  .decisions .decision p:last-child{color:var(--espresso)}
  .wall{background:#f2eee2}
  .wallgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:36px}
  .wallgrid canvas{width:100%;height:auto;display:block;box-shadow:0 4px 12px rgba(34,28,23,.10)}
  .shufwrap{margin-top:24px}
  .scanlead{margin-top:44px}
  .scanwrap{margin:26px 0 8px;display:flex;gap:30px;justify-content:center;align-items:flex-start;flex-wrap:wrap}
  .scan-example{margin:0;max-width:200px}
  .scan-example canvas{width:200px;height:auto;display:block;box-shadow:0 12px 30px rgba(34,28,23,.16)}
  .scan-example figcaption{font-family:var(--mono);font-size:11px;color:#3f4a37;margin-top:10px;text-align:center}
  .scan{width:100%;max-width:330px;background:#ffffff;border:1px solid var(--hair);border-radius:22px;padding:22px 26px 32px;box-shadow:0 18px 44px rgba(34,28,23,.16)}
  .scan-notch{width:56px;height:5px;border-radius:3px;background:#e2ddd0;margin:0 auto 20px}
  .scan-eyebrow{font-family:var(--suisse);font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);margin:0 0 14px}
  .scan-title{font-family:var(--serif);font-size:26px;font-weight:500;color:var(--espresso);margin:0 0 12px}
  .scan-meta{font-family:var(--mono);font-size:12px;line-height:1.8;color:#655c50;margin:0 0 20px}
  .scan hr{border:0;height:1px;background:var(--hair);margin:0 0 20px}
  .scan-h{font-family:var(--suisse);font-weight:500;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#7a7264;margin:0 0 8px}
  .scan-item{font-family:var(--serif);font-size:16px;color:var(--espresso);margin:0 0 22px}
  .scan-link{font-family:var(--serif);font-size:15px;color:#2b5e46;margin:0 0 10px}
  .scan-link::after{content:" →"}
  @media (max-width:900px){.wallgrid{grid-template-columns:repeat(4,1fr)}}
  @media (max-width:560px){.wallgrid{grid-template-columns:repeat(3,1fr);gap:9px}}
  .gesture-grid{display:grid;grid-template-columns:1fr 300px;gap:clamp(28px,4vw,52px);align-items:start}
  .gesture-grid .measure{max-width:none;margin:0}
  .gesture-photo{margin:0}
  @media (max-width:760px){.gesture-grid{grid-template-columns:1fr;gap:22px}.gesture-photo{max-width:420px}}
  @media (max-width:720px){
    .cols{grid-template-columns:1fr;gap:30px}
    .mockgrid{grid-template-columns:1fr;gap:20px}
    .stagewrap{flex-direction:column}
  }
  @media (prefers-reduced-motion:reduce){
    
    .reveal{opacity:1;transform:none;transition:none}
    canvas,button,.chip{transition:none}
  }


    Impressions · An unsolicited proposal for Aesop
    How might a receipt remember a visit?
    Computational design · Retail experience · Generative print
    Most customer data is designed to be stored, analyzed, or acted upon. Can we take data that normally describes a transaction and turn it into material for an emotional artifact? I wondered whether a receipt could remember a visit. So I built a machine that gives every customer a one-of-one print of the moment they were there.
    
      The ideaEvery impression begins with a moment.
      The inputtime + place + weather + interaction
      The systeminput → seed → visual grammar → artifact
      The output1 moment = 1 impression
    
  
    The concept at a glance
    A card printed once for a single visit, pressed and inked like an apothecary label, and yours to keep.
    
      
          Add photo
        
        A quiet archive of visits, each dated, none repeatable. A reason to keep the card, and eventually, a reason to come back.
      
    
    The gesture
    
      
        I started thinking about this after buying a refill of Geranium Hand Balm at Aesop. I noticed how much attention went into the last thirty seconds of the purchase: the green tube wrapped with the kind of care that makes a very ordinary thing feel like a small occasion... folded tissue, two samples tucked in, the cloth bag passed across the counter.
        The receipt, by comparison, was pretty unremarkable. It recorded the transaction perfectly. It just didn't record anything about the experience.
        I wondered if it could. And then I started daydreaming about what that might look like.
      
      
          Add photo
        
        Geranium Hand Balm, just bought.
      
    
      The idea
      A little card, pressed once, and never again.
      At the counter, in the second the parcel changes hands, a card is printed for that person and no one else. Its mark is drawn from that exact instant, inked in Aesop's own colors, and pulled a single time. We leave the registration slightly off, the way an honest press always drifts, so it looks like the work of a hand. Each card quietly notes down its own inks, its paper, and the moment it came to be. An edition of one, in the fullest sense. The receipt still does its ordinary job; this travels alongside it, a keepsake of the visit, handed over with the purchase. This one is live, and reading the world around you right now.
    

        This is the real press, running live. It seeds from the sky where you are, the ground you stand on, or a camera, and you can re ink it by hand from the house palette below. Save gives you a print ready file. Every card also carries a code, so you can copy it and draw the very same card again later.
        Signal
        
          The sky, live
          A camera
        
        Place
        
        Mark my coordinates
        What it read
        CapturedReading the sky...
        
          Pull impression
          Save
        
        Or set the ink by hand
        
        Stock
        
        Find an impression
        Find
        Copy this card's code
        The live sky needs a connection and the camera needs permission. If either is unavailable, the press falls back to the clock, and the house inks still work by hand.
      
    
    The range
    No two the same.
    Each card is drawn from its own moment, so the system never repeats itself. Here are two dozen at once, every one a different second, place, and sky.
    
    Each drawn live in your browser, right now.
    Shuffle the wall
  

    The mechanism
    How it is made
    
      
            TIME
            PLACE
            WEATHER
            LIGHT
            PRODUCT
          
          
            SEED
            VISUAL GRAMMAR
            IMPRESSION
          
          
          UNIQUE ID / ARCHIVE
          
          MEMORY
          
          RETURN
        
      
      Fig. 1  The whole system. Data becomes a seed, the seed becomes an impression, and the impression becomes a reason to return.
    
    
      The mechanism is plain enough. Each visit becomes a single number, a seed, and that seed decides everything the card turns into. Nothing is chosen from a library, and nothing is drawn twice.
      The seed lays down a small grammar of marks, and each one carries a meaning from the moment. The lens is the light, the arc is the sun's path across the day, the ring is the moon at its current fullness, and the fine hatches are the weather. So the card reads as a reading, a small portrait of one moment rather than a decoration.
      The two inks print slightly out of register, the way an honest press drifts, which is the whole difference between a thing on a screen and a thing off a press. Color comes from the live conditions, temperature sliding the hue and cloud cover sliding the saturation, so a cold clear morning and a warm grey afternoon are never the same. The full workings are in the notes below.
    

          soft lens · the light
          confident arc · the day's sun
          ring · the moon tonight
          hatch field · the weather
          counter arc · the horizon
          scatter · left to chance
        
      
      Fig. 2  The grammar. Each mark given a meaning, placed within gentle bounds.
    

      Technical notes
      
        The seed
        Every pull begins with a seed, one number mixed from three readings taken the instant you press the button. The millisecond on the clock, a tally that ticks up with each impression, and a timer accurate to the microsecond. Together they give a fresh number for every pull. The seed is deterministic, so handing the same number back draws the very same card, and at retail scale a small registry could check each new seed against the ones already printed to guarantee a true edition of one.
        
      
          millisecond
          14:07:33.482
          
          session pull
          no. 003
          
          hi-res timer
          microseconds
          +
          +
          
          
          seed
          
          
          three readings, one number, no collisions
        
      
      Fig. 3  The seed. A fresh number every pull; the same number always redraws the same card.
    

        The marks
        Six gestures make every card. A soft lens and a confident arc in the second ink, then a ring, a field of fourteen to twenty six hatches ruled slightly by hand, a thinner counter arc, and three to seven scattered dots in the first. The seed sets where each lands, how large it is, and how many there are, always within tuned bounds, so the card stays composed and never sets into a logo.

        Registration
        Both colors print by multiplying, so wherever they cross they settle into a third, deeper tone. The first ink is nudged up to three pixels off centre, and the second is set four to nine pixels above it and to the right. That small, deliberate misalignment does almost all the work, and it costs us four pixels.
        
      
          ink B, laid first
          ink A, over
          overprint,a third tone
          
          
          drift of 4 to 9 px, up and to the right
        
      
      Fig. 4  Registration. The wobble is on purpose, and we are rather fond of it.
    

        Color and stock
        By hand, the house palette offers five pairs drawn from Aesop's own shelf, on Stone, Kraft, or Bone, and picking one re inks the current card without redrawing it. When a live signal drives the color instead, it is computed continuously, temperature mapped to hue and cloud cover to saturation, so every reading lands on its own tone. Either way the card writes its inks, stock, edition, seed, and the moment to the millisecond along its foot, signing and dating itself in the margin.

        What it reads
        The sky, live. The press asks Open-Meteo for the weather where you are and turns it into ink, temperature setting the hue from cool blue through green to amber, cloud cover setting the saturation from vivid to grey, wind setting how busy the card gets, and damp air thickening the grain.
        A camera. The press takes the average color of whatever the lens sees and inks the card in it. Point it at the sky and it goes blue grey, point it at a fern and it goes green, and the exact color is written on the card as a plain hex.
        Coordinates. Mark my coordinates asks the browser where you are and prints it along the foot, the way a benchmark is cut into stone. If it will not say, Melbourne stands in, the city where Aesop began.
      
    
    Where it lives
    One little object, three quiet lives.
    
      
        At the counter
        Printed on the spot beside the till, or pressed a little earlier and matched to the visit. A modest machine, built from the same honest materials as the shelves, making no fuss about itself.
      
      
        On the card
        Heavy uncoated stock, a real letterpress bite, the mark in amber. Numbered and dated on the back, the way anything worth keeping tends to be.
      
      
        In the collection
        Come by often enough and you assemble a set without meaning to, each visit dated, and no two the same.
      
    
    In the hand
    What it looks like held.
    Held, it is smaller than a postcard and heavier than it looks, on 100gsm cardstock. A single afternoon pressed into a card, the sky that hung over the shop that hour and the moon that night, set in two inks and handed across the counter. Something to keep in a coat pocket, or pin above a desk, long after the balm has run out.
    
      
          Add photo
        
        A card, just handed over.
      
      
          Add photo
        
        Tucked beside the sample.
      
      
          Add photo
        
        Pinned above a desk, months later.
      
    
    The opportunity
    Making the transaction memorable.
    A receipt records what happened at the till. An Impression records that you were there. It turns the data of a visit into something worth keeping, so data becomes material rather than surveillance, and the value of the moment carries past the counter. The value set out below is a hypothesis, not a measurement.

    
      TodayVisit → Purchase → Receipt → Leave
      ImpressionsVisit → Purchase → Impression → Keep → Remember → Return
    

      PurchaseThe point of sale completes as normal.
      ImpressionA parallel output, a unique record of the moment, handed over with the bag.
      MemoryThe customer keeps it, because it is theirs and no one else's.
      CollectionRepeat visits accumulate a quiet set, each one dated.
      Digital layerScan the edition to reach an optional archive, the products you took home, and how to use them.
      ReturnThe brand becomes a small part of the customer's own history.
    

    The card can also hold a second life. Scan the edition and it opens a small archive of the visit. No dashboard, no tracking, just what you took home and how to use it.
    
      
        Scan the edition
        Your Impression
        Melbourne&#38;nbsp;&#38;nbsp;·&#38;nbsp;&#38;nbsp;26 August 2026&#38;nbsp;&#38;nbsp;·&#38;nbsp;&#38;nbsp;17:42Amber over Sage&#38;nbsp;&#38;nbsp;·&#38;nbsp;&#38;nbsp;Edition 0247
        
        The products you took home
        Resurrection Aromatique Hand Balm
        How to use it
        You might also like
      
      
        Edition 0247, the card it opens.
      
    
    The edition number already on the card is the only key. When a card is made, a small record is filed under that number, keyed to the card rather than to a person, so the scan is just a lookup, with no login, no email, and no profile. You could type the number on the back, or tap the card if the stock carries a small NFC tag, so there need not be a QR code at all. And because the record lives with the object you chose to keep, throwing the card away breaks the link. That is the real difference between material and surveillance.
    
      Customer · MemoryGives the visit a physical afterlifeCreates something worth keepingMakes personalization tangible rather than informational
      Brand · DifferentiationExtends Aesop's ritual beyond the storeTurns brand language into a generative systemCreates a collectible physical identity
      Business · Re-engagementA reason to revisit the brandA post-purchase digital layerA surface for product discovery
    
    The system is designed to increase memorability, post-purchase engagement, and reasons to return.
  

    The case
    Why it belongs to you
    Aesop has always been good at making ordinary things feel considered. A hand wash becomes a ritual, a shop becomes somewhere you remember, and a paper bag becomes something you keep for no particular reason.
    The Impression asks for very little more than that: that the visit leave you with something worth keeping.
    It is made from the visit itself. The colors come from the bottles and the walls. The restraint is simply Aesop's house style. And the care was there from the beginning.
    Most importantly, it is actually yours. Nothing is printed twice. The seed is different for every pull, and the information on the card comes from the particular moment you were there. It isn't trying to look personal. It is personal.
  

    Decisions
    The thinking, and the second thoughts.
    A short record of the decisions that shaped the piece, including a few I had to change my mind about.
        
      The claim I softenedI really wanted each edition to be unrepeatable, but we're not able to fully promise that. It is a 32-bit number: large, but finite. And the visible edition number isn't unique either. So I changed it so that the seed is fresh for every pull and deterministic, and a registry that checks each seed before printing is what would actually guarantee an edition of one. A claim you cannot defend is worse than a smaller one that holds.
      Buckets, then a spectrumAt first, the weather snapped into four fixed palettes. They barely changed within a day, which made the cards feel strangely static. Now temperature moves the hue and cloud cover moves the saturation. Fourteen degrees and twenty-two degrees produce genuinely different cards.
      The detail that had to earn its keepOriginally I added the moon shape part as decoration, and partly for my love of astrology and astronomy and a desire to normalize moon phases and tracking. It looked nice, but that wasn't enough. So the ring became the moon in fact. It follows the moon's actual illuminated fraction: a full moon closes the circle, while a new moon leaves only a sliver. Now the detail has a reason to be there.
      A keepsake beside the receiptCalling it a new receipt made it sound as though it needed to replace the real one, which was never the point. Or maybe it was? ... Anyway, it is better understood as a keepsake that comes alongside the receipt. Two things come out of the same transaction, but they have different jobs. The receipt records what happened. The Impression remembers it. :-)
      The drift, left inThe registration is deliberately a few pixels off. A perfectly aligned print felt too manufactured. That small misalignment is what makes it feel a little more like something pressed by a hand.
    
  
    Considerations
    A few things worth turning over.
    
      
        Why Aesop?
        Aesop already understands that a retail transaction can be a ritual. After buying a refill from their sensitive skincare line, I found myself thinking about the moment after the experience ended. The store had made the purchase feel memorable; the receipt immediately made it ordinary again. I wondered whether the transaction itself could hold on to a little memory of the encounter.
      
      
        Why does this need to be computational?
        I wanted every artifact to be genuinely specific to its moment, rather than choosing from a library of pre-designed cards. Computation lets the object respond to what is happening without making personalization feel like CRM.
      
      
        Why not just make beautiful postcards?
        Because then they would be beautiful but arbitrary. The constraint is what gives the object meaning. This particular card exists because this particular visit happened.
      
      
        Is this a loyalty programme?
        I don't think of it as one. Loyalty programmes tend to quantify the relationship. This tries to make the relationship tangible instead.
      
      
        Why would someone keep it?
        Because it asks nothing of them. It's just a small artifact of something that already happened.
      
      
        Would this slow down checkout?
        It shouldn't. The Impression is designed as a parallel output from the existing transaction, not a new customer journey. The point of sale works as usual; the card is simply produced alongside the purchase.
      
      
        What happens if the printer breaks?
        That's a real operational constraint. A broken machine should never feel like a broken brand. I'd build in a small buffer of pre-generated impressions and, if necessary, quietly fall back to the ordinary receipt.
      
      
        What is the business case?
        I think of it less as a receipt redesign and more as a post-purchase memory layer. Aesop already puts so much care into the experience of being in the store; this gives a little of that experience a physical afterlife. The potential value is in memorability, collectability, repeat visits and post-purchase engagement. Potential, not proven. I haven't measured it.
      
      
        How does the scan work without being creepy, or a total QR-code nightmare?
        The edition number already on the card is the only key. When a card is made, a small record is filed under that number, keyed to the card rather than to a person. So the scan is just a lookup, with no login, no email, and no profile. You could type the number on the back, or tap the card if the stock carries a small NFC tag, so there need not be a QR code at all. And because the record lives with the object you chose to keep, throwing the card away breaks the link. That is the real difference between material and surveillance. The data belongs to the thing in your hand.
      
      
        Where does AI come in?
        AI helped me prototype the system much faster, particularly with writing and debugging the code. The part I find most interesting, though, is computation as a design material, a way to make an object respond to the world around it.
      
      
        What is it really about?
        Underneath the ink and the weather, it's about data becoming material rather than surveillance. The same numbers a shop might normally store and analyze can become something a person actually wants to keep. Computation became most interesting here when it stopped adding more to the world, and started helping one small thing remember.
      
    
  &#38;nbsp;&#38;nbsp;Impressions
  A speculative design concept by Hillary Ramos. Unsolicited, and not affiliated with or endorsed by Aesop.
  Role&#38;nbsp;&#38;nbsp;&#38;nbsp;Concept / Creative Direction / Design / Prototyping / Code
  Built to explore what computational design can do for print. Live sky data via Open-Meteo. Made in Puerto Rico.


(function(){
  var host = document.getElementById('impressions-embed');
  if(!host &#124;&#124; host.shadowRoot) return;                 // guard against double-mount
  if(!host.attachShadow){ host.innerHTML = 'This embed needs a modern browser.'; return; }
  var root = host.attachShadow({mode:'open'});
  root.appendChild(document.getElementById('impressions-tpl').content.cloneNode(true));


(function(){
  const cv=root.getElementById('c'), ctx=cv.getContext('2d');
  const W=1000,H=1400,SC=2; cv.width=W*SC; cv.height=H*SC; ctx.scale(SC,SC);
  const readoutEl=root.getElementById('readout');
  const video=root.getElementById('v');

  const INKS=[
    {name:'Amber',      hex:'#6b3f22', b:{name:'Sage',      hex:'#7f8168'}},
    {name:'Ink',        hex:'#221c17', b:{name:'Clay',      hex:'#9b8a76'}},
    {name:'Espresso',   hex:'#3a2a1e', b:{name:'Ocean',     hex:'#3f5d66'}},
    {name:'Fern',       hex:'#8a9a6a', b:{name:'Mushroom',  hex:'#7d6f60'}},
    {name:'Terracotta', hex:'#a0553a', b:{name:'Limestone', hex:'#c7bda3'}},
    {name:'Geranium',   hex:'#2b5e46', b:{name:'Lilac',     hex:'#c9bfd6'}}
  ];
  const PAPERS=[{name:'Rice',hex:'#f3ecd6'},{name:'Kraft',hex:'#d7c8a2'},{name:'Bone',hex:'#ece7da'}];

  let inkA='#6b3f22', inkB='#7f8168', paper='#d7c8a2';
  let inkAName='Amber', inkBName='Sage', paperName='Kraft';
  let energy=0.9, grainMul=1.0, srcLabel='sky', readoutText='';
  let seed=0, when=new Date(), pullCount=0, editionNo=0, dataMix=0;
  let source='sky', camStream=null;
  let coords=null, coordLabel='', coordMix=0;

  function mb(a){return function(){a&#124;=0;a=a+0x6D2B79F5&#124;0;let t=Math.imul(a^a&#62;&#62;&#62;15,1&#124;a);t=t+Math.imul(t^t&#62;&#62;&#62;7,61&#124;t)^t;return((t^t&#62;&#62;&#62;14)&#62;&#62;&#62;0)/4294967296;};}
  const rr=(r,a,b)=&#62;a+(b-a)*r(), ri=(r,a,b)=&#62;Math.floor(rr(r,a,b+1));
  const p2=n=&#62;String(n).padStart(2,'0'), p3=n=&#62;String(n).padStart(3,'0');

  const clamp=(x)=&#62;Math.max(0,Math.min(255,Math.round(x)));
  const toHex=(r,g,b)=&#62;'#'+[r,g,b].map(v=&#62;clamp(v).toString(16).padStart(2,'0')).join('');
  function scale(hex,f){const r=parseInt(hex.slice(1,3),16),g=parseInt(hex.slice(3,5),16),b=parseInt(hex.slice(5,7),16);return toHex(r*f,g*f,b*f);}
  function mixc(hex,tr,tg,tb,t){const r=parseInt(hex.slice(1,3),16),g=parseInt(hex.slice(3,5),16),b=parseInt(hex.slice(5,7),16);return toHex(r+(tr-r)*t,g+(tg-g)*t,b+(tb-b)*t);}
  function hslHex(h,s,l){const hp=(((h%360)+360)%360)/60,c=(1-Math.abs(2*l-1))*s,x=c*(1-Math.abs(hp%2-1));let r=0,g=0,b=0;if(hp&#62;0)^(coordMix&#62;&#62;&#62;0))&#62;&#62;&#62;0;
    editionNo=1000+(seed%9000);
  }
  function render(){const reduce=window.matchMedia('(prefers-reduced-motion:reduce)').matches;
    if(!reduce){cv.style.opacity='0'; setTimeout(()=&#62;{draw(); cv.style.opacity='1';},160);} else draw();}
  function showReadout(){
    readoutEl.innerHTML=' '+
      inkAName+' over '+inkBName+' on '+paperName+''+readoutText+(coordLabel?''+coordLabel:'');
  }
  function clearChips(){
    root.querySelectorAll('#inks button,#papers button').forEach(x=&#62;x.setAttribute('aria-pressed','false'));
  }

  function getPos(){return new Promise((res,rej)=&#62;{
    if(!navigator.geolocation) return rej();
    const t=setTimeout(rej,5000);
    navigator.geolocation.getCurrentPosition(p=&#62;{clearTimeout(t);res(p);},()=&#62;{clearTimeout(t);rej();},{timeout:5000,maximumAge:600000});
  });}
  function describeCloud(c,day){return !day?'night':c&#62;&#62;0;
    readoutText=(place==='here'?'Sky over you':'Sky over '+place)+' · '+Math.round(temp)+'°C · '+Math.round(hum)+'% humidity · '+describeCloud(cloud,day)+' · wind '+Math.round(wind)+' km/h';
    srcLabel='sky · '+Math.round(temp)+'° · '+describeCloud(cloud,day);
  }

  async function ensureCam(){
    if(camStream) return true;
    camStream=await navigator.mediaDevices.getUserMedia({video:{facingMode:{ideal:'environment'}}});
    video.srcObject=camStream; await video.play(); return true;
  }
  function readCam(){
    const s=48, tmp=document.createElement('canvas'); tmp.width=s; tmp.height=s;
    const tc=tmp.getContext('2d'); tc.drawImage(video,0,0,s,s);
    const d=tc.getImageData(0,0,s,s).data; let r=0,g=0,b=0,n=0;
    for(let i=0;i{inkA=p.hex;inkB=p.b.hex;inkAName=p.name;inkBName=p.b.name;
      clearChips(); c.setAttribute('aria-pressed','true'); draw(); showReadout();});
    inksEl.appendChild(c);});
  const papersEl=root.getElementById('papers');
  PAPERS.forEach((p)=&#62;{const c=document.createElement('button');
    c.className='pchip'; c.setAttribute('aria-pressed','false'); c.textContent=p.name;
    c.addEventListener('click',()=&#62;{paper=p.hex;paperName=p.name;
      [...papersEl.children].forEach(x=&#62;x.setAttribute('aria-pressed','false')); c.setAttribute('aria-pressed','true'); draw(); showReadout();});
    papersEl.appendChild(c);});

  root.querySelectorAll('#sources button').forEach(b=&#62;{
    b.addEventListener('click',()=&#62;{
      source=b.dataset.src;
      root.querySelectorAll('#sources button').forEach(x=&#62;x.setAttribute('aria-pressed', x===b?'true':'false'));
      pull();
    });
  });
  root.getElementById('locate').addEventListener('click',locate);
  root.getElementById('pull').addEventListener('click',pull);
  root.getElementById('save').addEventListener('click',()=&#62;{const a=document.createElement('a');
    a.download='aesop-impression-'+editionNo+'.png'; a.href=cv.toDataURL('image/png'); a.click();});

  function encodeState(){
    const s=JSON.stringify([seed,when.getTime(),inkA,inkB,paper,inkAName,inkBName,paperName,Math.round(energy*1000),Math.round(grainMul*1000),srcLabel,coordLabel,pullCount]);
    return btoa(unescape(encodeURIComponent(s))).replace(/=+$/,'');
  }
  function decodeState(code){
    const a=JSON.parse(decodeURIComponent(escape(atob(code.trim()))));
    seed=a[0]&#62;&#62;&#62;0; when=new Date(a[1]); inkA=a[2]; inkB=a[3]; paper=a[4];
    inkAName=a[5]; inkBName=a[6]; paperName=a[7]; energy=a[8]/1000; grainMul=a[9]/1000;
    srcLabel=a[10]; coordLabel=a[11]&#124;&#124;''; coordMix=0; pullCount=a[12]&#124;&#124;pullCount;
    editionNo=1000+(seed%9000); clearChips(); draw(); showReadout();
  }
  root.getElementById('find').addEventListener('click',()=&#62;{
    const v=root.getElementById('findcode').value.trim(); if(!v) return;
    try{ decodeState(v); }
    catch(e){ readoutEl.textContent='That code did not read. Check it and try again.'; }
  });
  root.getElementById('copycode').addEventListener('click',()=&#62;{
    const code=encodeState(), btn=root.getElementById('copycode'), label=btn.textContent;
    const done=()=&#62;{btn.textContent='Copied'; setTimeout(()=&#62;{btn.textContent=label;},1400);};
    if(navigator.clipboard&#38;&#38;navigator.clipboard.writeText){ navigator.clipboard.writeText(code).then(done,done); }
    else { const ta=document.createElement('textarea'); ta.value=code; document.body.appendChild(ta); ta.select(); try{document.execCommand('copy');}catch(e){} document.body.removeChild(ta); done(); }
  });

  pull();

  var WALL_PALETTES=[['#6b3f22','#7f8168','#f3ecd6'],['#221c17','#9b8a76','#d7c8a2'],['#3a2a1e','#445f66','#ece7da'],['#8a9a6a','#7d6f60','#d7c8a2'],['#a0553a','#c7bda3','#f3ecd6'],['#495560','#9aa0a0','#d5dedf'],['#2b5e46','#8fa08f','#ece7da'],['#3e4c5e','#8a7a44','#f3ecd6'],['#2b5e46','#c9bfd6','#ece7da']];
  function drawTile(cvt,sd,pal){
    var x=cvt.getContext('2d'),TW=200,TH=280,TS=2; cvt.width=TW*TS; cvt.height=TH*TS; x.scale(TS,TS);
    var r=mb(sd),inkA=pal[0],inkB=pal[1],paper=pal[2];
    x.fillStyle=paper; x.fillRect(0,0,TW,TH);
    var m=14,plate={x:m,y:m,w:TW-2*m,h:TH-2*m};
    x.save(); x.beginPath(); x.rect(plate.x,plate.y,plate.w,plate.h); x.clip(); x.globalCompositeOperation='multiply';
    var oaX=rr(r,-1,1),oaY=rr(r,-1,1),obX=oaX+rr(r,1,3),obY=oaY+rr(r,-3,-1);
    x.save(); x.translate(obX,obY);
    (function(){var cx=plate.x+rr(r,0.28,0.6)*plate.w,cy=plate.y+rr(r,0.30,0.62)*plate.h,rad=rr(r,0.20,0.34)*plate.w;
      var gr=x.createRadialGradient(cx,cy,rad*0.1,cx,cy,rad); gr.addColorStop(0,inkB); gr.addColorStop(1,inkB+'00');
      x.fillStyle=gr; x.beginPath(); x.ellipse(cx,cy,rad,rad*rr(r,0.7,1.05),rr(r,0,Math.PI),0,7); x.fill();})();
    (function(){x.strokeStyle=inkB; x.lineWidth=rr(r,4,9); x.lineCap='round';
      var cx=plate.x+rr(r,0.2,0.8)*plate.w,cy=plate.y+rr(r,0.2,0.8)*plate.h,rad=rr(r,0.22,0.4)*plate.w;
      var df=(sd%86400)/86400,s=df*6.2832+rr(r,-0.3,0.3),e=s+rr(r,1.4,3.4); x.beginPath(); x.arc(cx,cy,rad,s,e); x.stroke();})();
    x.restore();
    x.save(); x.translate(oaX,oaY);
    (function(){x.strokeStyle=inkA; x.lineWidth=rr(r,1.5,3);
      var cx=plate.x+rr(r,0.3,0.72)*plate.w,cy=plate.y+rr(r,0.25,0.55)*plate.h,rad=rr(r,0.10,0.2)*plate.w;
      var frac=Math.max(0.06,(1-Math.cos(2*Math.PI*((sd%1000)/1000)))/2),st=rr(r,0,6); x.beginPath(); x.arc(cx,cy,rad,st,st+6.2832*frac); x.stroke();})();
    (function(){var n=ri(r,10,20),bx=plate.x+rr(r,0.08,0.5)*plate.w,by=plate.y+rr(r,0.45,0.8)*plate.h,len=rr(r,0.16,0.3)*plate.w,gap=rr(r,3,6),ang=rr(r,-0.5,0.5);
      x.strokeStyle=inkA; x.lineWidth=rr(r,0.8,1.6);
      for(var i=0;i{
    es.forEach(e=&#62;{if(e.isIntersecting){e.target.classList.add('in'); io.unobserve(e.target);}});
  },{threshold:0.12}):null;
  if(io){root.querySelectorAll('.reveal').forEach(el=&#62;io.observe(el));}
  else{root.querySelectorAll('.reveal').forEach(el=&#62;el.classList.add('in'));}
  var _revealAll=function(){var q=root.querySelectorAll('.reveal:not(.in)');for(var i=0;i</description>
		
	</item>
		
		
	<item>
		<title>Pressroom</title>
				
		<link>https://hillaryramos.studio/Pressroom</link>

		<pubDate>Thu, 03 Sep 2026 09:50:58 +0000</pubDate>

		<dc:creator>Hillary Ramos</dc:creator>

		<guid isPermaLink="true">https://hillaryramos.studio/Pressroom</guid>

		<description>

Pressroom ⊕ one press, many minds


@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@500;600;700&#38;family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&#38;family=IBM+Plex+Mono:wght@400;500&#38;display=swap');
:root{
  --bg:#16130e; --paper:#ffffff; --ink:#241f1a; --soft:#6a6152;
  --onbg:#ffffff; --onbg-soft:#efe7d4; --amber:#6c4025; --green:#68705a; --kraft:#d4c39b;
  --hair:rgba(36,31,26,.18); --hairsoft:rgba(36,31,26,.10); --hairlt:rgba(255,255,255,.24);
  --machine:'Cormorant',Georgia,'Times New Roman',serif;
  --voice:'Newsreader',Georgia,'Times New Roman',serif;
  --record:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background-color:var(--bg);color:var(--onbg-soft);font-family:var(--voice);font-size:18px;line-height:1.6;text-align:center;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
section{padding:clamp(56px,8vw,104px) 0;border-top:1px solid var(--hairlt)}
p{max-width:60ch;margin:0 auto}
.lede{font-size:clamp(18px,2vw,22px);line-height:1.5;color:var(--onbg-soft);max-width:56ch;margin:0 auto}
.soft{color:var(--onbg-soft)}
.record{font-family:var(--record);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--onbg-soft);margin:0 auto 18px}
.record.small{margin-top:24px;opacity:.85}
.num{font-family:var(--record);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--onbg-soft);margin:0 auto 16px;opacity:.9}
.mega{font-family:var(--machine);font-weight:700;text-transform:uppercase;font-size:clamp(44px,11.5vw,150px);line-height:.86;letter-spacing:.005em;margin:0 auto 12px;color:var(--onbg)}
h1{font-family:var(--machine);margin:0 auto}
h2.big{font-family:var(--machine);font-weight:600;text-transform:uppercase;font-size:clamp(28px,4.6vw,50px);line-height:1.0;letter-spacing:.01em;margin:0 auto 18px;max-width:22ch;color:var(--onbg)}
.seal{font-family:var(--record);font-size:clamp(26px,4vw,40px);color:var(--onbg);line-height:1;margin:0 auto 20px}
.hero{border-top:0;padding-top:clamp(48px,7vw,88px)}
.grain{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;opacity:.22}
.big s{text-decoration-thickness:.055em;opacity:.92}
.arch{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:40px auto 0;max-width:860px;text-align:left}
.arch .box{border:1px solid rgba(255,255,255,.25);background:var(--paper);padding:24px 24px 28px;border-radius:2px}
.arch .box.grammar{border-color:var(--amber)}
.arch .lab{font-family:var(--machine);font-weight:700;font-size:23px;letter-spacing:.02em;text-transform:uppercase;margin:0 0 2px;color:var(--ink)}
.arch .box.grammar .lab{color:var(--amber)}
.arch .state{font-family:var(--voice);font-style:italic;font-size:14px;color:var(--soft);margin:0 0 16px}
.arch ol{margin:0;padding:0;list-style:none;counter-reset:s}
.arch li{font-family:var(--record);font-size:12.5px;color:var(--ink);padding:7px 0;border-bottom:1px solid var(--hairsoft);display:flex;gap:12px}
.arch li::before{counter-increment:s;content:counter(s,decimal-leading-zero);color:var(--amber)}
.arch li:last-child{border-bottom:0}
@media(max-width:720px){.arch{grid-template-columns:1fr}}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:36px auto 0}
@media(max-width:880px){.grid{grid-template-columns:repeat(2,1fr)}}
.card{cursor:pointer;border:1px solid rgba(255,255,255,.25);background:var(--paper);border-radius:2px;overflow:hidden;transition:transform .2s}
.card:hover{transform:translateY(-3px)}
.card canvas{display:block;width:100%;height:auto;aspect-ratio:1/1.4;background:var(--paper)}
.card .meta{padding:14px 14px 18px;border-top:1px solid var(--hair)}
.card .bn{font-family:var(--machine);font-weight:700;font-size:27px;letter-spacing:.01em;text-transform:uppercase;margin:0;color:var(--ink)}
.card .no{font-family:var(--voice);font-style:italic;font-size:14px;color:var(--soft);margin:2px 0 9px}
.card .draws{font-family:var(--voice);font-size:13px;color:var(--soft);line-height:1.42;margin:0 0 10px}
.card .tk{font-family:var(--record);font-size:10px;color:var(--amber);letter-spacing:.05em;margin:0}
.gridbar{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:24px;flex-wrap:wrap}
button.act{font-family:var(--record);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:11px 24px;border:1px solid var(--onbg);background:transparent;color:var(--onbg);cursor:pointer;border-radius:100px}
button.act:hover{background:var(--onbg);color:var(--bg)}
.tiny{font-family:var(--record);font-size:11px;color:var(--onbg-soft);letter-spacing:.03em;opacity:.85}
.scroll{overflow-x:auto;margin:34px auto 0;border:1px solid rgba(255,255,255,.25);border-radius:2px;max-width:920px}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:13px;background:var(--paper)}
th,td{border:1px solid var(--hair);padding:12px 14px;text-align:center;vertical-align:middle}
thead th{background:var(--paper);font-family:var(--machine);font-weight:700;font-size:23px;letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
thead th.b{color:var(--amber)}
tbody th{font-family:var(--record);font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);background:var(--paper);white-space:nowrap}
td{font-family:var(--record);font-size:12px;color:var(--ink);background:var(--paper)}
.demoinput{font-family:var(--record);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--amber);background:var(--paper);border:1px solid var(--hair);border-radius:100px;padding:10px 20px;display:inline-block;margin:28px auto 30px}
.demogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 auto}
@media(max-width:880px){.demogrid{grid-template-columns:repeat(2,1fr)}}
.dcell{border:1px solid rgba(255,255,255,.25);border-radius:2px;overflow:hidden;background:var(--paper)}
.dcell canvas{display:block;width:100%;height:auto;aspect-ratio:1/1.4;background:var(--paper)}
.dcell .l{font-family:var(--machine);font-weight:700;font-size:19px;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);padding:8px 12px 10px;border-top:1px solid var(--hair)}
.pull{font-family:var(--voice);font-size:clamp(19px,2.4vw,25px);line-height:1.35;max-width:44ch;margin:28px auto 0;color:var(--onbg)}
.nojs{font-family:var(--record);font-size:11px;color:var(--onbg-soft);margin-top:14px}
footer{padding:66px 0 96px;border-top:1px solid var(--hairlt)}
.footmark{font-family:var(--machine);font-weight:700;font-size:clamp(32px,7vw,64px);text-transform:uppercase;letter-spacing:.01em;line-height:.92;margin:0 auto 8px;color:var(--onbg)}
footer p{font-family:var(--record);font-size:11.5px;color:var(--onbg-soft);letter-spacing:.03em;margin:0 auto 12px;line-height:1.7;max-width:62ch;opacity:.9}
footer p.voice{font-family:var(--voice);font-size:15px;letter-spacing:0;text-transform:none;color:var(--onbg);max-width:52ch;line-height:1.55;opacity:1}
a.deep{font-family:var(--record);font-weight:500;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--onbg);text-decoration:none;border-bottom:1px solid var(--onbg);padding-bottom:1px}
.specimg{max-width:920px;margin:24px auto 0;background:var(--paper);border:1px solid rgba(255,255,255,.25);border-radius:2px;padding:clamp(20px,3vw,34px)}
.specimg svg{display:block;width:100%;height:auto}
.specimg figcaption{font-family:var(--record);font-size:11px;color:var(--soft);letter-spacing:.03em;margin:16px auto 0;text-align:center;max-width:64ch;line-height:1.6}


    ⊕
    Pressroom
    A speculative retail instrument / 001
    A generative print system whose brand grammar is swappable, so the same engine notices, composes, and remembers differently for each house. One press underneath; a different mind on top.
    Four live grammars ↓&#38;nbsp; the apothecary / the ritual / the lab / the farm
  

    01 / Architecture
    A brain. Style.
    Two layers. Each brand supplies their own grammar to the same engine.
    
      
        Engine
        constant, the same for everyone
        receive the transactionnormalize the dataseed a deterministic decisionselect from a vocabularyplace by rulesprint, edition, archive
      
      
        Brand grammar
        variable, supplied by each house
        what it notices · inputswhat it says · markshow it thinks · mappingshow it composes · layouthow it prints · behaviorhow it remembers · archive
      
    
    02 / The grammars
    Four minds, four moments.
    Each grammar is its own system, running live on its own moment. Tap any card and it makes a fresh decision, just that one. Four houses that share nothing but the press.
    ApothecaryIt notices the season.Mycelium, wheat, wispy petals, a tincture vial, and rising trails of oud and sandalwood over watercolor washes.SEASON · BATCH · HARVEST · BLOOMRitualIt notices the rite.Curls and coils, tropical leaves, guava and hibiscus, and talavera geometry, radial and warm.HERITAGE · WARMTH · HOUR · CRAFTLabIt notices the reading.Big hand-drawn wings, cherubs in lab coats, crescents and sparks, in silver foil on cloud paper.FORMULATION · USAGE · TRANSPARENCYFarmIt notices the sky.Soft lenses, a sun arc, a moon ring, and weather hatching, misregistered on cream.SKY · LIGHT · WEATHER · SEASON
    
      Shuffle all
      Tap a card to reshuffle just that one.
    
    The presses render live with JavaScript. Each grammar is described in text above its tokens.
  

    03 / Comparison
    An engine with different worldviews.
    Each brand decides what to prioritize, based on what it values and how it wants to look. The grammar can be tuned for a product launch or a seasonal campaign, so the same press speaks one way for a spring release and another for an archive drop.
    ApothecaryRitualLabFarmRemembersthe seasonthe ritethe readingthe dayReadsbatch + bloomheritage + hourformulation + usagesky + weatherMarksmycelium + petalscurls + fruitwings + cherubsarcs + lensesComposesorganicradialexact, registeredasymmetricPrintsvariable densitywarm overprintsilver foil, perfect regsoft driftKeepsthe seasonthe ritethe evidencethe moment
    
      
        WHAT IT NOTICES
        DATA
        time · place
        weather · light
        season
        HOW IT THINKS
        RULES
        humidity ↑ → density ↑
        season → rotation
        hour → light
        WHAT IT SAYS
        MARKS + WORDS
        
          
        SKY · MOON · No. 0247
        
        
        MAPPED BY
        
        
        PRINTED AS
        
        THE BRAND GRAMMAR · WHAT EACH HOUSE SUPPLIES
      
      Every house fills the same spec: the data it notices, the rules that turn that data into form, and the marks and words it prints.
    
  
    04 / The same input
    One moment, four minds.
    Now the opposite. One identical transaction, the same seed, handed to all four grammars at once. Same data, interpreted via specific brand identities.
    
      17:42 · Oslo · 81% humidity · late August · seed #4811
      ApothecaryRitualLabFarm
      New transaction
    
  
    ⊕
    Pressroom
    To view the technology behind the machine and what inspired the full project, see here!
    Impressions is the artifact the press makes: a one-of-one print, pressed at the counter, that turns the data of a single visit into something worth keeping.
    The four grammars above (the apothecary, the ritual, the lab, the farm) are speculative houses, not real brands. Although, they’re inspired by some in the real world. Take your guess!
    A speculative project by Hillary Ramos / Made in Puerto Rico
  

(function(){
  function mb(a){return function(){a&#124;=0;a=a+0x6D2B79F5&#124;0;var t=Math.imul(a^a&#62;&#62;&#62;15,1&#124;a);t=t+Math.imul(t^t&#62;&#62;&#62;7,61&#124;t)^t;return((t^t&#62;&#62;&#62;14)&#62;&#62;&#62;0)/4294967296;};}
  function rr(r,a,b){return a+(b-a)*r();}
  function ri(r,a,b){return Math.floor(a+(b-a+1)*r());}

  /* ===== FARM (atmosphere) ===== */
  var Farm=(function(){
    var inkA='#6b3f22',inkB='#7f8168',paper='#ece7da';
    return function(ctx,ox,oy,W,H,seed){
      var r=mb(seed);ctx.save();ctx.translate(ox,oy);ctx.fillStyle=paper;ctx.fillRect(0,0,W,H);
      var m=Math.round(W*0.09),pl={x:m,y:m,w:W-2*m,h:H-2*m};
      ctx.save();ctx.beginPath();ctx.rect(pl.x,pl.y,pl.w,pl.h);ctx.clip();ctx.globalCompositeOperation='multiply';
      var oaX=rr(r,-1.2,1.2),oaY=rr(r,-1.2,1.2),obX=oaX+rr(r,1,3.4),obY=oaY+rr(r,-3.4,-1);
      ctx.save();ctx.translate(obX,obY);
      (function(){var cx=pl.x+rr(r,0.28,0.62)*pl.w,cy=pl.y+rr(r,0.3,0.62)*pl.h,rad=rr(r,0.2,0.34)*pl.w;var g=ctx.createRadialGradient(cx,cy,rad*0.1,cx,cy,rad);g.addColorStop(0,inkB);g.addColorStop(1,inkB+'00');ctx.fillStyle=g;ctx.beginPath();ctx.ellipse(cx,cy,rad,rad*rr(r,0.7,1.05),rr(r,0,Math.PI),0,7);ctx.fill();})();
      (function(){ctx.strokeStyle=inkB;ctx.lineWidth=rr(r,4,9);ctx.lineCap='round';var cx=pl.x+rr(r,0.2,0.8)*pl.w,cy=pl.y+rr(r,0.2,0.8)*pl.h,rad=rr(r,0.22,0.4)*pl.w,df=(seed%86400)/86400,s=df*6.2832+rr(r,-0.3,0.3),e=s+rr(r,1.4,3.4);ctx.beginPath();ctx.arc(cx,cy,rad,s,e);ctx.stroke();})();
      ctx.restore();ctx.save();ctx.translate(oaX,oaY);
      (function(){ctx.strokeStyle=inkA;ctx.lineWidth=rr(r,1.5,3);var cx=pl.x+rr(r,0.3,0.72)*pl.w,cy=pl.y+rr(r,0.25,0.55)*pl.h,rad=rr(r,0.1,0.2)*pl.w,frac=Math.max(0.06,(1-Math.cos(2*Math.PI*((seed%1000)/1000)))/2),st=rr(r,0,6);ctx.beginPath();ctx.arc(cx,cy,rad,st,st+6.2832*frac);ctx.stroke();})();
      (function(){var n=ri(r,10,20),bx=pl.x+rr(r,0.08,0.5)*pl.w,by=pl.y+rr(r,0.45,0.8)*pl.h,len=rr(r,0.16,0.3)*pl.w,gap=rr(r,3,6),ang=rr(r,-0.5,0.5);ctx.strokeStyle=inkA;ctx.lineWidth=rr(r,0.8,1.6);for(var i=0;i</description>
		
	</item>
		
		
	<item>
		<title>Protocol 01</title>
				
		<link>https://hillaryramos.studio/Protocol-01</link>

		<pubDate>Sun, 30 Aug 2026 13:00:49 +0000</pubDate>

		<dc:creator>Hillary Ramos</dc:creator>

		<guid isPermaLink="true">https://hillaryramos.studio/Protocol-01</guid>

		<description>PROTOCOL 01
@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&#38;family=Newsreader:ital,wght@0,300;0,400;0,500;1,300;1,400&#38;family=Zen+Kaku+Gothic+New:wght@400;500;700&#38;display=swap');
:root{--bg:#451621;--panel:#5A2130;--bone:#F4EAE0;--muted:#D9AEA6;--sc:#F0432E;--soft:#E88870;--burg:#7A2A3A;--rule:rgba(244,234,224,.15);--rules:rgba(244,234,224,.30);--fh:'Cherry Bomb One',system-ui,sans-serif;--fs:'Newsreader',Georgia,serif;--fg:'Zen Kaku Gothic New',system-ui,sans-serif;}
*{box-sizing:border-box;}
html{background:#451621;}
html,body{overflow-x:hidden;max-width:100%;}
body{margin:0;min-height:100vh;background:#451621;color:var(--bone);font-family:var(--fs);line-height:1.6;-webkit-font-smoothing:antialiased;}
.pagebg{position:relative;min-height:100vh;width:100%;overflow-x:hidden;background-color:#451621;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='4' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E"),radial-gradient(1100px 800px at 18% 12%,rgba(122,44,58,.55),transparent 62%),radial-gradient(1000px 900px at 88% 22%,rgba(40,12,22,.62),transparent 58%),radial-gradient(1200px 1000px at 55% 82%,rgba(110,36,50,.42),transparent 60%),radial-gradient(820px 820px at 8% 92%,rgba(46,12,21,.55),transparent 60%);
background-repeat:repeat,repeat,no-repeat,no-repeat,no-repeat,no-repeat;
background-size:220px 220px,800px 800px,cover,cover,cover,cover;
background-blend-mode:soft-light,multiply,normal,normal,normal,normal;}
.wrap{position:relative;z-index:1;max-width:820px;margin:0 auto;padding:52px clamp(16px,5vw,76px) 84px;}
.kanji{font-family:var(--fg);font-size:13px;letter-spacing:.3em;color:var(--burg);writing-mode:vertical-rl;position:fixed;top:50%;left:clamp(10px,2.5vw,26px);transform:translateY(-50%);opacity:.6;z-index:1;}
@media(max-width:1000px){.kanji{display:none;}}
.hero{text-align:center;padding:8px 0 26px;}
.kicker{font-family:var(--fg);font-size:12px;letter-spacing:.24em;color:var(--muted);text-transform:uppercase;margin-bottom:20px;}
.emblem{display:flex;justify-content:center;margin:4px 0 22px;}
.scene{font-family:var(--fs);font-size:clamp(16px,2.5vw,19px);font-weight:300;color:var(--bone);max-width:46ch;margin:0 auto 8px;line-height:1.75;}
.scene .b{font-style:italic;color:var(--muted);}
.h1{font-family:var(--fh);font-size:clamp(27px,5.2vw,44px);line-height:1.18;color:var(--bone);margin:26px auto 18px;max-width:19ch;}
.h1 .r{color:var(--sc);}
.dek{font-family:var(--fs);font-size:clamp(15px,2.2vw,18px);font-weight:300;color:var(--muted);max-width:50ch;margin:0 auto 18px;line-height:1.7;}
.punch{font-family:var(--fh);font-size:clamp(18px,3.2vw,26px);color:var(--sc);margin:2px auto 18px;line-height:1.3;}
.meta{font-family:var(--fg);font-size:11.5px;letter-spacing:.06em;color:var(--muted);}
.sec{padding:38px 0;border-top:1px solid var(--rule);}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:6px;}
.sec-num{font-family:var(--fh);font-size:22px;color:var(--muted);line-height:1;}
.eyebrow{font-family:var(--fg);font-size:11px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;}
h2{font-family:var(--fs);font-weight:400;font-size:clamp(22px,3.4vw,28px);color:var(--bone);margin:2px 0 16px;line-height:1.25;}
p{font-size:17px;line-height:1.78;color:var(--bone);margin:0 0 16px;font-weight:300;}
p.small{color:var(--muted);font-size:15.5px;}
.admission{font-family:var(--fs);font-style:italic;font-size:clamp(20px,3.2vw,26px);color:var(--bone);text-align:center;max-width:40ch;margin:52px auto;line-height:1.5;font-weight:300;}
.pull{font-style:italic;font-size:clamp(20px,3vw,25px);color:var(--sc);line-height:1.4;border-left:2px solid var(--sc);padding-left:18px;margin:26px 0;font-weight:300;}
.skeptic{background:rgba(0,0,0,.16);border:1px solid var(--rule);border-radius:8px;padding:20px 22px;margin:8px 0 4px;}
.skeptic .q{font-family:var(--fs);font-style:italic;font-size:18px;color:var(--muted);margin-bottom:10px;}
.skeptic .a{font-size:16px;color:var(--bone);font-weight:300;line-height:1.7;}
b,strong{font-weight:500;color:var(--bone);}
.flow{font-family:var(--fg);font-size:13px;letter-spacing:.08em;color:var(--muted);text-align:center;margin:28px 0;padding:0;}
.flow .a{color:var(--sc);margin:0 8px;}
.panel-title{font-family:var(--fg);font-size:12px;color:var(--muted);letter-spacing:.2em;text-transform:uppercase;padding-bottom:12px;border-bottom:1px solid var(--rule);margin:8px 0 20px;}
.node{display:flex;align-items:center;gap:14px;background:var(--panel);border:1.5px solid var(--rule);border-radius:12px;padding:12px 15px;}
.node.hero2{border-color:var(--sc);}
.n-idx{font-family:var(--fh);font-size:13px;color:var(--muted);min-width:32px;}
.n-body{flex:1;}
.n-name{font-family:var(--fg);font-weight:700;font-size:14.5px;color:var(--bone);}
.node.hero2 .n-name{color:var(--sc);}
.n-desc{font-family:var(--fg);font-size:11px;color:var(--muted);margin-top:2px;line-height:1.45;}
.n-tag{font-family:var(--fg);font-weight:700;font-size:8.5px;letter-spacing:.12em;color:var(--muted);border:1px solid var(--rule);border-radius:20px;padding:3px 7px;white-space:nowrap;}
.conn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px 0;gap:1px;}
.conn .arr{font-family:var(--fh);font-size:13px;color:var(--muted);line-height:1;}
.conn .lbl{font-family:var(--fg);font-size:9.5px;color:var(--muted);}
.split-note{text-align:center;font-family:var(--fg);font-size:9.5px;font-weight:700;letter-spacing:.14em;color:var(--muted);padding:9px 0 3px;text-transform:uppercase;}
.lanes{display:flex;gap:14px;align-items:flex-start;}
@media(max-width:760px){.lanes{flex-direction:column;gap:0;}}
.lane{flex:1;display:flex;flex-direction:column;}
.curvebox{margin:20px 0 8px;}
.chart{width:100%;height:auto;display:block;}
.curve-path{stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 2.6s ease-out;}
.curvebox.drawn .curve-path{stroke-dashoffset:0;}
.curvebox.drawn .curve-path.hot{transition-delay:1.9s;}
.strip{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:24px 0 8px;}
.frame{flex:1 1 120px;max-width:150px;text-align:center;border:1px solid var(--rule);border-radius:10px;padding:10px 6px 12px;background:rgba(0,0,0,.12);}
.frame svg{width:100%;height:auto;display:block;}
.fl-name{font-family:var(--fg);font-size:10px;letter-spacing:.1em;font-weight:700;color:var(--muted);text-transform:uppercase;margin-top:6px;}
.fl-name.vio{color:var(--sc);}
.fl-sub{font-family:var(--fs);font-style:italic;font-size:12px;color:var(--bone);margin-top:2px;line-height:1.3;}
.ladder{margin:18px 0 6px;}
.rung{display:flex;gap:14px;align-items:baseline;padding:7px 0;border-bottom:1px dashed var(--rule);}
.rung .t{font-family:var(--fg);font-size:12px;color:var(--muted);min-width:64px;}
.rung .s{font-family:var(--fs);font-style:italic;font-size:17px;color:var(--bone);}
.decided{font-family:var(--fs);font-style:italic;font-size:clamp(24px,4vw,34px);color:var(--sc);text-align:center;margin:44px 0 8px;}
.ctrl-row{padding:12px 0;border-top:1px solid var(--rule);}
.ctrl-n{font-family:var(--fg);font-weight:700;font-size:14px;color:var(--bone);}
.ctrl-n em{font-style:normal;color:var(--sc);font-weight:400;font-family:var(--fs);font-size:14px;margin-left:8px;}
.ctrl-d{font-size:15px;color:var(--muted);margin-top:3px;font-weight:300;}
.dec{padding:16px 0;border-top:1px solid var(--rule);}
.dec-t{font-family:var(--fg);font-weight:700;font-size:15px;color:var(--bone);margin-bottom:8px;}
.dec-row{display:grid;grid-template-columns:96px 1fr;gap:12px;margin-top:5px;}
.dec-k{font-family:var(--fg);font-size:10.5px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;padding-top:3px;}
.dec-v{font-size:15px;line-height:1.6;color:var(--bone);font-weight:300;}
.dec .dec-row:last-child .dec-v{font-style:italic;}
.instrument-frame{border:1.5px solid var(--rules);border-radius:8px;overflow:hidden;height:clamp(600px,86vh,752px);background:var(--bg);margin:18px 0;}
#app-root{height:100%;}
#app-root button:focus-visible{outline:2px solid var(--sc);outline-offset:2px;}
.vasewatch{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:5;pointer-events:none;width:104px;}.vasescale{transform-origin:right center;transition:transform .45s ease;will-change:transform;}
.vasewatch svg{width:100%;height:auto;display:block;overflow:visible;}
#vbloom{transform-origin:60px 150px;transition:transform .6s ease;}
.vasestatus{font-family:var(--fg);font-size:10px;letter-spacing:.03em;color:var(--muted);text-align:right;margin-top:4px;line-height:1.3;transition:color .5s ease;}
.vasewatch.peak .vasestatus{color:var(--sc);}
@media(max-width:600px){.vasewatch{width:62px;right:8px;}.vasestatus{font-size:8px;}}
.foot{margin-top:60px;padding-top:24px;border-top:2px solid var(--bone);text-align:center;}
.foot .fh{font-family:var(--fh);font-size:20px;color:var(--bone);}
.foot .fs{font-family:var(--fg);font-size:12px;letter-spacing:.06em;color:var(--muted);margin-top:8px;}
@keyframes qfade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.qfade{animation:qfade 500ms ease;}
input[type=range]{-webkit-appearance:none;appearance:none;height:4px;background:var(--rule);border-radius:3px;border:none;outline:none;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;margin-top:-5.5px;border-radius:50%;background:var(--sc);border:none;cursor:pointer;}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border:none;border-radius:50%;background:var(--sc);cursor:pointer;}
input[type=range]:focus{outline:none;}
.wrap h1,.wrap h2,.wrap .dek,.wrap .scene,.wrap .dec-t,.wrap .n-name,.wrap .fl-sub,.wrap .h1,.wrap .admission{color:var(--bone)!important;}
.wrap p{color:var(--bone)!important;}
.wrap p.small,.wrap .eyebrow,.wrap .kicker,.wrap .panel-title,.wrap .fl-name,.wrap .dec-k,.wrap .sec-num{color:var(--muted)!important;}
.wrap .pull,.wrap .punch,.wrap .decided,.wrap .fl-name.vio,.wrap .ctrl-n em{color:var(--sc)!important;}

.opening{max-width:56ch;margin:0 auto 8px;text-align:left;}.opening .m{color:var(--muted);font-style:italic;}.subhead{font-family:var(--fs);font-style:italic;font-size:clamp(18px,2.6vw,22px);color:var(--bone);margin:0 0 14px;}.dec2{padding:16px 0;border-top:1px solid var(--rule);}.d2-k{font-family:var(--fg);font-size:10.5px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;margin-bottom:6px;}.d2-t{font-family:var(--fg);font-weight:700;font-size:16px;color:var(--bone);margin-bottom:6px;}.d2-v{font-size:15px;color:var(--muted);line-height:1.6;font-weight:300;}.wrap .subhead,.wrap .d2-t{color:var(--bone)!important;}.wrap .d2-k,.wrap .d2-v{color:var(--muted)!important;}
.dec{padding:16px 0;border-top:1px solid var(--rule);}.dec-t{font-family:var(--fg);font-weight:700;font-size:15px;color:var(--bone);margin-bottom:8px;}.dec-row{display:grid;grid-template-columns:96px 1fr;gap:12px;margin-top:5px;}.dec-k{font-family:var(--fg);font-size:10.5px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;padding-top:3px;}.dec-v{font-size:15px;line-height:1.6;color:var(--bone);font-weight:300;}.dec .dec-row:last-child .dec-v{font-style:italic;}.systems{font-family:var(--fg);font-size:13.5px;letter-spacing:.02em;color:var(--muted);line-height:1.9;margin:0 0 16px;}.qs{font-family:var(--fs);font-style:italic;font-size:16px;color:var(--muted);line-height:1.7;margin:0 0 18px;}.wrap .dec-t{color:var(--bone)!important;}.wrap .dec-k,.wrap .systems,.wrap .qs{color:var(--muted)!important;}
@keyframes vspin{to{transform:rotate(360deg);}}.vasewatch svg.spin{animation:vspin 3.5s linear infinite;transform-origin:50% 58%;}.manifesto{max-width:58ch;margin:0 auto 8px;text-align:center;}.tinybreak{width:48px;height:2px;background:var(--muted);opacity:.55;border:none;border-radius:2px;margin:22px auto;}.wrap .manifesto p{color:var(--bone)!important;}.pair{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}.pair .col{min-width:0;}.pair h2{font-size:clamp(19px,2.4vw,23px);}@media(max-width:760px){.pair{grid-template-columns:1fr;gap:30px;}}.decgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:16px;}.decgrid .dec{background:rgba(244,234,224,.045);border:1px solid var(--rule);border-radius:14px;padding:15px 16px;}.decgrid .dec-t{font-family:var(--fg);font-weight:700;font-size:14.5px;color:var(--bone);margin-bottom:10px;padding-bottom:9px;border-bottom:1px solid var(--rule);}.decgrid .dec-row{display:block;margin-top:9px;}.decgrid .dec-k{display:block;font-size:9px;letter-spacing:.14em;color:var(--sc);text-transform:uppercase;margin-bottom:2px;padding-top:0;}.decgrid .dec-v{font-size:13.5px;line-height:1.5;color:var(--bone);}.decgrid .dec .dec-row:last-child .dec-v{font-style:italic;color:var(--muted);}.wrap .decgrid .dec-k{color:var(--sc)!important;}.wrap .decgrid .dec-v{color:var(--bone)!important;}.wrap .decgrid .dec .dec-row:last-child .dec-v{color:var(--muted)!important;}.tested{background:#30101A;border:1px solid var(--rule);border-radius:14px;padding:18px 20px;margin:8px 0;}.tested .flow{margin:14px 0 0;}.tested p.small{margin-bottom:0;}.chainwrap{max-width:400px;margin:0 auto;}.chainwrap .node{padding:9px 13px;gap:11px;}.chainwrap .n-idx{font-size:11px;min-width:24px;}.chainwrap .n-name{font-size:12.5px;}.chainwrap .n-desc{font-size:10px;}.chainwrap .n-tag{font-size:8px;padding:2px 6px;}.chainwrap .conn{padding:3px 0;}.chainwrap .conn .lbl{font-size:9px;}@media(max-width:600px){.wrap{padding:34px 14px 60px;}}@keyframes vspin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}.vasewatch svg.spin{animation:vspin 3.2s linear infinite;transform-origin:50% 62%;}彼岸花 · PROTOCOL 01PROTOCOL 01speculative instrument · interaction / product / behavioral designEvery dinner at the family’s table ends the same way. The plates are cleared, the conversation has looped twice, everyone is tired, and still nobody stands up. We all know it is over. Nobody wants to be the one to say so. There is always a vase in the middle of the table. It just sits there.… I started wondering what would happen if it didn’t.A growing collection of machines for social situations nobody wants to manage.Every meeting has a moment when it is quietly over. Everyone in the room knows the meeting was scheduled for forty-five minutes. Everyone can see the clock. And still it continues, because no one has a socially acceptable way to say the thing everyone is thinking. The rule exists. The mechanism to enforce it does not. So I build an instrument that gives the unspoken agreement a body, and let the object be the one to say something.We live inside countless invisible systems: time, politeness, queuing, personal space, attention, reciprocity, silence, turn-taking, departure. What happens when invisible social rules acquire physical form? Can an interface model social tolerance, or encode social norms? What should technology make visible?It starts as a clock. Then it becomes a problem.彼岸花 · higanbanaWhere the object gets its manners.PROTOCOL takes its form and its temperament from the red spider lily, known in Japan as higanbana, the flower of the equinox and the other shore. It blooms in autumn on a bare, leafless stalk, and its leaves arrive only once the flowering is finished, so the plant is defined by two states cursed never to share the stage.It grows along graveyard paths and the edges of rice fields, planted there because it is poisonous, a quiet guardian of boundaries. It is the flower of final goodbyes, said to line the path souls take out of this world. An object that presides over the end of an agreement could not ask for a better ancestor.The flower and the leaf never meet, the same way a meeting’s promise and its reality never quite coincide. PROTOCOL sits in that gap.The centerpiece borrows three things from the flower: a bloom that means an ending has arrived, a body that guards a threshold, and the unsettling elegance of a beautiful thing that appears exactly when something is over. Its long, spider-leg stamens and recurved petals become the brand’s emblem.instrumentProgram a meeting, then watch it refuse to end.Set the promise, the tolerance, the number of witnesses, the body and the awareness. Then seal the agreement and let the clock run.PROTOCOL · 01configurationMake the meeting end on time.the question it raisesmeetingpromise · 45 minthe length everyone agreed towitnesses · 8more witnesses, less patiencetolerance · 5 minthe overrun you will forgivebodybotanicalbureaucraticarchitecturalcontrol through growth. it asks where it can grow.awarenessconsenthostsecretself-awareit knows it is in the room, and it has opinions.seal the agreement · 45 minutesTry the bureaucratic body. It files paperwork on you.behaviourThe flat line before the break is the whole design.For the promised time, and a little grace, it does almost nothing. It could be a sculpture. Then it moves. How fast depends on how many people are waiting: two of you barely registers, a full room turns five minutes into a thicket.0153045607545:00it takes the roompresenceminutes at the tableThe waiting is the joke, and the threat. Anticipation does the work.CONTRACTwe agreedGRACEit’s fineCONCERNsomeone noticedINTERVENTIONsay somethingVIOLATIONyou said 45 minutessystemHow a rule becomes a thing in the room.You set a meeting’s promise, tolerance, number of witnesses, and temperament. The system turns those terms into presence: a measure of how difficult the object should be to ignore. For the first 45 minutes, almost nothing happens. Then it starts to compute. A projection grows across a real object. A servo begins to move. The longer the meeting runs, the more the object occupies the room. Not an alarm. Not a reminder. A computational design body that sits there, does fun(ny) stuff, and makes the agreement visible.AGREEMENT→TIME→BEHAVIOUR→CONSEQUENCEThe prototype is the brain of the object. The spatial body was computed with math in TouchDesigner. The 3D projection and installation of the software places the agreement on the table.Signal chain01Youset the termsINPUT↓type the intent02Web consolethe PROTOCOL screenINTERFACE↓WebSocket / OSC03Timer + phasesturns terms into presenceLOGIC↓presence04TouchDesignergrows it, maps it to the objectENGINEthe signal splits↓video05Projectorlight on the vaseOUTPUT↓serial05ESP32microcontrollerDRIVER↓PWM06ServomovementMOTION↓light and motion meet on the object07The vasegrows, leans, and bloomsOBJECTbodyThree bodies. One problem.The same lateness, read three ways.Grow it. Document it. Block the room.Not three styles of one object. Three different ways for technology to make itself difficult to ignore.Botanical control through growthIt grows. It asks where it can grow, then does, until the room is colonised by its own inability to end.Bureaucratic control through administrationIt files paperwork on you. Notice, reminder, second notice, form 01-B, escalation, case opened.Architectural control through obstructionIt starts taking your chair. It asks what space is left, then takes it, until the meeting cannot continue.voiceIt stays polite far longer than the situation warrants.Give it the self-aware body and it talks. At first, it is helpful. As the meeting runs on, it becomes more direct. The language follows the rules of etiquette. It will never tell you to stop. It will politely remind you of the agreement, suggest that it might be time to finish, and eventually decide that enough is enough. The machine is simply keeping the promise everyone made at the beginning.The language has been tested across meetings, dinners, coffee dates, client conversations, job interviews, and consultations. It does not need to know what kind of encounter it is in. It only needs to know:an agreement existed→time has passed→humans have not concluded→intervention escalates00:00“Welcome. We have time.”44:59“Everything is proceeding as agreed.”45:01“Noted.”+03“No immediate cause for concern.”+08“Might I suggest we begin to draw things to a close?”+11“I believe we have reached a natural conclusion.”+14“We had agreed on forty-five minutes.”+18“I have taken the liberty of noting the additional time.”+23“I am afraid I must intervene.”“Thank you. That will be all.”awarenessWho knows?Consent. Everyone knows it is here.Host. Only you configured it; the room discovers it.Secret. No one knows; it simply begins.Self-aware. It knows, and it has opinions.ethicsMaking a rule visible, or making it unavoidable.It starts as a productivity object and quietly turns into a question about control.When does assistance become coercion?I don’t know. That’s partly why I built it.decisionsWhat I considered, and why I chose.The brandconsideredHanging it on a real company.choseA made-up one, PROTOCOL.whyA fictional brand lets the object be a whole category, not an advertisement, and leaves room for a series.Which rule firstconsideredThe dinner guest, the queue, the meeting.choseThe meeting.whyIt is the only one with an agreed end time, so the whole piece can live in the gap between the clock and the room.What drives itconsideredA four-way formula: overrun times people times mood times tolerance.choseOne presence curve, bent by how many people are waiting.whyThe formula was unstable and needed a mood input I never had. The curve keeps the intent and stays tunable.TemperamentconsideredA slider that made it more dramatic.choseNo slider.whyDrama you can dial is decoration. How intense it gets should come from how late it is and how many people are stuck there.The last wordconsideredRenaming VIOLATION to something grander.choseKeeping VIOLATION, and putting the attitude in the voice.whyA silent object should not editorialise. Only the talking one earns the right to say the last word.The wordsconsideredA dashboard: duration, headcount, grace.choseAn instrument: promise, tolerance, witnesses, body, awareness.whyIt should feel like programming a strange organism, not filling a form.The bodiesconsideredThree visual styles.choseThree theories of control.whyGrowth, administration, obstruction. Three looks is decoration; three arguments is a project.The projectionconsideredA hologram floating in mid-air.choseProjection mapped onto a real object.whyAchievable, and prettier. The object stays literal while the metaphor grows on its skin.The bodyconsideredA pretty animation that grows with the clock.choseA system that tries to occupy the room, grown in TouchDesigner.whyTime should not set size, it should raise the odds of behaviour. This prototype is the brain. The body gets grown for real.TimeconsideredMaking you wait 45 minutes to see anything.choseA compressed preview, with a real-time setting for the patient.whyThe installation runs in real time. The portfolio does not.The lookconsideredBright and cheerful.choseDeep burgundy, bone, one scarlet, painted not printed.whyCheerful fought the idea. The flower set the register: a little funereal. And a serif makes the object’s last line a whisper, not a punchline.The flowerconsideredA generic growing thing.choseA red spider lily, the higanbana.whyA flower for thresholds, endings, and final goodbyes. It seemed appropriate. ;-)PROTOCOLObjects for the things we don't know how to say.Roadmap: control through surveillance · politeness · embarrassment · authority. A collection of machines for enforcing the little rules we pretend aren't rules.(function(){var start=Date.now();var bloom=document.getElementById('vbloom'),status=document.getElementById('vasestatus'),watch=document.getElementById('vasewatch'),scaler=document.getElementById('vasescale');var svg=scaler?scaler.querySelector('svg'):null;var h=new Date().getHours();var greet=(h&#62;=5&#38;&#38;h=12&#38;&#38;h=bY;var scale;if(!spinning)scale=1+pre*0.4;else if(!past)scale=1.4+g*9.6;else scale=11+Math.min(1,(vy-bY)/400)*1.5;var op=spinning?(0.5+(past?0.5:g*0.5)):pre*0.5;if(bloom)bloom.style.transform='scale('+(0.4+op*2.0).toFixed(3)+')';if(scaler)scaler.style.transform='scale('+scale.toFixed(3)+')';if(svg){if(spinning){svg.classList.add('spin');svg.style.animationDuration=past?'1.4s':'3.4s';}else{svg.classList.remove('spin');svg.style.animationDuration='';}}var line=lines[lines.length-1][1];for(var i=0;i</description>
		
	</item>
		
		
	<item>
		<title>The Affective Index</title>
				
		<link>https://hillaryramos.studio/The-Affective-Index</link>

		<pubDate>Sun, 30 Aug 2026 17:47:02 +0000</pubDate>

		<dc:creator>Hillary Ramos</dc:creator>

		<guid isPermaLink="true">https://hillaryramos.studio/The-Affective-Index</guid>

		<description>The Affective Index


RESEARCH / TYPOGRAPHY 
A living archive of internal states to explore, observe, and reflect upon. The Affective Index is an ongoing typographic research project exploring emotional states, transitions, and psychological thresholds through color, form, and systems design.


	OVERVIEW

The Affective Index is a self-initiated research project examining how typography and color systems can illustrate, structure, and articulate internal human states. Rather than treating emotion as decoration or narrative, the project approaches affect as a design system that can be cataloged, constrained, repeated, and studied. The work lives primarily as a series of posters and printed matter, designed to scale into calendars, editorial spreads, and exhibitions.
	INTENT &#38;amp; QUESTIONS
In digital and brand environments, emotion is often referenced implicitly but rarely designed with rigor. Emotion is everywhere in design, but it is rarely treated as a system in its own right.&#38;nbsp;How can typography carry emotional meaning without imagery?
What does it look like to design feelings as systems rather than moments?&#38;nbsp;How can internal states be made legible, repeatable, and spatial?

&#38;nbsp; &#38;nbsp;The Affective Index positions emotional experience as something that can be designed, measured, and structured, without losing complexity.

	DESIGN SYSTEM
The project operates under a shared system across all volumes:01 &#38;nbsp; &#38;nbsp; one word per poster

02 &#38;nbsp; &#38;nbsp; typography and color only

03 &#38;nbsp; &#38;nbsp; modular grid systems

04 &#38;nbsp; &#38;nbsp; strict constraints with expressive variation

05 &#38;nbsp; &#38;nbsp; typographic width, weight, spacing and alignment carry emotional meaning

06 &#38;nbsp; &#38;nbsp; color logic is governed by rules rather than aesthetic preference

07 &#38;nbsp; &#38;nbsp; each volume introduces its own internal logic while remaining part of a cohesive visual language


Volumes

	Volume I: Feeling (2025)
EMOTIONAL STATES

This volume focuses on discrete, nameable emotional conditions (states one can “be in”). Color operates as a field of emotional intensity, with one dominant color per poster. Typography is expressive, scaled, and emotionally responsive, allowing form to expand, compress, or breathe.

Examples include:&#38;nbsp;Anticipation, Tension, Ease, Delight, Overwhelm, Yearning, Relief, Ambivalence

Volume II: Thresholds (In Progress, 2026)TRANSITIONS &#38;amp; EDGES

Thresholds are not emotions, but moments of change (crossings, pauses, and decisions).

In this volume, color becomes directional and interrupted, often split into two fields. Typography interacts with boundaries, margins, and seams, emphasizing movement, friction, and passage.&#38;nbsp;Examples include: Arrival, Crossing, Exposure, Repair, Resolve, Release, Becoming


Volume III: Duration (Coming Soon, 2027)
TIME-BASED STATES
Duration explores experiences defined by persistence, repetition, and time rather than intensity.

Color systems repeat or shift serially. Typography follows consistent rules across multiple posters, emphasizing accumulation, erosion, endurance, and aftermath.

Examples include: Holding, Drift, Accumulation, Repetition, Latency, Endurance
	Current Form
– a modular poster system designed for print, calendar formats, and editorial use
– a flexible framework for future volumes and research
– a body of work demonstrating typographic discipline, systems thinking, and emotional intelligence 

The Affective Index sits at the intersection of branding, editorial design, and cultural research. It reflects my broader design approach for treating design as both ecosystem and experience, building systems that scale without losing humanity using constraint as a tool for clarity and meaning. This project functions as both visual archive and an ongoing inquiry ... a living index of how internal states can be shaped through design.


</description>
		
	</item>
		
		
	<item>
		<title>Shoppe Object</title>
				
		<link>https://hillaryramos.studio/Shoppe-Object</link>

		<pubDate>Wed, 26 Oct 2022 16:51:07 +0000</pubDate>

		<dc:creator>Hillary Ramos</dc:creator>

		<guid isPermaLink="true">https://hillaryramos.studio/Shoppe-Object</guid>

		<description>Shoppe Object

WORLD BUILDING / EVERYTHING


	For years I was Design Director for Shoppe Object, the boutique home and lifestyle trade show, and part of the powerhouse tiny team that concepted, launched, and grew it from 100 brands in our inaugural 2018 season to more than 500 today. As the show grew, so did the design system, and I led all of it: brand identity, the website and daily editorial, email and social campaigns, sales decks and exhibitor materials, printed brochures, and the signage and building vinyls on-site.
	&#38;nbsp; When the pandemic pushed us online, I led the design and UX build of Shoppe Online, our custom B2B marketplace, from vendor and buyer portals to end-to-end onboarding, and helped translate the physical show into digital market weeks, content drops and product releases with our brand partners, curated editorial video, and a week of live panels and community events. Shoppe Object and Shoppe Online were acquired by International Market Centers (IMC/ANDMORE) in 2022.
	“Shoppe Object is New York’s semiannual, independent home and gift show. With a curated roster of visionary brands and makers presented in an elevated setting, Shoppe Object is the ultimate resource for premier merchants and influential editors. Born of a vanguard spirit to celebrate and service the progressive retail and design community, Shoppe Object is a gathering of fellowship, an expression of ideas, and a physical manifestation of a shared ethos – dedication to, and reverence for the good, the beautiful, the inspired, the innovative, and the well-made.”


</description>
		
	</item>
		
		
	<item>
		<title>Shoppe Object Role</title>
				
		<link>https://hillaryramos.studio/Shoppe-Object-Role</link>

		<pubDate>Fri, 03 Nov 2023 14:54:22 +0000</pubDate>

		<dc:creator>Hillary Ramos</dc:creator>

		<guid isPermaLink="true">https://hillaryramos.studio/Shoppe-Object-Role</guid>

		<description>Scope&#38;nbsp; 

  
        🤓 The System: Design &#38;amp; Product
        
          ↳Brand Identity &#38;amp; Systems Design
          ↳Biannual Seasonal Show Branding
          ↳Website Design, Build &#38;amp; Daily Management
          ↳Tri-Weekly Email Marketing Campaign to Social Media Rollout
          ↳A Flowing River of Curated Editorial: Brand Stories, Product Roundups &#38;amp; Founder Interviews
          ↳Social Media &#38;amp; Digital Content
          ↳Sales Decks &#38;amp; Press Materials
          ↳Exhibitor Manuals, Contracts &#38;amp; Collateral
          ↳Printed Show Brochures, Invitations &#38;amp; Merch
          ↳IRL / Onsite Show Signage
          ↳Exterior Building &#38;amp; Wayfinding Vinyls
        
      
        🦾 Making It Work: Strategy, Management &#38;amp; Production
        
          ↳Content Curation &#38;amp; Image-Making
            ↳Brand Partner Strategy, Concepting &#38;amp; Storytelling
             ↳ Vendor Database &#38;amp; Asset Management
          ↳Community-Building Initiatives
             ↳       Production Partner &#38;amp; Print Vendor Management

          ↳UX/UI Design &#38;amp; Project Management of the Shoppe Online B2B e-commerce platform build with the development team at Ribbon
          ↳Onsite Photography &#38;amp; Video
          ↳Marketing Strategy &#38;amp; Storytelling to Advertise Brand Partners
           ↳Workflow Documentation &#38;amp; Internal Systems
        
      
</description>
		
	</item>
		
	</channel>
</rss>