Design System Inspiration of Nota AI

1. Visual Theme & Atmosphere

Nota AI (노타) is a Korean on-device-AI company whose mission is, in its own words, "Democratizing the use of AI" — and the homepage stages that ambition as a confident, engineering-grade product site rather than a hype-driven startup splash. The hero opens on a deep, cool dark-navy canvas (#252a39) with crisp off-white headlines (#f5f5f7), then the page descends into bright white (#ffffff) and pale cool-grey (#f6f6f8) feature bands where text shifts to a dense near-black (#101218) — never pure-black body, which keeps long technical copy readable. The single saturated accent across the whole system is an electric, slightly cobalt blue (#3264f0): it carries links, the blue section eyebrow labels ("Newsroom", "Tech Blog"), and the primary outline button, so the eye is trained to read that one hue as "this is interactive."

The typographic voice is set in Roboto — the workhorse neo-grotesque — used for everything from the 52px / weight-700 hero ("Industry-tailored Vision Intelligence") down to 12px form fields and link buttons; the Korean locale swaps in Pretendard for hangul density. The hierarchy is built on size and weight contrast rather than many type families: bold 700 hero, regular 400 section headlines at ~43px, and a distinctive 21px blue eyebrow that floats above section titles like a chapter marker. Body copy sits quietly at 12–14px. The result reads as precise and industrial — a company that ships AI onto cameras, cars, and edge devices, and wants its marketing surface to feel as measured as its product.

Depth is handled with restraint. Most separation comes from flat tinted bands (#f6f6f8) and thin hairlines (#e7e7e7, #eaeaee) rather than heavy elevation; when a card does lift, it uses a single soft, slightly-offset grey shadow (rgba(141,141,141,0.15) 10px 10px 28px 0px) on a 10px-radius surface — diffuse and quiet, never dramatic. Geometry is gently rounded: a dominant 10px card radius, 4px buttons, 8px on filled CTAs, with the cookie/contact form fields kept deliberately sharp (0px) and outlined in #000000. Muted greys (#7e8390, #888888, #aaaaaa) ladder the secondary text. The overall impression: a clean, modern, slightly technical white-and-navy system anchored by one decisive blue.

Key Characteristics:

• Dark-navy (#252a39) hero/footer canvas paired with bright white (#ffffff) feature bands
• Single saturated accent blue (#3264f0) reserved for links, eyebrow labels, and the primary button
• Near-black (#101218) for on-light text instead of pure black — warmer, easier to read
• Off-white (#f5f5f7) headlines on the dark hero for soft, high-end contrast
• Roboto everywhere (Pretendard for the KOR locale) — size + weight carry the hierarchy
• Distinctive 21px blue eyebrow label floating above section headlines
• Flat depth: tinted #f6f6f8 bands and #e7e7e7 / #eaeaee hairlines do the separating
• One soft diffuse card shadow (rgba(141,141,141,0.15) 10px 10px 28px) when lift is needed
• Gently rounded geometry — 10px cards, 4px / 8px buttons — with sharp 0px outlined form fields

2. Color Palette & Roles

Primary

• Nota Blue (#3264f0): The single saturated brand accent. Links, the blue section eyebrow labels, primary outline button border + text, and interactive highlights. The system's one "action" color.

Dark Canvas & Ink

• Dark Navy (#252a39): Hero and footer background, filled-CTA fill, and dark immersive sections. A cool blue-charcoal that grounds the brand.
• Ink Near-Black (#101218): Primary on-light text and heading color — a very dark blue-black used instead of pure black for body copy.
• Pure Black (#000000): Maximum-contrast accents and the contact-form field border (1px solid #000000).

Neutral & Surface

• Pure White (#ffffff): Page background for feature bands, card surfaces, and text on dark/navy.
• Headline Off-White (#f5f5f7): Hero headline color on the dark-navy canvas — soft white, not stark.
• Surface Grey (#f6f6f8): Cool pale-grey tinted band for alternating sections and grouped content.
• Field Grey (#fafafa): Background fill for contact/form input fields.
• Hairline (#e7e7e7): Thin card outlines and dividers — the primary separation device.
• Border Soft (#eaeaee): Alternate soft border on light surfaces and quiet dividers.

Text Hierarchy

• Ink Near-Black (#101218): Primary text, headings, strong labels on light.
• Slate (#7e8390): Secondary body copy, descriptions, captions.
• Muted Grey (#888888): Tertiary text and metadata.
• Faint Grey (#aaaaaa): Lowest-emphasis labels, disabled/placeholder text, language-switcher idle state.
• On-Primary White (#ffffff): Text on navy fills and the dark hero — declared as on-primary.

3. Typography Rules

Font Family

• Sans (default): Roboto (with sans-serif fallback) — used for headlines, navigation, body, and button labels across the live ENG site.
• Korean locale: Pretendard (with sans-serif fallback) — substituted for hangul-dense KOR pages.

Hierarchy

Principles

• One family, weight-and-size hierarchy: Roboto carries the entire ENG system; contrast comes from 700 vs 400 and the size jump from 52px hero to 12px caption, not from mixing typefaces.
• The blue eyebrow as structure: a 21px #3264f0 label sits above section headlines as a recurring chapter marker — a signature of the layout rhythm.
• Near-black, not black, for reading: body and headings on light surfaces use #101218, reserving pure #000000 for accents and form-field borders.
• Locale-aware swap: Roboto for ENG, Pretendard for KOR — the roles never cross; each font owns its locale.

4. Component Stylings

Buttons

Primary (Outline Blue)

• Background: transparent
• Text: #3264f0
• Border: 1px solid #3264f0
• Radius: 4px
• Padding: 11px 15px
• Font: 12px Roboto weight 500
• Height: 38px
• Use: Primary action button (Squarespace sqs-button-element--primary) — the accent-blue call to action

Dark Fill CTA

• Background: #252a39
• Text: #ffffff
• Radius: 8px
• Padding: 16px 24px
• Font: 12px Roboto weight 400
• Height: 50px
• Use: Filled dark-navy CTA — "Subscribe to our newsletter →", header actions

Secondary (Outline Navy)

• Background: transparent
• Text: #252a39
• Border: 1px solid #252a39
• Radius: 4px
• Padding: 11px 15px
• Font: 12px Roboto weight 500
• Use: Secondary / dismiss action (e.g. cookie "Decline", form "Send")

Inline Link Button

• Background: transparent
• Text: #101218
• Font: 12px Roboto weight 400
• Use: Text link CTA with arrow — "Read More →", "Learn more →"

Inputs & Forms

Contact Field

• Background: #fafafa
• Text: #101218
• Border: 1px solid #000000
• Radius: 0px
• Padding: 10px
• Height: 40px
• Font: 12px Roboto
• Use: Contact form text / email field — deliberately sharp-cornered

Textarea

• Background: #fafafa
• Text: #101218
• Border: 1px solid #000000
• Radius: 0px
• Padding: 10px
• Height: 100px
• Use: Multi-line message field on the contact form

Cards & Containers

Elevated Card

• Background: #ffffff
• Radius: 10px
• Shadow: rgba(141,141,141,0.15) 10px 10px 28px 0px
• Use: Insight / content card with a soft, slightly-offset grey shadow

Outline Card

• Background: #ffffff
• Border: 1px solid #e7e7e7
• Radius: 10px
• Use: Bordered feature card — hairline outline, no shadow

Badges

Blue Eyebrow Label

• Text: #3264f0
• Font: 21px Roboto weight 400
• Use: Section eyebrow / category label above headlines ("Newsroom", "Tech Blog")

Navigation

• Background: #252a39 (dark header) / #ffffff (scrolled / light pages)
• Text: #ffffff on dark, #101218 on light
• Font: 17px Roboto weight 400
• Active: accent blue #3264f0 text
• Use: Top horizontal nav ("AI Solutions", "Tech Blog", "Company", "Contact Us")

---

Verified: 2026-06-26 (omd:add-reference CREATE — Tier 1 live inspect, 3 surfaces) Tier 1 sources: https://www.nota.ai (homepage, live DOM), https://www.nota.ai/community (Tech Blog, live DOM), https://www.nota.ai/contact-us (contact form, live DOM), https://github.com/nota-github (official GitHub org) Tier 2 sources: getdesign.md/nota — not listed ("No designs found"); styles.refero.design/?q=nota — no Nota AI match (fuzzy note-app results only) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: ~4px
• Scale: 4px, 8px, 11px, 15px, 16px, 24px, 48px, 64px
• Notable: buttons land at 11px 15px (outline) and 16px 24px (filled); form fields use a uniform 10px inset

Grid & Container

• Centered single-column hero anchored by the 52px Roboto headline on dark navy
• Feature sections alternate between white (#ffffff) and pale-grey (#f6f6f8) full-width bands
• Cards group insights/solutions at a consistent 10px radius
• Footer returns to the dark-navy (#252a39) canvas, mirroring the hero

Whitespace Philosophy

• Breathing, technical calm: generous vertical rhythm between sections keeps a dense, capability-heavy story scannable.
• Flat segmentation: sections separate by background tint (#f6f6f8 vs #ffffff) and hairlines (#e7e7e7), not heavy borders.
• One accent, repeated: the blue eyebrow + blue links create a consistent vertical cadence down the page.

Border Radius Scale

• Sharp (0px): contact-form fields (outlined in #000000)
• Small (4px): outline buttons, language switcher
• Medium (8px): filled dark CTAs
• Large (10px): cards and content containers — the workhorse radius
• Circle (50%): avatars and icon chips

6. Depth & Elevation

Shadow Philosophy: Nota AI is a mostly-flat system. Live inspection found box-shadow: none across the hero, nav, headings, and most sections; depth is communicated through flat tinted bands (#f6f6f8) and thin #e7e7e7 / #eaeaee hairlines. When a card does lift, it reaches for a single soft, diffuse grey shadow offset down-and-right (10px 10px 28px) at low 0.15 alpha — quiet and atmospheric rather than dramatic. Emphasis is carried by color (the blue #3264f0 or the dark-navy #252a39), never by stacking heavy elevation.

7. Do's and Don'ts

Do

• Use Roboto for the ENG system (Pretendard for KOR) and let weight + size carry hierarchy
• Reserve the accent blue (#3264f0) for links, eyebrow labels, and the primary button — the single action color
• Use the blue 21px eyebrow label above section headlines — it's the layout's signature marker
• Use near-black navy (#101218) for on-light text instead of pure black
• Pair the dark-navy hero/footer (#252a39) with bright white (#ffffff) feature bands
• Separate sections with flat #f6f6f8 tints and #e7e7e7 hairlines, not heavy shadows
• Keep cards at 10px radius; when lift is needed use the soft rgba(141,141,141,0.15) 10px 10px 28px shadow
• Keep contact-form fields sharp (0px) with the #000000 outline and #fafafa fill

Don't

• Spread the accent blue across many elements — it dilutes the single-action signal
• Use pure black (#000000) for body text — reserve near-black #101218 for reading
• Stack heavy or dark drop shadows for elevation — Nota leans flat
• Mix in a second saturated accent color — blue is the only brand hue
• Round the form fields — they are intentionally sharp against the rounded cards
• Use a second display typeface — Roboto (ENG) / Pretendard (KOR) own the system
• Drop the eyebrow label — it is the recurring structural device above headlines
• Use stark #ffffff headlines on the dark hero — soften to #f5f5f7

8. Responsive Behavior

Breakpoints

Touch Targets

• Outline buttons at 38px height with 11px 15px padding
• Filled CTAs at ~50px height with generous 16px 24px padding
• Nav links spaced comfortably within the dark header

Collapsing Strategy

• Hero: 52px Roboto headline scales down on mobile, weight 700 maintained
• Feature bands: multi-column → stacked single column
• Tinted/white alternating sections keep full-width treatment
• Footer returns to dark navy at all sizes

Image Behavior

• Product and solution imagery sits on 10px-radius cards
• Cards maintain the soft grey shadow or hairline outline across breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Primary accent / links: Nota Blue (#3264f0)
• Dark canvas / footer: Dark Navy (#252a39)
• On-light text: Ink Near-Black (#101218)
• Hero headline: Off-White (#f5f5f7)
• Background: Pure White (#ffffff)
• Tinted band: Surface Grey (#f6f6f8)
• Form field fill: Field Grey (#fafafa)
• Hairline / card border: #e7e7e7 (also #eaeaee)
• Secondary text: Slate (#7e8390)
• Tertiary / faint: #888888, #aaaaaa
• Field border / accents: Pure Black (#000000)

Example Component Prompts

• "Create a hero on dark navy #252a39. Headline at 52px Roboto weight 700, line-height 1.35, color #f5f5f7. Above it a 21px Roboto blue eyebrow label in #3264f0. One outline button: transparent bg, #3264f0 text + 1px solid #3264f0 border, 4px radius, 11px 15px padding, 12px Roboto 500."
• "Design a feature card: white #ffffff background, 10px radius. Either a 1px solid #e7e7e7 hairline outline (no shadow) OR a soft shadow rgba(141,141,141,0.15) 10px 10px 28px 0px. Title 43px Roboto weight 400, #101218. Body 14px Roboto, #7e8390."
• "Build a contact form field: #fafafa background, 1px solid #000000 border, 0px radius, 10px padding, 12px Roboto, #101218 text. Submit as a navy outline button (#252a39 text + border, 4px radius)."
• "Create top nav on dark navy: 17px Roboto weight 400 links in #ffffff, active item in accent blue #3264f0. Filled dark CTA #252a39 bg, white text, 8px radius."

Iteration Guide

1. Roboto for ENG, Pretendard for KOR — one family per locale, hierarchy from weight + size
2. Blue (#3264f0) is the single action color — don't spread it
3. The 21px blue eyebrow label above section titles is the signature — keep it
4. Near-black #101218 for reading, pure #000000 only for accents/form borders
5. Cards at 10px radius; soft rgba(141,141,141,0.15) 10px 10px 28px shadow or #e7e7e7 hairline
6. Dark navy #252a39 hero/footer bookends bright white feature bands
7. Form fields stay sharp (0px) against the rounded cards

---

10. Voice & Tone

Nota AI's voice is confident, technical, and benefit-framed — a deep-tech company explaining hard engineering (model compression, on-device inference, edge optimization) in plain, capability-first English. The brand mission, stated verbatim, is "Democratizing the use of AI," and the homepage register matches: declarative headlines that name a concrete outcome rather than sell a feeling. Copy treats the reader as a technical buyer or engineer who wants to know what the product does and where it runs.

Voice samples (verbatim from live surfaces):

• "Industry-tailored Vision Intelligence" — hero headline. (verified live 2026-06-26)
• "High-performance AI on Any Device" — section headline. (verified live 2026-06-26)
• "Stay Ahead with the Latest AI Insights" — newsroom section. (verified live 2026-06-26)
• "Democratizing the use of AI" — company mission (About Us). (verified 2026-06-26)

Forbidden register: vague AI hype with no concrete deployment claim, fear-based marketing, undefined jargon left unexplained, exclamation-heavy salesmanship.

11. Brand Narrative

Nota AI (노타, Nota Inc.) was founded in 2015 in Korea with a mission it states plainly today: "Democratizing the use of AI." The company began as an AI startup and evolved into a leader in on-device / edge AI — the discipline of compressing and optimizing neural networks so they run efficiently on real hardware (cameras, vehicles, embedded devices) rather than only in the cloud. Its flagship platform, NetsPresso®, is an end-to-end neural-network optimization toolchain that takes models from training to deployable, hardware-aware form.

Around that core, Nota builds vertical AI Solutions — Vision Agent, Intelligent Transportation Systems (ITS), Driver Monitoring & Face Recognition (DMS & FR), Industrial Safety, and Surveillance — each tailored to a specific industry. The company expanded globally with subsidiaries in Berlin (2018) and Sunnyvale (2023), signalling a deliberate move beyond the domestic market toward automotive and industrial AI customers worldwide.

What Nota's design refuses, visible in its restraint: the over-saturated, gradient-heavy aesthetic of consumer-AI hype, and the intimidating density of legacy enterprise software. What it embraces: a clean white-and-navy system, a single decisive blue, plain capability-first language, and a layout disciplined enough (the recurring blue eyebrow, the flat tinted bands) to feel as engineered as the on-device models it ships.

12. Principles

1. Democratize, don't gatekeep. The stated mission is to make AI usable broadly. UI implication: plain, capability-first copy; no undefined jargon; outcomes named before features.
2. One action, one color. Blue (#3264f0) means "interactive." UI implication: reserve the accent for links, eyebrows, and the primary button so the next step is never ambiguous.
3. Engineered restraint. A company that optimizes models for efficiency should not waste pixels. UI implication: flat depth, hairline separation, one soft shadow — nothing decorative.
4. Structure you can feel. The blue eyebrow label is a recurring chapter marker. UI implication: keep the eyebrow-over-headline rhythm consistent across sections.
5. Calm navy, bright work. UI implication: dark-navy (#252a39) hero/footer bookend bright white (#ffffff) feature bands — drama from contrast, not from color noise.

13. Personas

Personas below are fictional archetypes informed by publicly observable Nota AI customer segments (embedded/edge AI engineers, automotive and industrial buyers, ML researchers), not individual people.

Dohyun Park, 34, Seoul. An embedded-systems engineer integrating a vision model onto an edge device with tight memory and latency budgets. Evaluates NetsPresso because cloud inference is a non-starter for his hardware. Trusts a vendor whose marketing names the actual deployment constraint instead of promising "AI magic."

Lena Brandt, 41, Berlin. A product lead at an automotive supplier exploring driver-monitoring (DMS) and ITS. Wants industry-specific evidence, not generic AI claims. Reads Nota's clean, capability-first site as a signal of an engineering-led company she can put into a procurement process.

Aarav Shah, 29, Sunnyvale. An ML researcher comparing model-optimization toolchains. Skims the Tech Blog for concrete benchmarks and reproducible methods. Values that the site is plain and technical rather than gradient-heavy hype.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and quiet, consistent with the engineered-restraint aesthetic. The nav uses a "slideIn" folder reveal on hover/tap; arrow link CTAs ("Read More →") nudge their arrow on hover; sections fade-in from below at motion-standard / ease-enter. No bounce or spring — a deep-tech infrastructure brand signals steadiness, not playfulness. Under prefers-reduced-motion: reduce, all transitions collapse to instant and the page remains fully functional.