# Dark transparent navbar

Schema: Design Details SECTION.md v3.2
Website: DualEntry
Source: https://www.dualentry.com/
Source section IDs: 065dccfd-1390-425f-9bb4-5e25b9021fc5
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- The three-zone layout (logo left, links centered, login and action right) makes every role instantly readable and keeps the eye moving left to right.
- Small 14px labels at weight 500 with 21px line height stay crisp in white on the dark bar, and the outline login beside the solid primary button shows a clear action hierarchy.
- Dropdown arrows beside the links signal depth without extra copy, and a thin 12px announcement strip above adds a promo without crowding the nav.

What a screenshot can't show:
- The recording showed no motion, so hover, dropdown opening and scroll behaviour are unknown.
- Measured gaps are 4px, 12px and 18px, with nav text at 14px/21px and the promo strip at 12px/18px, all with normal letter spacing.

Borrow: Keep a nav to three clearly separated zones, and let one solid button against quieter outline and text items show the main action.
Leave alone: Don't copy the Twklausanne typeface, the dark-on-gradient hero pairing or the ERP Rescue Fund promo wording; use a neutral free grotesque like Inter or Instrument Sans instead.

## Classification

- Type: navbar
- Layout: Three-column flex layout with logo left, navigation links center, and actions right.
- Styles: minimal, corporate
- Confidence: 100%

## Purpose and structure

A dark, transparent top navigation bar with left-aligned logo, centered links with dropdown arrows, and right-aligned login and primary action buttons.

Visual signature: Thin dark bar with white text spanning the top edge of a gradient hero background.

## Components

- logo
- nav-links
- dropdown-indicator
- button-outline
- button-solid

## Typography

- Display: Twklausanne — 56px 400
- Heading: Twklausanne — 48px 400
- Body: Twklausanne — 16px 300

## Functional palette

- Text: text #1D1F20
- Canvas: canvas #FFFFFF
- Border: border #E4EBEC
- Surface: surface #1C1D1E

## Motion evidence

- No section-specific authored motion was established.

## Section quality

Overall: 51.47/100 (Competent)
Scored coverage: 85%

- Typography: 52 — Simple sans-serif nav labels with consistent sizing and spacing; no visible hierarchy beyond weight/color contrast on white vs dark background. Functional but generic for a navbar. Next tier: No distinctive type treatment, scale contrast, or detail beyond standard nav-link sizing to justify above competent.
- Composition: 55 — Clean three-column flex layout (logo, centered links, right actions) with an announcement bar above; alignment and spacing are tidy and conventional for SaaS navbars. Next tier: Layout is a standard pattern with no unique spatial idea, asymmetry, or compositional tension that would elevate it past familiar/competent.
- Motion: not_assessed — No motion_moments or timestamped evidence of animation supplied for this section. Next tier: Needs timestamped visible motion evidence (e.g., sticky behavior, hover states, dropdown reveal) to assess.
- Content: 54 — Content (logo, nav items, login/CTA, promo banner) is well integrated into the layout grid with clear roles, but is purely textual/iconographic with no unique content pairing. Next tier: Lacks any content integration beyond standard nav elements; no distinctive copy or visual pairing that feels crafted rather than templated.
- Originality: 35 — This is a highly conventional corporate navbar pattern (logo-left, links-center, CTA-right, dark theme) seen across countless SaaS sites, with a generic announcement strip. Next tier: Needs a distinguishing visual or interaction idea that isn't a direct reuse of the standard SaaS navbar template.
- Adaptability: 60 — Structure is a clear, generic three-column flex pattern with well-separated logo/links/actions components and deterministic sizing/spacing tokens (gaps, radius, colors) that could be reskinned easily. Next tier: Lacks any distinctive behavior or visual signature worth preserving beyond the generic layout, limiting what makes the transfer meaningfully 'this section' versus any navbar.

Strengths:
- Clear three-column structural hierarchy with well-separated logo, nav, and action zones
- Consistent dark-on-dark theming with white text/button contrast for legibility
- Compact dropdown and icon indicators keep the bar visually light despite multiple nav items

Weaknesses:
- Entirely conventional SaaS navbar pattern with no distinguishing visual or interaction idea
- No motion evidence provided despite navbar being a natural candidate for scroll/hover behavior
- Typography is purely functional with no scale or weight contrast beyond standard nav sizing
- Announcement bar above nav is generic and visually disconnected in prominence

Why it does not reach the next tier: The section executes a completely standard navbar template competently but introduces no original structural, typographic, or interactive idea, and no motion evidence exists to demonstrate refined behavior; this caps it at competent/familiar territory.

## Adaptation guidance

- Effort: Low
- Guidance: Rebuild the flex grid (logo-left, nav-center, actions-right) with generic placeholder nav items and swap colors/logo for a new skin; the announcement bar can be dropped or retained as an optional top strip without affecting core navbar logic.

What transfers:
- Three-column flex structure (logo/links/actions)
- Centered nav links with dropdown indicators
- Right-aligned login + solid CTA button pairing
- Dark transparent bar over hero gradient concept

Dependencies:
- Specific dark gradient hero background for transparency effect to read correctly
- Custom logo SVG asset
- Promo/announcement bar content and its stacked position above nav

## Living vocabulary

- No reusable vocabulary candidates were supported by this section.

Only terms with status `active` enter the public taxonomy. Deferred and proposed terms remain available to later AI passes; rejected terms remain as provenance so they are not repeatedly reinvented.

## Provenance and limitations

- Section boundaries and naming: Gemini Pro visual observation
- Motion observations: Gemini Pro direct-video analysis
- Quality judgment: Claude
- Exact design facts: browser/CSS extraction at website scope
- Rubric: Design Details section rubric 3.2 (Typography 20%, Composition 20%, Motion 15%, Content 15%, Originality 15%, Adaptability 15%)
- No motion timestamps provided so animation/interaction quality (sticky behavior, hover, dropdown reveal) could not be assessed
- Exact color values for transparency/overlay not confirmed deterministically
- Font rendering details only inferred from site-wide type tokens, not section-specific confirmation

## Usage guidance

Use this section as design evidence. Create an original implementation; do not reproduce the source copy, assets, or proprietary composition exactly.

## Build blueprint v3.2

### Purpose and classification

- Canonical type: navigation
- Source type: navbar
- Structure: centered single-column
- Layout: Three-column flex layout with logo left, navigation links center, and actions right.
- Styles: minimal, corporate
- Components: logo, nav-links, dropdown-indicator, button-outline, button-solid
- Purpose: A dark, transparent top navigation bar with left-aligned logo, centered links with dropdown arrows, and right-aligned login and primary action buttons.
- Visual signature: Thin dark bar with white text spanning the top edge of a gradient hero background.
- Place on the page: 1 of 9, before Hero (`dualentry-com:C02`)

### Crop and composition

- Crop: 1440×110px; aspect ratio 13.091:1
- Page bounds: 0–110px of 6763px
- Guidance: Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

### Exact typography evidence

The sectionScale values were measured inside this crop. The siteRoles values explain how those faces function across the source website; they must not replace section measurements.

```json
{
  "sectionScale": [
    {
      "role": "body/supporting copy",
      "family": "Twklausanne",
      "stack": "Twklausanne, sans-serif",
      "size": "14px",
      "weight": "500",
      "lineHeight": "21px",
      "letterSpacing": "normal",
      "sample": "Products",
      "element": "p",
      "occurrences": 5,
      "sourceId": "font-8"
    },
    {
      "role": "body/supporting copy",
      "family": "Twklausanne",
      "stack": "Twklausanne, sans-serif",
      "size": "12px",
      "weight": "300",
      "lineHeight": "18px",
      "letterSpacing": "normal",
      "sample": "$6 Million set aside to help you break free",
      "element": "div",
      "occurrences": 4,
      "sourceId": "font-9"
    },
    {
      "role": "body/supporting copy",
      "family": "Twklausanne",
      "stack": "Twklausanne, sans-serif",
      "size": "14px",
      "weight": "400",
      "lineHeight": "21px",
      "letterSpacing": "normal",
      "sample": "Login",
      "element": "p",
      "occurrences": 3,
      "sourceId": "font-11"
    },
    {
      "role": "UI/supporting text",
      "family": "Twklausanne",
      "stack": "Twklausanne, sans-serif",
      "size": "12px",
      "weight": "700",
      "lineHeight": "18px",
      "letterSpacing": "normal",
      "sample": "Learn more about our ERP Rescue Fund",
      "element": "a",
      "occurrences": 2,
      "sourceId": "font-18"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "56px",
      "family": "Twklausanne",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-4: computed CSS at 1440×1000; AI role: Large 56px Twklausanne used for the main hero headline 'The AI ERP to end month-end'.",
      "sampleId": "font-4",
      "confidence": 0.95,
      "lineHeight": "61.6px",
      "letterSpacing": "normal"
    },
    {
      "role": "heading",
      "size": "48px",
      "family": "Twklausanne",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: 48px Twklausanne used for primary section headings like 'The accounting suite that runs while you lead.'",
      "sampleId": "font-2",
      "confidence": 0.9,
      "lineHeight": "52.8px",
      "letterSpacing": "normal"
    },
    {
      "role": "body",
      "size": "16px",
      "family": "Twklausanne",
      "source": "computed",
      "traits": "Regular",
      "weight": "300",
      "evidence": "font-7: computed CSS at 1440×1000; AI role: 16px Twklausanne used widely for body copy, subheadings, and buttons.",
      "sampleId": "font-7",
      "confidence": 0.85,
      "lineHeight": "24px",
      "letterSpacing": "normal"
    }
  ]
}
```

### Exact color evidence

The section samples record where each computed value was used. Functional roles come from the website-level classifier and remain separate.

```json
{
  "sectionUsage": [
    {
      "value": "#3D4343",
      "cssValue": "rgba(61, 67, 68, 0.8)",
      "alpha": 0.8,
      "appliedAs": [
        "text",
        "svg-fill"
      ],
      "occurrences": 103,
      "sourceId": "color-1"
    },
    {
      "value": "#1D1F20",
      "cssValue": "rgb(29, 31, 32)",
      "alpha": 1,
      "appliedAs": [
        "text",
        "svg-stroke"
      ],
      "occurrences": 183,
      "sourceId": "color-2"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgb(255, 255, 255)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "text"
      ],
      "occurrences": 115,
      "sourceId": "color-3"
    },
    {
      "value": "#01252B",
      "cssValue": "rgb(1, 37, 43)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-14"
    },
    {
      "value": "#E4FFAD",
      "cssValue": "rgb(228, 255, 173)",
      "alpha": 1,
      "appliedAs": [
        "svg-fill",
        "svg-stroke"
      ],
      "occurrences": 2,
      "sourceId": "color-27"
    }
  ],
  "functionalPalette": [
    {
      "hex": "#1D1F20",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(29, 31, 32); AI role: Dark grey (#1D1F20) used heavily for headings and primary text on light backgrounds.",
      "sampleId": "color-2",
      "confidence": 0.95
    },
    {
      "hex": "#FFFFFF",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-3: computed rgb(255, 255, 255); AI role: White background dominates the feature and migration sections.",
      "sampleId": "color-3",
      "confidence": 0.9
    },
    {
      "hex": "#E4EBEC",
      "name": "border",
      "role": "border",
      "source": "computed",
      "evidence": "color-9: computed rgb(228, 235, 236); AI role: Light grey/blue (#E4EBEC) is used extensively for borders on feature cards and input fields.",
      "sampleId": "color-9",
      "confidence": 0.9
    },
    {
      "hex": "#1C1D1E",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-18: computed rgb(28, 29, 30); AI role: Dark surface (#1C1D1E) used for the testimonial carousel and footer areas.",
      "sampleId": "color-18",
      "confidence": 0.85
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Medium border radius appears common on cards and buttons.",
  "density": "Moderate density; ample whitespace around main elements, but dense information packing within feature cards and footer links.",
  "evidence": "Observed via the bento-box feature grid, consistent button styling, and organized footer layout.",
  "borderStyle": "Subtle, thin solid borders (e.g., 1px) used to define cards and form elements.",
  "buttonStyle": "Solid white primary buttons on dark backgrounds, dark solid buttons on light backgrounds, with rounded corners.",
  "cornerStyle": "Consistent use of rounded corners on buttons, inputs, and feature cards.",
  "contentWidth": "Content is generally constrained to a central max-width, though background gradients and banners span full width.",
  "spacingRhythm": "Generous spacing between major sections, with tighter padding inside feature cards and UI components."
}
```

### Reconstruction specification

This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions.

- Root: 1440×70px; block; padding {"top":"0px","left":"0px","right":"0px","bottom":"0px"}; gap normal; background rgba(0, 0, 0, 0); radius 0px.
- Observed gaps: 4, 12, 18px.
- Representative content widths: 495px.
- Layout containers: 1; cards/surfaces: 0; media elements: 8; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 0,
      "bottom": 110,
      "pageHeight": 6763
    }
  },
  "container": {
    "size": "1440×70px",
    "position": "x 0px, y 40px",
    "display": "block",
    "positionMode": "sticky",
    "padding": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "gap": "normal",
    "columns": "not captured",
    "background": "rgba(0, 0, 0, 0)",
    "radius": "0px",
    "border": "not captured",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [
      4,
      12,
      18
    ],
    "representativeContentWidthsPx": [
      495
    ]
  },
  "columns": [
    {
      "element": "nav · Products Core Financials .nav2_links-grid_cell:hover .nav2_links-grid_cell-right_inner, .nav2_links-",
      "size": "495×69px",
      "position": "x 473px, y 40px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "18px"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": {
    "radii": [
      "4px"
    ],
    "borders": [],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "svg · svg",
    "size": "136×24px",
    "position": "x 64px, y 63px",
    "aspectRatio": 5.7,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "img · img",
    "size": "151×12px",
    "position": "x 503px, y 14px",
    "aspectRatio": 12.6,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/6ad1da7ef1000f7da025264e_ERP%20Rescue%20F.svg"
  },
  {
    "element": "svg · svg",
    "size": "16×16px",
    "position": "x 1141px, y 67px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "14×14px",
    "position": "x 477px, y 13px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "12×12px",
    "position": "x 543px, y 69px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "12×12px",
    "position": "x 646px, y 69px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "12×12px",
    "position": "x 868px, y 69px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "img · de-logo-alt",
    "size": "1×1px",
    "position": "x 63px, y 62px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "data:image/svg+xml,%3Csvg width='136' height='24' viewBox='0 0 136 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EDualEntry%3C/title%3E%3Cg clip-path='url%28%23clip0_320_3717%29'%3E%3Cpath d='M28.4465 3.28927H35.0345C40.5935 3.28927 43.2661 6.3895 43.2661 11.2536C43.2661 16.1178 40.2728 19.4853 35.0879 19.4853H28.4465V3.28927ZM31.5334 5.8817V16.9062H34.8073C38.6158 16.9062 40.2327 14.7681 40.2327 11.267C40.2327 7.76589 38.5089 5.89506 34.647 5.89506H31.5468L31.5334 5.8817Z' fill='%231D1F20'/%3E%3Cpath d='M53.5423 16.0109H53.5156C52.941 18.7369 51.3241 19.8461 49.1993 19.8461C46.1526 19.8461 44.99 17.8149 44.99 15.0888V6.79039H47.9031V14.3004C47.9031 15.8372 48.5846 17.1868 50.549 17.1868C52.4065 17.1868 53.5423 16.1044 53.5423 14.3004V6.79039H56.4555V19.4853H53.5423V15.9975V16.0109Z' fill='%231D1F20'/%3E%3Cpath d='M66.8251 16.3049H66.7716C66.1837 18.5766 64.6336 19.7659 62.4554 19.7659C60.1035 19.7659 58.4598 18.5766 58.4598 16.1445C58.4598 13.7124 59.863 12.149 63.0434 12.149H66.8251V11.6412C66.8251 9.91733 66.1168 8.96856 64.3663 8.96856C62.8028 8.96856 61.9075 9.6768 61.6135 11.5075L58.834 11.1334C59.2082 8.30041 60.8919 6.54985 64.4732 6.54985C68.0545 6.54985 69.7115 8.38059 69.7115 11.6278V19.512H66.8251V16.3316V16.3049ZM66.8251 14.7147V14.3138H63.471C62.0679 14.3138 61.3062 14.8216 61.3062 15.6902C61.3062 16.5588 61.8808 17.3873 63.5244 17.3873C65.5289 17.3873 66.8251 16.2514 66.8251 14.7147Z' fill='%231D1F20'/%3E%3Cpath d='M75.0165 19.4986H72.1034V2.94183H75.0165V19.4986Z' fill='%231D1F20'/%3E%3Cpath d='M77.5022 3.28927H89.1414V6.20241H80.5757V9.85052H88.3797V12.7102H80.5757V16.5721H89.1681V19.4853H77.5022V3.28927Z' fill='%231D1F20'/%3E%3Cpath d='M94.3261 19.4986H91.413V6.80375H94.3261V10.2915H94.3528C94.9274 7.59217 96.5444 6.48304 98.6691 6.48304C101.716 6.48304 102.878 8.48749 102.878 11.2403V19.4986H99.9653V11.9886C99.9653 10.4519 99.2838 9.10219 97.3194 9.10219C95.462 9.10219 94.3261 10.1846 94.3261 11.9886V19.4986Z' fill='%231D1F20'/%3E%3Cpath d='M106.072 9.26255H104.348V6.80375H106.072V3.4229H108.959V6.80375H112.714V9.26255H108.959V15.1556C108.959 16.3984 109.44 17.0131 110.709 17.0131C111.364 17.0131 111.952 16.8527 112.513 16.7191L112.861 19.3917C111.939 19.6857 111.27 19.8461 110.028 19.8461C107.248 19.8461 106.059 18.0153 106.059 15.6367V9.26255H106.072Z' fill='%231D1F20'/%3E%3Cpath d='M114.491 19.4986V6.80375H117.404V10.9597H117.457C118.032 7.65898 119.155 6.80375 121.079 6.80375H121.8V10.0777H120.558C118.286 10.0777 117.404 10.8661 117.404 13.071V19.4986H114.491Z' fill='%231D1F20'/%3E%3Cpath d='M122.135 24.0554L122.535 21.3294C123.11 21.4363 123.618 21.5164 124.152 21.5164C125.609 21.5164 126.344 21.1957 127.146 19.2714L122.014 6.79038H125.195L126.838 11.3739C127.346 12.8305 128.054 14.7547 128.642 16.4786H128.723C129.31 14.7013 129.965 12.8839 130.42 11.4274L131.903 6.77702H135.043L129.832 19.6055C128.535 22.7859 126.972 24.189 124.059 24.189C123.244 24.189 122.709 24.1089 122.108 24.0287L122.135 24.0554Z' fill='%231D1F20'/%3E%3Cpath d='M15.7517 9.47633L20.3753 4.85273L17.6626 2.12667L13.039 6.75028V0.215759H9.19049V9.47633H-0.0700684V13.3249H6.46444L1.84084 17.9351L4.56689 20.6612L9.19049 16.0376V22.5721H13.039V13.3249H9.19049V9.47633H13.039V13.3249H22.2862V9.47633H15.7517Z' fill='%231D1F20'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_320_3717'%3E%3Crect width='136' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"
  }
]
```

#### Browser-exposed animation parameters

```json
[]
```

### Measured geometry, surfaces, media, and animation

These raw values come from the saved element map and computed styles. Empty arrays mean the fact was not captured; they are not permission to invent source values.

```json
{
  "root": {
    "id": "ld-781",
    "gap": "normal",
    "tag": "div",
    "rect": {
      "x": 0,
      "y": 40,
      "width": 1440,
      "height": 70
    },
    "role": "banner",
    "label": "document.addEventListener(\"DOMContentLoaded\", () => { const nav = document.querySelector('.section_n",
    "border": "",
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "radius": "0px",
    "shadow": "none",
    "columns": null,
    "display": "block",
    "padding": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "overflow": "visible",
    "position": "sticky",
    "background": "rgba(0, 0, 0, 0)"
  },
  "cards": [],
  "media": [
    {
      "id": "ld-791",
      "tag": "svg",
      "rect": {
        "x": 64,
        "y": 63,
        "width": 136,
        "height": 24
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 5.7,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-670",
      "tag": "img",
      "rect": {
        "x": 503,
        "y": 14,
        "width": 151,
        "height": 12
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "",
        "src": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/6ad1da7ef1000f7da025264e_ERP%20Rescue%20F.svg",
        "naturalWidth": 151,
        "naturalHeight": 12
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 12.6,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1433",
      "tag": "svg",
      "rect": {
        "x": 1141,
        "y": 67,
        "width": 16,
        "height": 16
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-667",
      "tag": "svg",
      "rect": {
        "x": 477,
        "y": 13,
        "width": 14,
        "height": 14
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-813",
      "tag": "svg",
      "rect": {
        "x": 543,
        "y": 69,
        "width": 12,
        "height": 12
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1056",
      "tag": "svg",
      "rect": {
        "x": 646,
        "y": 69,
        "width": 12,
        "height": 12
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1284",
      "tag": "svg",
      "rect": {
        "x": 868,
        "y": 69,
        "width": 12,
        "height": 12
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-806",
      "tag": "img",
      "rect": {
        "x": 63,
        "y": 62,
        "width": 1,
        "height": 1
      },
      "role": null,
      "label": "de-logo-alt",
      "media": {
        "alt": "DualEntry",
        "src": "data:image/svg+xml,%3Csvg width='136' height='24' viewBox='0 0 136 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EDualEntry%3C/title%3E%3Cg clip-path='url%28%23clip0_320_3717%29'%3E%3Cpath d='M28.4465 3.28927H35.0345C40.5935 3.28927 43.2661 6.3895 43.2661 11.2536C43.2661 16.1178 40.2728 19.4853 35.0879 19.4853H28.4465V3.28927ZM31.5334 5.8817V16.9062H34.8073C38.6158 16.9062 40.2327 14.7681 40.2327 11.267C40.2327 7.76589 38.5089 5.89506 34.647 5.89506H31.5468L31.5334 5.8817Z' fill='%231D1F20'/%3E%3Cpath d='M53.5423 16.0109H53.5156C52.941 18.7369 51.3241 19.8461 49.1993 19.8461C46.1526 19.8461 44.99 17.8149 44.99 15.0888V6.79039H47.9031V14.3004C47.9031 15.8372 48.5846 17.1868 50.549 17.1868C52.4065 17.1868 53.5423 16.1044 53.5423 14.3004V6.79039H56.4555V19.4853H53.5423V15.9975V16.0109Z' fill='%231D1F20'/%3E%3Cpath d='M66.8251 16.3049H66.7716C66.1837 18.5766 64.6336 19.7659 62.4554 19.7659C60.1035 19.7659 58.4598 18.5766 58.4598 16.1445C58.4598 13.7124 59.863 12.149 63.0434 12.149H66.8251V11.6412C66.8251 9.91733 66.1168 8.96856 64.3663 8.96856C62.8028 8.96856 61.9075 9.6768 61.6135 11.5075L58.834 11.1334C59.2082 8.30041 60.8919 6.54985 64.4732 6.54985C68.0545 6.54985 69.7115 8.38059 69.7115 11.6278V19.512H66.8251V16.3316V16.3049ZM66.8251 14.7147V14.3138H63.471C62.0679 14.3138 61.3062 14.8216 61.3062 15.6902C61.3062 16.5588 61.8808 17.3873 63.5244 17.3873C65.5289 17.3873 66.8251 16.2514 66.8251 14.7147Z' fill='%231D1F20'/%3E%3Cpath d='M75.0165 19.4986H72.1034V2.94183H75.0165V19.4986Z' fill='%231D1F20'/%3E%3Cpath d='M77.5022 3.28927H89.1414V6.20241H80.5757V9.85052H88.3797V12.7102H80.5757V16.5721H89.1681V19.4853H77.5022V3.28927Z' fill='%231D1F20'/%3E%3Cpath d='M94.3261 19.4986H91.413V6.80375H94.3261V10.2915H94.3528C94.9274 7.59217 96.5444 6.48304 98.6691 6.48304C101.716 6.48304 102.878 8.48749 102.878 11.2403V19.4986H99.9653V11.9886C99.9653 10.4519 99.2838 9.10219 97.3194 9.10219C95.462 9.10219 94.3261 10.1846 94.3261 11.9886V19.4986Z' fill='%231D1F20'/%3E%3Cpath d='M106.072 9.26255H104.348V6.80375H106.072V3.4229H108.959V6.80375H112.714V9.26255H108.959V15.1556C108.959 16.3984 109.44 17.0131 110.709 17.0131C111.364 17.0131 111.952 16.8527 112.513 16.7191L112.861 19.3917C111.939 19.6857 111.27 19.8461 110.028 19.8461C107.248 19.8461 106.059 18.0153 106.059 15.6367V9.26255H106.072Z' fill='%231D1F20'/%3E%3Cpath d='M114.491 19.4986V6.80375H117.404V10.9597H117.457C118.032 7.65898 119.155 6.80375 121.079 6.80375H121.8V10.0777H120.558C118.286 10.0777 117.404 10.8661 117.404 13.071V19.4986H114.491Z' fill='%231D1F20'/%3E%3Cpath d='M122.135 24.0554L122.535 21.3294C123.11 21.4363 123.618 21.5164 124.152 21.5164C125.609 21.5164 126.344 21.1957 127.146 19.2714L122.014 6.79038H125.195L126.838 11.3739C127.346 12.8305 128.054 14.7547 128.642 16.4786H128.723C129.31 14.7013 129.965 12.8839 130.42 11.4274L131.903 6.77702H135.043L129.832 19.6055C128.535 22.7859 126.972 24.189 124.059 24.189C123.244 24.189 122.709 24.1089 122.108 24.0287L122.135 24.0554Z' fill='%231D1F20'/%3E%3Cpath d='M15.7517 9.47633L20.3753 4.85273L17.6626 2.12667L13.039 6.75028V0.215759H9.19049V9.47633H-0.0700684V13.3249H6.46444L1.84084 17.9351L4.56689 20.6612L9.19049 16.0376V22.5721H13.039V13.3249H9.19049V9.47633H13.039V13.3249H22.2862V9.47633H15.7517Z' fill='%231D1F20'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_320_3717'%3E%3Crect width='136' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E",
        "naturalWidth": 136,
        "naturalHeight": 24
      },
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 0,
    "bottom": 110,
    "pageHeight": 6763
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-808",
      "gap": "18px",
      "tag": "nav",
      "rect": {
        "x": 473,
        "y": 40,
        "width": 495,
        "height": 69
      },
      "role": "navigation",
      "label": "Products Core Financials .nav2_links-grid_cell:hover .nav2_links-grid_cell-right_inner, .nav2_links-",
      "columns": null,
      "display": "flex",
      "direction": "row"
    }
  ],
  "spacing": {
    "gapsPx": [
      4,
      12,
      18
    ],
    "representativeContentWidthsPx": [
      495
    ]
  },
  "coverage": {
    "cards": 0,
    "media": 8,
    "animations": 0,
    "elementsInSection": 26
  },
  "surfaces": {
    "radii": [
      "4px"
    ],
    "borders": [],
    "shadows": []
  },
  "animations": [],
  "capturedAt": "2026-10-29T16:48:55.968Z",
  "limitations": [
    "Values describe the captured desktop viewport and may change at other breakpoints.",
    "Transforms, sticky layers, and virtualized content can make the inferred section root approximate.",
    "Animations include browser-exposed Web Animations API state; CSS or script motion that was inactive at capture time may be absent."
  ],
  "viewportWidth": 1440
}
```

### Observed motion

No timestamped authored motion is attached. Use only restrained baseline transitions.

The browser animation records above are deterministic parameters captured from active browser animations. The timestamped observations describe what Gemini saw in the video. Treat them as complementary evidence. When either source is empty or they conflict, state the uncertainty instead of inventing timing or easing.

### Responsive contract

- Measured viewport: 1440px wide.
- Mobile/tablet values: not measured by this section evidence unless a separate capture is explicitly listed.
- Preserve hierarchy and sequence; collapse simultaneous columns only where needed, maintain media aspect ratios, and verify touch targets and text wrapping at target breakpoints.

### Structure versus visual skin

- Preserve: content hierarchy, layout relationships, section rhythm, interaction purpose.
- Adapt: brand colors, font family, copy, imagery, icons, decorative details.
- Rule: Preserve the observed design logic while creating original branding, copy, assets, and implementation details.

### Adaptation and dependencies

- Effort: low
- What transfers: Three-column flex structure (logo/links/actions); Centered nav links with dropdown indicators; Right-aligned login + solid CTA button pairing; Dark transparent bar over hero gradient concept
- Dependencies: Specific dark gradient hero background for transparency effect to read correctly; Custom logo SVG asset; Promo/announcement bar content and its stacked position above nav
- Guidance: Rebuild the flex grid (logo-left, nav-center, actions-right) with generic placeholder nav items and swap colors/logo for a new skin; the announcement bar can be dropped or retained as an optional top strip without affecting core navbar logic.

### Evidence readiness

- Coverage: 7/7
- Can build: Yes
- Missing facts: timestamped authored motion
- Warning: Buildable with adaptations for these unsupported facts: timestamped authored motion.

### Agent implementation prompt

Create an original navigation section inspired by the design evidence titled “Dark transparent navbar”.

Purpose: A dark, transparent top navigation bar with left-aligned logo, centered links with dropdown arrows, and right-aligned login and primary action buttons.

Structure: centered single-column. Source layout label: Three-column flex layout with logo left, navigation links center, and actions right.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: Thin dark bar with white text spanning the top edge of a gradient hero background.

Components: logo, nav-links, dropdown-indicator, button-outline, button-solid.

Style direction: minimal, corporate.

Observed crop: 1440×110px (13.091:1). Treat this as evidence of composition, not a mandatory output size.

Typography evidence: {"role":"display","size":"56px","family":"Twklausanne","source":"computed","traits":"Regular","weight":"400","evidence":"font-4: computed CSS at 1440×1000; AI role: Large 56px Twklausanne used for the main hero headline 'The AI ERP to end month-end'.","sampleId":"font-4","confidence":0.95,"lineHeight":"61.6px","letterSpacing":"normal"} {"role":"heading","size":"48px","family":"Twklausanne","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: 48px Twklausanne used for primary section headings like 'The accounting suite that runs while you lead.'","sampleId":"font-2","confidence":0.9,"lineHeight":"52.8px","letterSpacing":"normal"} {"role":"body","size":"16px","family":"Twklausanne","source":"computed","traits":"Regular","weight":"300","evidence":"font-7: computed CSS at 1440×1000; AI role: 16px Twklausanne used widely for body copy, subheadings, and buttons.","sampleId":"font-7","confidence":0.85,"lineHeight":"24px","letterSpacing":"normal"}

Color evidence: {"hex":"#1D1F20","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(29, 31, 32); AI role: Dark grey (#1D1F20) used heavily for headings and primary text on light backgrounds.","sampleId":"color-2","confidence":0.95} {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-3: computed rgb(255, 255, 255); AI role: White background dominates the feature and migration sections.","sampleId":"color-3","confidence":0.9} {"hex":"#E4EBEC","name":"border","role":"border","source":"computed","evidence":"color-9: computed rgb(228, 235, 236); AI role: Light grey/blue (#E4EBEC) is used extensively for borders on feature cards and input fields.","sampleId":"color-9","confidence":0.9} {"hex":"#1C1D1E","name":"surface","role":"surface","source":"computed","evidence":"color-18: computed rgb(28, 29, 30); AI role: Dark surface (#1C1D1E) used for the testimonial carousel and footer areas.","sampleId":"color-18","confidence":0.85}

Typography measured inside this section: {"id":"font-8","size":"14px","count":5,"family":"Twklausanne","traits":"Regular","weight":"500","contexts":[{"tag":"p","top":64,"text":"Products","property":"font"},{"tag":"p","top":64,"text":"Platform","property":"font"},{"tag":"a","top":40,"text":"Customers","property":"font"}],"fontStack":"Twklausanne, sans-serif","lineHeight":"21px","letterSpacing":"normal"} {"id":"font-9","size":"12px","count":4,"family":"Twklausanne","traits":"Regular","weight":"300","contexts":[{"tag":"div","top":11,"text":"$6 Million set aside to help you break free","property":"font"},{"tag":"p","top":6695,"text":"© 2026 Entry Inc. \"DualEntry\" and the DualEntry logo are registered trademarks of the company.","property":"font"},{"tag":"span","top":6697,"text":"2026","property":"font"}],"fontStack":"Twklausanne, sans-serif","lineHeight":"18px","letterSpacing":"normal"} {"id":"font-11","size":"14px","count":3,"family":"Twklausanne","traits":"Regular","weight":"400","contexts":[{"tag":"p","top":64,"text":"Login","property":"font"},{"tag":"p","top":64,"text":"Schedule demo","property":"font"},{"tag":"p","top":3988,"text":"Schedule demo","property":"font"}],"fontStack":"Twklausanne, sans-serif","lineHeight":"21px","letterSpacing":"normal"} {"id":"font-18","size":"12px","count":2,"family":"Twklausanne","traits":"Regular","weight":"700","contexts":[{"tag":"a","top":11,"text":"Learn more about our ERP Rescue Fund","property":"font"},{"tag":"span","top":10,"text":"about our ERP Rescue Fund","property":"font"}],"fontStack":"Twklausanne, sans-serif","lineHeight":"18px","letterSpacing":"normal"}

Colors measured inside this section: {"id":"color-1","hex":"#3D4343","alpha":0.8,"count":103,"contexts":[{"tag":"video","top":67,"text":"Your browser does not support the video tag.","property":"text"},{"tag":"div","top":2256,"text":"Anomaly detection","property":"text"},{"tag":"circle","top":2261,"text":"","property":"svg-fill"}],"cssValue":"rgba(61, 67, 68, 0.8)"} {"id":"color-2","hex":"#1D1F20","alpha":1,"count":183,"contexts":[{"tag":"p","top":64,"text":"Schedule demo","property":"text"},{"tag":"path","top":554,"text":"","property":"svg-stroke"},{"tag":"video","top":512,"text":"Your browser does not support the video tag.","property":"text"}],"cssValue":"rgb(29, 31, 32)"} {"id":"color-3","hex":"#FFFFFF","alpha":1,"count":115,"contexts":[{"tag":"body","top":0,"text":"Cookie Consent By using our website, you're agreeing to the collection of data described in our Priv","property":"background"},{"tag":"div","top":11,"text":"$6 Million set aside to help you break free","property":"text"},{"tag":"a","top":11,"text":"Learn more about our ERP Rescue Fund","property":"text"}],"cssValue":"rgb(255, 255, 255)"} {"id":"color-14","hex":"#01252B","alpha":1,"count":1,"contexts":[{"tag":"div","top":0,"text":"DualEntry raises $90M from Lightspeed, Khosla Ventures, Google Ventures Learn more about our Series ","property":"background"}],"cssValue":"rgb(1, 37, 43)"} {"id":"color-27","hex":"#E4FFAD","alpha":1,"count":2,"contexts":[{"tag":"circle","top":17,"text":"","property":"svg-fill"},{"tag":"circle","top":18,"text":"","property":"svg-stroke"}],"cssValue":"rgb(228, 255, 173)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":40,"width":1440,"height":70},"padding":{"top":"0px","left":"0px","right":"0px","bottom":"0px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[4,12,18],"representativeContentWidthsPx":[495]}; surfaces {"radii":["4px"],"borders":[],"shadows":[]}; media [{"tag":"svg","rect":{"x":64,"y":63,"width":136,"height":24},"aspectRatio":5.7,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":503,"y":14,"width":151,"height":12},"aspectRatio":12.6,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":1141,"y":67,"width":16,"height":16},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":477,"y":13,"width":14,"height":14},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}]

Do not invent signature motion. Use only restrained baseline transitions if the product needs them.

Transfer these principles: Three-column flex structure (logo/links/actions); Centered nav links with dropdown indicators; Right-aligned login + solid CTA button pairing; Dark transparent bar over hero gradient concept.

Dependencies: Specific dark gradient hero background for transparency effect to read correctly; Custom logo SVG asset; Promo/announcement bar content and its stacked position above nav.

Adaptation guidance: Rebuild the flex grid (logo-left, nav-center, actions-right) with generic placeholder nav items and swap colors/logo for a new skin; the announcement bar can be dropped or retained as an optional top strip without affecting core navbar logic.

Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.