Build. Play. Release.

Labs is your playground for useful and cool tools—fast to build, fun to use, and crafted with warmth.

THE LABS METHOD

Design Philosophy

The core principles that guide the visual and interactive language of the Labs ecosystem.

Designed for Velocity

Labs provides a consistent visual system so new apps look beautiful and coherent by default. Every pixel, gradient, and motion curve has a purpose — to make creation frictionless. From buttons to modals, the design language ensures clarity, warmth, and a touch of playfulness across all your projects.

Space to Breathe

Generous margins, soft edges, and human typography create interfaces that feel modern yet approachable. The layout rhythm is built around openness — because the best ideas need room.

DESIGN LANGUAGE

1. Typography

Text is bold and fat, yet approachable and clear. The scale provides rhythm and hierarchy.

Title Font

Modak, used for headings and impactful statements.

Title H1

Title H2

Title H3

Body Font

Kumbh Sans, used for all readable content. It's clean, warm, and highly legible.

Body Large: This is for primary descriptive text. Every pixel, gradient, and motion curve has a purpose — to make creation frictionless and feel beautiful.

Body Normal: This is the default paragraph text. From buttons to modals, the design language ensures clarity, warmth, and a touch of playfulness across all your projects.

Subtle / Caption: Used for metadata, helper text, or less important information. © 2025 KCStudio Labs · All rights reserved.

This is a blockquote, for highlighting a specific piece of text or a quote.

2. Spacing

A consistent 4-point grid provides a clean rhythm. Use these tokens for all padding, margins, and gaps.

p-1

p-2

p-4

p-6

p-8

p-12

p-16

3. Component Base

This is the default "container" style for most components.

Base Card Title

This container has our standard `rounded-2xl`, `shadow-soft`, and a subtle `border`. The internal padding can be adjusted using our spacing scale.

CORE COMPONENTS

4. Buttons

Defines the styles for all user actions.

Primary Action

For the most important action on the page.

Secondary Action

For standard, default, or "cancel" actions.

Tertiary Action

For less important actions or links within text.

CORE COMPONENTS

5. Form Elements

Inputs are soft, clean, and provide clear visual feedback when active.

INTERACTIVE COMPONENTS

6.1 Pill Tabs

6.2 Dropdown Menu

DashboardSettings12PaymentSubscriptionAPI

6.3 Responsive Nav

Icon-only navigation that adapts for desktop and mobile viewports.

Desktop Sidebar

Mobile Bottom Bar

FEEDBACK COMPONENTS

7.1 Modal

For critical user interactions and confirmations.

Are you sure?

This action cannot be undone. All data associated with this item will be permanently deleted.

7.2 Alerts

For providing contextual feedback like success or error messages.

Profile updated successfully!

Your session is about to expire.

Failed to upload file. Please try again.

7.3 Tooltip

For providing extra information on hover.

This is a helpful tip!

CONTENT PATTERNS

8.1 Accordion / FAQ

For showing and hiding content in a compact list.

Labs is a playground for useful and cool tools—fast to build, fun to use, and crafted with warmth. It's where we experiment with new ideas and release them as standalone apps.

8.2 Component Grids

Pre-defined, responsive layouts for arranging cards.

Multi-Column Responsive Grid

Card 1

This is some content inside a base card component.

Card 2

This is some content inside a base card component.

Card 3

This is some content inside a base card component.

Two-Column Responsive Grid

Card A

This is some content inside a base card component.

Card B

This is some content inside a base card component.

8.3 List Components

Fundamental patterns for displaying collections of data, from simple bullet points to complex interactive items.

Simple List

Unordered

  • First item in the list.
  • Second item with more text to show how it wraps.
  • A third, final item.

Ordered

  1. First step of a process.
  2. The second, crucial step.
  3. Final step to complete the task.

List with Icons

Feature One

Describe the benefit of this amazing feature here.

Lightning Fast

Optimized for performance and a seamless user experience.

Secure by Design

Your data is always safe and protected with us.

Interactive List (Navigational)

General Settings Profile Notifications Billing

List with Avatars & Subtext

Avatar

Jane Cooper

Project Manager

Online
Avatar

Cody Fisher

Awesome, thanks for the update! I'll review it.

2m ago
Avatar

Esther Howard

Lead Developer

Offline

8.4 Card / Thumbnail Lists

For displaying rich media content like videos, articles, or products in a list format.

Simple Clickable Card

Thumbnail

Video Title One

A short, engaging description of the video content goes right here.

Card with Action Button

Thumbnail

Product

Includes a call-to-action.

SPECIALIZED COMPONENTS

9. Specialized Components

Unique, application-focused components for specific use cases.

9.1 Drag & Drop Overlay

Drop to upload

Release your files to start the process

9.2 Upload Selector

Choose a file or drag it here

or paste from clipboard (Ctrl+V)

9.2.1 Uploader with Paste Button

Choose a file, drag it here, or

SVG, PNG, JPG, or GIF (max 10MB)

9.2.2 URL Displayer with Hover-to-Copy

https://labs.kcstudio.nl/path/to/your/file.zip

9.3 Loading Animation

Avatar

9.3.1 Inline Loading Animation

Avatar

9.4 Advanced Inputs & Selectors

Custom Checkboxes

Custom Radio Buttons

Toggle Switch

Custom Select

Range Slider

9.5 Loading Bar

Determinate Progress

Indeterminate (Loading)

9.6 Animation Feedback

Shake on Error (Hover to preview)

9.7 Custom Cursor

Click to toggle a custom, on-brand mouse cursor for the page.

9.8 Slider / Carousel

Card 1

This is a card within a slider component.

Card 2

This is a card within a slider component.

Card 3

This is a card within a slider component.

9.9 Table

Tool Name Category Release Date
Fabbl AI & Content 2023-10-26
Bolt Development 2024-03-15
Next Project Productivity Coming Soon

ADVANCED LAYOUTS

10. Advanced Layouts

Combining components into powerful, real-world application interfaces.

10.1 Image Preview Card

Before imageAfter image

image-comparison.jpg

10.2 Dashboard Layout

Dashboard

Uploads

1,402

Active Users

28

Projects

12

Server Load

15%

Recent Activity

Content for recent activity goes here.

Storage

Content for storage goes here.

10.3 File Tree

README.md package.json

ADVANCED LAYOUTS

11. Hero Variations

A collection of powerful, brand-forward hero components for different applications.

11.1 Split-Layout with Uploader

RemoveBG

A powerful tagline about what this tool can accomplish for you.

Choose a file or drag it here

SVG, PNG, JPG, or GIF (max 10MB)

11.1.1 Split-Layout with Uploader & Paste

RemoveBG

A powerful tagline about what this tool can accomplish for you.

Choose a file, drag it here, or

SVG, PNG, JPG, or GIF (max 10MB)

11.2 Brand Logo - Split-Layout with Uploader

Company Logo

Brand Name

A powerful tagline about what this tool can accomplish for you.

Choose a file or drag it here

SVG, PNG, JPG, or GIF (max 10MB)

11.2.1 Brand Logo - Split-Layout with Uploader & Paste

Company Logo

Brand Name

A powerful tagline about what this tool can accomplish for you.

Choose a file, drag it here, or

SVG, PNG, JPG, or GIF (max 10MB)

11.3 Brand-Focused Hero (Horizontal Desktop - Vertical Mobile)

Company Logo

Brand Name

A powerful tagline about what this tool can accomplish for you and why it's the best choice.

11.4 Success State Hero

Success!

Your file is ready to share. The link will expire in 60 minutes.

Scan with your phone

https://labs.kcstudio.nl/path/to/your/file.zip

11.4.1 Success State with File List

Success!

Your files are ready to share. The link will expire in 60 minutes.

Brand_Guidelines_Final_v2.pdf
2.4 MB
Hero-Image-Web-Banner.jpg
867 KB
Hero-Image-Web-Banner.jpg
867 KB
Hero-Image-Web-Banner.jpg
867 KB
Hero-Image-Web-Banner.jpg
867 KB
Hero-Image-Web-Banner.jpg
867 KB

Scan with your phone

https://labs.kcstudio.nl/path/to/your/file.zip

11.5 Download Hero

Download

Brand_Guidelines_Final_Version_2_For_Review.pdf

File Size: 2.4 MB · Expires in 45 minutes.

PDF