// Leviyet — the house. Four practices under one name: // Studio (design), Labs (AI + software), Digital (growth), Ventures (own products). // Cream canvas, ink type, terracotta accent. Big editorial serif, hover-opening "doors". const PRACTICES = [ { n: '01', key: 'studio', name: 'Studio', href: '/studio', city: 'Montreal', line: 'Brand, packaging, campaigns, spaces and motion. Design built to be kept.', list: ['Brand identity', 'Packaging & objects', 'Campaigns & art direction', 'Retail & spatial', 'Merch & apparel', 'Motion & production'], bg: '#1a1612', fg: '#f4efe6', accent: '#e8a77f', }, { n: '02', key: 'labs', name: 'Labs', href: '/labs', city: 'Toronto', line: 'AI agents, automations, custom software and the web and product builds that carry them.', list: ['AI opportunity audit', 'Agents & automations', 'Custom software & portals', 'Web & product builds', 'Training & enablement'], bg: '#c8542a', fg: '#f4efe6', accent: '#1a1612', }, { n: '03', key: 'digital', name: 'Digital', href: '/digital', city: 'Toronto', line: 'Paid media, search, content and lifecycle. Growth that compounds week over week.', list: ['Paid social & search', 'SEO & content engines', 'Email & lifecycle', 'Creative for performance', 'Analytics & attribution'], bg: '#ede5d6', fg: '#1a1612', accent: '#c8542a', }, { n: '04', key: 'ventures', name: 'Ventures', href: '/ventures', city: 'Miami', line: 'Products we design, build and operate ourselves. Our playbooks, on our own money first.', list: ['In-house products', 'Co-builds with operators', 'Operating playbooks', 'Spin-outs'], bg: '#e8a77f', fg: '#1a1612', accent: '#1a1612', }, ]; const House = () => { const [t, setT] = React.useState(0); const [open, setOpen] = React.useState(null); const heroRef = React.useRef(null); const [mouse, setMouse] = React.useState({ x: 0.55, y: 0.4 }); React.useEffect(() => { let raf; const start = performance.now(); const loop = (now) => { setT((now - start) / 1000); raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, []); const onMouseMove = (e) => { const r = heroRef.current?.getBoundingClientRect(); if (!r) return; setMouse({ x: (e.clientX - r.left) / r.width, y: (e.clientY - r.top) / r.height }); }; const flowPath = React.useMemo(() => { const w = 1440, h = 120, pts = []; for (let i = 0; i <= 60; i++) { const x = (i / 60) * w; const y = h / 2 + Math.sin(i * 0.18 + t * 0.9) * 18 + Math.sin(i * 0.42 + t * 1.4) * 6; pts.push([x, y]); } return 'M ' + pts.map(p => p.join(' ')).join(' L '); }, [t]); const words = ['brand identity', 'studio', 'ai agents', 'labs', 'paid media', 'digital', 'own products', 'ventures', 'packaging', 'studio', 'custom software', 'labs', 'seo & content', 'digital', 'co-builds', 'ventures']; const css = ` .hs-hero { position: relative; padding: 96px 56px 48px; max-width: 1400px; margin: 0 auto; overflow: hidden; } .hs-blob { position: absolute; pointer-events: none; width: 760px; height: 760px; border-radius: 50%; background: radial-gradient(circle, rgba(232,167,127,0.5) 0%, rgba(200,84,42,0.14) 30%, transparent 65%); filter: blur(60px); transition: transform 0.5s cubic-bezier(.2,.8,.3,1); mix-blend-mode: multiply; } .hs-kicker { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #c8542a; display: flex; gap: 14px; align-items: center; margin-bottom: 36px; position: relative; } .hs-kicker i { width: 32px; height: 1px; background: #c8542a; display: inline-block; } .hs-h1 { font-family: 'Instrument Serif', serif; font-size: 152px; line-height: 0.92; letter-spacing: -0.03em; font-weight: 400; margin: 0 0 40px; max-width: 1300px; position: relative; } .hs-h1 em { color: #c8542a; font-style: italic; position: relative; display: inline-block; } .hs-h1 em::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.05em; height: 0.06em; background: #c8542a; opacity: 0.35; transform-origin: left; transform: scaleX(0); animation: hsunder 1.4s ease-out forwards 0.5s; } @keyframes hsunder { to { transform: scaleX(1); } } .hs-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: end; position: relative; } .hs-sub { font-size: 22px; line-height: 1.5; color: #4a3f33; max-width: 680px; margin: 0 0 36px; } .hs-btns { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .hs-pri { font-size: 15px; padding: 16px 26px; background: #1a1612; color: #f4efe6; border-radius: 999px; font-weight: 500; display: inline-flex; align-items: center; gap: 10px; position: relative; overflow: hidden; transition: transform 0.3s; } .hs-pri::before { content: ''; position: absolute; inset: 0; background: #c8542a; transform: translateY(100%); transition: transform 0.35s cubic-bezier(.7,0,.3,1); } .hs-pri > * { position: relative; } .hs-pri:hover::before { transform: translateY(0); } .hs-pri:hover { transform: translateY(-2px); } .hs-sec { font-size: 15px; padding: 16px 24px; border-radius: 999px; border: 1px solid rgba(26,22,18,0.2); transition: all 0.2s; } .hs-sec:hover { background: rgba(26,22,18,0.04); border-color: rgba(26,22,18,0.4); } .hs-index { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.06em; border-top: 1px solid rgba(26,22,18,0.15); } .hs-index a { display: grid; grid-template-columns: 40px 1fr auto; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(26,22,18,0.12); color: #1a1612; align-items: baseline; transition: padding 0.3s, color 0.3s; } .hs-index a:hover { color: #c8542a; padding-left: 8px; } .hs-index a b { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 26px; letter-spacing: -0.02em; } .hs-index a span:first-child { color: #c8542a; } .hs-index a span:last-child { color: #6b5d4d; } .hs-flow { width: 100%; height: 120px; display: block; margin-top: 40px; } .hs-marq-wrap { padding: 24px 0; border-top: 1px solid rgba(26,22,18,0.1); border-bottom: 1px solid rgba(26,22,18,0.1); overflow: hidden; background: #ede5d6; } .hs-marq { display: flex; gap: 56px; white-space: nowrap; animation: hsscroll 55s linear infinite; } .hs-marq-block { display: inline-flex; align-items: center; gap: 56px; } .hs-marq-block span:nth-child(odd) { font-family: 'Instrument Serif', serif; font-size: 32px; font-style: italic; color: #1a1612; } .hs-marq-block span:nth-child(even) { color: #c8542a; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; } @keyframes hsscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .hs-doors-sec { padding: 110px 56px 40px; max-width: 1400px; margin: 0 auto; } .hs-doors { display: flex; gap: 10px; height: 640px; } .hs-door { flex: 1; border-radius: 22px; padding: 36px 32px; position: relative; overflow: hidden; display: flex; flex-direction: column; transition: flex 0.7s cubic-bezier(.2,.8,.2,1), transform 0.4s; cursor: pointer; min-width: 0; } .hs-door.is-open { flex: 2.4; } .hs-door-n { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.15em; opacity: 0.8; } .hs-door-name { font-family: 'Instrument Serif', serif; font-size: 64px; line-height: 0.95; letter-spacing: -0.03em; font-weight: 400; margin: 22px 0 0; } .hs-door-name small { display: block; font-size: 18px; letter-spacing: 0; font-style: italic; opacity: 0.75; margin-bottom: 8px; } .hs-door-line { font-size: 16px; line-height: 1.55; max-width: 420px; margin: 18px 0 0; opacity: 0; transform: translateY(10px); transition: opacity 0.5s 0.15s, transform 0.5s 0.15s; } .hs-door-list { list-style: none; padding: 0; margin: auto 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.04em; opacity: 0; transform: translateY(10px); transition: opacity 0.5s 0.25s, transform 0.5s 0.25s; max-width: 520px; } .hs-door-list li::before { content: '— '; opacity: 0.6; } .hs-door-go { position: absolute; right: 28px; bottom: 28px; font-size: 14px; font-weight: 500; display: inline-flex; gap: 8px; align-items: center; opacity: 0; transition: opacity 0.4s 0.3s; } .hs-door.is-open .hs-door-line, .hs-door.is-open .hs-door-list, .hs-door.is-open .hs-door-go { opacity: 1; transform: translateY(0); } .hs-door-orb { position: absolute; right: -120px; top: -120px; width: 360px; height: 360px; border-radius: 50%; opacity: 0.25; transition: transform 0.8s cubic-bezier(.2,.8,.2,1); } .hs-door.is-open .hs-door-orb { transform: translate(-40px, 40px) scale(1.15); } .hs-door-vert { position: absolute; left: 32px; bottom: 32px; writing-mode: vertical-rl; transform: rotate(180deg); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.55; transition: opacity 0.3s; } .hs-door.is-open .hs-door-vert { opacity: 0; } .hs-doors-note { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #6b5d4d; margin-top: 18px; letter-spacing: 0.04em; } .hs-section { padding: 110px 56px; max-width: 1400px; margin: 0 auto; position: relative; } .hs-thesis { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(26,22,18,0.12); } .hs-tcard { padding: 48px 36px 48px 0; border-right: 1px solid rgba(26,22,18,0.12); } .hs-tcard:nth-child(2) { padding-left: 36px; } .hs-tcard:nth-child(3) { padding-left: 36px; border-right: 0; } .hs-tcard-n { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #c8542a; letter-spacing: 0.15em; margin-bottom: 72px; } .hs-tcard h3 { font-family: 'Instrument Serif', serif; font-size: 32px; font-weight: 400; letter-spacing: -0.015em; margin: 0 0 14px; line-height: 1.05; } .hs-tcard p { font-size: 15px; line-height: 1.6; color: #4a3f33; margin: 0; } .hs-loop { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .hs-loop svg { width: 100%; max-width: 560px; display: block; margin: 0 auto; } .hs-loop-steps { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(26,22,18,0.12); } .hs-loop-steps li { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid rgba(26,22,18,0.12); align-items: baseline; } .hs-loop-steps li span { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #c8542a; letter-spacing: 0.15em; } .hs-loop-steps li b { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 28px; letter-spacing: -0.02em; display: block; margin-bottom: 4px; } .hs-loop-steps li p { margin: 0; font-size: 14px; line-height: 1.6; color: #4a3f33; } .hs-proof { background: #1a1612; color: #f4efe6; } .hs-proof-in { max-width: 1400px; margin: 0 auto; padding: 90px 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .hs-proof-item b { display: block; font-family: 'Instrument Serif', serif; font-size: 84px; line-height: 0.95; letter-spacing: -0.03em; font-weight: 400; color: #e8a77f; margin-bottom: 14px; } .hs-proof-item b small { font-size: 36px; font-style: italic; } .hs-proof-item span { display: block; font-size: 14px; line-height: 1.5; color: rgba(244,239,230,0.7); max-width: 240px; } .hs-proof-item i { display: block; font-family: 'JetBrains Mono', monospace; font-style: normal; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(244,239,230,0.45); margin-top: 12px; } .hs-process { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(26,22,18,0.12); border-bottom: 1px solid rgba(26,22,18,0.12); } .hs-step { padding: 40px 32px 40px 24px; border-right: 1px solid rgba(26,22,18,0.12); display: flex; flex-direction: column; min-height: 300px; } .hs-step:last-child { border-right: 0; } .hs-orb { width: 56px; height: 56px; border-radius: 50%; background: rgba(200,84,42,0.1); border: 1px solid rgba(200,84,42,0.35); display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #c8542a; margin-bottom: 28px; position: relative; } .hs-orb::before { content: ''; position: absolute; inset: -8px; border: 1px solid rgba(200,84,42,0.25); border-radius: 50%; animation: hspulse 2.4s ease-out infinite; } @keyframes hspulse { 0% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } } .hs-step h3 { font-family: 'Instrument Serif', serif; font-size: 32px; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 12px; } .hs-step p { font-size: 14px; line-height: 1.6; color: #4a3f33; margin-top: auto; } .hs-ctasec { padding: 60px 56px 0; max-width: 1400px; margin: 0 auto; } .hs-cta { background: #1a1612; color: #f4efe6; border-radius: 24px; padding: 100px 64px; position: relative; overflow: hidden; } .hs-cta::before { content: ''; position: absolute; top: -300px; right: -200px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(232,167,127,0.25) 0%, transparent 70%); border-radius: 50%; animation: hsfloat 12s ease-in-out infinite; } @keyframes hsfloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-50px, 40px); } } .hs-cta h2 { font-family: 'Instrument Serif', serif; font-size: 96px; line-height: 0.96; letter-spacing: -0.025em; font-weight: 400; margin: 0 0 24px; max-width: 1000px; position: relative; } .hs-cta h2 em { font-style: italic; color: #e8a77f; } .hs-cta p { font-size: 18px; line-height: 1.55; max-width: 560px; margin: 0 0 40px; color: rgba(244,239,230,0.7); position: relative; } .hs-cta-btn { font-size: 16px; padding: 18px 32px; background: #e8a77f; color: #1a1612; border-radius: 999px; font-weight: 500; display: inline-flex; align-items: center; gap: 10px; position: relative; transition: transform 0.3s, background 0.3s; } .hs-cta-btn:hover { transform: translateY(-3px); background: #f4efe6; } @media (max-width: 1024px) { .hs-hero { padding: 56px 32px 40px; } .hs-h1 { font-size: 100px; } .hs-row { grid-template-columns: 1fr; gap: 32px; } .hs-sub { font-size: 19px; } .hs-doors-sec { padding: 72px 32px 24px; } .hs-doors { flex-direction: column; height: auto; } .hs-door { min-height: 220px; padding: 28px; } .hs-door.is-open { flex: 1; } .hs-door-name { font-size: 48px; } .hs-door-line, .hs-door-list, .hs-door-go { opacity: 1; transform: none; } .hs-door-list { margin-top: 20px; } .hs-door-go { position: static; margin-top: 20px; } .hs-door-vert { display: none; } .hs-section { padding: 80px 32px; } .hs-thesis { grid-template-columns: 1fr; } .hs-tcard { padding: 36px 0; border-right: 0; border-bottom: 1px solid rgba(26,22,18,0.12); } .hs-tcard:nth-child(2), .hs-tcard:nth-child(3) { padding-left: 0; } .hs-tcard:last-child { border-bottom: 0; } .hs-tcard-n { margin-bottom: 32px; } .hs-loop { grid-template-columns: 1fr; gap: 40px; } .hs-proof-in { grid-template-columns: 1fr 1fr; padding: 64px 32px; } .hs-proof-item b { font-size: 64px; } .hs-process { grid-template-columns: repeat(2, 1fr); } .hs-step { padding: 36px 24px; min-height: 260px; } .hs-step:nth-child(2) { border-right: 0; } .hs-step:nth-child(1), .hs-step:nth-child(2) { border-bottom: 1px solid rgba(26,22,18,0.12); } .hs-ctasec { padding: 48px 32px 0; } .hs-cta { padding: 64px 40px; } .hs-cta h2 { font-size: 64px; } } @media (max-width: 720px) { .hs-hero { padding: 40px 20px 28px; } .hs-blob { width: 360px; height: 360px; } .hs-kicker { margin-bottom: 22px; font-size: 11px; } .hs-h1 { font-size: 60px; margin-bottom: 24px; } .hs-h1 br { display: none; } .hs-sub { font-size: 16px; margin-bottom: 24px; } .hs-btns { flex-direction: column; align-items: stretch; } .hs-pri, .hs-sec { justify-content: center; text-align: center; font-size: 14px; padding: 14px 20px; } .hs-index a b { font-size: 22px; } .hs-flow { height: 80px; margin-top: 24px; } .hs-marq-wrap { padding: 16px 0; } .hs-marq { gap: 28px; animation-duration: 40s; } .hs-marq-block { gap: 28px; } .hs-marq-block span:nth-child(odd) { font-size: 22px; } .hs-marq-block span:nth-child(even) { font-size: 10px; } .hs-doors-sec { padding: 56px 20px 16px; } .hs-door { padding: 24px 22px; border-radius: 16px; } .hs-door-name { font-size: 40px; } .hs-door-list { grid-template-columns: 1fr; } .hs-section { padding: 56px 20px; } .hs-tcard h3 { font-size: 26px; } .hs-loop-steps li { grid-template-columns: 40px 1fr; gap: 12px; padding: 16px 0; } .hs-loop-steps li b { font-size: 24px; } .hs-proof-in { grid-template-columns: 1fr; padding: 48px 20px; gap: 36px; } .hs-proof-item b { font-size: 56px; } .hs-process { grid-template-columns: 1fr; } .hs-step { padding: 28px 20px; min-height: auto; border-right: 0; border-bottom: 1px solid rgba(26,22,18,0.12); } .hs-step:last-child { border-bottom: 0; } .hs-step h3 { font-size: 26px; } .hs-ctasec { padding: 36px 20px 0; } .hs-cta { padding: 48px 28px; border-radius: 18px; } .hs-cta h2 { font-size: 44px; } .hs-cta p { font-size: 16px; margin-bottom: 28px; } .hs-cta-btn { padding: 14px 24px; font-size: 14px; } } `; const loopAngle = (t * 12) % 360; return (
Leviyet · a house of four practices · Toronto · Montreal · Miami

Design, intelligence
and growth. One house.

Leviyet is a design studio in Montreal, an AI lab and a digital growth team in Toronto, and a ventures arm in Miami that builds its own products. One team carries your brand from the first sketch to the thing that runs it to the growth that pays for it.

The practices

Four doors. One team behind all of them.

setOpen(null)}> {PRACTICES.map((p, i) => ( setOpen(i)} onFocus={() => setOpen(i)} >
— {p.n} · {p.city}

Leviyet{p.name}

{p.line}

    {p.list.map(x =>
  • {x}
    • )}
Enter {p.name} → Leviyet {p.name} · {p.city} ))}
// Each practice has its own lead, its own work and its own door. Same house, same standards.
Why a house

Agencies hand off. Houses don't.

{[ { n: '01', t: 'One team, first sketch to last report', d: "The people who position the brand design the pack, build the site and run the media. Nothing gets lost in a handoff, because there isn't one." }, { n: '02', t: 'Work that compounds', d: 'A brand from Studio gives Digital creative that converts. A system from Labs gives Studio room to be ambitious. Each practice makes the others cheaper and better.' }, { n: '03', t: 'We use our own playbooks first', d: "Ventures builds and runs our own products. Every method we sell has been tried on our own money before it's tried on yours." }, ].map(c => (
/ {c.n}

{c.t}

{c.d}

))}
The loop

Brand. Build. Grow. Repeat.

  1. 01
    Studio positions and designs

    Point of view, identity, packaging, campaign. The thing people will want to keep.

  2. 02
    Labs builds what runs it

    The site, the portal, the agent, the automation. Owned by you, tuned by us.

  3. 03
    Digital makes it grow

    Paid, search, content, lifecycle. Weekly loops that cut what doesn't work.

  4. 04
    Ventures keeps us honest

    Our own products run on the same loop, so the playbook is always current.

{[ { v: '1.2', s: 'M', l: 'units sold worldwide for a merch collection the Studio designed', k: 'studio' }, { v: '4,000', s: '', l: 'hours a year returned to a 32-attorney firm by a Labs research assistant', k: 'labs' }, { v: '64', s: '%', l: 'of tier-one support tickets resolved by an agent, with no new hires', k: 'labs' }, { v: '3,400', s: '', l: 'square feet of flagship showroom, drawn in 3D and built on schedule', k: 'studio' }, ].map((p, i) => (
{p.v}{p.s} {p.l} // {p.k}
))}
How we work

Four moves. Listen, position, build, stay.

{[ { n: '01', t: 'Listen', d: "Two weeks inside your business. Calls, shelves, dashboards, every doc you've got." }, { n: '02', t: 'Position', d: 'A written point of view and a 90-day plan. Where to be bold, where to be simple.' }, { n: '03', t: 'Build', d: 'Small bets first. Identity, product, system, campaign. Resolved all the way down.' }, { n: '04', t: 'Stay', d: 'A monthly retainer across practices. Watch it run, fix drift, keep compounding.' }, ].map(s => (
{s.n}

{s.t}

{s.d}

))}

Let's see if we fit.

30-minute intro call. No deck, no pitch. Tell us what you're building and we'll tell you which door to walk through first.

Book the call →
); }; window.House = House; window.PRACTICES = PRACTICES;