Alive Labs
Brand Style Guide
Brand Style Guide
What Labs Is
Labs is a product company that builds the intelligence layer between the physical world and digital outcomes. It takes data that already exists in the world (competitor activity, wallet infrastructure, skin conditions, foot traffic) and turns it into sight. Every product helps a business see something it couldn’t see before.
What Labs Feels Like
The forge. You can see the craft here. The work is visible. Labs isn’t raw in a messy way, it’s raw in a purposeful way. The heat is controlled, the tools are precise, but you can feel the energy of things being made.
Where other brands hide complexity beneath a calm surface, Labs shows its depth. The complexity is the feature.
Temperature
Labs is warm. Orange accents. Warm amber-black darks. Warm text grays. The temperature is the brand’s loudest visual statement, before you read a word, the warmth tells you where you are.
The warmth is deliberate and total: orange accents, warm amber-black darks, warm text grays. Nothing here is neutral by accident. The heat is the signal.
Logo System
Labs uses a five-tier lockup system. Each tier serves specific contexts and has defined scale boundaries. Use the correct tier for the context, don’t scale a larger tier down when a smaller tier exists.
Full Lockup
Primary brand signature. Bordered rectangle with mark, “ALIVE” text, and “Labs” wordmark. The mark breaks the frame. Dark variants have baked backgrounds.
Full Lockup · Dark (baked background)
Full Lockup · Light
Horizontal Lockup
Everyday applications, websites, emails, documents. Mark + “Labs” wordmark, no border. Transparent background.
Horizontal · Dark (on dark surface only)
Horizontal · Light (on light surface only)
Square Lockup
Social media profiles, app icons, constrained square contexts. Mark stacked above “Labs”.
Square · Dark
Square · Light
Social Lockup
Pre-composed social media avatar with baked background. Ready to use as-is.
Social · Dark
Min Lockup
Favicons, badges, small UI elements. Color square + text label. This is the floor, do not scale any lockup below Min size.
Min · Dark
Min · Light
Logo Usage, Don’t
These are the most common misuses. Every violation degrades the brand.
Dark variant on light surface, wordmark disappears
Scaled below minimum, details lost
Stretched, never distort aspect ratio
Busy background, use baked variant or solid backing
Recolored, Lava is non-negotiable
Compressed, never squeeze vertically
Scale Rules
Use the correct tier for the display size. Don’t scale a larger lockup below its minimum, switch to the next tier down.
| Tier | Min Width | Use |
|---|---|---|
| Full | 240px | Marketing materials, primary signatures |
| Horizontal | 160px | Website headers, email signatures |
| Square | 120px | Social media, app icons |
| Social | Platform-defined | Pre-composed profile images |
| Min | 64px | Favicon, badges, small UI |
Below Min size: scale the Min Sm export on display (CSS width). Do not use other tiers at this size.
Color System: Forge
Labs’ palette is named Forge, the place where raw material becomes something new. Warm, industrial, energetic. The forge runs hot, and the heat is the point.
Identity Colors
Dark Surfaces
Light Surfaces
Text Colors
On Dark
Lumen #F6F8FA · Headlines, 18.3:1
Warm Smoke #B5ACA4 · Body text, 8.7:1
Ash #8B8178 · Secondary, 5.1:1
On Light
Carbon #2B353F · Headlines, 12.0:1
Clay #5C5148 · Body text, 7.8:1
Ash #8B8178 · Secondary, 5.5:1
Structural Element
Semantic Colors
Typography
Inter is the primary typeface. Space Mono is the secondary face for code and technical contexts. Labs uses a weight inversion, light at display, heavy in the middle, medium at body.
Type Scale
console.log(insight.changes); // what moved this week
Weight System
Labs inverts the conventional weight hierarchy. Display text is lightest (300); mid-level headings are heaviest (700); body sits in between (500). The big text doesn’t need to shout because it’s already big. The mid-level text anchors.
| Context | Weight | Why |
|---|---|---|
| Display (48px+) | 300 | Confidence through lightness at scale |
| Section heads | 600 | The working weight, assertive |
| Subheads / cards | 700 | Boldest, closest to reader |
| Body | 500 | More presence than typical 400 |
| Buttons | 600 | Assertive without screaming |
Components
How the tokens combine into actual UI elements. Every component uses the brand’s motion, color, and type tokens, hover, click, and tab through these to feel the interactions.
Buttons
Hover and click to feel the motion.
Primary
Lava background, white text. Hover lightens to Ember and lifts 1px. Press scales to 0.97. For primary CTAs.
Secondary
Transparent with Forge Card border. Ember text. Hover warms the border and adds Lava tint at 8%. For secondary actions.
Ghost
No border, Warm Smoke text. Hover brightens to Lumen with subtle white background. For tertiary actions and navigation.
Cards
Standard Card
Forge Card background with border. Hover warms the border from Forge Card to Glow, heat, not elevation.
Featured Card
3px Lava left border signals importance. Same hover behavior. The accent is the differentiator.
Border radius: 8px for cards (containers are slightly softer than actions at 6px).
Inputs
Focus to see the Ember border and Lava glow ring (3px at 12% opacity). Input size is 16px minimum, prevents iOS zoom on focus.
Motion Language
The name is “Alive.” Motion is where that name becomes literal. Labs’ motion is energetic and purposeful, things arrive with momentum, lock into place, and feel like something is being built.
Easing Curves
Hover over the boxes to see each curve in action.
ease-labs-snap
Overshoot & settle
ease-labs-build
Deliberate arrival
ease-out
Standard departure
Duration Tokens
| Token | Duration | Use |
|---|---|---|
| instant | 100ms | Hover states, toggles, micro-feedback |
| fast | 200ms | Button press, small transitions |
| normal | 300ms | Standard transitions (fade, slide) |
| slow | 500ms | Page transitions, large element moves |
| deliberate | 700ms | Hero reveals, dramatic entrance |
What Moves & What Doesn’t
Always Animate
Page/section transitions, modal open/close, hover states, content loading skeletons, navigation state changes, data visualization updates.
Never Animate
Text content appearing (no typewriter effects), scroll-triggered content blocking, brand color changes (Lava doesn’t pulse or glow), logo animations (unless specifically approved).
Voice & Tone
Labs speaks with the confidence of people who build things. Direct, technical when needed, never hiding behind buzzwords. The engineer who explains something complex and makes you feel smarter for having listened.
Empowering businesses with cutting-edge AI solutions
We build the tools that let you see what’s coming
Disrupting competitive intelligence with next-generation technology
Your competitors changed three things last week. You didn’t know. Now you do.
Vatic leverages advanced machine learning algorithms and real-time data aggregation to provide comprehensive competitive intelligence dashboards with actionable insights for small and medium businesses.
Vatic watches your competitors so you don’t have to. Menu changes, new locations, social activity, website updates, it sees the moves and tells you what they mean. Built for restaurants. Built to be useful the first week.
We’re building the future of intelligent business systems, a world where every company has access to the kind of insights that used to be reserved for enterprises with million-dollar analytics budgets.
We’re not promising the future. We’re building specific tools that solve specific problems. The products ship. They work. The rest is noise.
We’re sorry, something went wrong! Our team has been notified and we’re working hard to fix this. Please try again later.
Something broke. We’re looking at it. Try again in a few minutes, or reach out if it keeps happening.
Voice Rules
| Labs Does | Labs Doesn’t | |
|---|---|---|
| Confidence | Speaks from experience, shows the work | Claims innovation, uses buzzwords |
| Directness | Short sentences, clear language | Hedging, qualifiers, corporate padding |
| Technical | Uses real terms when they’re the right terms | Dumbs down or over-jargons |
| Warmth | Friendly when appropriate, never stiff | Cold, transactional, or performatively casual |
| Humor | Dry, earned, rare | Forced, emoji-laden, “fun” brand voice |
CTA Language
Don’t
“Get started on your journey” / “Unlock your potential” / “Schedule a discovery call” / “Learn more about our innovative solutions”
Do
“See what Vatic sees” / “Try it with your data” / “Talk to us” / “See how it works”
Photography & Imagery
Warm, active, close-up. Think workshop documentation, not stock photography. The camera should feel like it’s in the room where the work happens.
Subject Matter
Hands working, building, assembling, testing (never posed). Screens showing real data, code, dashboards. Close-up textures: metal, circuitry, warm-lit surfaces. Team environments with visible work in progress.
Treatment
Warm color grade (shadows shift amber, not blue). Shallow depth of field. Natural or warm artificial light, never cool fluorescent. High contrast in dark environments: let shadows go dark, let highlights burn.
What Labs Imagery Is Not
Stock photos of diverse people pointing at a whiteboard. Abstract tech backgrounds (neural networks, circuit patterns, planet surfaces). Perfectly lit, perfectly styled environments. Anything that could be on a competitor’s site without anyone noticing.
Atmosphere & Gradients
Heat has a gradient. Labs’ atmospheric effects should feel like warmth radiating from a source, not applied uniformly, but emanating.
Forge Radial Glow
Glow at 5–8% opacity, centered on a focal point. Creates a “heat source” effect.
Lava Edge Bleed
Lava at 3–5% from one edge. Heat leaking in from off-screen. For hero sections and high-impact moments.
Ember Vignette
Forge Black → Forge → Forge Black. Content sits in the lighter center. A spotlight without literal light.
Rules
Atmospheric, not decorative. If a gradient is the most noticeable thing on the page, it’s too strong.
Maximum one gradient per viewport. Two competing gradients create visual noise.
Lava never appears as a solid gradient. Only at 3–8% opacity as a glow or edge bleed.
Gradients don’t animate. The heat is ambient, not pulsing.
Use CSS gradients. radial-gradient and linear-gradient with color-stop percentages.
CSS Token Reference
Copy-paste ready. These custom properties form the complete token set for the Labs design system.
:root {
/* Identity */
--lava: #FF4500;
--ember: #FF7849;
--lava-deep: #B83A00;
--glow: #944828;
/* Dark Surfaces */
--surface-primary-dark: #0E0C0A;
--surface-elevated-dark: #1F1B18;
--surface-card-dark: #322A24;
/* Light Surfaces */
--surface-light: #F6F8FA;
--surface-light-tinted: #F2ECE6;
/* Structural */
--carbon: #2B353F;
/* Text: Dark Mode */
--text-primary-dark: #F6F8FA;
--text-body-dark: #B5ACA4;
--text-secondary-dark: #8B8178;
/* Text: Light Mode */
--text-primary-light: #2B353F;
--text-body-light: #5C5148;
--text-secondary-light: #8B8178;
/* Borders */
--border-dark: #322A24;
--border-light: #F2ECE6;
/* Semantic */
--error-dark: #EF4444;
--success-dark: #22C55E;
--warning-dark: #F59E0B;
--error-light: #DC2626;
--success-light: #15803D;
--warning-light: #B45309;
/* Motion */
--ease-labs-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-labs-build: cubic-bezier(0.22, 1, 0.36, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--duration-instant: 100ms;
--duration-fast: 200ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
--duration-deliberate: 700ms;
}