DESIGN.md · Analysis

Ocnif

ocnif-web.mangopebble-6a7d3db2.swedencentral.azurecontainerapps.io · 31 Oct 2026 · 47 colors · Urbanist

Ocnif

Ocnif is a coordinated AI security team that investigates supplied evidence, explains risk and keeps humans in control. The brand speaks through a dark, teal-lit, evidence-first interface.

Colors

surface#060c0d

surface-dim#060c0d

surface-bright#192729

surface-container-lowest#060c0d

surface-container-low#0b1517

surface-container#101c1e

surface-container-high#192729

surface-container-highest#304043

on-surface#f0f8f7

on-surface-variant#9aaead

inverse-surface#f0f5f3

inverse-on-surface#122a29

outline#9aaead

outline-variant#304043

surface-tint#32d5c3

primary#32d5c3

on-primary#022a27

primary-container#113c38

on-primary-container#f0f8f7

inverse-primary#087c71

secondary#9aaead

on-secondary#060c0d

secondary-container#192729

on-secondary-container#f0f8f7

tertiary#e8c489

on-tertiary#060c0d

tertiary-container#795115

on-tertiary-container#ffffff

error#f49c9c

on-error#060c0d

error-container#a72929

on-error-container#ffffff

primary-fixed#cfe9e3

primary-fixed-dim#32d5c3

on-primary-fixed#022a27

on-primary-fixed-variant#087c71

secondary-fixed#bdcfca

secondary-fixed-dim#9aaead

on-secondary-fixed#122a29

on-secondary-fixed-variant#506967

tertiary-fixed#e8c489

tertiary-fixed-dim#795115

on-tertiary-fixed#060c0d

on-tertiary-fixed-variant#795115

background#060c0d

on-background#f0f8f7

surface-variant#192729

Typography

display: fontFamily: Urbanist · fontSize: 102.4px · fontWeight: 500 · lineHeight: 104.448px · letterSpacing: -6.144px
headline-lg: fontFamily: Urbanist · fontSize: 64px · fontWeight: 500 · lineHeight: 70px · letterSpacing: -2.56px
headline-md: fontFamily: Urbanist · fontSize: 32px · fontWeight: 500 · lineHeight: 35.84px · letterSpacing: -1.28px
title-lg: fontFamily: Urbanist · fontSize: 24px · fontWeight: 600 · lineHeight: 30px
body-lg: fontFamily: Urbanist · fontSize: 18px · fontWeight: 400 · lineHeight: 28px
body-md: fontFamily: Urbanist · fontSize: 16px · fontWeight: 400 · lineHeight: 25.6px
label-md: fontFamily: Urbanist · fontSize: 14px · fontWeight: 600 · lineHeight: 22.4px
label-sm: fontFamily: Urbanist · fontSize: 10px · fontWeight: 600 · lineHeight: 14px · letterSpacing: 0.16em

Design guidance

Overview

Ocnif positions itself as a coordinated AI security team: analyst, remediation and verifier agents that work from evidence the user supplies. The aesthetic is Dark Evidence Minimalism, a near-black canvas (#060c0d) lit by a single bioluminescent teal accent (#32d5c3) that signals live agent activity. Emotionally the UI aims for calm command-center control rather than alarm.

Tone is declarative and short, with full stops that land like verdicts: "From signal to certainty." "Every conclusion needs evidence." Vocabulary favors evidence, review, approve and trail, and promises human control at every step. Example sentence: "Review the proposed fix. Nothing runs until you approve it."

Colors

Primary (#32d5c3) is the signature teal used on the primary CTA, the brand mark, live-connection indicators, active agent icons and focus borders. Its text sits on #022a27 (on-primary) for a contrast ratio above 9:1. Secondary (#9aaead) is the muted slate used for body copy, nav links and metadata; it never fills a surface. Tertiary (#e8c489) is a warm amber reserved for warnings. Error (#f49c9c) is a soft coral for danger states.

Surface stacking runs from #060c0d (page) to #0b1517 (sidebar), #101c1e (cards) and #192729 (raised controls and hovered rows). Borders use #304043 at 1px. Teal glow is the only gradient-like effect: apply box-shadow 0 0 8px #32d5c3 to live indicators and 0 0 20px #32d5c330 to active agent icons.

Typography

A single geometric sans, Urbanist, carries the whole system. Display sits at 102.4px with weight 500 and letter-spacing -6.144px (-0.06em), producing tight, editorial headlines that read as statements. Headline-md at 32px uses -0.04em tracking. Body is 16px at line-height 1.6 (25.6px), and labels are 14px weight 600. Eyebrow labels are the only uppercase element: 10px, letter-spacing 0.16em, teal, weight 600. Use weight 500 for headlines and reserve 600 for interactive text so emphasis tracks function.

Layout

The layout is a fluid, centered container capped at 1152px with 24px gutters (gutter spacing) and 24px outer margin (lg). Sections separate with 96px vertical rhythm, and the hero splits into a two-column grid of copy and visual at roughly 5:7. Use xl (32px) spacing between related blocks and lg (24px) inside cards. Whitespace is generous; the hero leaves roughly 120px of air above the eyebrow.

Elevation & Depth

Depth comes from luminous halos and 1px hairlines, not drop shadows. Level 1 (base): #060c0d flat page. Level 2 (card): background #101c1e, border 1px solid #304043, box-shadow 0 0 20px #32d5c330 when active. Level 3 (floating panel): background #192729, border 1px solid #304043 with box-shadow 0 0 60px #25bfa022. Floating role strips and the install prompt use Level 3.

Shapes

Shape philosophy: Soft-Technical. Pill geometry (border-radius 9999px) is the default for buttons and badges, giving the CTA a capsule feel. Cards use 24px radius, feature panels 32px, inputs and composers 16px, and small inline surfaces (chat list items, trace rows) 12px. The brand mark is a 50% circle. The rule: interactive controls are pills, containers are rounded rectangles.

Components

Action Elements The primary button is a teal pill, 48px tall with 12px 20px padding, weight 600 at 14px. On hover it lifts translateY(-1px) over a 200ms transition on background and transform. Secondary buttons use #192729 fill with a 1px #304043 border. Ghost buttons carry no fill and shift to #192729 on hover.

Containers & Surfaces Feature cards use #101c1e, 24px radius, 1px #304043 border and 24px padding. Hover lifts the background to #192729 over 200ms. The floating evidence card uses the Level 3 treatment with a 32px radius and a teal halo.

Inputs & Interaction The composer uses a 16px radius, 1px #304043 border and a 12px-padded body. On focus-within, the border switches to #32d5c3 with no outer ring. Placeholder text is #9aaead. Status dots are 4px circles that glow w

Do's and Don'ts

**Do**

Use teal #32d5c3 only on the primary action, live state and brand mark so it keeps its signal value.
Set headlines at weight 500 with negative tracking of -0.04em to -0.06em.
Keep buttons as 9999px pills and cards at 24px radius.
Lift interactive surfaces with translateY(-1px) over 200ms rather than adding shadows.

**Don't**

Don't fill large areas with teal; the accent should appear in small doses.
Don't use drop shadows heavier than 0 0 60px at 13% alpha; glow replaces elevation.
Don't introduce a second saturated hue; amber and coral are reserved for status.
Don't use uppercase for anything except the 10px eyebrow labels.

---
version: alpha
name: Ocnif
description: >-
  Ocnif is a coordinated AI security team that investigates supplied evidence, explains risk and keeps humans in
  control. The brand speaks through a dark, teal-lit, evidence-first interface.
logo:
  src: https://ocnif-web.mangopebble-6a7d3db2.swedencentral.azurecontainerapps.io/icon.svg
  srcDark: https://ocnif-web.mangopebble-6a7d3db2.swedencentral.azurecontainerapps.io/icon.svg
colors:
  surface: '#060c0d'
  surface-dim: '#060c0d'
  surface-bright: '#192729'
  surface-container-lowest: '#060c0d'
  surface-container-low: '#0b1517'
  surface-container: '#101c1e'
  surface-container-high: '#192729'
  surface-container-highest: '#304043'
  on-surface: '#f0f8f7'
  on-surface-variant: '#9aaead'
  inverse-surface: '#f0f5f3'
  inverse-on-surface: '#122a29'
  outline: '#9aaead'
  outline-variant: '#304043'
  surface-tint: '#32d5c3'
  primary: '#32d5c3'
  on-primary: '#022a27'
  primary-container: '#113c38'
  on-primary-container: '#f0f8f7'
  inverse-primary: '#087c71'
  secondary: '#9aaead'
  on-secondary: '#060c0d'
  secondary-container: '#192729'
  on-secondary-container: '#f0f8f7'
  tertiary: '#e8c489'
  on-tertiary: '#060c0d'
  tertiary-container: '#795115'
  on-tertiary-container: '#ffffff'
  error: '#f49c9c'
  on-error: '#060c0d'
  error-container: '#a72929'
  on-error-container: '#ffffff'
  primary-fixed: '#cfe9e3'
  primary-fixed-dim: '#32d5c3'
  on-primary-fixed: '#022a27'
  on-primary-fixed-variant: '#087c71'
  secondary-fixed: '#bdcfca'
  secondary-fixed-dim: '#9aaead'
  on-secondary-fixed: '#122a29'
  on-secondary-fixed-variant: '#506967'
  tertiary-fixed: '#e8c489'
  tertiary-fixed-dim: '#795115'
  on-tertiary-fixed: '#060c0d'
  on-tertiary-fixed-variant: '#795115'
  background: '#060c0d'
  on-background: '#f0f8f7'
  surface-variant: '#192729'
typography:
  display:
    fontFamily: Urbanist
    fontSize: 102.4px
    fontWeight: 500
    lineHeight: 104.448px
    letterSpacing: '-6.144px'
  headline-lg:
    fontFamily: Urbanist
    fontSize: 64px
    fontWeight: '500'
    lineHeight: 70px
    letterSpacing: '-2.56px'
  headline-md:
    fontFamily: Urbanist
    fontSize: 32px
    fontWeight: 500
    lineHeight: 35.84px
    letterSpacing: '-1.28px'
  title-lg:
    fontFamily: Urbanist
    fontSize: 24px
    fontWeight: '600'
    lineHeight: 30px
  body-lg:
    fontFamily: Urbanist
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
  body-md:
    fontFamily: Urbanist
    fontSize: 16px
    fontWeight: 400
    lineHeight: 25.6px
  label-md:
    fontFamily: Urbanist
    fontSize: 14px
    fontWeight: 600
    lineHeight: 22.4px
  label-sm:
    fontFamily: Urbanist
    fontSize: 10px
    fontWeight: '600'
    lineHeight: 14px
    letterSpacing: 0.16em
rounded:
  sm: 12px
  DEFAULT: 16px
  md: 24px
  lg: 24px
  xl: 32px
  full: 9999px
spacing:
  unit: 4px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  gutter: 24px
  container-max: 1152px
elevation:
  sm: '0 0 8px #32d5c3'
  md: '0 0 20px #32d5c330'
  lg: '0 0 60px #25bfa022'
layout:
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: 12px 20px
    height: 48px
  button-primary-hover:
    backgroundColor: '{colors.primary-fixed-dim}'
    textColor: '{colors.on-primary}'
    transform: translateY(-1px)
  button-secondary:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.on-surface}'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: 12px 20px
    height: 48px
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-highest}'
  button-ghost:
    backgroundColor: transparent
    textColor: '{colors.on-surface-variant}'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
  button-ghost-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.on-surface}'
  card:
    backgroundColor: '{colors.surface-container}'
    textColor: '{colors.on-surface}'
    rounded: '{rounded.md}'
    padding: '{spacing.lg}'
    border: 1px solid {colors.outline-variant}
  card-hover:
    backgroundColor: '{colors.surface-container-high}'
  input-field:
    backgroundColor: '{colors.surface-container-low}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.md}'
  input-field-focus:
    borderColor: '{colors.primary}'
  list-item:
    backgroundColor: transparent
    textColor: '{colors.on-surface-variant}'
    rounded: '{rounded.sm}'
    padding: '{spacing.sm}'
  list-item-active:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-surface}'
  badge:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.primary}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: '{spacing.xs}'
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
The primary button is a teal pill, 48px tall with 12px 20px padding, weight 600 at 14px. On hover it lifts translateY(-1px) over a 200ms transition on background and transform. Secondary buttons use #192729 fill with a 1px #304043 border. Ghost buttons carry no fill and shift to #192729 on hover.

### Containers & Surfaces
Feature cards use #101c1e, 24px radius, 1px #304043 border and 24px padding. Hover lifts the background to #192729 over 200ms. The floating evidence card uses the Level 3 treatment with a 32px radius and a teal halo.

### Inputs & Interaction
The composer uses a 16px radius, 1px #304043 border and a 12px-padded body. On focus-within, the border switches to #32d5c3 with no outer ring. Placeholder text is #9aaead. Status dots are 4px circles that glow w

## Do's and Don'ts

**Do**
- Use teal #32d5c3 only on the primary action, live state and brand mark so it keeps its signal value.
- Set headlines at weight 500 with negative tracking of -0.04em to -0.06em.
- Keep buttons as 9999px pills and cards at 24px radius.
- Lift interactive surfaces with translateY(-1px) over 200ms rather than adding shadows.

**Don't**
- Don't fill large areas with teal; the accent should appear in small doses.
- Don't use drop shadows heavier than 0 0 60px at 13% alpha; glow replaces elevation.
- Don't introduce a second saturated hue; amber and coral are reserved for status.
- Don't use uppercase for anything except the 10px eyebrow labels.

Edit, then copy or download.