Skip to content
Octane Design
Library
Librarydark
octane originaldarkfeatured

Signal Archive

Signal Archive landing page with geometric type and brutalist architecture
Export
---
name: "Signal Archive"
mode: "dark"
---

# Signal Archive

## Visual theme and atmosphere
Monochrome, exacting, architectural, and quietly kinetic.

A cold, architectural system for technical products and cultural archives.

## Color palette and roles
- **Archive Black (#0B0C0C)**: Primary canvas and immersive surfaces.
- **Chalk (#E9EAE6)**: Primary text and high-contrast controls.
- **Signal Lime (#B4CE32)**: Single accent for action and state.
- **Graphite (#242625)**: Raised surfaces and dividers.
- **Dust (#989C96)**: Metadata and secondary text.

## Typography rules
- **Display XL**: Geist, 650, clamp(4rem, 9vw, 9rem). Short architectural headlines.
- **Body MD**: Geist, 430, 16px. Editorial body copy.
- **Label SM**: JetBrains Mono, 500, 11px. Navigation and system metadata.

## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 20px.
- Section padding: 72px.
- Card corners: 2px.
- Control corners: 4px.
- Pills: 999px.

## Motion
Use restrained motion. Fast feedback lasts 140ms; composed transitions last 420ms; easing is cubic-bezier(0.16, 1, 0.3, 1).

## Guardrails
- Use Signal Lime only for action, selection, or live state.
- Preserve hard alignment and large typographic contrast.
- Keep photography monochrome and structurally composed.
- Collapse asymmetry into a strict single column below 768px.
---
name: "Signal Archive"
mode: "dark"
---

# Signal Archive

## Visual theme and atmosphere
Monochrome, exacting, architectural, and quietly kinetic.

A cold, architectural system for technical products and cultural archives.

## Color palette and roles
- **Archive Black (#0B0C0C)**: Primary canvas and immersive surfaces.
- **Chalk (#E9EAE6)**: Primary text and high-contrast controls.
- **Signal Lime (#B4CE32)**: Single accent for action and state.
- **Graphite (#242625)**: Raised surfaces and dividers.
- **Dust (#989C96)**: Metadata and secondary text.

## Typography rules
- **Display XL**: Geist, 650, clamp(4rem, 9vw, 9rem). Short architectural headlines.
- **Body MD**: Geist, 430, 16px. Editorial body copy.
- **Label SM**: JetBrains Mono, 500, 11px. Navigation and system metadata.

## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 20px.
- Section padding: 72px.
- Card corners: 2px.
- Control corners: 4px.
- Pills: 999px.

## Motion
Use restrained motion. Fast feedback lasts 140ms; composed transitions last 420ms; easing is cubic-bezier(0.16, 1, 0.3, 1).

## Guardrails
- Use Signal Lime only for action, selection, or live state.
- Preserve hard alignment and large typographic contrast.
- Keep photography monochrome and structurally composed.
- Collapse asymmetry into a strict single column below 768px.
---
name: "Signal Archive"
mode: "dark"
---

# Signal Archive

## Visual theme and atmosphere
Monochrome, exacting, architectural, and quietly kinetic.

A cold, architectural system for technical products and cultural archives.

## Color palette and roles
- **Archive Black (#0B0C0C)**: Primary canvas and immersive surfaces.
- **Chalk (#E9EAE6)**: Primary text and high-contrast controls.
- **Signal Lime (#B4CE32)**: Single accent for action and state.
- **Graphite (#242625)**: Raised surfaces and dividers.
- **Dust (#989C96)**: Metadata and secondary text.

## Typography rules
- **Display XL**: Geist, 650, clamp(4rem, 9vw, 9rem). Short architectural headlines.
- **Body MD**: Geist, 430, 16px. Editorial body copy.
- **Label SM**: JetBrains Mono, 500, 11px. Navigation and system metadata.

## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 20px.
- Section padding: 72px.
- Card corners: 2px.
- Control corners: 4px.
- Pills: 999px.

## Motion
Use restrained motion. Fast feedback lasts 140ms; composed transitions last 420ms; easing is cubic-bezier(0.16, 1, 0.3, 1).

## Guardrails
- Use Signal Lime only for action, selection, or live state.
- Preserve hard alignment and large typographic contrast.
- Keep photography monochrome and structurally composed.
- Collapse asymmetry into a strict single column below 768px.
---
name: "Signal Archive"
mode: "dark"
---

# Signal Archive

## Visual theme and atmosphere
Monochrome, exacting, architectural, and quietly kinetic.

A cold, architectural system for technical products and cultural archives.

## Color palette and roles
- **Archive Black (#0B0C0C)**: Primary canvas and immersive surfaces.
- **Chalk (#E9EAE6)**: Primary text and high-contrast controls.
- **Signal Lime (#B4CE32)**: Single accent for action and state.
- **Graphite (#242625)**: Raised surfaces and dividers.
- **Dust (#989C96)**: Metadata and secondary text.

## Typography rules
- **Display XL**: Geist, 650, clamp(4rem, 9vw, 9rem). Short architectural headlines.
- **Body MD**: Geist, 430, 16px. Editorial body copy.
- **Label SM**: JetBrains Mono, 500, 11px. Navigation and system metadata.

## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 20px.
- Section padding: 72px.
- Card corners: 2px.
- Control corners: 4px.
- Pills: 999px.

## Motion
Use restrained motion. Fast feedback lasts 140ms; composed transitions last 420ms; easing is cubic-bezier(0.16, 1, 0.3, 1).

## Guardrails
- Use Signal Lime only for action, selection, or live state.
- Preserve hard alignment and large typographic contrast.
- Keep photography monochrome and structurally composed.
- Collapse asymmetry into a strict single column below 768px.
---
name: "Signal Archive"
mode: "dark"
---

# Signal Archive

## Visual theme and atmosphere
Monochrome, exacting, architectural, and quietly kinetic.

A cold, architectural system for technical products and cultural archives.

## Color palette and roles
- **Archive Black (#0B0C0C)**: Primary canvas and immersive surfaces.
- **Chalk (#E9EAE6)**: Primary text and high-contrast controls.
- **Signal Lime (#B4CE32)**: Single accent for action and state.
- **Graphite (#242625)**: Raised surfaces and dividers.
- **Dust (#989C96)**: Metadata and secondary text.

## Typography rules
- **Display XL**: Geist, 650, clamp(4rem, 9vw, 9rem). Short architectural headlines.
- **Body MD**: Geist, 430, 16px. Editorial body copy.
- **Label SM**: JetBrains Mono, 500, 11px. Navigation and system metadata.

## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 20px.
- Section padding: 72px.
- Card corners: 2px.
- Control corners: 4px.
- Pills: 999px.

## Motion
Use restrained motion. Fast feedback lasts 140ms; composed transitions last 420ms; easing is cubic-bezier(0.16, 1, 0.3, 1).

## Guardrails
- Use Signal Lime only for action, selection, or live state.
- Preserve hard alignment and large typographic contrast.
- Keep photography monochrome and structurally composed.
- Collapse asymmetry into a strict single column below 768px.

Overview

A cold, architectural system for technical products and cultural archives.

Monochrome, exacting, architectural, and quietly kinetic.

Color palette

5 semantic roles

Archive Black

#0B0C0C

Chalk

#E9EAE6

Signal Lime

#B4CE32

Graphite

#242625

Dust

#989C96

Specification

Type scale · Fonts · Spacing & Shape · Guidelines

  1. Display XLclamp(4rem, 9vw, 9rem) · 650 · —

    The quick brown fox jumps

  2. Body MD16px · 430 · —

    The quick brown fox jumps

  3. Label SM11px · 500 · —

    The quick brown fox jumps

Display XL

Geist

Weight
650
Sizes
clamp(4rem, 9vw, 9rem)
Line height
—
Letter spacing
—
Fallback
system-ui

Short architectural headlines

Body MD

Geist

Weight
430
Sizes
16px
Line height
—
Letter spacing
—
Fallback
system-ui

Editorial body copy

Label SM

JetBrains Mono

Weight
500
Sizes
11px
Line height
—
Letter spacing
—
Fallback
system-ui

Navigation and system metadata

Spacing

Base unit
8px
Element gap
16px
Card padding
20px
Section gap
72px

Border Radius

cards
2px
controls
4px
pills
999px
  • Use Signal Lime only for action, selection, or live state.
  • Preserve hard alignment and large typographic contrast.
  • Keep photography monochrome and structurally composed.
  • Collapse asymmetry into a strict single column below 768px.

    Templates

    4 page patterns

    Hero / Landing5 patterns

    Full marketing landing page with sticky nav, centered hero, stats bar, feature cards, CTA banner, and footer. Fully responsive.

    navigationherostats barfeature gridcta banner

    Related systems

    Claude AI interface with warm parchment tones

    Claude

    Warm parchment printed artifact — ink on bone paper, clay as the only chromatic breath.

    light
    Anthropic website with ivory paper and clay accent

    Anthropic

    Scientific field journal on warm parchment — ivory surfaces, editorial serif, single clay accent.

    light
    ElevenLabs voice AI with warm eggshell tones

    ElevenLabs

    Bauhaus studio notebook — eggshell paper, black ink, violet and orange sparks for product moments.

    light