노타 DESIGN.md

Design System Inspiration of Nota AI

Overview

Visual Theme & Atmosphere

Nota AI (노타, Nota Inc.) is a Korean on-device AI company whose company page states its mission in four words: "Democratizing the use of AI". Its milestones trace the path. It began in 2015 building an AI tool for reducing typing errors, raised seed funding, and pivoted to on-device AI; it opened a Berlin subsidiary and raised Series A; it launched the NetsPresso® model-optimization platform and signed Arm, Renesas and Deutsche Telekom; it opened Nota America in Sunnyvale and raised Series B; and in 2024–2025 it integrated NetsPresso with Qualcomm AI Hub, signed a multi-year contract with Samsung Electronics and raised Series C. The same page lists the headquarters in Daejeon and an office in Gangnam, Seoul.

The website reads as an engineering vendor's catalogue. Headlines are set in Roboto: 52px / 700 for the largest home line and 43.2px / 400 for section heads such as "Stay Ahead with the Latest AI Insights". Dark heroes carry white navigation and product tabs that brighten from 55% to 85% white under the pointer. Below them, white bands hold partner-logo cards with one soft offset shadow and a blog feed of 10px-radius cards. Text on light ground is near-black #101218; card titles are navy #252a39.

Colour is almost absent. The one chromatic colour on the three captured pages is cobalt #3264f0, which the site's own card stylesheet names --blue in a block headed "Nota 브랜드 카드 스타일". It colours the category tag on each blog card and becomes the card border on hover. Everything else is navy, near-black, white and light greys.

Key Characteristics:

• Roboto throughout, with size and weight carrying hierarchy
• Near-black #101218 text and navy #252a39 card titles on white
• Cobalt #3264f0 as the only chromatic colour: blog-card tags and hover borders
• Dark heroes with translucent white tabs that brighten on hover
• 10px cards, 8px slider cards and buttons, 4px small controls
• One soft card shadow (rgba(141, 141, 141, 0.15) 10px 10px 28px) on partner cards; blog cards lift 4px on hover

Primary tasks

• Read the Tech Blog and Newsroom for concrete results
• Evaluate NetsPresso® for a model that has to run on a device
• Explore the AI solution built for an industry (Vision Agent, Industrial Safety, Surveillance, ITS, DMS & FR)
• Check the company's milestones and offices
• Reach the team through Contact Us

Brand Narrative

Nota's company page tells its history in four eras. 2015–2017, "Initiation and Foundation": founded to build an AI-based solution for reducing typing errors, seed funding, Nota Inc. established. 2018–2020, "Strategic Pivot to On-device AI": a Berlin subsidiary, pre-Series A and Series A. 2021–2023, "Product Development & Product Market Fit": NetsPresso® launched and integrated with NVIDIA TAO; contracts with Deutsche Telekom, Arm and Renesas; on-device solutions commercialised for ITS, DMS and FR; Nota America established in Sunnyvale; Series B. 2024–2025, "Globalization & Business Expansion": NetsPresso on Qualcomm AI Hub, a multi-year Samsung Electronics contract, collaborations with NVIDIA, Sony, Renesas, Qualcomm, MediaTek, NXP and Advantech, and Series C.

NetsPresso has its own site, whose title is "NetsPresso - Empower Your AI Chip with Optimized Model Deployment", and the company publishes an insights blog at blog.nota.ai. The restrained website fits that position: a hardware-facing optimisation vendor presenting itself through milestones, partners and technical writing rather than visual spectacle.

Principles

1. Democratize, don't gatekeep. UI implication: plain, capability-first copy; outcomes named before features.
2. Engineered restraint. UI implication: monochrome surfaces, one small accent, one soft shadow.
3. Evidence over spectacle. UI implication: lead with partners, milestones and technical posts.

Personas

Personas below are fictional archetypes informed by the audiences the site addresses (embedded AI engineers, automotive and industrial buyers, ML researchers), not individual people.

Dohyun Park, 34, Seoul. An embedded-systems engineer fitting a vision model onto an edge device with tight memory and latency budgets. Evaluates NetsPresso because cloud inference is not an option for his hardware.

Lena Brandt, 41, Berlin. A product lead at an automotive supplier exploring driver monitoring and ITS. Wants industry-specific evidence she can put into a procurement process.

Aarav Shah, 29, Sunnyvale. An ML researcher comparing model-optimisation toolchains who reads the Tech Blog for benchmarks and methods.

Colors

Primary

• Nota Blue (#3264f0): The primary colour because it is the only colour the site renders in an accent role. It is the text of the category tag on every blog card (on a rgba(50, 100, 240, 0.08) wash) and the border a blog card takes on hover and press. The evidence is thin: no action button on the three pages is filled with it. The one filled call to action, Try NetsPresso®, is near-white rgba(255, 255, 255, 0.95) with #101218 text on a dark band, and the pages are otherwise monochrome.

Neutral & Ink

• Ink (#101218): Body and list text on light bands; the NetsPresso button label.
• Navy (#252a39): Blog card titles and five recorded fills across the three pages (one is the Squarespace skip link).
• White (#ffffff): Card and page ground; hero navigation and the active hero tab.
• Muted (#aaaaaa): The KOR / ENG switch.
• Hero Link (#e7e7e7): Learn More → over the hero.

Surface & Borders

• Surface (#f6f6f8): Blog card thumbnail ground.
• Hairline (#ececf1): 1px border of blog cards.
• Border (#cccccc): 1px border of the NetsPresso use-case slider cards.

Typography

Font Family

• Live surface use: Roboto (221 uses), served from fonts.gstatic.com. Headings, navigation, tabs, lists and body all compute Roboto.
• Declared only: Pretendard leads the blog-card stack (Pretendard, Roboto, -apple-system, "system-ui", sans-serif) but no Pretendard file was found loading (unresolved / low), so the cards render in Roboto. Gilroy is declared on four text elements (unresolved / low). MathJax faces (MJXTEX*) and Squarespace icon fonts are declared with 0 uses.
• Official product use: no Nota page opened names a typeface.

Hierarchy

Principles

• Weight contrast in one family: bold 700 hero against regular 400 section heads.
• Plain technical English: headlines name outcomes ("High-performance AI on Any Device").

Layout

Spacing System

• Measured paddings: 3px / 9px (tag), 6px (language switch), 10px / 22px (partner card), 16px / 30px (NetsPresso button)

Grid & Container

• Full-width dark hero with product tabs, then white bands of card grids
• Blog feed cards at about 383px wide; partner logos in a dense card grid
• The NetsPresso page stacks feature lists and a card slider

Border Radius Scale

• 4px: small controls
• 8px: slider cards and the NetsPresso button
• 10px: blog and partner cards
• 999px: tags

Responsive Behavior

This pass captured the desktop layout at 1440 × 900 only. No breakpoint was measured, so none is declared.

Elevation & Depth

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.card: rgba(141, 141, 141, 0.15) 10px 10px 28px 0px
• shadow.card-hover: rgba(37, 42, 57, 0.1) 0px 6px 12px 0px

Motion & Easing

Measured by the probe on the home page:

• Blog card: transform, box-shadow, border-color 0.18s ease
• Hero tab: color 0.3s ease-out, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1)
• Hero link: the longest transition in its scope is 600ms (the underline)

No other duration or easing was read.

Components

Cards

Blog Card

• Background: #ffffff
• Text: #101218 (title #252a39)
• Border: 1px solid #ececf1
• Radius: 10px
• Hover: border #3264f0, shadow rgba(37, 42, 57, 0.1) 0px 6px 12px, lifts 4px over 0.18s
• Use: Newsroom and Tech Blog feed on home

Partner Card

• Background: #ffffff
• Radius: 10px
• Padding: 10px 22px
• Shadow: rgba(141, 141, 141, 0.15) 10px 10px 28px 0px
• Use: Partner logo grid on home

Slider Card

• Border: 1px solid #cccccc
• Radius: 8px
• Size: 463 × 477
• Use: NetsPresso use cases, with a half-black title bar

Badges

Blog Tag

• Background: rgba(50, 100, 240, 0.08)
• Text: #3264f0
• Radius: 999px
• Padding: 3px 9px
• Font: 11.5px / 600
• Use: Category tag on blog cards

Buttons & Links

Try NetsPresso®

• Background: rgba(255, 255, 255, 0.95)
• Text: #101218
• Radius: 8px
• Padding: 16px 30px
• Height: 50px
• Use: The filled call to action on the NetsPresso page

Hero Link (Learn More →)

• Text: #e7e7e7
• Font: 16px / 700
• Hover: a 1px underline grows to full width
• Use: Under the hero tabs

Language Switch

• Text: #aaaaaa
• Radius: 4px
• Padding: 6px
• Font: 15px / 400
• Use: KOR / ENG in the header

Navigation

Hero Tab

• Text: rgba(255, 255, 255, 0.55); active #ffffff
• Font: 16px / 700
• Hover: 85% white over 0.3s
• Use: Product tabs in the home hero

Header Folder

• Text: #ffffff over dark heroes (#101218 on the light NetsPresso header)
• Font: 16.68px / 400
• Use: NetsPresso®, AI Solutions, Company

---

Verified: 2026-09-30 (deterministic collector capture of three public pages of nota.ai, fixed keyboard probe on the home page, and first-party context) Tier 1 sources: https://www.nota.ai/ ; https://www.nota.ai/aboutus ; https://www.nota.ai/netspresso ; https://netspresso.ai/ ; https://blog.nota.ai/insights Tier 2 sources: not attempted in this pass Conflicts unresolved: none

States

Focus, disabled, empty, loading, error and success states were not measured in this pass and are not declared.

Do's and Don'ts

Do

• Keep #3264f0 for small accents: tags and hover borders
• Set everything in Roboto and use weight for contrast
• Use #101218 for text and #252a39 for card titles
• Keep cards at 10px radius with a hairline or one soft shadow

Don't

• Fill large areas or buttons with blue; the site never does
• Add gradients or extra accent colours
• Mix in a second display face

Voice & Tone

Nota AI writes confident, capability-first English for engineers and technical buyers. Headlines name an outcome and a place it runs.

Voice samples (verbatim, 2026-09-30):

• "High-performance AI on Any Device" — home headline
• "Stay Ahead with the Latest AI Insights" — home feed heading
• "Democratizing the use of AI" — company page
• "Try NetsPresso®" — NetsPresso page call to action

Forbidden register: AI hype with no deployment claim, fear-based marketing, unexplained jargon.

Agent Prompt Guide

Quick Color Reference

• Accent: #3264f0
• Text: #101218; card titles #252a39
• Surfaces: #ffffff, #f6f6f8
• Borders: #ececf1, #cccccc
• Muted: #aaaaaa; hero link #e7e7e7

Example Component Prompts

• "Blog card: white, 1px solid #ececf1, 10px radius, #f6f6f8 thumbnail, 17px / 700 Roboto title in #252a39, a pill tag in #3264f0 on an 8% blue wash. On hover the border turns #3264f0, a 0 6px 12px navy shadow at 10% appears and the card rises 4px over 0.18s."
• "Dark hero tabs: 16px / 700 Roboto labels at 55% white, the active one pure white; hover brightens to 85% over 0.3s."

Iteration Guide

1. One accent, used small
2. Roboto only
3. Near-black text, navy titles
4. 10px cards, soft shadow or hairline

---

Governance

Known Gaps

• Contrast, blog-tag. Text #3264f0 on #3264f014 measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.