How inceptionlabs.ai is designed

Captured pages, colors, and typography from inceptionlabs.ai.

How is inceptionlabs.ai designed? Show me the visual system I can use as a reference.

Captured pages

Overview

inceptionlabs.ai presents a mixed light and dark surface treatment in the captured pages. The system is anchored by #000000, #faf8f0, and #041414, with typography led by System, Kmr Apparat, Inter, and Geist Mono. The guide below names reusable design roles only where the captured evidence supports them.

The reference set uses representative captured pages. It is a design reference, not a claim about the site's private source code or a complete responsive specification.

Design tokens

The token names are practical labels for the recorded values. They are not claims about the source site's variable names.

Colors

tokenvalueobserved use
color.surface#000000surface on page content
color.text#faf8f0text on page content
color.surface#041414surface on page content
color.text#fffffftext on page content
color.text#0000eetext on page content in the nav
color.text#eff9f9text on page content
color.surface#f5f3ebsurface on page content
color.text#2b2a29text on page content
color.surface#1a1918surface on page content
color.text#041314text on page content
color.surface#159999surface on page content
color.surface#17c4c4surface on page content

Typography

tokenfont familysizeweightline heightletter spacingobserved use
type.utility-12pxSystem12px400normalnormal<div>, <div> in the nav, <a> in the nav, <a>, and <button> in the button
type.body-17pxInter17px40028.9pxnormal<p>
type.display-48pxKmr Apparat48px37552.8pxnormal<h2>
type.display-64pxKmr Apparat64px37564pxnormal<h1> and <span>
type.body-15pxInter15px50018pxnormal<p>
type.body-18pxKmr Apparat18px37525.2pxnormal<p>
type.display-56pxKmr Apparat56px37567.2pxnormal<p>
type.display-56pxKmr Apparat56px37556pxnormal<h1> and <span>
type.body-15pxInter15px40018pxnormal<p> and <a>
type.body-15pxInter15px50022.5pxnormal<p>
type.body-17pxInter17px50023.8pxnormal<span> and <p>
type.body-18pxKmr Apparat18px37519.8pxnormal<p>
type.body-28pxGeist Mono28px40028pxnormal<span> and <div>
type.body-28pxKmr Apparat28px37530.8pxnormal<p>
type.body-17pxInter17px40025.5pxnormal<p>
type.body-15pxInter15px50015pxnormal<p>
type.body-18pxInter18px40021.6pxnormal<p>
type.body-15pxInter15px40030pxnormal<p> in the nav
type.body-28pxGeist Mono28px40033.6pxnormal<p>
type.body-18pxKmr Apparat18px37521.6pxnormal<p>

Spacing

valuepropertyobserved element
150px 0px 64pxpaddingpage content
164px 56px 0pxpaddingpage content
32px 40pxpaddingpage content
40pxpaddingpage content
0px 20pxpaddingpage content
56px 56px 40pxpaddingpage content
0px 0px 64pxpaddingpage content
200px 0px 40pxpaddingpage content

Shape and depth

The captured pages use 0px none 50px, 0px none 26px, 0px none 60px, and 1px solid 0px border treatments.

Colors

The visual system is mixed light and dark surface treatment. Surface colors include #000000, #041414, and #f5f3eb. Text colors include #faf8f0, #ffffff, and #0000ee. Keep image-derived colors separate from interface colors.

Typography

The captured type system uses System, Inter, Kmr Apparat, and Geist Mono. The table records measured size, weight, leading, and tracking where available; it does not establish licensing or a complete fallback stack.

Layout

The captured pages use values such as 150px 0px 64px, 164px 56px 0px, 32px 40px, 40px, and 0px 20px for padding and margin. These are measured usages, not a resolved scale. The available evidence does not establish container widths, grid rules, or breakpoints.

Visual language

The captured visual language is mixed light and dark surface treatment. Surface treatment centers on #000000, #041414, #f5f3eb, and #1a1918. No structured gradient or shadow treatment is established.

Components and states

The captured pages include repeated styling on <h2>, <div>, <p>, <h1>, <span>, <a>, and <button> elements. The evidence does not identify reusable component boundaries or interaction states. Treat loading, focus, hover, pressed, error, and disabled states as implementation work to validate rather than as captured facts.

Responsive behavior

The captured token set does not establish breakpoint values or mobile behavior. Validate stacking, navigation changes, image treatment, and type scaling against the representative captures before implementing a responsive adaptation.

Practical implementation guidance

  • Preserve the mixed light/dark surface relationship and the measured type hierarchy before adding decorative treatment.
  • Start from the returned typography, spacing, color, and border values; name any new scale or semantic role as an adaptation rather than as a source fact.
  • Keep the captured font families separate from licensing decisions.
  • Use screenshots to validate component anatomy, responsive behavior, focus treatment, and motion before shipping.
  • Avoid introducing gradients or shadows beyond the captured treatment; none are established.

Scope note

The guide uses representative captured pages. The evidence supports the values and observations above; it does not establish component semantics, interaction states, motion timing, breakpoint rules, font licensing, or a complete source stylesheet.

Colors

  • #000000
  • #faf8f0
  • #041414
  • #ffffff
  • #0000ee
  • #eff9f9
  • #f5f3eb
  • #2b2a29
  • #1a1918
  • #041314
  • #159999
  • #17c4c4
  • #18c4c3
  • #7674ff
  • #f0783d

Typography captured from inceptionlabs.ai

  • System

    Weight 400 · Size 12px · Line height normal

  • Kmr Apparat

    Weight 375 · Size 48px · Line height 52.8px

  • Inter

    Weight 500 · Size 15px · Line height 22.5px

  • Geist Mono

    Weight 400 · Size 28px · Line height 28px