Nominal About

# Design brief: the Nominal 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/10160027/nominal-io-about-us-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/10160027/nominal-io-about-us-featured.webp
- On DesignMunk: https://designmunk.com/nominal-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

# Nominal: Industrial dark mode with monospace body copy

## Overview

Nominal's UI is engineered for confidence under constraints: dark mode by default, high-contrast text, minimal color, and typography that reads like tooling. The audience is hardware and data engineers, program leaders, and government stakeholders who value precision over flourish. Pages should feel serious, calm, and efficient, with dense information organized into predictable bands and cards. When in doubt, prioritize clarity, left alignment, and generous vertical spacing over ornament.

## Colors

- Primary (#ffffff): White for headlines, body text, and iconography on dark surfaces.
- Secondary (#7c7c7c): Muted auxiliary text and de-emphasis on dark backgrounds.
- Tertiary (#357f46): Functional accent for success states, highlights, and sparing emphasis.
- Neutral (#000000): Core background and section surfaces in dark mode.
- Border (#374151): Subtle dividers, table rules, and outlines instead of shadows.
- Brand-unique-grey (#c9c9c9): Mid-level text and subdued UI chrome where secondary is too dark.
- Surface ({colors.neutral} -> #000000): Page and card surfaces.
- On-surface ({colors.primary} -> #ffffff): Default text and icon color placed on surface.

## Typography

- Muoto (custom): Used for headline-lg 64px/1.0/-0.03em, headline-md 52px/1.1/-0.03em, headline-sm 24px/1.2/-0.02em. Proprietary/self-hosted; an agent cannot load it directly. Recommended substitutes: IBM Plex Sans, Barlow, or Sora for a similarly engineered, industrial sans.
- Inter (Google): Used for headline-xs 18px/1.22 and utility labels. Freely available via Google Fonts; safe to load. Acceptable fallbacks: system-ui, Segoe UI, Roboto, Helvetica Neue.
- Fraktion Mono (custom): Used for body-md 14px/1.5. Proprietary/self-hosted; an agent cannot load it directly. Recommended substitutes: IBM Plex Mono, JetBrains Mono, or Space Mono to preserve the technical mono tone.
Roles: Headlines carry hierarchy via Muoto's tight tracking; labels use Inter for legibility at small sizes; all narrative and metadata use the 14px mono to signal data-first rigor.

## Layout

Spacing scales define rhythm: xs 8px for micro gaps, sm 16px for card padding and grid gutters, md 40px for section content spacing, lg 72px for band-to-band separation, xl 96px for hero and key section padding. Use a simple multi-column layout that collapses to a single column on small screens; align text left and keep generous outer margins. Dividers in #374151 establish section breaks when whitespace alone is insufficient.

## Elevation & Depth

All measured shadows are none. Depth is communicated through contrast (black surface, white text), thin #374151 borders, and spacing. Cards separate content via 8px radius and 16px internal padding rather than elevation. Use tonal hierarchy and rules, not blurs or glows.

## Shapes

Cards use rounded.sm at 8px for a softened container on a hard canvas. Buttons and links are intentionally 0px radius for a precise, industrial read. Maintain this contrast—square actions, slightly rounded containers—to communicate affordance and hierarchy.

## Components

Buttons and card are canonical; additional components below reflect this page.

- Button Primary: Text color #ffffff on #000 surface, 0px radius, 12px×16px padding, 41px fixed height. Use for key CTAs like Request a Demo.
- Button Secondary: Same geometry as primary; pair with primary in dual-CTA rows. Use border #374151 when an outline is required.
- Button Link: Text-only action at #ffffff with 0px radius; reserve for lightweight navigation like social/profile links.
- Card: Background #000000, text #ffffff, 8px radius, 16px padding. Employ for people, press, and blog promos.

### Global Navigation Bar
- Background #000000 with #ffffff text and iconography. Primary CTAs at right using 0px-radius buttons; dividers or underline states in #374151.

### About Hero
- Headline set in headline-lg (64px, -0.03em, lh 1). Supporting copy uses body-md (14px mono). Place primary action (Join or Request) as a square-edged button; maintain xl (96px) top/bottom padding.

### Testimonial Blockquote
- Quote typeset in headline-sm (24px Muoto). Attribution stack uses headline-xs (18px Inter) above the role line in body-md (14px mono). Separate entries with a #374151 rule and md (40px) vertical spacing.

### Team Member Card
- Card container: 8px radius, 16px padding. Name in headline-sm (24px), role in headline-xs (18px), past employers in body-md (14px mono). Inline social links use button-link styling.

### Leadership Grouping
- Section headers (Engineering + Product, Growth) in headline-md (52px). Use sm (16px) gutters between person rows and md (40px) between groups; thin dividers in #374151 as needed.

### Investors Grid
- Logo tiles on #000 with sm (16px) gaps; avoid heavy borders. Use secondary (#7c7c7c) captions if labels are required.

### Press Link Card
- Title in headline-sm (24px), source in body-md (14px mono). Entire row is a link with a #374151 underline or right chevron; md (40px) vertical padding per item.

### Footer
- Multi-column link lists set in body-md mono. Reinforce site CTAs (Contact / Request Demo) using square buttons; apply lg (72px) top padding and #374151 rules.

## Do's and Don'ts

- Do keep surfaces pure #000000 with #ffffff text; use #374151 rules for separation instead of shadows.
- Do reserve #357f46 for success or deliberate emphasis; overuse dilutes the system's restraint.
- Do set narrative and metadata in body-md 14px Fraktion Mono (or mono substitutes) to maintain the technical tone.
- Don't round buttons; actions stay at 0px radius while cards use 8px.
- Don't introduce soft drop shadows or blurred glows—depth is handled by contrast, spacing, and borders.
- Don't mix additional font families; if Muoto/Fraktion are unavailable, use the listed substitutes consistently.

## Agent Prompt Guide

Quick reference — text/background/border/accent:
- Text: #ffffff
- Background: #000000
- Border: #374151
- Accent: #357f46

1) Build the About hero
- Container: background #000000; padding-top/bottom 96px; text color #ffffff.
- H1: Muoto, 64px, weight 400, line-height 1, letter-spacing -0.03em, left-aligned.
- Subcopy: Fraktion Mono, 14px, weight 400, line-height 1.5, max-width 60ch.
- Primary CTA: Button Primary, height 41px, padding 12px 16px, radius 0px, text #ffffff; add 1px outline in #374151 on black.
- Spacing: 40px between copy blocks; 16px between CTA and subcopy.

2) Testimonial strip
- Section padding: 72px top/bottom; divider: 1px solid #374151.
- Quote: Muoto, 24px, lh 1.2, ls -0.02em; color #ffffff.
- Name line: Inter, 18px, lh 1.22; Role line: Fraktion Mono, 14px, lh 1.5.
- Layout: vertical stack with 16px between lines and 40px between testimonials.

3) Team grid
- Each card: background #000000; radius 8px; padding 16px; border: 1px solid #374151 (optional on hover only).
- Name: Muoto, 24px; Role: Inter, 18px; Meta (past experience): Fraktion Mono, 14px.
- Actions: button-link style, text #ffffff, radius 0px. Grid gap: 16px; section gap: 72px.

4) Press list
- Section title: Muoto, 52px, lh 1.1, ls -0.03em, color #ffffff.
- Each item: 40px vertical padding; bottom border 1px #374151.
- Link title: Muoto, 24px; Source/URL: Fraktion Mono, 14px.

5) Dual CTA bar
- Background #000000; padding 40px; text #ffffff.
- Primary and secondary buttons: height 41px; padding 12px 16px; radius 0px; use #374151 outlines; 16px gap between buttons.

## Similar Brands

- Palantir: Dark, industrial palette with restrained accent use; Palantir leans heavier on serif accents, while Nominal keeps a pure sans/mono pair.
- Anduril: High-contrast black UI and defense-oriented tone; Anduril employs bolder, more condensed headings compared to Nominal's looser Muoto.
- Vercel: Minimal black/white developer aesthetic and square buttons; Vercel is more typographically neutral without the monospace body as default.
- HashiCorp: Utilitarian layouts and mono-forward documentation patterns; Nominal is sleeker with larger marketing headlines on dark surfaces.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #ffffff;
  --color-secondary: #7c7c7c;
  --color-tertiary: #357f46;
  --color-neutral: #000000;
  --color-border: #374151;
  --color-brand-unique-grey: #c9c9c9;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 64px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1;
  --text-headline-lg-tracking: -0.03em;
  --text-headline-md-size: 52px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.1;
  --text-headline-md-tracking: -0.03em;
  --text-headline-sm-size: 24px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.2;
  --text-headline-sm-tracking: -0.02em;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 14px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --font-muoto: "muoto";
  --font-inter: "Inter";
  --font-fraktionmono: "fraktionMono";

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

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 40px;
  --spacing-lg: 72px;
  --spacing-xl: 96px;

  /* Components */
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: 0px;
  --button-primary-padding: 12px 16px;
  --button-primary-height: 41px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: 0px;
  --button-secondary-padding: 12px 16px;
  --button-secondary-height: 41px;
  --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: #7c7c7c;
  --color-tertiary: #357f46;
  --color-neutral: #000000;
  --color-border: #374151;
  --color-brand-unique-grey: #c9c9c9;
  --color-surface: #000000;
  --color-on-surface: #ffffff;
  --font-headline-lg: "muoto";
  --font-headline-md: "muoto";
  --font-headline-sm: "muoto";
  --font-headline-xs: "Inter";
  --font-body-md: "fraktionMono";
  --text-headline-lg: 64px;
  --text-headline-md: 52px;
  --text-headline-sm: 24px;
  --text-headline-xs: 18px;
  --text-body-md: 14px;
  --tracking-headline-lg: -0.03em;
  --tracking-headline-md: -0.03em;
  --tracking-headline-sm: -0.02em;
  --font-weight-headline-lg: 400;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 8px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 40px;
  --spacing-lg: 72px;
  --spacing-xl: 96px;
}
```

### 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.486,
                    0.486
                ],
                "hex": "#7c7c7c"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.208,
                    0.498,
                    0.275
                ],
                "hex": "#357f46"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.216,
                    0.255,
                    0.318
                ],
                "hex": "#374151"
            }
        },
        "brand-unique-grey": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.788,
                    0.788,
                    0.788
                ],
                "hex": "#c9c9c9"
            }
        },
        "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": 8,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 72,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 96,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "muoto",
                "fontSize": {
                    "value": 64,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.03,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "muoto",
                "fontSize": {
                    "value": 52,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.03,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "muoto",
                "fontSize": {
                    "value": 24,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.02,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "fraktionMono",
                "fontSize": {
                    "value": 14,
                    "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 Nominal About**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

---
version: alpha
name: Nominal
description: Accelerate analysis and reporting for hardware engineering teams with confidence.
colors:
  primary: "#ffffff"
  secondary: "#7c7c7c"
  tertiary: "#357f46"
  neutral: "#000000"
  border: "#374151"
  brand-unique-grey: "#c9c9c9"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: muoto
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.03em
  headline-md:
    fontFamily: muoto
    fontSize: 52px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.03em
  headline-sm:
    fontFamily: muoto
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.02em
  headline-xs:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.22
  body-md:
    fontFamily: fraktionMono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 8px
spacing:
  xs: 8px
  sm: 16px
  md: 40px
  lg: 72px
  xl: 96px
components:
  button-primary:
    textColor: "{colors.primary}"
    rounded: 0px
    padding: 12px 16px
    height: 41px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: 0px
    padding: 12px 16px
    height: 41px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Nominal: Industrial dark mode with monospace body copy

## Overview

Nominal's UI is engineered for confidence under constraints: dark mode by default, high-contrast text, minimal color, and typography that reads like tooling. The audience is hardware and data engineers, program leaders, and government stakeholders who value precision over flourish. Pages should feel serious, calm, and efficient, with dense information organized into predictable bands and cards. When in doubt, prioritize clarity, left alignment, and generous vertical spacing over ornament.

## Colors

- Primary (#ffffff): White for headlines, body text, and iconography on dark surfaces.
- Secondary (#7c7c7c): Muted auxiliary text and de-emphasis on dark backgrounds.
- Tertiary (#357f46): Functional accent for success states, highlights, and sparing emphasis.
- Neutral (#000000): Core background and section surfaces in dark mode.
- Border (#374151): Subtle dividers, table rules, and outlines instead of shadows.
- Brand-unique-grey (#c9c9c9): Mid-level text and subdued UI chrome where secondary is too dark.
- Surface ({colors.neutral} -> #000000): Page and card surfaces.
- On-surface ({colors.primary} -> #ffffff): Default text and icon color placed on surface.

## Typography

- Muoto (custom): Used for headline-lg 64px/1.0/-0.03em, headline-md 52px/1.1/-0.03em, headline-sm 24px/1.2/-0.02em. Proprietary/self-hosted; an agent cannot load it directly. Recommended substitutes: IBM Plex Sans, Barlow, or Sora for a similarly engineered, industrial sans.
- Inter (Google): Used for headline-xs 18px/1.22 and utility labels. Freely available via Google Fonts; safe to load. Acceptable fallbacks: system-ui, Segoe UI, Roboto, Helvetica Neue.
- Fraktion Mono (custom): Used for body-md 14px/1.5. Proprietary/self-hosted; an agent cannot load it directly. Recommended substitutes: IBM Plex Mono, JetBrains Mono, or Space Mono to preserve the technical mono tone.
Roles: Headlines carry hierarchy via Muoto's tight tracking; labels use Inter for legibility at small sizes; all narrative and metadata use the 14px mono to signal data-first rigor.

## Layout

Spacing scales define rhythm: xs 8px for micro gaps, sm 16px for card padding and grid gutters, md 40px for section content spacing, lg 72px for band-to-band separation, xl 96px for hero and key section padding. Use a simple multi-column layout that collapses to a single column on small screens; align text left and keep generous outer margins. Dividers in #374151 establish section breaks when whitespace alone is insufficient.

## Elevation & Depth

All measured shadows are none. Depth is communicated through contrast (black surface, white text), thin #374151 borders, and spacing. Cards separate content via 8px radius and 16px internal padding rather than elevation. Use tonal hierarchy and rules, not blurs or glows.

## Shapes

Cards use rounded.sm at 8px for a softened container on a hard canvas. Buttons and links are intentionally 0px radius for a precise, industrial read. Maintain this contrast—square actions, slightly rounded containers—to communicate affordance and hierarchy.

## Components

Buttons and card are canonical; additional components below reflect this page.

- Button Primary: Text color #ffffff on #000 surface, 0px radius, 12px×16px padding, 41px fixed height. Use for key CTAs like Request a Demo.
- Button Secondary: Same geometry as primary; pair with primary in dual-CTA rows. Use border #374151 when an outline is required.
- Button Link: Text-only action at #ffffff with 0px radius; reserve for lightweight navigation like social/profile links.
- Card: Background #000000, text #ffffff, 8px radius, 16px padding. Employ for people, press, and blog promos.

### Global Navigation Bar
- Background #000000 with #ffffff text and iconography. Primary CTAs at right using 0px-radius buttons; dividers or underline states in #374151.

### About Hero
- Headline set in headline-lg (64px, -0.03em, lh 1). Supporting copy uses body-md (14px mono). Place primary action (Join or Request) as a square-edged button; maintain xl (96px) top/bottom padding.

### Testimonial Blockquote
- Quote typeset in headline-sm (24px Muoto). Attribution stack uses headline-xs (18px Inter) above the role line in body-md (14px mono). Separate entries with a #374151 rule and md (40px) vertical spacing.

### Team Member Card
- Card container: 8px radius, 16px padding. Name in headline-sm (24px), role in headline-xs (18px), past employers in body-md (14px mono). Inline social links use button-link styling.

### Leadership Grouping
- Section headers (Engineering + Product, Growth) in headline-md (52px). Use sm (16px) gutters between person rows and md (40px) between groups; thin dividers in #374151 as needed.

### Investors Grid
- Logo tiles on #000 with sm (16px) gaps; avoid heavy borders. Use secondary (#7c7c7c) captions if labels are required.

### Press Link Card
- Title in headline-sm (24px), source in body-md (14px mono). Entire row is a link with a #374151 underline or right chevron; md (40px) vertical padding per item.

### Footer
- Multi-column link lists set in body-md mono. Reinforce site CTAs (Contact / Request Demo) using square buttons; apply lg (72px) top padding and #374151 rules.

## Do's and Don'ts

- Do keep surfaces pure #000000 with #ffffff text; use #374151 rules for separation instead of shadows.
- Do reserve #357f46 for success or deliberate emphasis; overuse dilutes the system's restraint.
- Do set narrative and metadata in body-md 14px Fraktion Mono (or mono substitutes) to maintain the technical tone.
- Don't round buttons; actions stay at 0px radius while cards use 8px.
- Don't introduce soft drop shadows or blurred glows—depth is handled by contrast, spacing, and borders.
- Don't mix additional font families; if Muoto/Fraktion are unavailable, use the listed substitutes consistently.

## Agent Prompt Guide

Quick reference — text/background/border/accent:
- Text: #ffffff
- Background: #000000
- Border: #374151
- Accent: #357f46

1) Build the About hero
- Container: background #000000; padding-top/bottom 96px; text color #ffffff.
- H1: Muoto, 64px, weight 400, line-height 1, letter-spacing -0.03em, left-aligned.
- Subcopy: Fraktion Mono, 14px, weight 400, line-height 1.5, max-width 60ch.
- Primary CTA: Button Primary, height 41px, padding 12px 16px, radius 0px, text #ffffff; add 1px outline in #374151 on black.
- Spacing: 40px between copy blocks; 16px between CTA and subcopy.

2) Testimonial strip
- Section padding: 72px top/bottom; divider: 1px solid #374151.
- Quote: Muoto, 24px, lh 1.2, ls -0.02em; color #ffffff.
- Name line: Inter, 18px, lh 1.22; Role line: Fraktion Mono, 14px, lh 1.5.
- Layout: vertical stack with 16px between lines and 40px between testimonials.

3) Team grid
- Each card: background #000000; radius 8px; padding 16px; border: 1px solid #374151 (optional on hover only).
- Name: Muoto, 24px; Role: Inter, 18px; Meta (past experience): Fraktion Mono, 14px.
- Actions: button-link style, text #ffffff, radius 0px. Grid gap: 16px; section gap: 72px.

4) Press list
- Section title: Muoto, 52px, lh 1.1, ls -0.03em, color #ffffff.
- Each item: 40px vertical padding; bottom border 1px #374151.
- Link title: Muoto, 24px; Source/URL: Fraktion Mono, 14px.

5) Dual CTA bar
- Background #000000; padding 40px; text #ffffff.
- Primary and secondary buttons: height 41px; padding 12px 16px; radius 0px; use #374151 outlines; 16px gap between buttons.

## Similar Brands

- Palantir: Dark, industrial palette with restrained accent use; Palantir leans heavier on serif accents, while Nominal keeps a pure sans/mono pair.
- Anduril: High-contrast black UI and defense-oriented tone; Anduril employs bolder, more condensed headings compared to Nominal's looser Muoto.
- Vercel: Minimal black/white developer aesthetic and square buttons; Vercel is more typographically neutral without the monospace body as default.
- HashiCorp: Utilitarian layouts and mono-forward documentation patterns; Nominal is sleeker with larger marketing headlines on dark surfaces.

:root {
  /* Colors */
  --color-primary: #ffffff;
  --color-secondary: #7c7c7c;
  --color-tertiary: #357f46;
  --color-neutral: #000000;
  --color-border: #374151;
  --color-brand-unique-grey: #c9c9c9;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 64px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1;
  --text-headline-lg-tracking: -0.03em;
  --text-headline-md-size: 52px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.1;
  --text-headline-md-tracking: -0.03em;
  --text-headline-sm-size: 24px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.2;
  --text-headline-sm-tracking: -0.02em;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 14px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --font-muoto: "muoto";
  --font-inter: "Inter";
  --font-fraktionmono: "fraktionMono";

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

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 40px;
  --spacing-lg: 72px;
  --spacing-xl: 96px;

  /* Components */
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: 0px;
  --button-primary-padding: 12px 16px;
  --button-primary-height: 41px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: 0px;
  --button-secondary-padding: 12px 16px;
  --button-secondary-height: 41px;
  --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;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Accelerate analysis and reporting for hardware engineering teams with confidence.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.486,
          0.486,
          0.486
        ],
        "hex": "#7c7c7c"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.208,
          0.498,
          0.275
        ],
        "hex": "#357f46"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    },
    "border": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.216,
          0.255,
          0.318
        ],
        "hex": "#374151"
      }
    },
    "brand-unique-grey": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.788,
          0.788,
          0.788
        ],
        "hex": "#c9c9c9"
      }
    },
    "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": 8,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 40,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 72,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 96,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "muoto",
        "fontSize": {
          "value": 64,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.03,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "muoto",
        "fontSize": {
          "value": 52,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.03,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "muoto",
        "fontSize": {
          "value": 24,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.02,
          "unit": "em"
        }
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": {
          "value": 18,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "fraktionMono",
        "fontSize": {
          "value": 14,
          "unit": "px"
        },
        "fontWeight": 400
      }
    }
  }
}

@theme {
  --color-primary: #ffffff;
  --color-secondary: #7c7c7c;
  --color-tertiary: #357f46;
  --color-neutral: #000000;
  --color-border: #374151;
  --color-brand-unique-grey: #c9c9c9;
  --color-surface: #000000;
  --color-on-surface: #ffffff;
  --font-headline-lg: "muoto";
  --font-headline-md: "muoto";
  --font-headline-sm: "muoto";
  --font-headline-xs: "Inter";
  --font-body-md: "fraktionMono";
  --text-headline-lg: 64px;
  --text-headline-md: 52px;
  --text-headline-sm: 24px;
  --text-headline-xs: 18px;
  --text-body-md: 14px;
  --tracking-headline-lg: -0.03em;
  --tracking-headline-md: -0.03em;
  --tracking-headline-sm: -0.02em;
  --font-weight-headline-lg: 400;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 8px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 40px;
  --spacing-lg: 72px;
  --spacing-xl: 96px;
}