> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ibbe.services/llms.txt
> Use this file to discover all available pages before exploring further.

# Design Language

> Tactile, brutalist-editorial interface system. Thick charcoal borders, hard offset shadows, a restrained cream and bone surface palette, and a spring-loaded hover physics model.

<Info>
  You can download the raw markdown file here: [Download DESIGN.md](https://apac-southern-primary-static-delivery-zone-mn.ssl.media.assets.ibbe.cloud/design/DESIGN%20\(2\).md)
</Info>

# DESIGN.md - ibbe

## Overview

ibbe is a tactile, brutalist-editorial interface system. Surfaces are designed to read as physical objects sitting on a desk rather than flat panels on a screen: thick ink-colored borders frame every container, shadows sit hard and offset instead of soft and blurred, and interactive elements lift toward the cursor on hover and press down into the page on click. The system favors weight and contrast over decoration. Color stays restrained, with two neutral surface tones covering the majority of any screen, so visual interest comes from typography, shape, and motion rather than from a wide palette. The system spans two surface types: editorial/content surfaces (a journal-style home feed, article pages) built on an asymmetric 12-column grid, and app-like surfaces (dashboards, settings, forms) built on a denser, more conventional layout.

## Colors

The palette is rooted in two warm neutrals that act as the canvas and a small set of saturated accents that carry meaning rather than decoration.

* **Cream (`#F7F2E9`):** The dominant neutral, used for the outer page canvas.
* **Bone (`#FFF9F0`):** A slightly lighter neutral, used for surfaces that sit on top of the canvas, such as cards, sidebars, and app shells.
* **Charcoal (`#1D1D1F`):** The ink color, used for text, structural borders, and dark fills. Charcoal on bone is the default text pairing.
* **Gray (`#8E8E93`):** Secondary text, disabled states, and metadata.
* **Line (`#E8E2D8`):** Hairline dividers and thin internal borders.
* **Blue (`#2962FF`):** Primary calls to action, links, and the tech/info category.
* **Green (`#28C76F`):** Success states, online status, and the updates category.
* **Red (`#FF453A`):** Danger, destructive actions, and the alert/culture category.
* **Yellow (`#FFD60A`):** The ops/visuals category and sticker or highlight blocks.

Cream and bone should together cover roughly 80% of any screen, layered intentionally (cream for the outer canvas, bone for surfaces on top of it). The four accent colors map to fixed semantic roles and are not interchanged for decorative purposes.

### Design Tokens

```yaml theme={null}
colors:
  cream: "#F7F2E9"
  bone: "#FFF9F0"
  charcoal: "#1D1D1F"
  gray: "#8E8E93"
  line: "#E8E2D8"
  blue: "#2962FF"
  green: "#28C76F"
  red: "#FF453A"
  yellow: "#FFD60A"
```

## Typography

The type system pairs two families: Inter covers headlines, body copy, and general UI labels, while JetBrains Mono is reserved for anything that reads as data, such as timestamps, IDs, navigation labels, and buttons. Inter ships without an italic weight, so italics are absent from the system entirely.

Two parallel scales exist. The **general UI scale** (h1 through xs-text) is used on app-like surfaces: dashboards, settings, forms, sidebars, and modals. The **editorial scale** (display, heading, body-copy, mono variants) is used on content/reading surfaces: the home feed, article pages, and hero blocks.

Headings carry a weight of 700 or higher to establish hierarchy at a glance, while body copy holds at weight 400. Line-height runs generous for reading text (1.5 or higher) and tight for headings (around 1.1), and large headings tighten further with negative letter-spacing. Body text holds a 15px floor across the system. UI labels such as buttons, nav items, and tags typically render in lowercase; headings are the exception. Uppercase styling stays reserved for JetBrains Mono technical contexts (timestamps, IDs, nav chips) rather than headline text.

### Design Tokens

```yaml theme={null}
typography:
  h1:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: 800
    lineHeight: 1.1
  body:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  mono-bold:
    fontFamily: JetBrains Mono
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.2
```

## Layout

Spacing runs on an 8px base unit, with smaller fractional stops (1, 2, 4, 6px) available for hairlines and micro-adjustments. Card interiors typically use 24px to 32px of padding, and the gap between cards in a grid is usually 24px.

Editorial/listing pages use an asymmetric 12-column grid rather than a uniform card grid, paired with a fixed-width sticky sidebar (260px) beside a scrolling canvas. Grid items vary in span: hero content spans 8 columns across 2 rows, list-style cards span 4 columns across 2 rows, standard cards span 4 columns, and wide cards span 6 columns. Items are ordered so no two same-width cards sit back to back for more than a pair. At medium widths the hero collapses to the full 12 columns; below roughly 900px the grid abandons column math entirely in favor of a single stacked flex column.

Article/detail pages use a three-column "dossier" layout: a sticky left rail (350px) for title and metadata, a centered reading column capped at 680px for line length, and a right rail (280px) of supplementary marginalia notes. This collapses to two columns around 1300px and to a single column below 900px.

### Design Tokens

```yaml theme={null}
spacing:
  hairline: 1px
  tight: 4px
  sm: 8px
  md: 12px
  base: 16px
  section: 24px
  xl: 32px
  canvas: 48px
  gutter: 24px
```

## Elevation & Depth

Depth is conveyed through hard, offset shadows rather than soft, blurred ones, combined with a structural border system. Every card and major container carries a 3px solid charcoal border in addition to its shadow, so containment is legible even before shadow is considered. Interactive elements at rest cast a 6px-offset shadow; on hover they translate up and to the left while the shadow grows to 8px, simulating the object lifting off the page toward the cursor; on click they translate down and to the right while the shadow shrinks to 2px, simulating a press into the page. All movement follows a spring-like snap curve (`cubic-bezier(0.25, 0.8, 0.25, 1)`) rather than a linear or standard ease, and content entering a grid stays staggered (incremental delay per item) rather than appearing all at once.

## Shapes

Corner radius is deliberately inconsistent by scope rather than uniform: outer containers such as cards, sidebars, and the omnibox at rest round generously (16px and a 50px pill respectively), inner interactive elements such as buttons and inputs round moderately (12px), and tags or pills snap sharp (4px), acting as the intentional sharp-edged outlier against the system's rounded containers. The omnibox itself shifts shape on interaction, flattening from a 50px pill at rest to a 12px-radius rectangle (square at the bottom edge) when focused, to visually dock with its suggestions dropdown. The sticker label rotates between 10 and 15 degrees off-axis to read as a physical tag stuck onto a card rather than a flat badge.

### Design Tokens

```yaml theme={null}
rounded:
  tag: 4px
  inner: 12px
  outer: 16px
  pill: 50px
```

## Components

* **Card (Journal Card family):** A shared base (cream background, 3px charcoal border, 16px radius, hard offset shadow) extended by five variants: `card-hero` (charcoal background, bone text, splits into a text half and a solid color visual half), `card-list` (bone background, holds a stack of dividing list rows), the default `card` (standard, can host a sticker in the top right corner), `card-wide` (lays its body out horizontally), and `card-visual` (solid yellow background, centered content). Every card carries a colored status dot plus an uppercase mono category label, a heavy tight-line-height headline, and a footer separated by a hairline divider.
* **Sticker:** A small rotated tag layered on top of a card to flag emphasis. Red background, white text, 2px charcoal border, rotated 10 to 15 degrees.
* **Sidebar:** A sticky navigation panel with a 3px charcoal right border. Links use moderate internal radius (6px) and an active state that inverts to a solid charcoal fill with bone text and a small offset shadow, rather than a color swap or underline.
* **Omnibox:** A pill-shaped search/nav field centered at rest, expanding into a left-aligned field with a suggestions dropdown on focus. Border color shifts to blue on focus.
* **Buttons:** Use mono-bold typography, 12px inner radius, and the same tactile hover/press translate-and-shadow behavior as cards; a button that only changes color on interaction is treated as incomplete.

### Design Tokens

```yaml theme={null}
components:
  card:
    backgroundColor: "{colors.cream}"
    borderColor: "{colors.charcoal}"
    rounded: "{rounded.outer}"
    padding: "{spacing.section}"
  button-primary:
    backgroundColor: "{colors.charcoal}"
    textColor: "{colors.bone}"
    typography: "{typography.mono-bold}"
    rounded: "{rounded.inner}"
    padding: 12px
  sticker:
    backgroundColor: "{colors.red}"
    textColor: "#FFFFFF"
    rounded: "{rounded.tag}"
    typography: "{typography.mono-bold}"
```

## Do's and Don'ts

* Do keep cream and bone covering roughly 80% of any screen, with accent colors reserved for status and category meaning.
* Don't introduce gradients, soft pastels, or additional hex values beyond the defined palette.
* Do give every clickable element a translate-plus-shadow change on hover and active states.
* Don't rely on a color change alone to indicate an interactive or active state.
* Do keep shadows hard-edged and offset (no blur radius).
* Don't soften or blur the offset shadow system.
* Do hold body text to a 15px minimum size across the system.
* Don't mix in a third typeface beyond Inter and JetBrains Mono.
* Do use uppercase styling only for JetBrains Mono technical contexts (timestamps, IDs, nav chips).
* Don't set headline text in uppercase.
* Do keep sticker rotation between 10 and 15 degrees.
* Don't flatten the sticker rotation to 0 degrees, since it removes the "physically attached" effect.
* Do vary card widths in a grid so no two same-width cards sit adjacent for more than a pair.

## Assets

Logo and favicon files for the ibbe brand.

* **Favicon:** [https://apac-southern-primary-static-delivery-zone-mn.ssl.media.assets.ibbe.cloud/logos/favicon.ico](https://apac-southern-primary-static-delivery-zone-mn.ssl.media.assets.ibbe.cloud/logos/favicon.ico)
* **Logo (PNG):** [https://apac-southern-primary-static-delivery-zone-mn.ssl.media.assets.ibbe.cloud/logos/new%20logo.png](https://apac-southern-primary-static-delivery-zone-mn.ssl.media.assets.ibbe.cloud/logos/new%20logo.png)
* **Logo (SVG):** [https://apac-southern-primary-static-delivery-zone-mn.ssl.media.assets.ibbe.cloud/logos/new%20logo.svg](https://apac-southern-primary-static-delivery-zone-mn.ssl.media.assets.ibbe.cloud/logos/new%20logo.svg)

The SVG is the preferred format for in-app and web placements since it scales without loss of fidelity; the PNG covers contexts that require a raster format.