Brand guidelines for building consistent ibl.ai applications. Based on the @iblai/iblai-js SDK design system (web-containers/src/styles/base.css).

Generated apps map ibl.ai tokens to shadcn CSS variables in globals.css using OKLCH values. shadcn components (bg-primary, text-muted-foreground, border-border, etc.) automatically use the ibl.ai brand colors. No additional theme configuration needed.

The signature ibl.ai gradient -- sky-blue to deep-blue at 135 degrees:

background: linear-gradient(135deg, #00b0ef, #0058cc);

Button gradient (Tailwind classes):

<button class="bg-gradient-to-r from-[#2563EB] to-[#93C5FD] text-white">

System sans-serif font stack (no custom fonts required):

font-family: ui-sans-serif, system-ui, sans-serif,
  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

The SDK provides utility classes for common brand patterns:

/* Backgrounds */
.ibl-primary-bg      { background-color: var(--primary-color); }
.ibl-gradient-bg      { background: linear-gradient(135deg, var(--primary-light), var(--primary-color)); }
.ibl-surface-bg       { background-color: var(--sidebar-bg); }

/* Buttons */
.ibl-button-primary   { @apply bg-gradient-to-r from-[#2563EB] to-[#93C5FD] text-white; }
.ibl-outline-primary  { @apply border-[#2563EB] text-[#2563EB]; }

/* Text */
.ibl-text-primary     { color: var(--text-primary); }
.ibl-text-secondary   { color: var(--text-secondary); }
.ibl-text-muted       { color: var(--text-muted); }
.ibl-text-link        { color: var(--link-color); }

/* Borders */
.ibl-border           { border-color: var(--border-color); }
.ibl-separator        { border-color: var(--separator-color); }

When adding shadcn UI components, the brand values above are already mapped to shadcn CSS variables in globals.css. A shadcn bg-primary button renders in ibl.ai blue (#0058cc), not the default shadcn black. No manual theme work needed.

npx shadcn@latest add button dialog table form

For pre-built page sections (hero, pricing, features):

npx shadcn@latest add @shadcn-space/<block-name>

Browse: https://shadcnspace.com/blocks

The canonical design tokens are in the @iblai/iblai-js SDK:

packages/web-containers/src/styles/base.css

All hex values, spacing scales, and utility classes in this document are derived from that file. When in doubt, check base.css.

The visual design language for ibl.ai apps draws inspiration from Apple's design system. Use the guidelines below for layout, typography rhythm, component styling, and responsive behavior when building custom UI.

Controlled minimalism -- vast expanses of solid backgrounds serve as backdrops for content. The interface retreats until it becomes invisible.

Key Characteristics:

• System sans-serif with tight headline line-heights (1.07-1.14)
• Binary light/dark section rhythm: black (#000000) alternating with light gray (#f5f5f7)
• Single accent color for interactive elements
• Full-width section layout with centered content
• Pill-shaped CTAs (980px radius)
• Generous whitespace between sections

Principles:

• Negative letter-spacing at all sizes (not just headlines)
• Weight restraint: mostly 400 (regular) and 600 (semibold), max 700
• Extreme line-height range: 1.07 for headlines, 1.47 for body

Buttons

• Primary CTA: #0071e3 bg, white text, 8px radius, 8px 15px padding
• Secondary CTA: #1d1d1f bg, white text, 8px radius
• Pill link: transparent bg, #0066cc text, 980px radius, 1px border
• Focus: 2px solid #0071e3 outline

Cards & Containers

• Light: #f5f5f7 bg, no border, 5-8px radius
• Dark: #272729-#2a2a2d bg, no border
• Shadow (rare): rgba(0,0,0,0.22) 3px 5px 30px 0px
• No hover state on cards -- links within them are interactive

Navigation

• rgba(0,0,0,0.8) bg with backdrop-filter: saturate(180%) blur(20px)
• 48px height, white text at 12px weight 400
• Floats above content with glass effect

• Base spacing unit: 8px
• Max content width: ~980px centered
• Full-viewport-width sections with centered content blocks
• Alternating background colors create section separation (no borders)
• Each section near full-viewport height

Border Radius Scale:

• 5px: small containers
• 8px: buttons, cards
• 11px: search inputs
• 12px: feature panels
• 980px: pill CTAs
• 50%: media controls

Shadow is rare and always soft. Elevation comes from background color contrast.

• Hero headlines: 56px -> 40px -> 28px on mobile
• Grids: 3-col -> 2-col -> 1-col
• Nav: horizontal -> hamburger
• Touch targets: minimum 44x44px

Do:

• Use a single accent color for all interactive elements
• Alternate light/dark section backgrounds for rhythm
• Apply negative letter-spacing at all text sizes
• Compress headline line-heights (1.07-1.14)
• Use the glass blur effect for sticky navigation
• Keep product imagery on solid color fields

Don't:

• Don't introduce additional accent colors
• Don't use heavy shadows or multiple shadow layers
• Don't use borders on cards or containers
• Don't use font weight 800 or 900
• Don't add textures, patterns, or gradients to backgrounds
• Don't make the navigation opaque
• Don't center-align body text (only headlines)