getdesign.mdgetdesign/composio
Composio
Developer-focused nocturnal command center on Void Black with bioluminescent cyan glows, geometric Inter-substitute + JetBrains Mono dual-font identity.
install
npx designkit add getdesign/composiopreviewrenderPreviewHtml
source
---
name: Composio
description:
Developer-focused nocturnal command center on Void Black with bioluminescent
cyan glows, geometric Inter-substitute + JetBrains Mono dual-font identity.
originalFonts:
primary: "abcDiatype"
mono: "JetBrains Mono"
fallbacks:
- "abcDiatype Fallback"
- "ui-sans-serif"
- "system-ui"
- "Apple Color Emoji"
- "Segoe UI Emoji"
- "Segoe UI Symbol"
- "Noto Color Emoji"
colors:
background: "#0f0f0f"
surface: "#000000"
surface-raised: "#2c2c2c"
ink: "#ffffff"
ink-muted: "rgba(255,255,255,0.6)"
accent: "#0007cd"
accent-alt: "#00ffff"
border: "rgba(255,255,255,0.1)"
link: "#0089ff"
composio-cobalt: "#0007cd"
electric-cyan: "#00ffff"
signal-blue: "#0089ff"
ocean-blue: "#0096ff"
void-black: "#0f0f0f"
pure-black: "#000000"
charcoal: "#2c2c2c"
pure-white: "#ffffff"
muted-smoke: "#444444"
ghost-white: "rgba(255,255,255,0.6)"
whisper-white: "rgba(255,255,255,0.5)"
phantom-white: "rgba(255,255,255,0.2)"
border-mist-12: "rgba(255,255,255,0.12)"
border-mist-10: "rgba(255,255,255,0.1)"
border-mist-08: "rgba(255,255,255,0.08)"
border-mist-06: "rgba(255,255,255,0.06)"
border-mist-04: "rgba(255,255,255,0.04)"
light-border: "#e0e0e0"
typography:
h1:
family: "Inter"
size: "4rem"
weight: 400
lineHeight: 0.87
h2:
family: "Inter"
size: "3rem"
weight: 400
lineHeight: 1
h3:
family: "Inter"
size: "1.75rem"
weight: 400
lineHeight: 1.2
body:
family: "Inter"
size: "1rem"
weight: 400
lineHeight: 1.5
button:
family: "Inter"
size: "1rem"
weight: 400
lineHeight: 1.5
caption:
family: "Inter"
size: "0.875rem"
weight: 400
lineHeight: 1.63
code:
family: "JetBrains Mono"
size: "1rem"
weight: 400
lineHeight: 1.5
spacing:
xs: "0.25rem"
sm: "0.5rem"
md: "1rem"
lg: "1.5rem"
xl: "2.5rem"
rounded:
sm: "2px"
md: "4px"
lg: "37px"
xl: "9999px"
shadows:
sm: "rgba(0,0,0,0.15) 4px 4px 0px 0px"
md: "rgba(0,0,0,0.5) 0px 8px 32px"
lg: "rgba(0,0,0,0.5) 0px 16px 64px"
components:
button-primary:
background: "#ffffff"
color: "#0a0a0a"
border: "none"
radius: "{rounded.md}"
padding: "0.5rem 1.5rem"
button-secondary:
background: "rgba(0,255,255,0.12)"
color: "#0a0a0a"
border: "1px solid {colors.ocean-blue}"
radius: "{rounded.md}"
padding: "0.5rem 1.5rem"
card:
background: "{colors.pure-black}"
border: "1px solid {colors.border}"
radius: "{rounded.md}"
padding: "1.5rem"
input:
background: "{colors.pure-black}"
color: "{colors.ink}"
border: "1px solid {colors.border}"
radius: "{rounded.md}"
padding: "0.5rem 0.75rem"
---
<!-- source: VoltAgent/awesome-design-md @ 80bbbc2 (MIT) — see ATTRIBUTION.md -->
# Design System Inspiration of Composio
## 1. Visual Theme & Atmosphere
Composio's interface is a nocturnal command center — a dense, developer-focused
darkness punctuated by electric cyan and deep cobalt signals. The entire
experience is built on an almost-pure-black canvas (`#0f0f0f`) where content
floats within barely-visible containment borders, creating the feeling of a
high-tech control panel rather than a traditional marketing page. It's a site
that whispers authority to developers who live in dark terminals.
The visual language leans heavily into the aesthetic of code editors and
terminal windows. JetBrains Mono appears alongside the geometric precision of
abcDiatype, reinforcing the message that this is a tool built _by_ developers
_for_ developers. Decorative elements are restrained but impactful — subtle
cyan-blue gradient glows emanate from cards and sections like bioluminescent
organisms in deep water, while hard-offset shadows (`4px 4px`) on select
elements add a raw, brutalist edge that prevents the design from feeling
sterile.
What makes Composio distinctive is its tension between extreme minimalism and
strategic bursts of luminous color. The site never shouts — headings use tight
line-heights (0.87) that compress text into dense, authoritative blocks. Color
is rationed like a rare resource: white text for primary content,
semi-transparent white (`rgba(255,255,255,0.5-0.6)`) for secondary, and brand
blue (`#0007cd`) or electric cyan (`#00ffff`) reserved exclusively for
interactive moments and accent glows.
**Key Characteristics:**
- Pitch-black canvas with near-invisible white-border containment (4-12%
opacity)
- Dual-font identity: geometric sans-serif (abcDiatype) for content, monospace
(JetBrains Mono) for technical credibility
- Ultra-tight heading line-heights (0.87-1.0) creating compressed, impactful
text blocks
- Bioluminescent accent strategy — cyan and blue glows that feel like they're
emitting light from within
- Hard-offset brutalist shadows (`4px 4px`) on select interactive elements
- Monochrome hierarchy with color used only at the highest-signal moments
- Developer-terminal aesthetic that bridges marketing and documentation
## 2. Color Palette & Roles
### Primary
- **Composio Cobalt** (`#0007cd`): The core brand color — a deep, saturated blue
used sparingly for high-priority interactive elements and brand moments. It
anchors the identity with quiet intensity.
### Secondary & Accent
- **Electric Cyan** (`#00ffff`): The attention-grabbing accent — used at low
opacity (`rgba(0,255,255,0.12)`) for glowing button backgrounds and card
highlights. At full saturation, it serves as the energetic counterpoint to the
dark canvas.
- **Signal Blue** (`#0089ff` / `rgb(0,137,255)`): Used for select button borders
and interactive focus states, bridging the gap between Cobalt and Cyan.
- **Ocean Blue** (`#0096ff` / `rgb(0,150,255)`): Accent border color on CTA
buttons, slightly warmer than Signal Blue.
### Surface & Background
- **Void Black** (`#0f0f0f`): The primary page background — not pure black, but
a hair warmer, reducing eye strain on dark displays.
- **Pure Black** (`#000000`): Used for card interiors and deep-nested
containers, creating a subtle depth distinction from the page background.
- **Charcoal** (`#2c2c2c` / `rgb(44,44,44)`): Used for secondary button borders
and divider lines on dark surfaces.
### Neutrals & Text
- **Pure White** (`#ffffff`): Primary heading and high-emphasis text color on
dark surfaces.
- **Muted Smoke** (`#444444`): De-emphasized body text, metadata, and tertiary
content.
- **Ghost White** (`rgba(255,255,255,0.6)`): Secondary body text and link labels
— visible but deliberately receded.
- **Whisper White** (`rgba(255,255,255,0.5)`): Tertiary button text and
placeholder content.
- **Phantom White** (`rgba(255,255,255,0.2)`): Subtle button backgrounds and
deeply receded UI chrome.
### Semantic & Accent
- **Border Mist 12** (`rgba(255,255,255,0.12)`): Highest-opacity border
treatment — used for prominent card edges and content separators.
- **Border Mist 10** (`rgba(255,255,255,0.10)`): Standard container borders on
dark surfaces.
- **Border Mist 08** (`rgba(255,255,255,0.08)`): Subtle section dividers and
secondary card edges.
- **Border Mist 06** (`rgba(255,255,255,0.06)`): Near-invisible containment
borders for background groupings.
- **Border Mist 04** (`rgba(255,255,255,0.04)`): The faintest border — used for
atmospheric separation only.
- **Light Border** (`#e0e0e0` / `rgb(224,224,224)`): Reserved for light-surface
contexts (rare on this site).
### Gradient System
- **Cyan Glow**: Radial gradients using `#00ffff` at very low opacity, creating
bioluminescent halos behind cards and feature sections.
- **Blue-to-Black Fade**: Linear gradients from Composio Cobalt (`#0007cd`)
fading into Void Black (`#0f0f0f`), used in hero backgrounds and section
transitions.
- **White Fog**: Bottom-of-page gradient transitioning from dark to a diffused
white/gray, creating an atmospheric "horizon line" effect near the footer.
## 3. Typography Rules
### Font Family
- **Primary**: `abcDiatype`, with fallbacks:
`abcDiatype Fallback, ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji`
- **Monospace**: `JetBrains Mono`, with fallbacks:
`JetBrains Mono Fallback, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New`
- **System Monospace** (fallback): `Menlo`, `monospace` for smallest inline code
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
| ----------------- | -------------- | --------------- | ------ | ------------------ | -------------- | -------------------------------------- |
| Display / Hero | abcDiatype | 64px (4rem) | 400 | 0.87 (ultra-tight) | normal | Massive, compressed headings |
| Section Heading | abcDiatype | 48px (3rem) | 400 | 1.00 (tight) | normal | Major feature section titles |
| Sub-heading Large | abcDiatype | 40px (2.5rem) | 400 | 1.00 (tight) | normal | Secondary section markers |
| Sub-heading | abcDiatype | 28px (1.75rem) | 400 | 1.20 (tight) | normal | Card titles, feature names |
| Card Title | abcDiatype | 24px (1.5rem) | 500 | 1.20 (tight) | normal | Medium-emphasis card headings |
| Feature Label | abcDiatype | 20px (1.25rem) | 500 | 1.20 (tight) | normal | Smaller card titles, labels |
| Body Large | abcDiatype | 18px (1.125rem) | 400 | 1.20 (tight) | normal | Intro paragraphs |
| Body / Button | abcDiatype | 16px (1rem) | 400 | 1.50 | normal | Standard body text, nav links, buttons |
| Body Small | abcDiatype | 15px (0.94rem) | 400 | 1.63 (relaxed) | normal | Longer-form body text |
| Caption | abcDiatype | 14px (0.875rem) | 400 | 1.63 (relaxed) | normal | Descriptions, metadata |
| Label | abcDiatype | 13px (0.81rem) | 500 | 1.50 | normal | UI labels, badges |
| Tag / Overline | abcDiatype | 12px (0.75rem) | 500 | 1.00 (tight) | 0.3px | Uppercase overline labels |
| Micro | abcDiatype | 12px (0.75rem) | 400 | 1.00 (tight) | 0.3px | Smallest sans-serif text |
| Code Body | JetBrains Mono | 16px (1rem) | 400 | 1.50 | -0.32px | Inline code, terminal output |
| Code Small | JetBrains Mono | 14px (0.875rem) | 400 | 1.50 | -0.28px | Code snippets, technical labels |
| Code Caption | JetBrains Mono | 12px (0.75rem) | 400 | 1.50 | -0.28px | Small code references |
| Code Overline | JetBrains Mono | 14px (0.875rem) | 400 | 1.43 | 0.7px | Uppercase technical labels |
| Code Micro | JetBrains Mono | 11px (0.69rem) | 400 | 1.33 | 0.55px | Tiny uppercase code tags |
| Code Nano | JetBrains Mono | 9-10px | 400 | 1.33 | 0.45-0.5px | Smallest monospace text |
### Principles
- **Compression creates authority**: Heading line-heights are drastically tight
(0.87-1.0), making large text feel dense and commanding rather than airy and
decorative.
- **Dual personality**: abcDiatype carries the marketing voice — geometric,
precise, friendly. JetBrains Mono carries the technical voice — credible,
functional, familiar to developers.
- **Weight restraint**: Almost everything is weight 400 (regular). Weight 500
(medium) is reserved for small labels, badges, and select card titles. Weight
700 (bold) appears only in microscopic system-monospace contexts.
- **Negative letter-spacing on code**: JetBrains Mono uses negative
letter-spacing (-0.28px to -0.98px) for dense, compact code blocks that feel
like a real IDE.
- **Uppercase is earned**: The `uppercase` + `letter-spacing` treatment is
reserved exclusively for tiny overline labels and technical tags — never for
headings.
## 4. Component Stylings
### Buttons
**Primary CTA (White Fill)**
- Background: Pure White (`#ffffff`)
- Text: Near Black (`oklch(0.145 0 0)`)
- Padding: comfortable (8px 24px)
- Border: none
- Radius: subtly rounded (likely 4px based on token scale)
- Hover: likely subtle opacity reduction or slight gray shift
**Cyan Accent CTA**
- Background: Electric Cyan at 12% opacity (`rgba(0,255,255,0.12)`)
- Text: Near Black (`oklch(0.145 0 0)`)
- Padding: comfortable (8px 24px)
- Border: thin solid Ocean Blue (`1px solid rgb(0,150,255)`)
- Radius: subtly rounded (4px)
- Creates a "glowing from within" effect on dark backgrounds
**Ghost / Outline (Signal Blue)**
- Background: transparent
- Text: Near Black (`oklch(0.145 0 0)`)
- Padding: balanced (10px)
- Border: thin solid Signal Blue (`1px solid rgb(0,137,255)`)
- Hover: likely fill or border color shift
**Ghost / Outline (Charcoal)**
- Background: transparent
- Text: Near Black (`oklch(0.145 0 0)`)
- Padding: balanced (10px)
- Border: thin solid Charcoal (`1px solid rgb(44,44,44)`)
- For secondary/tertiary actions on dark surfaces
**Phantom Button**
- Background: Phantom White (`rgba(255,255,255,0.2)`)
- Text: Whisper White (`rgba(255,255,255,0.5)`)
- No visible border
- Used for deeply de-emphasized actions
### Cards & Containers
- Background: Pure Black (`#000000`) or transparent
- Border: white at very low opacity, ranging from Border Mist 04
(`rgba(255,255,255,0.04)`) to Border Mist 12 (`rgba(255,255,255,0.12)`)
depending on prominence
- Radius: barely rounded corners (2px for inline elements, 4px for content
cards)
- Shadow: select cards use the hard-offset brutalist shadow
(`rgba(0,0,0,0.15) 4px 4px 0px 0px`) — a distinctive design choice that adds
raw depth
- Elevation shadow: deeper containers use soft diffuse shadow
(`rgba(0,0,0,0.5) 0px 8px 32px`)
- Hover behavior: likely subtle border opacity increase or faint glow effect
### Inputs & Forms
- No explicit input token data extracted — inputs likely follow the dark-surface
pattern with:
- Background: transparent or Pure Black
- Border: Border Mist 10 (`rgba(255,255,255,0.10)`)
- Focus: border shifts to Signal Blue (`#0089ff`) or Electric Cyan
- Text: Pure White with Ghost White placeholder
### Navigation
- Sticky top nav bar on dark/black background
- Logo (white SVG): Composio wordmark on the left
- Nav links: Pure White (`#ffffff`) at standard body size (16px, abcDiatype)
- CTA button in the nav: White Fill Primary style
- Mobile: collapses to hamburger menu, single-column layout
- Subtle bottom border on nav (Border Mist 06-08)
### Image Treatment
- Dark-themed product screenshots and UI mockups dominate
- Images sit within bordered containers matching the card system
- Blue/cyan gradient glows behind or beneath feature images
- No visible border-radius on images beyond container rounding (4px)
- Full-bleed within their card containers
### Distinctive Components
**Stats/Metrics Display**
- Large monospace numbers (JetBrains Mono) — "10k+" style
- Tight layout with subtle label text beneath
**Code Blocks / Terminal Previews**
- Dark containers with JetBrains Mono
- Syntax-highlighted content
- Subtle bordered containers (Border Mist 10)
**Integration/Partner Logos Grid**
- Grid layout of tool logos on dark surface
- Contained within bordered card
- Demonstrates ecosystem breadth
**"COMPOSIO" Brand Display**
- Oversized brand typography — likely the largest text on the page
- Used as a section divider/brand statement
- Stark white on black
## 5. Layout Principles
### Spacing System
- Base unit: 8px
- Scale: 1px, 2px, 4px, 6px, 8px, 10px, 12px, 14px, 16px, 18px, 20px, 24px,
30px, 32px, 40px
- Component padding: typically 10px (buttons) to 24px (CTA buttons horizontal)
- Section padding: generous vertical spacing (estimated 80-120px between major
sections)
- Card internal padding: approximately 24-32px
### Grid & Container
- Max container width: approximately 1200px, centered
- Content sections use single-column or 2-3 column grids for feature cards
- Hero: centered single-column with maximum impact
- Feature sections: asymmetric layouts mixing text blocks with product
screenshots
### Whitespace Philosophy
- **Breathing room between sections**: Large vertical gaps create distinct
"chapters" in the page scroll.
- **Dense within components**: Cards and text blocks are internally compact
(tight line-heights, minimal internal padding), creating focused information
nodes.
- **Contrast-driven separation**: Rather than relying solely on whitespace,
Composio uses border opacity differences and subtle background shifts to
delineate content zones.
### Border Radius Scale
- Nearly squared (2px): Inline code spans, small tags, pre blocks — the sharpest
treatment, conveying technical precision
- Subtly rounded (4px): Content cards, images, standard containers — the
workhorse radius
- Pill-shaped (37px): Select buttons and badges — creates a softer, more
approachable feel for key CTAs
- Full round (9999px+): Circular elements, avatar-like containers, decorative
dots
## 6. Depth & Elevation
| Level | Treatment | Use |
| ------------------- | ----------------------------------------------- | -------------------------------------------------------- |
| Flat (Level 0) | No shadow, no border | Page background, inline text |
| Contained (Level 1) | Border Mist 04-08, no shadow | Background groupings, subtle sections |
| Card (Level 2) | Border Mist 10-12, no shadow | Standard content cards, code blocks |
| Brutalist (Level 3) | Hard offset shadow (`4px 4px`, 15% black) | Select interactive cards, distinctive feature highlights |
| Floating (Level 4) | Soft diffuse shadow (`0px 8px 32px`, 50% black) | Modals, overlays, deeply elevated content |
**Shadow Philosophy**: Composio uses shadows sparingly and with deliberate
contrast. The hard-offset brutalist shadow is the signature — it breaks the
sleek darkness with a raw, almost retro-computing feel. The soft diffuse shadow
is reserved for truly floating elements. Most depth is communicated through
border opacity gradations rather than shadows.
### Decorative Depth
- **Cyan Glow Halos**: Radial gradient halos using Electric Cyan at low opacity
behind feature cards and images. Creates a "screen glow" effect as if the UI
elements are emitting light.
- **Blue-Black Gradient Washes**: Linear gradients from Composio Cobalt to Void
Black used as section backgrounds, adding subtle color temperature shifts.
- **White Fog Horizon**: A gradient from dark to diffused white/gray at the
bottom of the page, creating an atmospheric "dawn" effect before the footer.
## 7. Do's and Don'ts
### Do
- Use Void Black (`#0f0f0f`) as the primary page background — never pure white
for main surfaces
- Keep heading line-heights ultra-tight (0.87-1.0) for compressed, authoritative
text blocks
- Use white-opacity borders (4-12%) for containment — they're more important
than shadows here
- Reserve Electric Cyan (`#00ffff`) for high-signal moments only — CTAs, glows,
interactive accents
- Pair abcDiatype with JetBrains Mono to reinforce the developer-tool identity
- Use the hard-offset shadow (`4px 4px`) intentionally on select elements for
brutalist personality
- Keep button text dark (`oklch(0.145 0 0)`) even on the darkest backgrounds —
buttons carry their own surface
- Layer opacity-based borders to create subtle depth without shadows
- Use uppercase + letter-spacing only for tiny overline labels (12px or smaller)
### Don't
- Don't use bright backgrounds or light surfaces as primary containers
- Don't apply heavy shadows everywhere — depth comes from border opacity, not
box-shadow
- Don't use Composio Cobalt (`#0007cd`) as a text color — it's too dark on dark
and too saturated on light
- Don't increase heading line-heights beyond 1.2 — the compressed feel is core
to the identity
- Don't use bold (700) weight for body or heading text — 400-500 is the ceiling
- Don't mix warm colors — the palette is strictly cool (blue, cyan, white,
black)
- Don't use border-radius larger than 4px on content cards — the precision of
near-square corners is intentional
- Don't place Electric Cyan at full opacity on large surfaces — it's an accent,
used at 12% max for backgrounds
- Don't use decorative serif or handwritten fonts — the entire identity is
geometric sans + monospace
- Don't skip the monospace font for technical content — JetBrains Mono is not
decorative, it's a credibility signal
## 8. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
| ------------- | ----------- | ---------------------------------------------------------------------------------------------------------- |
| Mobile | <768px | Single column, hamburger nav, full-width cards, reduced section padding, hero text scales down to ~28-40px |
| Tablet | 768-1024px | 2-column grid for cards, condensed nav, slightly reduced hero text |
| Desktop | 1024-1440px | Full multi-column layout, expanded nav with all links visible, large hero typography (64px) |
| Large Desktop | >1440px | Max-width container centered, generous horizontal margins |
### Touch Targets
- Minimum touch target: 44x44px for all interactive elements
- Buttons use comfortable padding (8px 24px minimum) ensuring adequate touch
area
- Nav links spaced with sufficient gap for thumb navigation
### Collapsing Strategy
- **Navigation**: Full horizontal nav on desktop collapses to hamburger on
mobile
- **Feature grids**: 3-column → 2-column → single-column stacking
- **Hero text**: 64px → 40px → 28px progressive scaling
- **Section padding**: Reduces proportionally but maintains generous vertical
rhythm
- **Cards**: Stack vertically on mobile with full-width treatment
- **Code blocks**: Horizontal scroll on smaller viewports rather than wrapping
### Image Behavior
- Product screenshots scale proportionally within their containers
- Dark-themed images maintain contrast on the dark background at all sizes
- Gradient glow effects scale with container size
- No visible art direction changes between breakpoints — same crops,
proportional scaling
## 9. Agent Prompt Guide
### Quick Color Reference
- Primary CTA: "Pure White (#ffffff)"
- Page Background: "Void Black (#0f0f0f)"
- Brand Accent: "Composio Cobalt (#0007cd)"
- Glow Accent: "Electric Cyan (#00ffff)"
- Heading Text: "Pure White (#ffffff)"
- Body Text: "Ghost White (rgba(255,255,255,0.6))"
- Card Border: "Border Mist 10 (rgba(255,255,255,0.10))"
- Button Border: "Signal Blue (#0089ff)"
### Example Component Prompts
- "Create a feature card with a near-black background (#000000), barely visible
white border at 10% opacity, subtly rounded corners (4px), and a hard-offset
shadow (4px right, 4px down, 15% black). Use Pure White for the title in
abcDiatype at 24px weight 500, and Ghost White (60% opacity) for the
description at 16px."
- "Design a primary CTA button with a solid white background, near-black text,
comfortable padding (8px vertical, 24px horizontal), and subtly rounded
corners. Place it next to a secondary button with transparent background,
Signal Blue border, and matching padding."
- "Build a hero section on Void Black (#0f0f0f) with a massive heading at 64px,
line-height 0.87, in abcDiatype. Center the text. Add a subtle blue-to-black
gradient glow behind the content. Include a white CTA button and a
cyan-accented secondary button below."
- "Create a code snippet display using JetBrains Mono at 14px with -0.28px
letter-spacing on a black background. Add a Border Mist 10 border
(rgba(255,255,255,0.10)) and 4px radius. Show syntax-highlighted content with
white and cyan text."
- "Design a navigation bar on Void Black with the Composio wordmark in white on
the left, 4-5 nav links in white abcDiatype at 16px, and a white-fill CTA
button on the right. Add a Border Mist 06 bottom border."
### Iteration Guide
When refining existing screens generated with this design system:
1. Focus on ONE component at a time
2. Reference specific color names and hex codes from this document — "use Ghost
White (rgba(255,255,255,0.6))" not "make it lighter"
3. Use natural language descriptions — "make the border barely visible" = Border
Mist 04-06
4. Describe the desired "feel" alongside specific measurements — "compressed and
authoritative heading at 48px with line-height 1.0"
5. For glow effects, specify "Electric Cyan at 12% opacity as a radial gradient
behind the element"
6. Always specify which font — abcDiatype for marketing, JetBrains Mono for
technical/code content