← HEXIS

Modular marks / 003

4 modules · 8 marks

H-01 / Primary

ἕξις: to hold.

A hexis is not given; it is assembled from repeated acts. So is every HEXIS mark: one square grid, four modules (quarter, ring, fillet, waist), turned and repeated.

The H is rounded where it meets the world, square where it carries load, and pinched at the crossbar: the point at which it holds.

H-01Hold

The primary H, set on the grid it was cut from.

X-01Cross

Four fillets pulled to the centre. The X appears as the space they leave.

S-01Return

Two arches offset by one module. A path that comes back, slightly further on.

R-01Practice

One quarter, turned four times. Repetition with direction.

R-02Habit

Six identical rings in rhythm. The fifth turns: the controlled deviation.

HX-01Keep

H and X in a single block: stems of quarters, a core of fillets.

E-01Strata

Three bars, each shaped by the same arc. Layers laid down over time.

O-01Whole

Four rings closing on each other. The settled state, complete.

Signature / for project footers

Every project of the studio is signed.

The signature stands in the footer of a site or an app we built. Point at HEXIS: the mark leaves the line and is set down on its plan module by module, the way it is drawn on our site.

It is one link and one style block: no scripts, no fonts, no requests to other servers. It takes its colour and size from the footer it stands in.

<style>.hxc{display:inline-flex;align-items:center;gap:.4em;min-height:44px;color:inherit;font:inherit;line-height:1.2;text-decoration:none;-webkit-tap-highlight-color:transparent}
.hxc-name{display:inline-flex;align-items:baseline;gap:.36em;font-weight:700;letter-spacing:.04em}
.hxc-word{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s cubic-bezier(.2,.8,.2,1)}
.hxc-seal{position:relative;z-index:1;flex:none;align-self:center;width:1em;height:1em}
.hxc-rig{position:absolute;left:50%;bottom:0;width:3.4em;height:3.4em;margin-left:-1.7em;transform:scale(.2941);transform-origin:50% 100%;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hxc-rig svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .3s linear,fill .3s linear}
.hxc-plan{fill:none;stroke:currentColor;opacity:0}
.hxc-solid{position:absolute;inset:0}
.hxc-solid svg{fill:currentColor}
.hxc:hover .hxc-word,.hxc:focus-visible .hxc-word{background-size:100% 1px}
.hxc:hover .hxc-rig,.hxc:focus-visible .hxc-rig{transform:translateY(-1.5em)}
.hxc:hover .hxc-rig svg,.hxc:focus-visible .hxc-rig svg{transform:matrix(.9703,.1853,-.2419,.7433,0,0)}
.hxc:hover .hxc-plan,.hxc:focus-visible .hxc-plan{opacity:.3}
.hxc:hover .hxc-solid,.hxc:focus-visible .hxc-solid{filter:drop-shadow(0 1px 0 #963d24) drop-shadow(0 1px 0 #963d24) drop-shadow(0 1px 0 #963d24) drop-shadow(0 1px 0 #963d24) drop-shadow(0 1px 0 #963d24) drop-shadow(0 1px 0 #963d24)}
.hxc:hover .hxc-solid svg,.hxc:focus-visible .hxc-solid svg{fill:#e2552d}
.hxc:hover .hxc-solid path,.hxc:focus-visible .hxc-solid path{animation:hxc-land .5s cubic-bezier(.2,.8,.2,1) calc(.16s + var(--i) * 55ms) backwards}
@keyframes hxc-land{from{opacity:0;transform:translate(-13px,-52px)}}
@media (prefers-reduced-motion:reduce){
.hxc-word,.hxc-rig,.hxc-rig svg{transition:none}
.hxc:hover .hxc-rig,.hxc:focus-visible .hxc-rig{transform:scale(.2941)}
.hxc:hover .hxc-rig svg,.hxc:focus-visible .hxc-rig svg{transform:none}
.hxc:hover .hxc-plan,.hxc:focus-visible .hxc-plan{opacity:0}
.hxc:hover .hxc-solid,.hxc:focus-visible .hxc-solid{filter:none}
.hxc:hover .hxc-solid path,.hxc:focus-visible .hxc-solid path{animation:none}
}</style>
<a class="hxc" href="https://hexis-agency.com" target="_blank" rel="noopener"><span>Created by</span><span class="hxc-name"><span class="hxc-seal" aria-hidden="true"><span class="hxc-rig"><svg class="hxc-plan" viewBox="0 0 120 120"><path vector-effect="non-scaling-stroke" d="M0 0V120M40 0V120M80 0V120M120 0V120M0 0H120M0 40H120M0 80H120M0 120H120"/></svg><span class="hxc-solid"><svg viewBox="0 0 120 120"><path style="--i:0" d="M40 40H0A40 40 0 0 1 40 0Z"/><path style="--i:1" d="M0 40H40V80H0Z"/><path style="--i:2" d="M40 80V120A40 40 0 0 1 0 80Z"/><path style="--i:3" d="M40 44Q60 60 80 44V76Q60 60 40 76Z"/><path style="--i:4" d="M80 40V0A40 40 0 0 1 120 40Z"/><path style="--i:5" d="M80 40H120V80H80Z"/><path style="--i:6" d="M80 80H120A40 40 0 0 1 80 120Z"/></svg></span></span></span><span class="hxc-word">HEXIS</span></span></a>