--- version: alpha name: "Kia" website: "https://www.kia.com" description: >- A Korean automaker post-rebrand whose marketing site treats its new angular wordmark and a near-black ink color (#05141f) as the entire system — the captured kia-israel.co.il page runs a 24px KiaSignatureBold hero h2 in white over a full-bleed urban-rooftop photograph showing two new Kia vehicles, with a 50px KiaSignatureBold "553" range counter below in the secondary band paired with a white-on-white outline CTA. Body type is Almoni (Kia's regional Hebrew sans, paired with KiaSignatureBold for the Latin display) at 16-18px / weight 400; uppercase utility labels sit at 14px / 0.5px tracking. The radius scale is essentially zero — square cards, square CTAs, square footer — a deliberately industrial-graphic move that distinguishes the post-2021 Kia identity from the friendlier pre-rebrand chrome. Near-black `#05141f` carries every text and border tone (290 occurrences); the only other surface color is white. No accent voltage, no chromatic CTA — the system is monochromatic by design. seo: title: "Kia Design System for React — near-black #05141f, KiaSignatureBold, 14 components" metaDescription: "Kia's marketing system as a DESIGN.md file. Near-black ink and KiaSignatureBold display from the post-2021 rebrand, square radii, monochromatic chrome, 14 components. For React, Next.js, and AI coding tools." highlights: - "Near-black instead of pure black — every text and border tone is #05141f, a deep slate-navy that softens the high-contrast chrome" - "KiaSignatureBold for display — the proprietary geometric display family from the 2021 rebrand, paired with Almoni for regional body type" - "Zero-radius shape language — square cards, square buttons, square photograph crops; the post-rebrand identity rejects the soft-corner conventions of friendly automotive" - "Monochromatic chrome — ink and white carry the entire system, no accent voltage, no chromatic CTA above the fold" - "Asymmetric photograph + range-counter band — full-bleed vehicle photograph paired with an oversize 50px range-counter overlay drives the rhythm" tags: - "Automotive" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Kia's marketing site shows what a complete brand reset looks like in the automotive category. The 2021 rebrand — new angular wordmark, new sans-serif display family (KiaSignatureBold), new philosophy ("Movement that inspires") — runs all the way through to the chrome on kia-israel.co.il. The captured page is monochromatic by design: a near-black ink color and pure white carry the entire surface, with zero accent voltage above the fold. The hero is a full-bleed photograph of two new Kia vehicles on an urban-rooftop carpark with the building's grid as the visual rhythm; a 24px KiaSignatureBold "The New Kia Stonic" headline sits in white over the lower-left, with a single 1px-outline CTA pill beneath. Below that, a 50px range-counter "553" reads as an oversize editorial pull-quote — the largest typographic moment in the system. The DESIGN.md file packages the post-rebrand system into a machine-readable spec for React and AI tools. Inside: 5 color tokens dominated by the near-black ink (290 occurrences) and white (121), with a hairline gray and an active-state aaa-gray rounding out the palette. The full extraction surfaces 14 additional WordPress-preset colors that the Kia template inherits but never renders. Typography pairs KiaSignatureBold (the proprietary geometric display family from the rebrand) with Almoni (the regional Hebrew/Latin sans used for body) at modest sizes — 16-18px body, 24px hero, 50px range-counter editorial. The radius scale is essentially zero: every surface in the captured chrome renders square corners. 14 components cover the hero photograph band, the range-counter overlay, the outline CTA, the dropdown chip, the dark footer, and the accessibility-tool floating button. Feed this file to Claude or Cursor and it reproduces Kia's specific moves: near-black instead of pure black, square corners across every surface, monochromatic chrome without an accent CTA, KiaSignatureBold for Latin display, oversize editorial range-counter as the loudest typographic moment. The token references resolve cleanly. The one move worth borrowing only if your brand has reset its identity toward design-forward positioning: the zero-radius shape language. Most automotive sites soften every corner to read "approachable." Kia post-2021 rejects that convention — the squared corners read as graphic-design-led rather than dealership-friendly, and the brand voice shifts toward Bauhaus-poster instead of family-brochure. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.kia.com" title: "Kia — official site" description: "Kia's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Kia's primary brand color?" answer: "Kia's marketing chrome is monochromatic — the dominant chrome color is a near-black slate-navy that appears 290 times on the captured page (144 as text, 141 as border, 5 as background). The hex is not pure black; it carries a faint blue cast that ties to the photographic blue-hour sky tones in the hero band. There is no chromatic accent above the fold, no brand-red or brand-blue voltage, no colored CTA pill. The hero CTA is a white-on-photograph outline; the secondary CTAs sit as plain near-black text on white with hairline outlines. The post-2021 Kia rebrand moved the brand voice toward design-forward positioning, and the monochromatic chrome is the most-visible manifestation of that move." - id: "typography" title: "What typeface does Kia use, and what should I use as a substitute?" answer: "Kia runs two type families: KiaSignatureBold (the proprietary geometric display family released with the 2021 rebrand, used for the new angular wordmark and Latin display sizes) and Almoni / AlmoniBold (the regional Hebrew sans used for body and utility text on the Israel marketplace site). The hero h2 sits at 24px / KiaSignatureBold; the oversize range-counter sits at 50px / KiaSignatureBold; body sits at 16-18px / Almoni Regular. The closest open-source substitute for KiaSignatureBold is Eurostile or Industry; Manrope at weight 700 transfers reasonably for editorial display. For Almoni, Frank Ruhl Libre Sans or Heebo handle Hebrew + Latin pairings." - id: "radius-scale" title: "Why does Kia use square corners everywhere?" answer: "The captured page renders essentially zero rounded corners — every card, every button, every photograph crop, every footer tile sits with 0px radius. This is a deliberate post-rebrand move. The pre-2021 Kia chrome used soft-corner conventions typical of friendly family-automotive marketing; the 2021 reset moved the brand toward design-forward, graphic-led positioning, and the square corners signal that shift directly. Compared to Toyota's binary 8px-card / 50px-pill scale and Honda's softer 4px-card / 33px-pill scale, Kia's zero-radius treatment reads as Bauhaus-poster — the corners are doing real semantic work, telling the visitor this is not the same Kia as a decade ago." - id: "monochromatic-chrome" title: "Why doesn't Kia use a brand color on CTAs?" answer: "The post-2021 Kia identity is monochromatic by design. The captured page has no accent voltage above the fold — no brand red, no brand blue, no colored CTA pill. The hero CTA is a white-on-photograph outline; the secondary CTAs sit as near-black text on white with hairline outlines. The chrome inherits 14 WordPress-preset colors (vivid red, vivid green, vivid orange, etc.) that never paint a single pixel on the captured surface — they ship with the WordPress block editor template and are not part of Kia's rebrand palette. The decision to omit accent voltage entirely is the system's strongest move and the one that most clearly distinguishes post-rebrand Kia from its mainstream-automotive peers." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own automotive marketing site?" answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Kia's specific moves: near-black instead of pure black, square corners everywhere, monochromatic chrome without accent CTAs, KiaSignatureBold for display with Almoni for body, oversize 50px editorial range-counter as the loudest typographic moment. The tokens resolve cleanly. One caveat: the captured surface is the Kia Israel marketplace site (RTL Hebrew), which uses regional type and content but inherits the global Kia chrome system. If you need a left-to-right Latin reference, substitute Almoni with Manrope or Inter and the layout transfers cleanly." mockups: - "marketing-hero" - "media-grid" colors: ink: "#05141f" ink-soft: "#333333" canvas: "#ffffff" pure-black: "#000000" hairline: "#aaaaaa" typography: display-xl: fontFamily: "KiaSignatureBold, AlmoniBold, sans-serif" fontSize: 50px fontWeight: 700 lineHeight: 56px letterSpacing: 0 display-md: fontFamily: "AlmoniBold, sans-serif" fontSize: 36px fontWeight: 400 lineHeight: 50.4px letterSpacing: 0 hero-heading: fontFamily: "KiaSignatureBold, AlmoniBold, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 32px letterSpacing: 0 heading-md: fontFamily: "AlmoniBold, sans-serif" fontSize: 30px fontWeight: 400 lineHeight: 36px letterSpacing: 0 heading-sm: fontFamily: "AlmoniBold, sans-serif" fontSize: 26px fontWeight: 400 lineHeight: 32px letterSpacing: 0 body-lg: fontFamily: "AlmoniBold, sans-serif" fontSize: 24px fontWeight: 400 lineHeight: 18px letterSpacing: 0 body-md: fontFamily: "Almoni, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 18px letterSpacing: 0 body-sm: fontFamily: "Almoni, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 25.2px letterSpacing: 0 body-xs: fontFamily: "Almoni, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 18px letterSpacing: 0 body-emphasis: fontFamily: "Almoni, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 32px letterSpacing: 0 caption: fontFamily: "Almoni, sans-serif" fontSize: 12.8px fontWeight: 400 lineHeight: 12.8px letterSpacing: 0 label-uppercase: fontFamily: "Almoni, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 14px letterSpacing: 0 rounded: none: "0px" full: "9999px" spacing: xxs: "3px" xs: "5px" sm: "10px" base: "15px" md: "20px" lg: "21px" xl: "30px" 2xl: "40px" 3xl: "45px" 4xl: "80px" components: button-primary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-xs}" rounded: "{rounded.none}" padding: "15px 30px" height: "48px" border: "0" button-primary-hover: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.body-xs}" rounded: "{rounded.none}" padding: "15px 30px" height: "48px" button-outline: backgroundColor: transparent textColor: "{colors.canvas}" typography: "{typography.body-xs}" rounded: "{rounded.none}" padding: "15px 30px" height: "48px" borderColor: "{colors.canvas}" top-nav: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: "10px 15px" height: "60px" nav-link: backgroundColor: transparent textColor: "{colors.canvas}" typography: "{typography.body-sm}" padding: "10px 15px" brand-mark: backgroundColor: transparent textColor: "{colors.canvas}" rounded: "{rounded.none}" padding: "0" hero-band: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.hero-heading}" rounded: "{rounded.none}" padding: "80px 0px 45px" hero-heading: backgroundColor: transparent textColor: "{colors.canvas}" typography: "{typography.hero-heading}" padding: "20px 0px 0px" range-counter: backgroundColor: transparent textColor: "{colors.canvas}" typography: "{typography.display-xl}" section-heading: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.heading-md}" body-paragraph: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-sm}" card-action: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "20px" borderColor: "{colors.ink}" pagination-dot: backgroundColor: "{colors.canvas}" textColor: "{colors.canvas}" rounded: "{rounded.full}" padding: "0" accessibility-toggle: backgroundColor: "{colors.hairline}" textColor: "{colors.canvas}" typography: "{typography.body-md}" rounded: "{rounded.full}" padding: "10px" height: "52px" footer: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.body-xs}" padding: "40px 0px 21px" --- ## Overview Kia's marketing site shows what a complete brand reset looks like. **Monochromatic by design.** Where Toyota holds its signature red as a hairline-and-text accent and Honda carries a deep navy as the load-bearing chrome with a sky-blue accent in the footer, Kia post-2021 omits accent voltage entirely. The dominant chrome color is a near-black slate-navy (`{colors.ink}` — #05141f) that appears 290 times across the captured page (144 as text, 141 as border, 5 as background). The only other surface color is white. There is no brand-red, no brand-blue, no chromatic CTA pill anywhere above the fold. The hero CTA is a 1px white outline on photograph; the secondary CTAs sit as near-black text on white with hairline outlines. The system's shape language reinforces the reset. **Zero-radius geometry.** Every surface in the captured chrome — vehicle cards, CTA pills, photograph crops, footer tiles, dropdown chrome — renders square corners. The pre-2021 Kia chrome used soft-corner conventions typical of friendly family-automotive marketing; the 2021 rebrand reset the brand toward design-forward, graphic-led positioning, and the square corners signal that shift directly. Compared to Toyota's binary 8px-card / 50px-pill scale, Honda's softer 4px-card / 33px-pill scale, and even Tesla's slightly-softened industrial corners, Kia's zero-radius treatment reads as Bauhaus-poster — the corners do real semantic work, telling the visitor this is not the same Kia. Typography pairs **KiaSignatureBold** (the proprietary geometric display family from the rebrand, the same letterforms that built the new angular wordmark) with **Almoni** (the regional Hebrew/Latin sans used for body and utility text on the Israel marketplace site). The hero h2 "The New Kia Stonic" sits at 24px in KiaSignatureBold over a photograph; the oversize range-counter "553" sits at 50px in KiaSignatureBold and is the loudest typographic moment in the system — an editorial pull-quote rendered as a vehicle range specification. The pairing — graphic-led display + utility body — does the work that a Bauhaus poster does on a museum-shop wall: it tells you the brand is taking itself seriously as a designed object. **Key Characteristics:** - Near-black ink `{colors.ink}` (#05141f) carries 290 occurrences as text and border — the load-bearing chrome color. - Monochromatic chrome — ink and white only above the fold, with no accent voltage and no chromatic CTA pill. - KiaSignatureBold for Latin display (the proprietary geometric family from the 2021 rebrand) paired with Almoni for body. - Zero-radius shape language — every card, button, photograph crop, and footer tile sits at `{rounded.none}` 0px. - Oversize range-counter "553" at 50px / KiaSignatureBold is the loudest typographic moment — an editorial pull-quote treatment for a vehicle specification. - Hero band is a full-bleed urban-rooftop photograph of two new Kia vehicles; the building grid behind drives the visual rhythm. - WordPress-preset colors leak into the extraction (vivid red, vivid green, vivid orange, vivid purple) but render zero times on the captured chrome — they ship with the block editor template, not the Kia rebrand palette. - Hairline gray `{colors.hairline}` (#aaaaaa) appears only on the accessibility-toggle floating button — there is no second border tone in the chrome. ## Colors ### Brand The captured chrome has no brand-layer chromatic accent. The post-2021 Kia identity treats the brand mark itself (the new angular wordmark) and KiaSignatureBold display type as the entire brand signal, with ink and white doing every chromatic job. This is the system's strongest distinguishing move. ### Surface - **Canvas** (`{colors.canvas}` — #ffffff): frequency 121 (57 text, 6 bg, 58 border). Wired as `--wp--preset--color--white`. The page floor between the dark hero band and the dark footer — every editorial section below the hero sits on pure white. - **Pure Black** (`{colors.pure-black}` — #000000): frequency 3. Wired as `--wp--preset--color--black`. A rare third tone used only on the privacy-banner border. The chrome uses `{colors.ink}` rather than pure black for the dark surfaces. ### Text - **Ink** (`{colors.ink}` — #05141f): frequency 290 (144 text, 141 border, 5 background). The load-bearing chrome color — vehicle-card text, footer link rows, hairline outlines on cards and dropdowns, the hero-band background fill, and the footer background fill. A deep slate-navy with a faint blue cast that ties to the photographic blue-hour sky tones in the hero band; never pure black. - **Ink Soft** (`{colors.ink-soft}` — #333333): frequency 62 (31 text, 31 border). A secondary text tone one step softer than the ink — used for body paragraphs that need to read slightly recessed against the white canvas. ### Hairline - **Hairline** (`{colors.hairline}` — #aaaaaa): frequency 3 (1 bg, 2 border). Used only on the accessibility-toggle floating button as the fill. There is no second border tone in the captured chrome; structural hairline duty falls entirely to `{colors.ink}` (#05141f) at 1px. ### Inherited WordPress presets (absent from chrome) The page CSS exposes 14 WordPress block-editor preset colors via `--wp--preset--color--*` variables — vivid red, vivid green, vivid orange, vivid purple, pale pink, pale cyan blue, luminous vivid amber, and several others. None of them render a single pixel on the captured chrome. They ship with the WordPress block editor template Kia's marketing site is built on, not with the Kia rebrand palette. Listing them here helps the extraction reader understand why the JSON shows 19 clustered colors when the visual chrome has 5. ## Typography ### Font Family The system runs two families. **KiaSignatureBold** is the proprietary geometric display family released with the 2021 rebrand — the same letterforms that built the new angular Kia wordmark. **Almoni** (and `AlmoniBold`) is the regional Hebrew/Latin sans used for body and utility text on the Israel marketplace surface. Fallbacks walk `sans-serif`. The pairing is the post-rebrand brand voice: graphic-led display family carrying every "look at me" typographic moment, neutral utility sans carrying the body work. There is no monospace tier, no serif tier, and no third sans. ### Hierarchy | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-xl}` | 50px | 700 (KiaSignatureBold) | 56px | Oversize range-counter ("553") | | `{typography.display-md}` | 36px | 400 (AlmoniBold) | 50.4px | Major section displays | | `{typography.heading-md}` | 30px | 400 (AlmoniBold) | 36px | Section h2 headings | | `{typography.heading-sm}` | 26px | 400 (AlmoniBold) | 32px | h3 sub-section emphasis | | `{typography.hero-heading}` | 24px | 700 (KiaSignatureBold) | 32px | Hero h2 ("The New Kia Stonic") | | `{typography.body-lg}` | 24px | 400 (AlmoniBold) | 18px | Promotional emphasis blocks | | `{typography.body-md}` | 20px | 400 (Almoni) | 18px | Default running text | | `{typography.body-sm}` | 18px | 400 (Almoni) | 25.2px | Nav links, card body | | `{typography.body-xs}` | 16px | 400 (Almoni) | 18px | Secondary captions, button labels | | `{typography.body-emphasis}` | 16px | 700 (Almoni) | 32px | Emphasized body callouts | | `{typography.caption}` | 12.8px | 400 (Almoni) | 12.8px | Legal disclaimers, footnotes | | `{typography.label-uppercase}` | 14px | 400 (Almoni) | 14px (uppercase) | Eyebrow labels above section headings | ### Principles The 50px range-counter is the largest typographic moment in the system and the only token that uses KiaSignatureBold at display tier. The 24px hero h2 — much smaller than a conventional automotive hero — is also KiaSignatureBold, treating the headline as a graphic element rather than a marketing shout. Every other tier sits in Almoni, reading as neutral utility chrome that lets the KiaSignatureBold moments carry the brand voice on their own. Almoni-on-AlmoniBold is the binary inside the utility tier. Body sits at AlmoniBold for the slightly heavier promotional callouts and at Almoni Regular for default running text. There is no Demi or Medium intermediate weight — the system runs on two utility weights plus the two KiaSignatureBold display moments. ### Note on Font Substitutes KiaSignatureBold is proprietary to the post-2021 Kia brand identity and is not licensed for outside use. The closest open-source substitutes are **Industry** (a contemporary geometric grotesk) and **Eurostile** (a classic squared geometric). **Manrope** at weight 800 transfers reasonably for editorial display moments at the 50px tier. For Almoni, **Heebo** handles Hebrew + Latin pairings; **Frank Ruhl Libre** offers a similar humanist character. Avoid Helvetica as a substitute — the neo-grotesque proportions read distinctly different from Almoni's slightly-warmer letterforms. ## Layout ### Spacing System - **Base unit:** 5px (with 10px and 20px as the dominant module steps). - **Tokens:** `{spacing.xxs}` 3px · `{spacing.xs}` 5px · `{spacing.sm}` 10px · `{spacing.base}` 15px · `{spacing.md}` 20px · `{spacing.lg}` 21px · `{spacing.xl}` 30px · `{spacing.2xl}` 40px · `{spacing.3xl}` 45px · `{spacing.4xl}` 80px. - **Hero band padding:** `80px 0px 45px` (1 occurrence) — generous vertical breathing room around the hero h2 and the range-counter overlay. - **Card padding:** `{spacing.md}` (20px) and `15px 30px` for buttons (2 occurrences). - **Footer padding:** `40px 0px 21px` and `0px 0px 40px` divide the footer link rows from the legal-disclaimer band. ### Grid & Container - **Max content width:** ~1280px on the editorial sections; the hero photograph runs full-bleed. - **Hero band:** edge-to-edge urban-rooftop photograph of two new Kia vehicles (Stonic and Sportage) with the 24px hero h2 and 1px outline CTA overlaid on the lower-center. - **Range-counter band:** an asymmetric 2-column layout pairing the photograph of a single Kia hybrid with the oversize 50px range-counter "553" rendered as a graphic element rather than a headline. - **Vehicle cards:** 3-column grid below the fold showing model categories (Cars, EVs, Hybrid, SUVs) with each card a square-cropped vehicle photograph plus a near-black label. - **Footer:** 5-column grid for site navigation columns, with the brand mark anchoring the right side (RTL layout). ### Rhythm The page alternates between **dark photographic bands** and **light editorial bands** but with much less negotiation than Toyota or Honda — the contrast is hard, the transitions are abrupt, and the absence of accent voltage means each band has to carry its tonal job alone. The hero is dark photograph + white text. The range-counter band is dark photograph + oversize white display. The vehicle-category grid is white + near-black text. The footer is dark + white text. The rhythm reads as graphic-design layout rather than marketing scroll — square crops, hard transitions, no softening. ## Elevation The system has essentially **no shadow tier**. The captured page has 1 shadow occurrence (a soft drop on the accessibility-toggle floating button). Every other surface depends on the hard ink-on-white or white-on-ink contrast for figure-ground. There are no hairline borders softening the card edges; cards either sit hard against the white canvas or sit hard inside the dark hero band. - **Flat (no shadow):** hero, range-counter band, vehicle-category grid, footer — 99.9% of surfaces. - **Single shadow:** the accessibility-toggle floating button carries a 2px soft drop, the only elevation effect in the chrome. - **Hard-contrast layering:** the system uses `{colors.ink}` (#05141f) vs `{colors.canvas}` (#ffffff) full-luminance contrast everywhere a depth signal is needed. ## Shapes The radius scale is **essentially zero**: - `{rounded.none}` 0px — every card, every button, every photograph crop, every footer tile, every dropdown chrome surface. The dominant value across the entire captured chrome. - `{rounded.full}` 9999px — the pagination dots and the accessibility-toggle floating button (50% radius rendered as full circle on square elements). There is no 4px tier, no 8px tier, no pill tier. The system is binary: either a surface is fully square (every content surface and CTA) or it is a circle (pagination dots and the accessibility toggle). The square-corner discipline is the post-rebrand identity's most-visible chrome decision and the one that most-clearly distinguishes Kia from its mainstream-automotive peers. ## Components **`button-primary`** — White `{colors.canvas}` fill, near-black text, `{rounded.none}` 0px radius, 15x30px padding, 48px height. The primary action below the fold ("הצעת מחיר והנחה אונליין" / "Online Price Quote & Discount") sits as a square white block on white with a 1px ink border. No corner softening anywhere. **`button-primary-hover`** — Background flips to `{colors.ink}` with white text — full luminance inversion. The single chromatic moment when the user reaches for the action. **`button-outline`** — Transparent fill with white text and a 1px white border, `{rounded.none}` 0px radius. The hero CTA — sits over the photograph as a white-on-image outline. The post-rebrand identity's signature CTA treatment. **`top-nav`** — Dark `{colors.ink}` surface, white text, 60px height. Houses the new angular Kia wordmark centered (`{component.brand-mark}`), the section links flanking it ("דגמים", "קניית רכב חדש", "שירות לקוחות", "קיימות", "בלוג", "אודות"), and the "צור קשר" Contact link on the right. The dark nav-on-dark-photograph treatment is unusual — most automotive sites use a light nav floating over dark photography. **`nav-link`** — Transparent background, white text in `{typography.body-sm}` (18px / Almoni Regular). 10x15px padding. The active link gets a 2px white underline. **`brand-mark`** — The new 2021 Kia angular wordmark rendered in white on the dark nav band. The single most-prominent appearance of the brand signal on the page. **`hero-band`** — Edge-to-edge urban-rooftop photograph showing two new Kia vehicles on a carpark with the building grid behind. 80px top, 45px bottom, full-width padding. Holds the hero h2 in `{typography.hero-heading}` (24px / KiaSignatureBold) and a single 1px-outline CTA pill overlaid on the lower-center. **`hero-heading`** — White text on the transparent hero photograph, `{typography.hero-heading}` (24px / KiaSignatureBold / 32px line-height). Notably small for an automotive hero — the system treats the headline as a graphic element rather than a marketing shout. **`range-counter`** — White text on the photographic band, `{typography.display-xl}` (50px / KiaSignatureBold). The oversize "553" range-counter is the loudest typographic moment in the system — an editorial pull-quote treatment for a vehicle specification (kilometers of range per charge). **`section-heading`** — Near-black text on white, `{typography.heading-md}` (30px / AlmoniBold). Used for vehicle-category section labels below the fold. **`body-paragraph`** — Default near-black running-text at `{typography.body-sm}` (18px / Almoni Regular / 25.2px line-height). **`card-action`** — White surface with a 1px near-black border, `{rounded.none}` 0px radius, 20px padding. Holds the secondary CTAs below the range-counter band ("הצעת מחיר והנחה אונליין" with a shopping-cart icon and "ליסינג מימוני מבית היבוא" with a document icon). The cards read as square graphic blocks rather than soft action surfaces. **`pagination-dot`** — White `{colors.canvas}` circle, `{rounded.full}` radius. Sits in a row below the hero photograph and marks the active slide. The inactive dots use a lower-opacity white fill. **`accessibility-toggle`** — `{colors.hairline}` (#aaaaaa) circular floating button positioned bottom-left, holding the accessibility-tools icon. The single non-monochromatic element in the captured chrome and the single rounded shape (besides pagination dots). **`footer`** — Dark `{colors.ink}` band — the second dark surface besides the hero photograph. White text in `{typography.body-xs}` (16px / Almoni Regular), 40x0x21 vertical padding. Houses 5 navigation columns and the legal-disclaimer row. ## Do's and Don'ts **Do** carry the entire chrome with `{colors.ink}` (#05141f) and `{colors.canvas}` (#ffffff). The system's strongest move is the monochromatic chrome — adding an accent CTA pill in red, blue, or any chromatic tone collapses the post-rebrand identity back toward the pre-2021 friendly-family voice the brand explicitly moved away from. **Do** use `{rounded.none}` 0px on every content and action surface. The square corners are doing real semantic work — they tell the visitor this is the post-2021 Kia, not the previous generation. Softening to 4px or 8px reads as a regression to the pre-rebrand chrome. **Do** sit display headings in KiaSignatureBold. The proprietary geometric family carries the brand voice on its own — the 24px hero h2 and the 50px range-counter are both KiaSignatureBold, and they are the two typographic moments that signal "rebranded Kia" most-clearly. **Do** use the oversize range-counter treatment as an editorial pull-quote. The 50px "553" rendered as a graphic element rather than a headline is the system's most-distinctive typographic move; pairing a numeric specification with display-tier KiaSignatureBold lets the chrome read as graphic-design layout rather than marketing copy. **Don't** introduce a chromatic CTA pill. The captured chrome has zero accent voltage above the fold, and that decision is the system's signature. Adding even a single ink-blue or rebrand-orange CTA on the homepage breaks the discipline that distinguishes post-2021 Kia from every other family-automotive brand. **Don't** soften corners to a 4px or 8px middle tier. The system is binary — `{rounded.none}` 0px on every content / action surface, `{rounded.full}` on the two circular moments (pagination dots, accessibility toggle). A middle tier collapses the square-corner discipline. **Don't** use the WordPress-preset colors (`--wp--preset--color--vivid-red`, `--wp--preset--color--vivid-green`, etc.) that leak into the extraction. They ship with the WordPress block editor template and are not part of the Kia rebrand palette — using them on Kia chrome will look like a configuration mistake rather than a brand decision. **Don't** swap `{colors.ink}` (#05141f) for pure black `{colors.pure-black}` (#000000). The near-black ink has a faint blue cast that ties to the hero-band photographic blue-hour sky tones; pure black reads colder and breaks the chromatic continuity between chrome and photograph. ## Known Gaps - **Global Kia chrome:** the captured surface is the Kia Israel marketplace site (RTL Hebrew), which inherits the global Kia rebrand chrome but uses regional type (Almoni) and content. The Kia US, Kia Korea, and Kia Europe sites carry the same monochromatic + KiaSignatureBold + zero-radius discipline but with different body font pairings (Latin sans variants instead of Almoni). - **Dark mode:** the captured chrome is light-only below the hero / footer dark bands. A full dark variant is not represented. - **Hover and focus states:** documented for `{component.button-primary-hover}` only; the full state matrix (focus rings, active press, disabled tints) is not exposed on the captured surfaces. - **Form input states:** the captured page has no text-input component above the fold (the contact form lives on a separate page); error / validation styling is not represented. - **Motion:** the hero photograph cross-fades between Kia models on a slow auto-rotate loop; the spec captures end-state values only. Easing curves and rotation rate live in the live page JavaScript. - **WordPress chrome inheritance:** the marketing site is built on a WordPress block editor template that leaks 14 preset colors (vivid red, vivid green, etc.) into the CSS without rendering them. The extraction includes these for completeness, but they are not part of the Kia brand palette. - **EV9 / EV6 product chrome:** Kia's EV-specific marketing surfaces (EV9, EV6, EV3) carry a more graphic-led design treatment with additional typographic moments and the new angular wordmark used at much larger sizes; those product-specific surfaces are not captured here. - **Sub-brand chrome:** Kia's Genesis luxury sub-brand (technically a separate Hyundai-Kia Motor Group brand) sits on a completely separate marketing system with serif display type and a different color palette; it is not represented in this file.