syntaxbullet/teppelin-labs-website
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
syntaxbullet
2026-06-12 17:44:52 +02:00
commit e48582fa2b
24 changed files with 3093 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
.DS_Store

BIN
Flower.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

42
IMAGE_PROMPTS.md Normal file
View File

@@ -0,0 +1,42 @@
# Teppelin Labs Image Direction
Use a consistent photographic language: monochrome or near-monochrome, hard flash or directional studio light, visible digital texture, black and off-white environments, and one controlled Teppelin orange element. Avoid generic stock-office scenes, handshakes, neon cyberpunk, floating UI screens, and obvious humanoid robots.
## 1. Homepage Hero: Distributed Builders
**Placement:** Replace or sit behind the orange hero circle on the homepage. Wide 16:9 crop with important content kept away from the left-side headline.
**Prompt:**
> Editorial photograph of a distributed digital builder collective, four diverse young adult technologists working independently across modular desks in a dark architectural studio, laptops, circuit prototypes, sketchbooks and small 3D printed objects visible, candid concentration rather than posing, dramatic high-contrast black and white photography, one saturated vermilion-orange translucent acrylic panel crossing the composition, precise Swiss modernist art direction, subtle halftone grain, premium technology magazine, wide landscape composition, no logos, no text, no cyberpunk neon, no corporate office stock photography
## 2. Collective Page: Discord Community Energy
**Placement:** Discord section, portrait 4:5 or square crop.
**Prompt:**
> Abstract editorial visualization of an online creative technology community, many small workspaces and technical artifacts connected through a geometric communication network, screens showing code, 3D forms, motion studies and diagrams without readable text, strict black, off-white, graphite and vivid vermilion-orange palette only, real photographic textures combined with crisp Swiss grid geometry, intelligent and precise, highly detailed, contemporary design publication, no people, no logos, no fake chat UI, no floating holograms, no blue, no purple
## 3. Lab Page: Experimental Technology Macro
**Placement:** First lab feature or full-width transition image. Wide 3:2 crop.
**Prompt:**
> Extreme macro editorial photograph of experimental computing hardware and tactile prototypes on a workbench, exposed circuit traces, machined aluminum, translucent resin, optical glass and braided cables, evidence of active making, stark directional lighting, monochrome with a single vermilion-orange component, deep blacks, clean negative space, Swiss industrial design photography, subtle print grain, realistic materials, no brand names, no text, no neon cyberpunk
## 4. Membership Page: Builder Artifact Series
**Placement:** A future member-story or process section. Generate 4 images with the same setup, portrait 4:5.
**Prompt:**
> Editorial still life of a digital builder's active workspace with no person visible, each image centered on one different artifact of craft such as an interface prototype, circuit experiment, 3D form, annotated sketchbook, motion study, or custom tool, dark graphite work surface, hard side lighting and subtle flash, monochrome photography with one vermilion-orange object, generous negative space for editorial layout, authentic technical process, premium independent magazine, no people, no body parts, no visible brand logos, no readable text, no blue, no purple
## Export Notes
- Generate at the largest available size.
- Export website versions as WebP at roughly 1600-2200 px on the long edge.
- Keep each file below approximately 500 KB where visual quality allows.
- Suggested names: `hero-builders.webp`, `discord-collective.webp`, `lab-hardware.webp`, `artifact-01.webp` through `artifact-04.webp`.

BIN
Logomark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 KiB

BIN
Simplified_Logomark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
assets/hero-builders.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
assets/lab-hardware.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 176 KiB

BIN
assets/process-artifacts.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 149 KiB

23
contact.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="Collaborate with Teppelin Labs on research, events, digital products, and experimental technology."><title>Collaborate - Teppelin Labs</title>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"><link rel="stylesheet" href="styles.css">
</head>
<body data-page="contact">
<a class="skip-link" href="#main">Skip to content</a><div class="scroll-progress" aria-hidden="true"><span></span></div><div class="cursor-dot" aria-hidden="true"></div><div class="cursor-ring" aria-hidden="true"></div>
<header class="site-header"><a class="brand" href="index.html" aria-label="Teppelin Labs home"><img class="brand-logo" src="Logomark.png" alt="Teppelin Labs"></a><button class="menu-toggle" type="button" aria-label="Toggle navigation" aria-expanded="false"><span></span></button><nav class="site-nav" aria-label="Primary navigation"><span class="nav-divider">Explore</span><a href="index.html" data-nav="home">About</a><a href="solutions.html" data-nav="solutions">Build</a><a href="work.html" data-nav="work">Lab</a><span class="nav-divider">Members</span><a href="methodology.html" data-nav="methodology">Collective</a><a class="nav-cta" href="join.html" data-nav="join">Apply</a></nav></header>
<main id="main">
<section class="page-hero section-dark grid-surface"><div class="page-hero-head reveal"><p class="eyebrow">Visitor path / Collaborate</p><p class="page-hero-copy">For organizations, researchers, communities, and builders who want to explore a technology problem with the collective.</p></div><h1 class="page-title reveal reveal-delay"><span><b class="page-index">04</b>Bring</span><span>the right</span><span class="text-orange">question.</span></h1></section>
<section class="section grid-surface"><div class="contact-grid"><div class="contact-intro reveal"><p class="eyebrow">Collaboration brief</p><h2 class="section-title">Tell us what could exist.</h2><p class="body-copy" style="margin-top:32px;">We are open to experimental product work, technical research, community partnerships, workshops, events, and ideas that benefit from a multidisciplinary group of builders.</p></div><form class="contact-form reveal reveal-delay" data-contact-form><div class="field-grid">
<div class="field"><label for="name">Your name</label><input id="name" name="name" type="text" autocomplete="name" placeholder="Name" required></div><div class="field"><label for="email">Email</label><input id="email" name="email" type="email" autocomplete="email" placeholder="name@organization.com" required></div><div class="field"><label for="company">Organization</label><input id="company" name="company" type="text" autocomplete="organization" placeholder="Optional"></div><div class="field"><label for="type">Collaboration type</label><select id="type" name="type" required><option value="">Select one</option><option>Experimental product</option><option>Research</option><option>Event or workshop</option><option>Community partnership</option><option>Other</option></select></div><div class="field field-wide"><label for="project">What should we explore?</label><textarea id="project" name="project" placeholder="Share the question, context, timing, and what a useful outcome might look like." required></textarea></div>
</div><button class="btn" type="submit">Send collaboration brief</button><p class="form-status" aria-live="polite"></p></form></div>
<div class="contact-details reveal"><article class="contact-detail"><span class="meta">Email</span><a href="mailto:hello@teppelinlabs.com">hello@teppelinlabs.com</a></article><article class="contact-detail"><span class="meta">Community</span><p>Discord / Global / Online</p></article><article class="contact-detail"><span class="meta">Membership</span><a href="join.html">Apply separately here</a></article></div>
</section>
</main>
<footer class="site-footer"><div class="footer-bottom"><a class="footer-brand" href="index.html"><img class="footer-logo" src="Logomark.png" alt="Teppelin Labs"></a><div class="footer-links"><a href="solutions.html">What we build</a><a href="work.html">The lab</a><a href="methodology.html">The collective</a><a href="join.html">Apply</a><a href="contact.html">Collaborate</a></div><p class="footer-meta">&copy; <span data-year></span> Teppelin Labs<br>Built online, worldwide</p></div></footer>
<script src="script.js"></script>
</body>
</html>

BIN
fe51893fd9f487a048a5c911b2c60154.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 516 KiB

70
index.html Normal file
View File

@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Teppelin Labs is an online collective of digital builders pushing the boundaries of today's technology.">
<title>Teppelin Labs - Digital Builders, One Collective</title>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body data-page="home">
<a class="skip-link" href="#main">Skip to content</a><div class="scroll-progress" aria-hidden="true"><span></span></div><div class="cursor-dot" aria-hidden="true"></div><div class="cursor-ring" aria-hidden="true"></div>
<header class="site-header">
<a class="brand" href="index.html" aria-label="Teppelin Labs home"><img class="brand-logo" src="Logomark.png" alt="Teppelin Labs"></a>
<button class="menu-toggle" type="button" aria-label="Toggle navigation" aria-expanded="false"><span></span></button>
<nav class="site-nav" aria-label="Primary navigation">
<span class="nav-divider">Explore</span><a href="index.html" data-nav="home">About</a><a href="solutions.html" data-nav="solutions">Build</a><a href="work.html" data-nav="work">Lab</a>
<span class="nav-divider">Members</span><a href="methodology.html" data-nav="methodology">Collective</a><a class="nav-cta" href="join.html" data-nav="join">Apply</a>
</nav>
</header>
<main id="main">
<section class="hero grid-surface">
<div class="hero-topline reveal"><p class="eyebrow">Online collective / Built on Discord</p><p class="hero-intro">Teppelin Labs is an organized group of digital builders pushing the boundaries of today's technology.</p></div>
<div class="hero-title-row reveal reveal-delay"><div class="hero-orbit" aria-hidden="true"></div><h1 class="display">Digital<br><span class="text-orange">builders.</span><br>One collective.</h1></div>
<div class="hero-bottom reveal"><div class="hero-note"><span class="meta">Global / Online / Always building</span><p>Independent minds. Shared momentum.</p></div><div class="hero-actions"><p>We bring developers, designers, researchers, and technical creators together to learn faster and build beyond the obvious.</p><a class="btn" href="methodology.html">Meet the collective</a></div></div>
</section>
<div class="marquee" aria-hidden="true"><div class="marquee-track"><span>Build <i>+</i> Share <i>+</i> Experiment <i>+</i> Collaborate <i>+</i> Ship <i>+</i></span><span>Build <i>+</i> Share <i>+</i> Experiment <i>+</i> Collaborate <i>+</i> Ship <i>+</i></span></div></div>
<section class="section grid-surface">
<p class="eyebrow reveal">Choose your path</p>
<div class="audience-split reveal">
<a class="audience-card" href="solutions.html"><span class="meta">For visitors and collaborators</span><h3>See what<br>we build.</h3><p>Explore our disciplines, experiments, and the kinds of ambitious digital problems the collective takes on.</p><span class="arrow" aria-hidden="true">&#8599;</span></a>
<a class="audience-card" href="join.html"><span class="meta">For prospective members</span><h3>Build with<br>the collective.</h3><p>Learn how the Discord community operates, who thrives here, and how to apply for membership.</p><span class="arrow" aria-hidden="true">&#8599;</span></a>
</div>
</section>
<section class="section grid-surface">
<div class="intro-grid"><h2 class="section-title reveal">Different skills.<br>Shared <span class="text-orange">curiosity.</span></h2><div class="intro-copy reveal reveal-delay"><p class="lede">Teppelin is a structured environment for people who learn by making.</p><p class="body-copy">Members trade knowledge, start projects, critique work, test new tools, and form small teams around ideas worth pursuing. The collective creates the context; builders create the momentum.</p></div></div>
<div class="builder-grid reveal">
<article class="builder-card"><span class="builder-glyph"></span><h3>Engineers</h3><p>Frontend, backend, mobile, infrastructure, creative code, and emerging platforms.</p></article>
<article class="builder-card"><span class="builder-glyph"></span><h3>Designers</h3><p>Product, brand, motion, 3D, interaction, systems, and visual experimentation.</p></article>
<article class="builder-card"><span class="builder-glyph"></span><h3>AI Builders</h3><p>Agents, applied models, automation, research, evaluation, and new interfaces.</p></article>
<article class="builder-card"><span class="builder-glyph"></span><h3>Technical Creators</h3><p>People combining disciplines to invent tools, experiences, and new ways of working.</p></article>
</div>
</section>
<section class="discord-panel">
<div class="discord-copy reveal"><div><p class="eyebrow">The community layer</p><h2 class="section-title">The lab lives<br>on Discord.</h2><p>Discord is our shared workshop: a place for active project rooms, technical deep dives, critique, calls, opportunities, and the everyday conversations that turn isolated builders into a real collective.</p></div><div class="button-row"><a class="btn btn-light" href="methodology.html">How membership works</a><a class="btn btn-light" href="join.html">Apply to join</a></div></div>
<div class="discord-visual reveal reveal-delay" aria-label="Illustration of Teppelin Labs Discord channels"><ul class="discord-channels"><li>introductions</li><li>build-in-public</li><li>project-labs</li><li>ai-systems</li><li>design-critique</li><li>opportunities</li></ul></div>
</section>
<section class="section grid-surface">
<div class="intro-grid"><h2 class="section-title reveal">A collective<br>you can <span class="text-orange">see.</span></h2><div class="intro-copy reveal reveal-delay"><p class="lede">The strongest technology communities are visible through their people, process, and artifacts.</p><p class="body-copy">Our visual language focuses on concentrated builders, tactile prototypes, and the human texture behind ambitious digital work.</p></div></div>
<div class="media-direction reveal" style="margin-top:clamp(70px,9vw,140px);">
<article class="media-card" data-image-slot="hero-builders"><img src="assets/hero-builders.webp" alt="A group of digital builders working together in a technology studio" decoding="async" width="1672" height="941"><span class="media-card-label meta">01 / Build sessions</span><p class="media-card-prompt">People in the middle of real work, not posed profiles.</p></article>
<article class="media-card" data-image-slot="lab-hardware"><img src="assets/lab-hardware.webp" alt="Close-up of experimental computing hardware and prototypes" decoding="async" width="1536" height="1024"><span class="media-card-label meta">02 / Prototype detail</span><p class="media-card-prompt">The physical texture of experiments, tools, and unfinished ideas.</p></article>
<article class="media-card" data-image-slot="process-artifacts"><img src="assets/process-artifacts.webp" alt="A builder's workbench with sketches, electronic prototypes, tools, and material studies" decoding="async" width="1003" height="1568"><span class="media-card-label meta">03 / Process artifacts</span><p class="media-card-prompt">Craft made visible through sketches, tools, tests, and working prototypes.</p></article>
</div>
</section>
<section class="statement section-orange"><p class="reveal">The future is built by people willing to learn in public, collaborate deeply, and keep shipping.</p><img class="statement-mark" src="Flower.png" alt="" aria-hidden="true"></section>
</main>
<footer class="site-footer"><div class="footer-cta"><h2 class="reveal">Find your people.<br>Build the next thing.</h2><a class="btn btn-orange reveal" href="join.html">Apply for membership</a></div><div class="footer-bottom"><a class="footer-brand" href="index.html"><img class="footer-logo" src="Logomark.png" alt="Teppelin Labs"></a><div class="footer-links"><a href="solutions.html">What we build</a><a href="work.html">The lab</a><a href="methodology.html">The collective</a><a href="join.html">Apply</a><a href="contact.html">Collaborate</a></div><p class="footer-meta">&copy; <span data-year></span> Teppelin Labs<br>Built online, worldwide</p></div></footer>
<script src="script.js"></script>
</body>
</html>

53
join.html Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="Apply to join Teppelin Labs, a selective online Discord collective for digital builders."><title>Apply for Membership - Teppelin Labs</title>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"><link rel="stylesheet" href="styles.css">
</head>
<body data-page="join">
<a class="skip-link" href="#main">Skip to content</a><div class="scroll-progress" aria-hidden="true"><span></span></div><div class="cursor-dot" aria-hidden="true"></div><div class="cursor-ring" aria-hidden="true"></div>
<header class="site-header"><a class="brand" href="index.html" aria-label="Teppelin Labs home"><img class="brand-logo" src="Logomark.png" alt="Teppelin Labs"></a><button class="menu-toggle" type="button" aria-label="Toggle navigation" aria-expanded="false"><span></span></button><nav class="site-nav" aria-label="Primary navigation"><span class="nav-divider">Explore</span><a href="index.html" data-nav="home">About</a><a href="solutions.html" data-nav="solutions">Build</a><a href="work.html" data-nav="work">Lab</a><span class="nav-divider">Members</span><a href="methodology.html" data-nav="methodology">Collective</a><a class="nav-cta" href="join.html" data-nav="join">Apply</a></nav></header>
<main id="main">
<section class="page-hero section-orange grid-surface"><div class="page-hero-head reveal"><p class="eyebrow">Member acquisition / Application</p><p class="page-hero-copy">Membership is for active digital builders who want to contribute to a focused peer community, not simply observe one.</p></div><h1 class="page-title reveal reveal-delay"><span><b class="page-index">05</b>Apply</span><span>to build</span><span class="text-white">together.</span></h1></section>
<section class="section grid-surface"><div class="application-layout">
<aside class="application-aside reveal"><p class="eyebrow">Before you apply</p><h2 class="section-title">Signal over scale.</h2><p class="body-copy" style="margin-top:30px;">Applications help us understand your craft, current momentum, and how you might strengthen the room. We care more about evidence of curiosity and follow-through than titles or follower counts.</p><ul class="application-points"><li>Applications are reviewed by humans</li><li>Membership is currently application-based</li><li>Accepted members receive the Discord invite</li><li>Thoughtful answers matter more than long answers</li></ul></aside>
<form class="application-form reveal reveal-delay" data-application-form>
<div class="field-grid">
<div class="field"><label for="app-name">Full name</label><input id="app-name" name="name" type="text" autocomplete="name" placeholder="Your name" required></div>
<div class="field"><label for="app-email">Email</label><input id="app-email" name="email" type="email" autocomplete="email" placeholder="you@example.com" required></div>
<div class="field"><label for="app-discord">Discord username</label><input id="app-discord" name="discord" type="text" placeholder="username" required></div>
<div class="field"><label for="app-location">Location / timezone</label><input id="app-location" name="location" type="text" placeholder="City or UTC offset" required></div>
<div class="field field-wide"><label for="app-portfolio">Work, GitHub, or portfolio link</label><input id="app-portfolio" name="portfolio" type="url" placeholder="https://" required></div>
</div>
<span class="meta">Primary craft</span>
<div class="choice-grid">
<div class="choice"><input id="craft-engineering" type="radio" name="craft" value="Engineering" required><label for="craft-engineering">Software engineering</label></div>
<div class="choice"><input id="craft-design" type="radio" name="craft" value="Design"><label for="craft-design">Product / visual design</label></div>
<div class="choice"><input id="craft-ai" type="radio" name="craft" value="AI"><label for="craft-ai">AI / applied research</label></div>
<div class="choice"><input id="craft-creative" type="radio" name="craft" value="Creative technology"><label for="craft-creative">Creative technology</label></div>
</div>
<div class="field-grid">
<div class="field field-wide"><label for="app-work">What are you building or learning right now?</label><textarea id="app-work" name="current_work" placeholder="Tell us about the problem, project, or technical territory holding your attention." required></textarea></div>
<div class="field field-wide"><label for="app-proof">What is one thing you have made that best represents how you think?</label><textarea id="app-proof" name="proof" placeholder="Link it if possible and explain the choices or learning behind it." required></textarea></div>
<div class="field field-wide"><label for="app-contribution">How would you contribute to the collective?</label><textarea id="app-contribution" name="contribution" placeholder="Knowledge, critique, project leadership, introductions, sessions, collaboration, or something else." required></textarea></div>
<div class="field"><label for="app-time">Weekly availability</label><select id="app-time" name="availability" required><option value="">Select one</option><option>1-2 hours</option><option>3-5 hours</option><option>6-10 hours</option><option>10+ hours</option></select></div>
<div class="field"><label for="app-source">How did you find Teppelin?</label><input id="app-source" name="source" type="text" placeholder="Person, post, event, search..."></div>
</div>
<button class="btn" type="submit">Submit membership application</button>
<p class="form-note">Submitting this prototype stores nothing yet. Connect the form to Formspree, Tally, Airtable, or your own endpoint before publishing publicly.</p>
<p class="form-status" aria-live="polite"></p>
</form>
</div></section>
<section class="section section-dark"><div class="intro-grid"><h2 class="section-title reveal">What happens<br><span class="text-orange">next.</span></h2><div class="intro-copy reveal reveal-delay"><p class="lede">A simple human review, followed by an invitation when the fit is clear.</p><p class="body-copy">We review the work and answers, look for evidence of active craft and collaborative intent, and may ask one short follow-up. Accepted applicants receive onboarding details and a private Discord invite.</p></div></div></section>
</main>
<footer class="site-footer"><div class="footer-bottom"><a class="footer-brand" href="index.html"><img class="footer-logo" src="Logomark.png" alt="Teppelin Labs"></a><div class="footer-links"><a href="solutions.html">What we build</a><a href="work.html">The lab</a><a href="methodology.html">The collective</a><a href="join.html">Apply</a><a href="contact.html">Collaborate</a></div><p class="footer-meta">&copy; <span data-year></span> Teppelin Labs<br>Built online, worldwide</p></div></footer>
<script src="script.js"></script>
</body>
</html>

34
methodology.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="Inside Teppelin Labs: a structured online Discord collective for serious digital builders."><title>The Collective - Teppelin Labs</title>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"><link rel="stylesheet" href="styles.css">
</head>
<body data-page="methodology">
<a class="skip-link" href="#main">Skip to content</a><div class="scroll-progress" aria-hidden="true"><span></span></div><div class="cursor-dot" aria-hidden="true"></div><div class="cursor-ring" aria-hidden="true"></div>
<header class="site-header"><a class="brand" href="index.html" aria-label="Teppelin Labs home"><img class="brand-logo" src="Logomark.png" alt="Teppelin Labs"></a><button class="menu-toggle" type="button" aria-label="Toggle navigation" aria-expanded="false"><span></span></button><nav class="site-nav" aria-label="Primary navigation"><span class="nav-divider">Explore</span><a href="index.html" data-nav="home">About</a><a href="solutions.html" data-nav="solutions">Build</a><a href="work.html" data-nav="work">Lab</a><span class="nav-divider">Members</span><a href="methodology.html" data-nav="methodology">Collective</a><a class="nav-cta" href="join.html" data-nav="join">Apply</a></nav></header>
<main id="main">
<section class="page-hero section-orange grid-surface"><div class="page-hero-head reveal"><p class="eyebrow">Member path / The collective</p><p class="page-hero-copy">Teppelin is not a content feed or a giant open server. It is a deliberately organized network for capable builders who want real peers, active projects, and higher-signal conversation.</p></div><h1 class="page-title reveal reveal-delay"><span><b class="page-index">02</b>Online</span><span>does not mean</span><span class="text-white">alone.</span></h1></section>
<section class="discord-panel"><div class="discord-copy reveal"><div><p class="eyebrow">Our shared workspace</p><h2 class="section-title">Organized<br>on Discord.</h2><p>The server is structured around craft, active labs, and useful exchange. Members can move from a quick question to a focused project room without losing the human context that makes collaboration work.</p></div><div class="button-row"><a class="btn btn-light" href="join.html">Apply for membership</a></div></div><div class="discord-visual reveal reveal-delay"><ul class="discord-channels"><li>member-lobby</li><li>what-are-you-building</li><li>engineering</li><li>design-and-motion</li><li>ai-and-agents</li><li>project-rooms</li><li>calls-and-sessions</li></ul></div></section>
<section class="section section-dark"><div class="intro-grid"><h2 class="section-title reveal">Structure makes<br>community <span class="text-orange">useful.</span></h2><div class="intro-copy reveal reveal-delay"><p class="lede">The point is not constant activity. It is having the right people and spaces available when momentum appears.</p><p class="body-copy">Members are expected to be generous with context, serious about craft, respectful of others' time, and willing to contribute before asking for attention.</p></div></div><div class="process reveal">
<article class="process-step"><h3>Enter</h3><p>New members introduce their work, interests, and current questions so the community can connect them with relevant people and channels.</p></article>
<article class="process-step"><h3>Participate</h3><p>Share progress, join critique, contribute expertise, attend calls, and build a reputation through consistent useful participation.</p></article>
<article class="process-step"><h3>Collaborate</h3><p>Form small project groups around experiments, products, open-source work, research, or creative technology.</p></article>
<article class="process-step"><h3>Compound</h3><p>Document what worked, teach what you learned, and create more surface area for the next member or project to succeed.</p></article>
</div></section>
<section class="section grid-surface"><div class="principles-grid"><div class="principles-lead reveal"><p class="eyebrow">Community standards</p><h2 class="section-title">What keeps<br>the signal high.</h2></div><p class="principles-aside lede reveal reveal-delay">Skill matters. So do curiosity, generosity, follow-through, and the ability to work well with people unlike you.</p><div class="principle-list reveal">
<article class="principle"><span class="meta">01 / Make</span><h3>Show the work</h3><p>Ideas become more useful when they are visible. Share prototypes, notes, failures, decisions, and what you are learning.</p></article>
<article class="principle"><span class="meta">02 / Give</span><h3>Contribute context</h3><p>Strong communities are built by members who answer thoughtfully, make introductions, and help others move.</p></article>
<article class="principle"><span class="meta">03 / Respect</span><h3>Protect the room</h3><p>No spam, posturing, extraction, or performative noise. Be direct, kind, and conscious of other people's attention.</p></article>
<article class="principle"><span class="meta">04 / Finish</span><h3>Follow through</h3><p>Ambition is welcome, but reliability builds trust. Communicate clearly and finish the commitments you make.</p></article>
</div></div></section>
</main>
<footer class="site-footer"><div class="footer-cta"><h2 class="reveal">Does this sound like your room?</h2><a class="btn btn-orange reveal" href="join.html">Apply to join</a></div><div class="footer-bottom"><a class="footer-brand" href="index.html"><img class="footer-logo" src="Logomark.png" alt="Teppelin Labs"></a><div class="footer-links"><a href="solutions.html">What we build</a><a href="work.html">The lab</a><a href="methodology.html">The collective</a><a href="join.html">Apply</a><a href="contact.html">Collaborate</a></div><p class="footer-meta">&copy; <span data-year></span> Teppelin Labs<br>Built online, worldwide</p></div></footer>
<script src="script.js"></script>
</body>
</html>

BIN
ref1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 427 KiB

BIN
ref2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 154 KiB

BIN
reff.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 218 KiB

BIN
refff.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

125
script.js Normal file
View File

@@ -0,0 +1,125 @@
const body = document.body;
const menuToggle = document.querySelector('.menu-toggle');
const navLinks = document.querySelectorAll('.site-nav a');
const progress = document.querySelector('.scroll-progress span');
if (menuToggle) {
menuToggle.addEventListener('click', () => {
const isOpen = body.classList.toggle('menu-open');
menuToggle.setAttribute('aria-expanded', String(isOpen));
});
}
navLinks.forEach((link) => {
link.addEventListener('click', () => {
body.classList.remove('menu-open');
menuToggle?.setAttribute('aria-expanded', 'false');
});
});
const updateProgress = () => {
if (!progress) return;
const max = document.documentElement.scrollHeight - window.innerHeight;
const value = max > 0 ? window.scrollY / max : 0;
progress.style.transform = `scaleX(${value})`;
};
window.addEventListener('scroll', updateProgress, { passive: true });
updateProgress();
const revealObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
revealObserver.unobserve(entry.target);
}
});
}, { threshold: 0.12, rootMargin: '0px 0px -5% 0px' });
document.querySelectorAll('.reveal').forEach((element) => revealObserver.observe(element));
const currentPage = body.dataset.page;
document.querySelectorAll(`[data-nav="${currentPage}"]`).forEach((link) => {
link.setAttribute('aria-current', 'page');
});
const dot = document.querySelector('.cursor-dot');
const ring = document.querySelector('.cursor-ring');
if (dot && ring && window.matchMedia('(pointer: fine)').matches) {
let mouseX = 0;
let mouseY = 0;
let ringX = 0;
let ringY = 0;
window.addEventListener('mousemove', (event) => {
mouseX = event.clientX;
mouseY = event.clientY;
dot.classList.add('is-active');
ring.classList.add('is-active');
dot.style.left = `${mouseX}px`;
dot.style.top = `${mouseY}px`;
});
const animateRing = () => {
ringX += (mouseX - ringX) * 0.16;
ringY += (mouseY - ringY) * 0.16;
ring.style.left = `${ringX}px`;
ring.style.top = `${ringY}px`;
requestAnimationFrame(animateRing);
};
animateRing();
document.querySelectorAll('a, button, input, textarea, select').forEach((target) => {
target.addEventListener('mouseenter', () => ring.classList.add('is-hovering'));
target.addEventListener('mouseleave', () => ring.classList.remove('is-hovering'));
});
}
document.querySelectorAll('[data-count]').forEach((element) => {
const target = Number(element.dataset.count);
const suffix = element.dataset.suffix || '';
const counterObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
const start = performance.now();
const duration = 1300;
const tick = (time) => {
const progressValue = Math.min((time - start) / duration, 1);
const eased = 1 - Math.pow(1 - progressValue, 4);
element.textContent = `${Math.round(target * eased)}${suffix}`;
if (progressValue < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
counterObserver.disconnect();
});
}, { threshold: 0.5 });
counterObserver.observe(element);
});
const contactForm = document.querySelector('[data-contact-form]');
if (contactForm) {
contactForm.addEventListener('submit', (event) => {
event.preventDefault();
const status = contactForm.querySelector('.form-status');
const name = new FormData(contactForm).get('name') || 'there';
status.textContent = `Thank you, ${name}. Your collaboration brief is ready for review.`;
contactForm.reset();
});
}
const applicationForm = document.querySelector('[data-application-form]');
if (applicationForm) {
applicationForm.addEventListener('submit', (event) => {
event.preventDefault();
const status = applicationForm.querySelector('.form-status');
const name = new FormData(applicationForm).get('name') || 'builder';
status.textContent = `Application received, ${name}. Connect this form to a submission service before launch.`;
applicationForm.reset();
});
}
document.querySelectorAll('[data-year]').forEach((node) => {
node.textContent = new Date().getFullYear();
});

36
solutions.html Normal file
View File

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Explore what the developers, designers, AI builders, and technical creators of Teppelin Labs build together.">
<title>What We Build - Teppelin Labs</title>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"><link rel="stylesheet" href="styles.css">
</head>
<body data-page="solutions">
<a class="skip-link" href="#main">Skip to content</a><div class="scroll-progress" aria-hidden="true"><span></span></div><div class="cursor-dot" aria-hidden="true"></div><div class="cursor-ring" aria-hidden="true"></div>
<header class="site-header"><a class="brand" href="index.html" aria-label="Teppelin Labs home"><img class="brand-logo" src="Logomark.png" alt="Teppelin Labs"></a><button class="menu-toggle" type="button" aria-label="Toggle navigation" aria-expanded="false"><span></span></button><nav class="site-nav" aria-label="Primary navigation"><span class="nav-divider">Explore</span><a href="index.html" data-nav="home">About</a><a href="solutions.html" data-nav="solutions">Build</a><a href="work.html" data-nav="work">Lab</a><span class="nav-divider">Members</span><a href="methodology.html" data-nav="methodology">Collective</a><a class="nav-cta" href="join.html" data-nav="join">Apply</a></nav></header>
<main id="main">
<section class="page-hero grid-surface"><div class="page-hero-head reveal"><p class="eyebrow">Visitor path / What we build</p><p class="page-hero-copy">The collective works where software, design, artificial intelligence, and internet culture meet. We build to discover what technology can become next.</p></div><h1 class="page-title reveal reveal-delay"><span><b class="page-index">01</b>Build</span><span>past the</span><span class="text-orange">expected.</span></h1></section>
<section class="section-tight"><div class="capability-grid reveal">
<article class="capability-card"><span class="meta">01 / Software</span><h2 class="card-title">Digital<br>products</h2><p class="body-copy">Useful, ambitious software shaped by strong engineering and deliberate interaction design.</p><ul><li>Web applications</li><li>Mobile products</li><li>Developer tools</li><li>Platforms and APIs</li></ul></article>
<article class="capability-card"><span class="meta">02 / Intelligence</span><h2 class="card-title">AI<br>systems</h2><p class="body-copy">Applied experiments that move models out of demos and into thoughtful, testable workflows.</p><ul><li>Agents and automation</li><li>Model interfaces</li><li>Evaluations</li><li>Applied research</li></ul></article>
<article class="capability-card"><span class="meta">03 / Experience</span><h2 class="card-title">Creative<br>technology</h2><p class="body-copy">New forms of expression built through code, motion, real-time graphics, and emerging media.</p><ul><li>Interactive experiences</li><li>Creative coding</li><li>3D and spatial</li><li>Experimental interfaces</li></ul></article>
</div></section>
<section class="section section-dark"><div class="intro-grid"><h2 class="section-title reveal">Projects begin<br>with a <span class="text-orange">spark.</span></h2><div class="intro-copy reveal reveal-delay"><p class="lede">A member shares an idea. Others sharpen it, test it, and decide whether to form a build team.</p><p class="body-copy">Some projects are weekend experiments. Others become open-source tools, serious products, collaborations, or new ventures. Teppelin gives each idea access to a wider range of technical and creative perspectives.</p></div></div></section>
<section class="section grid-surface"><p class="eyebrow reveal">How the collective contributes</p><div class="service-list reveal">
<div class="service-row"><span class="meta">A</span><h3>Start a lab</h3><p>Bring a clear idea, technical question, or creative provocation to the community.</p><span class="arrow">&#8599;</span></div>
<div class="service-row"><span class="meta">B</span><h3>Join a build</h3><p>Contribute your craft to an active member-led experiment or collaborative product.</p><span class="arrow">&#8599;</span></div>
<div class="service-row"><span class="meta">C</span><h3>Share knowledge</h3><p>Run a session, publish a breakdown, critique work, or help another builder move forward.</p><span class="arrow">&#8599;</span></div>
</div></section>
<section class="statement section-orange"><p class="reveal">We are less interested in predicting the future than in making enough things to discover it.</p><img class="statement-mark" src="Simplified_Logomark.png" alt="" aria-hidden="true"></section>
</main>
<footer class="site-footer"><div class="footer-cta"><h2 class="reveal">Have something worth exploring?</h2><a class="btn btn-orange reveal" href="contact.html">Collaborate with the lab</a></div><div class="footer-bottom"><a class="footer-brand" href="index.html"><img class="footer-logo" src="Logomark.png" alt="Teppelin Labs"></a><div class="footer-links"><a href="solutions.html">What we build</a><a href="work.html">The lab</a><a href="methodology.html">The collective</a><a href="join.html">Apply</a><a href="contact.html">Collaborate</a></div><p class="footer-meta">&copy; <span data-year></span> Teppelin Labs<br>Built online, worldwide</p></div></footer>
<script src="script.js"></script>
</body>
</html>

178
stitch_modern_one_step_solutions (3)/DESIGN.md Normal file
View File

@@ -0,0 +1,178 @@
---
name: International Precision
colors:
surface: '#f9f9f9'
surface-dim: '#dadada'
surface-bright: '#f9f9f9'
surface-container-lowest: '#ffffff'
surface-container-low: '#f4f3f3'
surface-container: '#eeeeee'
surface-container-high: '#e8e8e8'
surface-container-highest: '#e2e2e2'
on-surface: '#1a1c1c'
on-surface-variant: '#5a413a'
inverse-surface: '#2f3131'
inverse-on-surface: '#f1f1f1'
outline: '#8e7068'
outline-variant: '#e3bfb5'
surface-tint: '#b22d00'
primary: '#ad2b00'
on-primary: '#ffffff'
primary-container: '#d24115'
on-primary-container: '#fffbff'
inverse-primary: '#ffb5a1'
secondary: '#5f5e5e'
on-secondary: '#ffffff'
secondary-container: '#e2dfde'
on-secondary-container: '#636262'
tertiary: '#5c5c5c'
on-tertiary: '#ffffff'
tertiary-container: '#757474'
on-tertiary-container: '#fefcfb'
error: '#ba1a1a'
on-error: '#ffffff'
error-container: '#ffdad6'
on-error-container: '#93000a'
primary-fixed: '#ffdbd1'
primary-fixed-dim: '#ffb5a1'
on-primary-fixed: '#3b0900'
on-primary-fixed-variant: '#882000'
secondary-fixed: '#e5e2e1'
secondary-fixed-dim: '#c8c6c5'
on-secondary-fixed: '#1c1b1b'
on-secondary-fixed-variant: '#474746'
tertiary-fixed: '#e4e2e2'
tertiary-fixed-dim: '#c8c6c6'
on-tertiary-fixed: '#1b1c1c'
on-tertiary-fixed-variant: '#474747'
background: '#f9f9f9'
on-background: '#1a1c1c'
surface-variant: '#e2e2e2'
typography:
display:
fontFamily: Inter
fontSize: 120px
fontWeight: '800'
lineHeight: 110px
letterSpacing: -0.04em
headline-lg:
fontFamily: Inter
fontSize: 64px
fontWeight: '700'
lineHeight: 72px
letterSpacing: -0.02em
headline-lg-mobile:
fontFamily: Inter
fontSize: 40px
fontWeight: '700'
lineHeight: 44px
letterSpacing: -0.02em
headline-md:
fontFamily: Inter
fontSize: 32px
fontWeight: '600'
lineHeight: 40px
letterSpacing: -0.01em
body-lg:
fontFamily: Inter
fontSize: 20px
fontWeight: '400'
lineHeight: 30px
body-md:
fontFamily: Inter
fontSize: 16px
fontWeight: '400'
lineHeight: 24px
label-caps:
fontFamily: Inter
fontSize: 12px
fontWeight: '700'
lineHeight: 16px
letterSpacing: 0.1em
spacing:
grid-unit: 8px
gutter: 24px
margin-desktop: 64px
margin-mobile: 20px
stack-sm: 16px
stack-md: 32px
stack-lg: 80px
---
## Brand & Style
This design system is built on the core tenets of **Swiss Design (International Typographic Style)**. It conveys a brand personality that is objective, authoritative, and ruthlessly efficient. The target audience is professionals seeking "one-step solutions" who value clarity and industrial-grade reliability.
The visual style is characterized by:
- **Mathematical Order:** A rigid adherence to a modular grid system that dictates the placement of every element.
- **Asymmetric Balance:** Dynamism is achieved through the tension between large-scale typography and functional whitespace.
- **Objectivity:** Removing unnecessary decoration to let the content and typography communicate the message directly.
- **Structural Integrity:** Bold blocks of color and sharp, geometric containers that emphasize the "one-step" structural nature of the business.
## Colors
The palette is rooted in a high-contrast, modernist tradition.
- **Primary Orange (#F2572B):** Used as a functional signal for actions and as a massive background fill for hero moments to command immediate attention.
- **Dark Gray (#171717):** The anchor color for primary typography and deep structural containers.
- **Medium Gray (#4D4D4D):** Used for secondary information and supporting grid lines.
- **Light Gray (#DEDEDE):** Provides a subtle, architectural alternative to pure white for backgrounds and surface divisions.
The color application should be "all-or-nothing"—use large flood fills of color rather than small accents to maintain the bold, modern aesthetic.
## Typography
The typography system utilizes **Inter** to achieve a neutral, neo-grotesque look that prioritizes legibility and structural alignment.
Key principles:
- **Extreme Scale:** High contrast between massive display type (120px+) and functional body text.
- **Tight Leading:** Headlines utilize tight line-heights to create "blocks" of text that feel like solid geometric shapes.
- **Alignment:** Every text block must align strictly to the vertical and horizontal grid lines. Left-alignment is the default; center-alignment should be avoided.
- **Caps for Labels:** Small, all-caps labels are used for metadata and categorization to provide a technical, architectural feel.
## Layout & Spacing
This design system employs a **12-column fixed grid** on desktop and a **4-column fluid grid** on mobile.
- **The Grid as Design:** In specific marketing layouts, the grid lines (1px width in #DEDEDE) may be visible to emphasize the Swiss Design aesthetic.
- **Whitespace as Content:** Large "voids" in the grid are intentional. Content should not be spread thin to fill space; rather, it should be grouped tightly to leave expansive areas of negative space.
- **Reflow:** On mobile, large headline blocks reflow to `headline-lg-mobile` and stack vertically, but they must maintain their sharp alignment to the left margin.
## Elevation & Depth
To maintain the flat, modernist aesthetic of Swiss Design, this system rejects shadows and physical depth.
- **Flat Layering:** Hierarchy is created through color blocking and scale, not Z-axis elevation.
- **Tonal Tiers:** Dark Gray (#171717) is the base for depth. Light Gray (#DEDEDE) acts as a secondary surface.
- **Sharp Borders:** Use 1px or 2px solid borders in high-contrast colors (e.g., Orange on Black) to define sections without using shadows.
- **Zero Blur:** There are no blurs or gradients in this system. All transitions between colors and surfaces are "hard" and immediate.
## Shapes
The shape language is strictly **Geometric and Sharp**.
- **0px Radii:** All buttons, cards, input fields, and containers must have 0px corner radii. This reinforces the industrial, precise nature of the brand.
- **The Circle Exception:** Only the orange "Signal Circle" (as seen in the reference images) is permitted as a rounded element, used sparingly as a background graphic or an abstract focal point.
- **Vector Icons:** Icons should be stroke-based, using 2px weights and 0px joins/caps where possible to match the sharp UI.
## Components
### Logo & Identity
- **Wordmark:** The script wordmark is used for high-level brand presence (header, footer). It must always be high-contrast (White on Orange or Orange on Black).
- **Logomark:** The flower logomark is treated as a "seal of quality." Use it as a small anchor in the corner of cards or as a massive, low-opacity watermark in the background of sections.
### Buttons
- **Primary:** Sharp-edged blocks filled with Primary Orange. Text is White or Black, Inter Bold, All-Caps.
- **Secondary:** Transparent background with a 2px Dark Gray border.
- **Hover States:** Instead of shadows, use a "Color Inversion" effect. A primary orange button becomes dark gray on hover.
### Cards
- Cards do not have shadows. They are defined by 1px borders or solid background fills of Light Gray or Dark Gray.
- Padding inside cards should be generous (min. 32px) to allow the typography to breathe.
### Input Fields
- Underline-only or full-border sharp rectangles.
- Error states are indicated by the Primary Orange color replacing the border/underline color.
### Visual Blocks
- Use "The Power of the Grid" to create blocks where images and text are locked into specific column spans (e.g., Image spans 8 columns, text spans 4 columns). No centered text within blocks.

318
stitch_modern_one_step_solutions (3)/code.html Normal file
View File

@@ -0,0 +1,318 @@
<!DOCTYPE html>
<html class="scroll-smooth" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Teppelin Labs</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-surface": "#1a1c1c",
"on-secondary-fixed": "#1c1b1b",
"on-secondary": "#ffffff",
"on-primary-fixed": "#3b0900",
"surface-container": "#eeeeee",
"primary-fixed": "#ffdbd1",
"tertiary-fixed-dim": "#c8c6c6",
"primary": "#ad2b00",
"on-primary-container": "#fffbff",
"secondary-container": "#e2dfde",
"outline": "#8e7068",
"surface-tint": "#b22d00",
"secondary-fixed-dim": "#c8c6c5",
"surface-container-highest": "#e2e2e2",
"on-tertiary-fixed-variant": "#474747",
"surface-container-lowest": "#ffffff",
"primary-container": "#d24115",
"inverse-surface": "#2f3131",
"secondary": "#5f5e5e",
"error": "#ba1a1a",
"on-tertiary": "#ffffff",
"tertiary-container": "#757474",
"surface-bright": "#f9f9f9",
"on-error": "#ffffff",
"inverse-on-surface": "#f1f1f1",
"error-container": "#ffdad6",
"background": "#f9f9f9",
"on-background": "#1a1c1c",
"inverse-primary": "#ffb5a1",
"surface-variant": "#e2e2e2",
"surface-container-high": "#e8e8e8",
"on-primary": "#ffffff",
"on-error-container": "#93000a",
"on-secondary-container": "#636262",
"surface-dim": "#dadada",
"on-surface-variant": "#5a413a",
"tertiary-fixed": "#e4e2e2",
"outline-variant": "#e3bfb5",
"tertiary": "#5c5c5c",
"on-secondary-fixed-variant": "#474746",
"secondary-fixed": "#e5e2e1",
"surface": "#f9f9f9",
"primary-fixed-dim": "#ffb5a1",
"on-primary-fixed-variant": "#882000",
"surface-container-low": "#f4f3f3",
"on-tertiary-fixed": "#1b1c1c",
"on-tertiary-container": "#fefcfb"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"margin-mobile": "20px",
"stack-md": "32px",
"stack-sm": "16px",
"margin-desktop": "64px",
"gutter": "24px",
"stack-lg": "80px",
"grid-unit": "8px"
},
"fontFamily": {
"display": [
"Inter"
],
"body-md": [
"Inter"
],
"headline-md": [
"Inter"
],
"headline-lg": [
"Inter"
],
"label-caps": [
"Inter"
],
"headline-lg-mobile": [
"Inter"
],
"body-lg": [
"Inter"
]
},
"fontSize": {
"display": [
"120px",
{
"lineHeight": "110px",
"letterSpacing": "-0.04em",
"fontWeight": "800"
}
],
"body-md": [
"16px",
{
"lineHeight": "24px",
"fontWeight": "400"
}
],
"headline-md": [
"32px",
{
"lineHeight": "40px",
"letterSpacing": "-0.01em",
"fontWeight": "600"
}
],
"headline-lg": [
"64px",
{
"lineHeight": "72px",
"letterSpacing": "-0.02em",
"fontWeight": "700"
}
],
"label-caps": [
"12px",
{
"lineHeight": "16px",
"letterSpacing": "0.1em",
"fontWeight": "700"
}
],
"headline-lg-mobile": [
"40px",
{
"lineHeight": "44px",
"letterSpacing": "-0.02em",
"fontWeight": "700"
}
],
"body-lg": [
"20px",
{
"lineHeight": "30px",
"fontWeight": "400"
}
]
}
},
},
}
</script>
<style>
/* Grid Lines Background for Swiss Design Aesthetic */
.bg-grid {
background-size: 25% 25%;
background-image:
linear-gradient(to right, rgba(222, 222, 222, 0.5) 1px, transparent 1px),
linear-gradient(to bottom, rgba(222, 222, 222, 0.5) 1px, transparent 1px);
}
/* Reveal Animation */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body class="bg-surface text-on-surface font-body-md antialiased relative overflow-x-hidden min-h-screen flex flex-col">
<!-- Persistent WebGL Background -->
<div class="fixed inset-0 z-[-1] pointer-events-none opacity-20">
</div>
<!-- Grid Overlay -->
<div class="fixed inset-0 z-[-1] bg-grid pointer-events-none"></div>
<!-- TopNavBar (Shared Component) -->
<nav class="sticky top-0 w-full z-50 bg-surface border-b border-outline-variant flex justify-between items-center px-margin-mobile md:px-margin-desktop h-20 max-w-full">
<div class="font-display text-headline-md tracking-tighter text-primary uppercase">
Teppelin Labs
</div>
<!-- Mobile Menu Toggle (Decorative for Mobile Only view) -->
<button class="md:hidden text-primary">
<span class="material-symbols-outlined">menu</span>
</button>
<!-- Desktop Links (Hidden on mobile) -->
<div class="hidden md:flex gap-gutter items-center">
<a class="text-primary border-b-2 border-primary pb-1 font-label-caps uppercase transition-colors duration-0 hover:bg-primary hover:text-on-primary px-2" href="#">Solutions</a>
<a class="text-on-surface font-label-caps uppercase transition-colors duration-0 hover:bg-primary hover:text-on-primary px-2" href="#">Methodology</a>
<a class="text-on-surface font-label-caps uppercase transition-colors duration-0 hover:bg-primary hover:text-on-primary px-2" href="#">Archive</a>
<a class="text-on-surface font-label-caps uppercase transition-colors duration-0 hover:bg-primary hover:text-on-primary px-2" href="#">Contact</a>
<button class="bg-primary text-on-primary font-label-caps uppercase px-6 py-3 ml-4 hover:bg-inverse-surface hover:text-on-secondary transition-colors duration-0">
GET STARTED
</button>
</div>
</nav>
<main class="flex-grow flex flex-col w-full">
<!-- Hero Section -->
<section class="w-full px-margin-mobile pt-stack-lg pb-stack-md flex flex-col gap-stack-md border-b border-outline-variant reveal">
<div class="flex flex-col gap-4">
<h1 class="font-display text-headline-lg-mobile tracking-tighter uppercase leading-none">
Truth In<br/>
<span class="text-primary">Design</span>
</h1>
<p class="font-body-md text-on-surface-variant max-w-sm mt-4 border-l-2 border-primary pl-4">
Good design does not lie — it reveals. It respects the viewer, guides the eye, and lets the content speak for itself.
</p>
</div>
<div class="mt-stack-sm w-full h-[40vh] relative border-2 border-on-surface overflow-hidden">
<!-- Mobile-optimized macro photography placeholder -->
<img alt="Macro photography of precision camera lens elements with stark lighting and sharp metallic edges, highlighting industrial design. Subtle orange reflections cast across the glass surfaces. High contrast black and white overall aesthetic." class="w-full h-full object-cover filter grayscale contrast-125 mix-blend-multiply" data-alt="Macro photography of precision camera lens elements with stark lighting and sharp metallic edges, highlighting industrial design. Subtle orange reflections cast across the glass surfaces. High contrast black and white overall aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBdUg0tBXzQr8gEuqco1fYePIh3ZoALWotkJhZ8K0RzvnEoJw8Bu-pxoUDDmasr01Klr3s6mqNTaqYI_9MwMwe6OeGODVexeu_z6EKjCPXsRkP3sFBYtavFuCHQOhO4p-4BJ80T3E6_zf4V1UyONVYCgnfZmZeINzZGlOXGCgxC3Gvj43_YohdaBkQ8_hIjK6O-Wv0mvGPetwjVYOxFg6H7MQljm61mDKL6oMbdRcWvlztOLLl7ywmL3qM1cJq6TlE2-y0RjJJqrVk"/>
<!-- Brand Anchor Overlay -->
<div class="absolute bottom-4 right-4 w-16 h-16 bg-primary rounded-full flex items-center justify-center mix-blend-screen">
<img alt="Teppelin Labs Logo" class="w-8 h-8 invert brightness-0" src="https://lh3.googleusercontent.com/aida/AP1WRLs-7Bso6MuiDmXCvtlN6oYH0fLKqzyy4LfYFwGrm2cwednZRqtPcpWlFW4Ln0AySTuzEHQf0PoR3-kFOEhWX_ViLmlnZMnDB_FOnWQXObiEGLOTSjnPvUpC0r0ZIQh9k-r5L92hy0Wj9oKFvGTI88htXbuFu73Ld0ZNVWabwqxXFB7ospwuYuh_1dIoDxFfMZkwhI8VEVKjKBtjn7JmHygirTVDVkNtJNTy8_KMt6T30hzcu4aUCrc8Tvo"/>
</div>
</div>
</section>
<!-- Core Competencies List -->
<section class="w-full px-margin-mobile py-stack-md flex flex-col gap-0 border-b border-outline-variant reveal">
<h2 class="font-headline-md text-primary uppercase mb-stack-sm border-b-2 border-primary pb-2 inline-block self-start">
Capabilities
</h2>
<!-- List Item 01 -->
<div class="flex flex-row py-6 border-b border-outline-variant group">
<div class="font-label-caps text-secondary mr-6 pt-1">01</div>
<div class="flex flex-col">
<h3 class="font-headline-md text-on-surface group-hover:text-primary transition-colors duration-0 uppercase">Digital Systems</h3>
<p class="font-body-md text-on-surface-variant mt-2">Architecture built for scale and uncompromised performance.</p>
</div>
</div>
<!-- List Item 02 -->
<div class="flex flex-row py-6 border-b border-outline-variant group">
<div class="font-label-caps text-secondary mr-6 pt-1">02</div>
<div class="flex flex-col">
<h3 class="font-headline-md text-on-surface group-hover:text-primary transition-colors duration-0 uppercase">Robust Architecture</h3>
<p class="font-body-md text-on-surface-variant mt-2">Foundational structures designed with mathematical rigor.</p>
</div>
</div>
<!-- List Item 03 -->
<div class="flex flex-row py-6 group">
<div class="font-label-caps text-secondary mr-6 pt-1">03</div>
<div class="flex flex-col">
<h3 class="font-headline-md text-on-surface group-hover:text-primary transition-colors duration-0 uppercase">Engineering Tools</h3>
<p class="font-body-md text-on-surface-variant mt-2">Precision instruments for the modern digital craftsperson.</p>
</div>
</div>
</section>
<!-- Statement Section -->
<section class="w-full px-margin-mobile py-stack-lg bg-inverse-surface text-on-secondary flex flex-col gap-stack-sm reveal">
<div class="w-12 h-12 bg-primary flex items-center justify-center mb-4">
<span class="material-symbols-outlined text-on-primary">architecture</span>
</div>
<h2 class="font-headline-lg-mobile tracking-tighter uppercase leading-tight">
Precision is not an accident.
</h2>
<p class="font-body-md text-surface-variant max-w-sm mt-4">
It is the result of deliberate choices, mathematical rigor, and an unwavering commitment to structural integrity over superficial decoration.
</p>
<button class="mt-8 bg-transparent border-2 border-primary text-primary font-label-caps uppercase px-6 py-3 self-start hover:bg-primary hover:text-on-primary transition-colors duration-0">
Read Methodology
</button>
</section>
</main>
<!-- Footer (Shared Component) -->
<footer class="w-full py-stack-lg bg-inverse-surface text-on-secondary grid grid-cols-1 md:grid-cols-12 px-margin-mobile md:px-margin-desktop gap-gutter items-end border-t-2 border-primary mt-auto">
<div class="col-span-1 md:col-span-4 flex flex-col gap-4">
<div class="font-display text-headline-lg-mobile text-primary opacity-20 uppercase">
Teppelin Labs
</div>
<div class="font-label-caps text-surface-variant opacity-80 uppercase mt-4">
©2024 ONE-STEP SOLUTIONS. ALL RIGHTS RESERVED.
</div>
</div>
<div class="col-span-1 md:col-span-8 flex flex-col md:flex-row gap-gutter md:justify-end mt-stack-md md:mt-0">
<a class="font-label-caps text-primary font-bold uppercase hover:text-primary transition-colors" href="#">Privacy Policy</a>
<a class="font-label-caps text-surface-variant opacity-80 uppercase hover:text-primary transition-colors" href="#">Terms of Service</a>
<a class="font-label-caps text-surface-variant opacity-80 uppercase hover:text-primary transition-colors" href="#">Grid Systems</a>
<a class="font-label-caps text-surface-variant opacity-80 uppercase hover:text-primary transition-colors" href="#">Accessibility</a>
</div>
</footer>
<script>
// Intersection Observer for Reveal Animations
document.addEventListener('DOMContentLoaded', () => {
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
observer.unobserve(entry.target);
}
});
}, observerOptions);
document.querySelectorAll('.reveal').forEach((element) => {
observer.observe(element);
});
});
</script>
</body></html>

BIN
stitch_modern_one_step_solutions (3)/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 137 KiB

2187
styles.css Normal file
View File

File diff suppressed because it is too large Load Diff

26
work.html Normal file
View File

@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="The Teppelin Lab is where members explore AI, creative technology, open-source tools, and new digital experiences."><title>The Lab - Teppelin Labs</title>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"><link rel="stylesheet" href="styles.css">
</head>
<body data-page="work">
<a class="skip-link" href="#main">Skip to content</a><div class="scroll-progress" aria-hidden="true"><span></span></div><div class="cursor-dot" aria-hidden="true"></div><div class="cursor-ring" aria-hidden="true"></div>
<header class="site-header"><a class="brand" href="index.html" aria-label="Teppelin Labs home"><img class="brand-logo" src="Logomark.png" alt="Teppelin Labs"></a><button class="menu-toggle" type="button" aria-label="Toggle navigation" aria-expanded="false"><span></span></button><nav class="site-nav" aria-label="Primary navigation"><span class="nav-divider">Explore</span><a href="index.html" data-nav="home">About</a><a href="solutions.html" data-nav="solutions">Build</a><a href="work.html" data-nav="work">Lab</a><span class="nav-divider">Members</span><a href="methodology.html" data-nav="methodology">Collective</a><a class="nav-cta" href="join.html" data-nav="join">Apply</a></nav></header>
<main id="main">
<section class="page-hero grid-surface"><div class="page-hero-head reveal"><p class="eyebrow">Visitor path / The lab</p><p class="page-hero-copy">The lab is not a polished portfolio of invented outcomes. It is a living set of technical territories where members experiment, collaborate, and publish what they discover.</p></div><h1 class="page-title reveal reveal-delay"><span><b class="page-index">03</b>Ideas</span><span>become</span><span class="text-orange">evidence.</span></h1></section>
<section class="section"><div class="project-list">
<article class="project reveal"><div class="project-image project-visual project-visual-north" aria-label="Abstract visual for agentic systems"><span class="project-visual-code">LAB / 01</span><span class="project-visual-title">AGENT<br>STACKS</span><span class="project-visual-shape"></span><span class="project-visual-note">Applied AI / Evaluation / Interfaces</span></div><div class="project-info"><div><span class="project-number">01 / AGENTIC SYSTEMS</span><h2>From model to useful behavior.</h2><p>Exploring agents, tool use, memory, evaluation, reliability, and the interface patterns that make autonomous systems understandable.</p><div class="project-tags"><span>AI</span><span>Agents</span><span>Research</span></div></div><a class="btn" href="contact.html">Propose a collaboration</a></div></article>
<article class="project reveal"><div class="project-image project-visual project-visual-forme" aria-label="Abstract visual for creative technology"><span class="project-visual-code">LAB / 02</span><span class="project-visual-title">REAL<br>TIME</span><span class="project-visual-shape"></span><span class="project-visual-note">Motion / 3D / Generative systems</span></div><div class="project-info"><div><span class="project-number">02 / CREATIVE TECHNOLOGY</span><h2>Code as a visual material.</h2><p>Combining graphics, interaction, motion, sound, and computation to create expressive digital experiences that could not exist in static media.</p><div class="project-tags"><span>Creative code</span><span>WebGL</span><span>Motion</span></div></div><a class="btn" href="join.html">Build with us</a></div></article>
<article class="project reveal"><div class="project-image project-visual project-visual-axis" aria-label="Abstract visual for open tools"><span class="project-visual-code">LAB / 03</span><span class="project-visual-title">OPEN</span><span class="project-visual-shape"></span><span class="project-visual-note">Tools / Infrastructure / Knowledge</span></div><div class="project-info"><div><span class="project-number">03 / OPEN TOOLS</span><h2>Small tools, shared leverage.</h2><p>Building reusable software, templates, components, and technical knowledge that help other builders move faster and think more clearly.</p><div class="project-tags"><span>Open source</span><span>Devtools</span><span>Systems</span></div></div><a class="btn" href="contact.html">Bring an idea</a></div></article>
</div></section>
<section class="section section-orange"><div class="intro-grid"><h2 class="section-title reveal">Not case studies.<br>Active questions.</h2><div class="intro-copy reveal reveal-delay"><p class="lede">The lab will evolve as members publish real experiments, prototypes, repositories, and write-ups.</p><p class="body-copy">Until then, these territories communicate what Teppelin is actively interested in without pretending unfinished or fictional work is a client portfolio.</p><div class="button-row"><a class="btn" href="methodology.html">Inside the collective</a></div></div></div></section>
</main>
<footer class="site-footer"><div class="footer-cta"><h2 class="reveal">Bring a question worth building.</h2><a class="btn btn-orange reveal" href="contact.html">Collaborate with us</a></div><div class="footer-bottom"><a class="footer-brand" href="index.html"><img class="footer-logo" src="Logomark.png" alt="Teppelin Labs"></a><div class="footer-links"><a href="solutions.html">What we build</a><a href="work.html">The lab</a><a href="methodology.html">The collective</a><a href="join.html">Apply</a><a href="contact.html">Collaborate</a></div><p class="footer-meta">&copy; <span data-year></span> Teppelin Labs<br>Built online, worldwide</p></div></footer>
<script src="script.js"></script>
</body>
</html>