Skip to content
DesignMunkDesignMunk Submit a site

Armory About

armory.in
Weareredefiningthedefence—Because Sovereignty isn’t given. It’s built.
Security Technology Webflow About Jetbrainsmono Sintony
Share Visit site
armory.in DESKTOP · 1440
Armory About

AI Breakdown

Design export

# Design brief: the Armory About design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/10163447/armory-about-1440x8438.webp
- Above the fold: https://cdn.designmunk.com/2026/09/10163447/armory-about.webp
- On DesignMunk: https://designmunk.com/armory-about-page/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Armory: Blackout Interface with Monospace War-Room Headlines

## Overview

Armory's UI is austere, high-contrast and mission-driven. It targets defence decision-makers and engineering talent, prioritising clarity over ornament. The experience is dark mode by default with sparse orange accents to signal action. Layouts feel spacious in vertical rhythm but dense in typographic tone, producing a serious, operational mood.

## Colors

- **primary (#ffffff):** Primary text and iconography on dark surfaces.
- **secondary (#7c7b7e):** Muted supporting text, timestamps, and low-priority metadata.
- **tertiary (#ff4d17):** Accent for CTAs, status pips, and interactive highlights.
- **neutral (#000000):** Global background and hero overlays.
- **border (#374151):** Subtle separators, card outlines, and section dividers.
- **brand-baltic-sea (#3c3b3f):** Alternate dark panels or header strips when differentiation is needed.
- **brand-liselotte-syrup (#d5510c):** Deeper accent for hover/active states related to the primary orange.
- **brand-meatloaf (#652d0d):** Dark orange-brown for pressed states or subdued warning chips.
- **surface (#000000):** Canonical surface color; identical to neutral for consistency.
- **on-surface (#ffffff):** Text/icon color on surface; mirrors primary for predictable contrast.

## Typography

- Headlines use Jetbrainsmono at 500, in sizes 64px (headline-lg), 49px (headline-md), and 38px (headline-sm). The monospace feel communicates engineering precision and pairs well with the dark theme. Font source is self-hosted (type: custom); agents should not assume access. Substitutes: IBM Plex Mono, Roboto Mono, Space Mono.
- Secondary headings and body copy use Sintony (Google Fonts) at 29px for headline-xs and 22.4px for body-md, typically at 400. Sintony is freely available and can be loaded directly; safe fallbacks: system-ui, Arial, Helvetica, sans-serif.
- Letterspacing in headlines is modestly negative, keeping large titles compact; maintain line-heights from tokens (1.2–1.57) for readable blocks over dark backgrounds.

## Layout

- Spacing scale favors decisive vertical rhythm: xs 12px, sm 20px, md 40px, lg 64px, xl 160px.
- Use xl for hero top/bottom padding, lg for section breaks, md for intra-section grouping, and sm/xs for compact UI controls.
- Build responsive sections with one to three columns; give text comfortable widths and reserve xl spacing for moments of emphasis like mission statements or CTAs.
- Gaps and paddings should reference the scale; avoid ad-hoc values to preserve the page's disciplined cadence.

## Elevation & Depth

- All measured shadows are none. Depth is conveyed through contrast, thin borders in #374151, and tonal panels (brand-baltic-sea) against the #000000 surface.
- Use whitespace from the spacing scale to separate content groups; introduce borders when adjacent dark panels need clearer edges.
- Active/hover states rely on accent color changes rather than blur or shadow.

## Shapes

- Buttons are deliberately square: 0px radius for primary/secondary/link.
- Cards and content containers use rounded.sm at 8px, providing a soft counterpoint to square controls.
- Use square shapes for actions (decisive, tool-like) and 8px for information surfaces (readability, grouping). Avoid mixing radii within the same component.

## Components

- Buttons
  - Primary: background #ff4d17, text #ffffff, 0px radius, 35px height, 9px 18px padding. Use for main CTAs.
  - Secondary: same spec as primary; apply when hierarchy requires multiple actions, with opacity or brightness adjustments via states rather than size.
  - Link button: text #ffffff, 0px radius; reserve the orange accent for hover/active underlines.
- Card
  - Background #000000, text #ffffff, 8px radius, 16px padding. Add a #374151 border when placed on another dark surface for separation.

### Top Navigation Bar
- Background: #000000. Text: #ffffff using body-md (22.4px). Spacing: sm (20px) vertical, md (40px) horizontal. Key links (Contact, Careers) remain text links; avoid button styling. Use a 1px #374151 bottom border on scroll.

### Hero Masthead
- Full-bleed media with center-aligned copy. Title in JetBrains-style headline-md (49px, 500), body in Sintony body-md (22.4px). Primary button uses #ff4d17; place with md (40px) gap from the paragraph.

### Section Tag ("THE CHALLENGE")
- Compact label preceding sections. Text: #ffffff in Sintony body-md. 0px radius, 1px border in #374151, internal padding xs (12px). Optional left accent dot in #ff4d17.

### Stacked Letter Headline
- Decorative display for mission statements where letters appear on separate lines. Use headline-sm (38px) in Jetbrainsmono, #ffffff. Keep ample lg (64px) top/bottom spacing and do not rely on this style for essential wayfinding.

### Our Experts Grid
- Grid of person cards using the card spec (8px radius, 16px padding). Name in headline-xs (29px, 500) and roles/body in body-md (22.4px). Use #374151 borders between cards when on black.

### Dispatch Signup
- Newsletter module on #000000 or brand-baltic-sea (#3c3b3f). Heading in headline-sm; input and submit stacked with md (40px) gap. Submit uses primary button spec; confirm states retain #ff4d17.

### Location Panel
- Content block with headline-xs for the title and body-md for address lines. Use a card with 8px radius; add a #374151 border when the background is also black.

### Footer
- Multi-column list in body-md. Top border #374151, section gaps lg (64px). Links are button-link style (#ffffff) with orange hover decoration only.

## Do's and Don'ts

- Do reserve #ff4d17 for primary actions, alerts, or active states; overuse dilutes its function.
- Do keep buttons square (0px radius) and cards at 8px; don't mix radii within a single element.
- Do add a #374151 border when placing dark cards on dark surfaces; don't introduce shadows.
- Do use JetBrains-style monospace for major headlines; if unavailable, switch the entire headline tier to a single mono substitute.
- Don't center long paragraphs; keep to readable line lengths and left align beyond one or two sentences.
- Don't invent new greys; use #3c3b3f or #374151 for panels and borders.

## Agent Prompt Guide

Quick color reference
- Text: #ffffff
- Background: #000000
- Border: #374151
- Accent: #ff4d17

1) Build the hero
"Create a full-width hero on #000000. Center a headline in JetBrains Mono (or IBM Plex Mono fallback) at 49px, weight 500, line-height 1.57, color #ffffff. Add a supporting paragraph in Sintony 22.4px/1.52, #ffffff at 80% opacity. Place a primary CTA below with background #ff4d17, text #ffffff, height 35px, padding 9px 18px, border-radius 0px. Use md (40px) gap between text and button and xl (160px) vertical padding."

2) Top navigation
"Set a sticky nav on #000000 with a 1px bottom border #374151. Use Sintony 22.4px for links in #ffffff. Apply vertical padding sm (20px) and horizontal md (40px). Do not use filled buttons; keep links as text with #ff4d17 hover underline."

3) Card grid for 'Our Experts'
"Create a 3-column responsive grid of cards. Each card: background #000000, text #ffffff, border 1px #374151, border-radius 8px, padding 16px. Name in JetBrains Mono (or IBM Plex Mono) 29px/1.21 weight 500; role and description in Sintony 22.4px/1.52. Grid gap md (40px)."

4) Section tag + heading
"Insert a compact label before sections: text #ffffff, 1px border #374151, padding xs (12px), radius 0px. Below it, set the section heading in JetBrains Mono 38px/1.21 weight 500, color #ffffff. Use lg (64px) spacing above and md (40px) below."

5) Newsletter ('Dispatch') bar
"Place a full-width panel using #3c3b3f. Title in JetBrains Mono 38px/1.21 #ffffff. Input field 100% width with 1px border #374151, 8px radius, padding sm (20px). Submit button uses primary spec (#ff4d17, #ffffff, 35px height, 9px 18px, 0px radius). Gaps md (40px) and section padding lg (64px)."

## Similar Brands

- Anduril: Dark, high-contrast defence aesthetic with orange accents; Anduril leans heavier on 3D visuals, while Armory is more typographic and sparse.
- Palantir: Utilitarian dark UI and mono-leaning type; Palantir uses more greyscale layering, Armory opts for near-pure black backgrounds.
- Skydio: Technical tone with crisp CTAs; Skydio uses brighter photography and rounded buttons, Armory stays square and minimal.
- Darktrace: Security brand with dark palettes and neon accents; Armory's accent is warmer (#ff4d17) and used more sparingly.
- SpaceX: Black/white discipline and engineering focus; SpaceX employs wider sans headlines, Armory commits to monospace for its identity.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #ffffff;
  --color-secondary: #7c7b7e;
  --color-tertiary: #ff4d17;
  --color-neutral: #000000;
  --color-border: #374151;
  --color-brand-baltic-sea: #3c3b3f;
  --color-brand-liselotte-syrup: #d5510c;
  --color-brand-meatloaf: #652d0d;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 64px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1.2;
  --text-headline-lg-tracking: -0.015em;
  --text-headline-md-size: 49px;
  --text-headline-md-weight: 500;
  --text-headline-md-leading: 1.57;
  --text-headline-md-tracking: -0.026em;
  --text-headline-sm-size: 38px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1.21;
  --text-headline-sm-tracking: -0.017em;
  --text-headline-xs-size: 29px;
  --text-headline-xs-weight: 500;
  --text-headline-xs-leading: 1.21;
  --text-body-md-size: 22.4px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.52;
  --font-jetbrainsmono: "Jetbrainsmono";
  --font-sintony: "Sintony";

  /* Rounded */
  --radius-sm: 8px;

  /* Spacing */
  --spacing-xs: 12px;
  --spacing-sm: 20px;
  --spacing-md: 40px;
  --spacing-lg: 64px;
  --spacing-xl: 160px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: 0px;
  --button-primary-padding: 9px 18px;
  --button-primary-height: 35px;
  --button-secondary-background-color: var(--color-tertiary);
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: 0px;
  --button-secondary-padding: 9px 18px;
  --button-secondary-height: 35px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #ffffff;
  --color-secondary: #7c7b7e;
  --color-tertiary: #ff4d17;
  --color-neutral: #000000;
  --color-border: #374151;
  --color-brand-baltic-sea: #3c3b3f;
  --color-brand-liselotte-syrup: #d5510c;
  --color-brand-meatloaf: #652d0d;
  --color-surface: #000000;
  --color-on-surface: #ffffff;
  --font-headline-lg: "Jetbrainsmono";
  --font-headline-md: "Jetbrainsmono";
  --font-headline-sm: "Jetbrainsmono";
  --font-headline-xs: "Sintony";
  --font-body-md: "Sintony";
  --text-headline-lg: 64px;
  --text-headline-md: 49px;
  --text-headline-sm: 38px;
  --text-headline-xs: 29px;
  --text-body-md: 22.4px;
  --tracking-headline-lg: -0.015em;
  --tracking-headline-md: -0.026em;
  --tracking-headline-sm: -0.017em;
  --font-weight-headline-lg: 500;
  --font-weight-headline-md: 500;
  --font-weight-headline-sm: 500;
  --font-weight-headline-xs: 500;
  --font-weight-body-md: 400;
  --radius-sm: 8px;
  --spacing-xs: 12px;
  --spacing-sm: 20px;
  --spacing-md: 40px;
  --spacing-lg: 64px;
  --spacing-xl: 160px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.486,
                    0.482,
                    0.494
                ],
                "hex": "#7c7b7e"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    0.302,
                    0.09
                ],
                "hex": "#ff4d17"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.216,
                    0.255,
                    0.318
                ],
                "hex": "#374151"
            }
        },
        "brand-baltic-sea": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.235,
                    0.231,
                    0.247
                ],
                "hex": "#3c3b3f"
            }
        },
        "brand-liselotte-syrup": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.835,
                    0.318,
                    0.047
                ],
                "hex": "#d5510c"
            }
        },
        "brand-meatloaf": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.396,
                    0.176,
                    0.051
                ],
                "hex": "#652d0d"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 12,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 20,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 64,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 160,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Jetbrainsmono",
                "fontSize": {
                    "value": 64,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.015,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Jetbrainsmono",
                "fontSize": {
                    "value": 49,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.026,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Jetbrainsmono",
                "fontSize": {
                    "value": 38,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.017,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Sintony",
                "fontSize": {
                    "value": 29,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Sintony",
                "fontSize": {
                    "value": 22.4,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Armory About**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse Security →
cotool.ai
Cotool AI
Cotool
cloaked.com
Cloaked Pricing Security
Cloaked Pricing
flite.bike
Flite Logistics & Mobility
Flite
cloaked.com
Cloaked Security
Cloaked