<style>
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.findborg-hero {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 400px;
width: 100%;
padding: var(--space-2xl);
border-radius: var(--radius-2xl);
margin: var(--space-xl) 0;
color: var(--neutral-0);
font-family: var(--font-headline);
/* Animated Gradient Background using brand colors */
background: linear-gradient(-45deg, var(--brand-1), var(--brand-2), var(--brand-3), var(--brand-4));
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.findborg-hero h1 {
font-size: clamp(2.5rem, 8vw, 4.5rem);
font-weight: 800;
margin: 0;
letter-spacing: -0.02em;
text-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
color: var(--neutral-0);
}
.findborg-hero p {
font-size: clamp(1rem, 4vw, 1.5rem);
font-family: var(--font-body);
font-weight: 400;
max-width: 600px;
opacity: 0.95;
margin-top: var(--space-md);
line-height: 1.5;
}
.findborg-badge {
background: rgba(255, 255, 255, 0.2);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-full);
font-size: var(--typescale_label-medium_size);
font-weight: 600;
margin-bottom: var(--space-lg);
border: 1px solid rgba(255, 255, 255, 0.3);
text-transform: uppercase;
letter-spacing: 0.1em;
}
@media (prefers-reduced-motion: reduce) {
.findborg-hero {
animation: none;
background-size: 100% 100%;
}
}
@media (max-width: 768px) {
.findborg-hero {
min-height: 320px;
padding: var(--space-xl);
}
}
@media (max-width: 480px) {
.findborg-hero {
min-height: 280px;
padding: var(--space-lg);
border-radius: var(--radius-xl);
}
.findborg-badge {
font-size: var(--typescale_label-small_size);
padding: var(--space-xs) var(--space-sm);
}
}
</style>
<div class="findborg-hero">
<div class="findborg-badge">More than a search engine</div>
<h1>FINDBORG</h1>
<p>Harnessing the colors of the coast to redefine how you discover the world.</p>
</div>
<p>At Findborg, we often say we aren’t a <em>search</em> engine—we are a <strong>find engine</strong>.</p>
<p>While that might seem like a small distinction, it changes everything about how we build our tools and how we present ourselves to the world. Today, I want to take you behind the scenes of our visual identity. We’ve chosen a palette that bridges the gap between the familiar and the fresh, rooted in the landscapes that inspire us and the technical precision of the future.</p>
<h2 class="wp-block-heading">A Familiar Hello, A Different Journey</h2>
<p>You’ll notice immediately that Findborg utilizes a four-color scheme. This was a conscious choice. We know that when you see those four distinct tones, your brain thinks “search.” That sense of <strong>familiarity</strong> is intentional; we want you to feel at home the moment you land on our page.</p>
<p>But as you look closer, you’ll see the Findborg difference. Our colors aren’t just primary blocks; they are dynamic, shifting, and deeply personal. We utilize the <strong>OKLCH</strong> color model—a modern way of defining color through Lightness, Chroma, and Hue—to ensure our brand feels as advanced as the technology powering it.</p>
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<h2 class="wp-block-heading">The Palette: From the Gulf to the Gridiron</h2>
<p>My life in Florida and my passion for movement heavily influenced the Findborg palette. Here is the breakdown of the four pillars of our visual identity:</p>
<div class="card card-padding-lg center bg-brand-1" style="color: var(--neutral-0); text-shadow: 0 1px 2px rgba(0,0,0,0.2);">
<i class="ph ph-drop" style="font-size: 3rem;"></i>
<h5 class="title-medium" style="margin-top: var(--space-sm);">Findborg Blue</h5>
</div>
<h3 class="wp-block-heading">1. The Deep Horizon: <code>oklch(63.04% 0.18 259.96)</code></h3>
<p>This is our anchor blue. Inspired by the <strong>Gulf of Mexico</strong>, this color represents the vastness of information. It’s the color of the water where I live—reliable, deep, and calm. In our storytelling, this blue represents the stability of our engine.</p>
<article class="small middle-align center-align brand_background-2 white-text text_shadow ">
<div>
<i class="extra">golf_course</i>
<h5>Findborg Green</h5>
</div>
</article>
<h3 class="wp-block-heading">2. The Field of Play: <code>oklch(56.67% 0.1953 143.47)</code></h3>
<p>This vibrant green comes directly from my love for <strong>golf and soccer</strong>. It’s the color of the fairway and the pitch. It represents growth, action, and the “go” mentality of a solo founder. It reminds us that finding what you need should be an active, refreshing experience.</p>
<article class="small middle-align center-align brand_background-3 white-text text_shadow ">
<div>
<i class="extra">water_lux</i>
<h5>Findborg Orange</h5>
</div>
</article>
<h3 class="wp-block-heading">3. The Golden Hour: <code>oklch(70.18% 0.2113 40.86)</code></h3>
<p>If you’ve ever seen a <strong>Florida sunset</strong>, you know this color. It’s the warm, glowing orange that hits the horizon right before the stars come out. This represents the “Aha!” moment—the warmth of finally finding exactly what you were looking for.</p>
<article class="small middle-align center-align brand_background-4 white-text text_shadow ">
<div>
<i class="extra">wb_twilight</i>
<h5>Findborg Red</h5>
</div>
</article>
<h3 class="wp-block-heading">4. The Evening Glow: <code>oklch(50.06% 0.1953 28.48)</code></h3>
<p>This deeper, reddish-earth tone balances our palette. It’s the final stage of the sunset and the grit of the solo-build process. It adds sophistication and ensures our gradients have a “sunset” richness that feels natural rather than digital.</p>
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<h2 class="wp-block-heading">Visual Storytelling Through Gradients</h2>
<p>In the modern web, static colors can feel flat. That’s why at Findborg, we lean heavily into <strong>gradients</strong>.</p>
<p>By blending these OKLCH values, we tell a story of <strong>transition</strong>. Just as a search query transitions into a discovery, our colors flow into one another. The blue of the Gulf meets the green of the coast; the sun sets into the deep horizon.</p>
<p>This movement reflects our mission: <strong>Findborg is about the flow of information.</strong> We aren’t just giving you a list of links; we are guiding you through a visual and intellectual journey from “seeking” to “finding.”</p>
<h2 class="wp-block-heading">The Solo Founder’s Polish</h2>
<p>I’ll be honest: I emulate the “Big Players” like Google because they’ve set a standard for engineering excellence. But as a solo founder, Findborg has a soul that a massive corporation can’t replicate.</p>
<p>Every pixel, every hue, and every gradient was chosen by hand. When you see these colors, you aren’t just seeing a brand; you’re seeing the reflection of the Florida coast, the discipline of the sports field, and the technical precision of a find engine built to help you navigate the world.</p>
<p><strong>Welcome to Findborg. Let’s find what you’re looking for.</strong></p>
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.findborg-hero {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 400px;
width: 100%;
padding: var(--space-2xl);
border-radius: var(--radius-2xl);
margin: var(--space-xl) 0;
color: var(--neutral-0);
font-family: var(--font-headline);
/* Animated Gradient Background using brand colors */
background: linear-gradient(-45deg, var(--brand-1), var(--brand-2), var(--brand-3), var(--brand-4));
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.findborg-hero h1 {
font-size: clamp(2.5rem, 8vw, 4.5rem);
font-weight: 800;
margin: 0;
letter-spacing: -0.02em;
text-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
color: var(--neutral-0);
}
.findborg-hero p {
font-size: clamp(1rem, 4vw, 1.5rem);
font-family: var(--font-body);
font-weight: 400;
max-width: 600px;
opacity: 0.95;
margin-top: var(--space-md);
line-height: 1.5;
}
.findborg-badge {
background: rgba(255, 255, 255, 0.2);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-full);
font-size: var(--typescale_label-medium_size);
font-weight: 600;
margin-bottom: var(--space-lg);
border: 1px solid rgba(255, 255, 255, 0.3);
text-transform: uppercase;
letter-spacing: 0.1em;
}
@media (prefers-reduced-motion: reduce) {
.findborg-hero {
animation: none;
background-size: 100% 100%;
}
}
@media (max-width: 768px) {
.findborg-hero {
min-height: 320px;
padding: var(--space-xl);
}
}
@media (max-width: 480px) {
.findborg-hero {
min-height: 280px;
padding: var(--space-lg);
border-radius: var(--radius-xl);
}
.findborg-badge {
font-size: var(--typescale_label-small_size);
padding: var(--space-xs) var(--space-sm);
}
}
More than a search engine
FINDBORG
Harnessing the colors of the coast to redefine how you discover the world.
At Findborg, we often say we aren’t a search engine—we are a find engine.
While that might seem like a small distinction, it changes everything about how we build our tools and how we present ourselves to the world. Today, I want to take you behind the scenes of our visual identity. We’ve chosen a palette that bridges the gap between the familiar and the fresh, rooted in the landscapes that inspire us and the technical precision of the future.
A Familiar Hello, A Different Journey
You’ll notice immediately that Findborg utilizes a four-color scheme. This was a conscious choice. We know that when you see those four distinct tones, your brain thinks “search.” That sense of familiarity is intentional; we want you to feel at home the moment you land on our page.
But as you look closer, you’ll see the Findborg difference. Our colors aren’t just primary blocks; they are dynamic, shifting, and deeply personal. We utilize the OKLCH color model—a modern way of defining color through Lightness, Chroma, and Hue—to ensure our brand feels as advanced as the technology powering it.
The Palette: From the Gulf to the Gridiron
My life in Florida and my passion for movement heavily influenced the Findborg palette. Here is the breakdown of the four pillars of our visual identity:
Findborg Blue
1. The Deep Horizon: oklch(63.04% 0.18 259.96)
This is our anchor blue. Inspired by the Gulf of Mexico, this color represents the vastness of information. It’s the color of the water where I live—reliable, deep, and calm. In our storytelling, this blue represents the stability of our engine.
Findborg Green
2. The Field of Play: oklch(56.67% 0.1953 143.47)
This vibrant green comes directly from my love for golf and soccer. It’s the color of the fairway and the pitch. It represents growth, action, and the “go” mentality of a solo founder. It reminds us that finding what you need should be an active, refreshing experience.
Findborg Orange
3. The Golden Hour: oklch(70.18% 0.2113 40.86)
If you’ve ever seen a Florida sunset, you know this color. It’s the warm, glowing orange that hits the horizon right before the stars come out. This represents the “Aha!” moment—the warmth of finally finding exactly what you were looking for.
Findborg Red
4. The Evening Glow: oklch(50.06% 0.1953 28.48)
This deeper, reddish-earth tone balances our palette. It’s the final stage of the sunset and the grit of the solo-build process. It adds sophistication and ensures our gradients have a “sunset” richness that feels natural rather than digital.
Visual Storytelling Through Gradients
In the modern web, static colors can feel flat. That’s why at Findborg, we lean heavily into gradients.
By blending these OKLCH values, we tell a story of transition. Just as a search query transitions into a discovery, our colors flow into one another. The blue of the Gulf meets the green of the coast; the sun sets into the deep horizon.
This movement reflects our mission: Findborg is about the flow of information. We aren’t just giving you a list of links; we are guiding you through a visual and intellectual journey from “seeking” to “finding.”
The Solo Founder’s Polish
I’ll be honest: I emulate the “Big Players” like Google because they’ve set a standard for engineering excellence. But as a solo founder, Findborg has a soul that a massive corporation can’t replicate.
Every pixel, every hue, and every gradient was chosen by hand. When you see these colors, you aren’t just seeing a brand; you’re seeing the reflection of the Florida coast, the discipline of the sports field, and the technical precision of a find engine built to help you navigate the world.
Welcome to Findborg. Let’s find what you’re looking for.
