--- name: nova-design core: "1.0" dials: { density: default, shape: soft, depth: flat, contrast: standard } accent-scope: primary actions, links and selected states icons: lucide overrides: - { token: radius-control, value: 7px, reason: "Nova buttons use a 7px corner — between the 6px and 8px core steps — and inputs use 8px; keep both" } - { token: letter-spacing-body, value: "0.02em–0.07em", reason: "Nova body and small text are tracked open (+1–2px), headings tracked tight (−2px)" } description: "Design-system skill for Nova, the HAI Automation Platform: Poppins everywhere (headings 500 with −2px tracking, body 400 tracked open), a near-white #FAFCFE canvas with white cards, Nova Primary Blue #3C4EEE for primary actions and links, Secondary Sky Blue #7EE3FF for secondary actions, #0A0908 ink, #E6E6E9 hairlines, 7px buttons, 8px inputs and cards, Lucide-style line icons, and a white asterisk-star wordmark on black. Use for any Nova-branded product UI, marketing page, doc, deck or graphic. Use it for every kind of output, not only web UI: PowerPoint / Keynote / Google Slides decks, Word and Google Docs documents, PDF reports, emails, social posts, charts and diagrams." --- # Nova — Design System Skill Nova is the visual language of the HAI Automation Platform: a calm, technical product where people set up and supervise automations and AI agents. The look is clean and confident — a near-white canvas, white cards, black type set in Poppins, and one saturated blue that marks every primary action. A bright sky blue is the secondary colour, used for secondary buttons, chips and highlights, never for body text. Everything in this skill is read from the Nova Figma design system (Logo, Color Scheme, Typography and Components frames). Where a value was not in the file it is marked as derived. --- ## Brand Personality | Trait | Expression | |---|---| | **Precise** | Poppins Medium headings tracked −2px, tight 1.1 line height, a strict type ladder from 64px to 10px. | | **Calm** | Near-white `#FAFCFE` canvas, white cards, generous whitespace, grey hairlines instead of shadows. | | **Energetic** | One electric blue `#3C4EEE` for primary actions, a sky blue `#7EE3FF` for secondary actions and highlights. | | **Clear** | One primary action per view, arrow-right on forward actions, labels above every field, helper text below. | | **Technical, not cold** | Open-tracked body copy, soft 7–8px corners, friendly pastel chip colours for categories and status. | Tone of voice: plain and direct product language — "Create automation", "Connect a source", "Run now". Sentence case for headings, buttons and labels; Pre Title labels (12px, 600, +3px tracking) may be uppercase. No exclamation marks; say what happens next. Write original copy in this voice. **Logo** — the Nova wordmark: an eight-point asterisk star followed by **NOVA** in a heavy geometric sans, set in a single colour. Primary lockup is white on Nova Primary Black `#0A0908`; it also sits black on white and black on Secondary Sky Blue `#7EE3FF`. Keep clear space equal to the height of the star on all sides; never recolour the star separately from the wordmark, never add effects, never stretch. Sample copy: headline "Automate the work, keep the judgement." · body "Nova runs your routine operations with AI agents and hands every decision that matters back to you." · CTA "Create automation" · stat "3.4× faster resolution". --- ## Color Tokens ```css :root { /* Surfaces */ --nova-light: #FAFCFE; /* page background */ --nova-white: #FFFFFF; /* cards, inputs, panels */ --nova-light-grey: #F5F5F5; /* section band, disabled fill */ --nova-extra-light-grey: #F8F8F8; /* table stripe, hover */ --nova-medium-light-grey: #E6E6E9; /* hairlines, tag border */ --nova-dark-grey: #181D21; /* dark surfaces, input border, form labels */ /* Ink */ --nova-primary-black: #0A0908; /* body text, headings */ --nova-medium-dark-grey: #66666E; /* secondary text */ --nova-medium-grey: #9999A1; /* placeholder and helper text (large text only) */ --nova-text-body: #4A4A68; /* long-form body copy */ /* Brand */ --nova-primary-blue: #3C4EEE; /* primary buttons, links, selected states */ --nova-primary-blue-200: #303CBD; /* hover */ --nova-primary-blue-400: #232C8C; /* pressed; label on sky-blue and outline buttons */ --nova-sky-blue: #7EE3FF; /* secondary button fill, highlights */ --nova-sky-blue-200: #5AC8FA; --nova-sky-blue-400: #479FC8; --nova-light-green: #8FFFB1; /* positive highlight */ --nova-light-green-200: #6FE392; --nova-light-green-400: #49B46B; /* Chips */ --nova-chip-blue: #D9E8FF; --nova-chip-cyan: #C5EEF9; --nova-chip-pink: #FAD8F3; --nova-chip-orange: #F8E3CA; --nova-chip-teal: #9EF0F0; --nova-chip-purple:#E8DAFF; --nova-chip-cool: #DDE1E6; /* Status */ --nova-success: #09B96D; --nova-error: #FF4B24; --nova-amber: #FF9500; } ``` Rules: body text is `--nova-primary-black` on white or `--nova-light`. Blue is the only colour for primary actions and links. Sky blue carries a `--nova-primary-blue-400` label, never white. `#9999A1` fails 4.5:1 on white — use it only for placeholders, helper text at 14px+ alongside a visible label, or disabled states. --- ## Typography Poppins is the system face; Work Sans appears for a few bold body and subtitle styles. ```css :root { --nova-font: "Poppins", system-ui, sans-serif; --nova-font-alt: "Work Sans", system-ui, sans-serif; } body { font: 400 16px/22px var(--nova-font); letter-spacing: 0.02em; color: #0A0908; background: #FAFCFE; } ``` | Style (Figma) | Size / line | Weight | Tracking | |---|---|---|---| | Heading 1 | 64 / 68 | 500 | −2px | | Heading 2 | 48 / 52 | 500 | −2px | | Heading 3 | 40 / 44 | 500 | −2px | | Heading 4 | 32 / 36 | 500 | −2px | | Heading 5 | 24 / 30 | 500 | −2px | | Heading 6 | 20 / 24 | 500 | −2px | | Subtitle | 24 / 30 (Work Sans) | 500 | 0 | | Body Large | 18 / 24 | 400 | +2px | | Body Medium | 16 / 22 | 400 | +2px | | Body Medium Bold | 16 / 22 | 600 | 0 | | Body Small | 14 / 18 | 400 | +1px | | Body Smaller / Tiny | 12 / 16 · 10 / 14 | 400 | +1px | | Pre Title | 12 / 18 | 600 | +3px, uppercase | | Button Caps | 16 / 20 | 600 | +4px, uppercase | | Link Large / Medium / Small | 16 / 20 · 14 / 18 · 12 / 16 | 600 | 0, underlined variants | --- ## Shape and density - Corners: **7px** buttons and icon buttons, **8px** inputs, text areas and cards, **6px** tags. - Borders: 1px. `#E6E6E9` for hairlines and tags; `#181D21` for input fields; `#3C4EEE` for outline buttons. - Depth: Flat. Inputs carry a soft inner shadow (`inset 0 2px 2px -1px rgba(74,74,104,.1)`); small menus may use `0 1px 3px rgba(10,13,18,.1)`. Cards sit on the page without shadow. - Density: Default. Controls 52 / 44 / 32px (large / medium / small); inputs 48px. Everything else follows Celestial core v1.0. --- ## Components ### Button Primary: `#3C4EEE` fill, white Poppins SemiBold 14px label (16px on large), **7px** radius, 44px high (52 large, 32 small), 24px left / 18px right padding, trailing 18px arrow-right on forward actions. Hover `#303CBD`, pressed `#232C8C`, focus 2px `#3C4EEE` ring offset 2px, disabled 40% opacity. Secondary: `#7EE3FF` sky-blue fill, `#232C8C` label, same sizes. Outline: white fill, 1px `#3C4EEE` border, `#232C8C` label. Ghost / text: no fill, `#232C8C` label. Icon buttons: square 52 / 44 / 32px in the same four styles, 7px radius, plus or arrow glyph. ### Input, textarea and select White fill, 1px `#181D21` border, **8px** radius, 48px high, 16px horizontal padding, inner shadow `Field/Inset`. Label above in Body Medium Bold (16/22, 600, `#181D21`); placeholder Body Medium at 50% opacity; helper text Body Small `#9999A1`. Optional 24px leading and trailing icons. Error: `#FF4B24` border and helper text; success: `#09B96D`. Dark mode: `#181D21` field with white text. ### Toggle, checkbox, radio Three sizes (32 / 24 / 16px). Selected states fill `#3C4EEE` with white tick or knob; unselected use a `#E6E6E9` track or 1px `#181D21` outline. Group label above, helper text beside each control. ### Tag 6px radius, 1px `#E6E6E9` border on white (Grey), or filled chip colours (Blue, Cyan, Pink, Orange, Teal, Purple, Cool) with `#0A0908` text; solid variants in `#3C4EEE`, `#7EE3FF` and `#181D21`. Sizes 40 / 32 / 24 / 18px; Body Small 14px with +1px tracking; optional leading plus and trailing close icons. ### Card White, 8px radius, 16–24px padding, no border on the `#F5F5F5` band (1px `#E6E6E9` on white pages). Anatomy: 24px line icon or image, Heading 6 title, Body Small description, an outline button, an icon button and a link with arrow. ### Links Poppins SemiBold, `#3C4EEE` (or `#7EE3FF` on dark), underlined in the "Underline" variants, trailing arrow-right. --- ## Layout Product-led: a near-white canvas, white cards on a `#F5F5F5` band for grouped content, a 12-column grid with 24px gutters, and generous 48–64px section spacing. Marketing pages open with a black hero carrying the white wordmark and a single Heading 1, then light sections with cards. Keep one primary blue action per view. --- ## Signature patterns - **Automation card** — 24px line icon, Heading 6 title, two-line description, outline "Button label →", icon button and link: the standard way to present an automation or capability. - **Black hero with star** — `#0A0908` panel, white wordmark, thin grey rules radiating from the asterisk star, Heading 1 in white. - **Chip categories** — pastel chip colours tag automations by type (blue, cyan, pink, orange, teal, purple, cool grey). - **Labelled form field** — Body Medium Bold label, 48px field with inner shadow, helper text below; error and success swap only the border and helper colour. --- ## Do / Don't - Do use `#3C4EEE` for one primary action per view. Don't put white text on sky blue. - Do track headings −2px and body +1–2px. Don't set body copy in Work Sans except the bold and subtitle styles. - Do keep 7px corners on buttons and 8px on fields and cards. Don't use pills except for toggles. - Do use labels above fields. Don't rely on `#9999A1` for anything that must be read. - Do keep the wordmark one colour. Don't separate or recolour the star. --- ## Quick-start CSS ```css @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Work+Sans:wght@500;600&display=swap"); .nova-btn { display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 18px 0 24px; border:1px solid transparent; border-radius:7px; background:#3C4EEE; color:#fff; font:600 14px/18px "Poppins", sans-serif; cursor:pointer; } .nova-btn:hover { background:#303CBD; } .nova-btn:active { background:#232C8C; } .nova-btn:focus-visible { outline:2px solid #3C4EEE; outline-offset:2px; } .nova-btn--secondary { background:#7EE3FF; color:#232C8C; } .nova-btn--outline { background:#fff; border-color:#3C4EEE; color:#232C8C; } .nova-input { height:48px; padding:0 16px; border:1px solid #181D21; border-radius:8px; background:#fff; box-shadow:inset 0 2px 2px -1px rgba(74,74,104,.1); font:400 16px/22px "Poppins", sans-serif; letter-spacing:.02em; } .nova-tag { display:inline-flex; align-items:center; height:32px; padding:0 13px; border:1px solid #E6E6E9; border-radius:6px; background:#fff; font:400 14px/18px "Poppins", sans-serif; letter-spacing:1px; color:#0A0908; } .nova-card { background:#fff; border-radius:8px; padding:20px; } ``` ## Using Nova beyond the web Nova applies to every output. When asked for a deck, a document, a report, an email, a social post or a chart "for Nova" or "in Nova's style", build it from the tokens below — never from a default template or theme. ### Colour roles | Role | Value | Use | |---|---|---| | Background | `#fafcfe` | Slide and page background | | Surface | `#ffffff` | Cards, panels, table rows | | Band | `#f5f5f5` | Section bands, divider slides, table headers | | Ink | `#0a0908` | Headlines and body text | | Ink 2 | `#4d4d4d` | Secondary text | | Muted | `#6a6b6a` | Captions, footers, axis labels | | Line | `#e6e6e9` | Rules, borders, chart gridlines | | Accent | `#3c4eee` | One highlight per slide or page (primary actions, links and selected states) | | On accent | `#ffffff` | Text on the accent | | Success / warning / error | `#8fffb1 / #ff9500 / #ff4b24` | Status only, never decoration | ### Type - Headlines: **Poppins**, weight 500, tracking -.01em. - Body: **Poppins**. Labels and code: **monospace**. - If a face isn't installed, use the closest system font of the same style and say so — never silently swap to a default. ### Logo on every output Every Nova output carries the logo — never just the name typed out. Use the SVG under **Brand assets** (or a PNG exported from it at 4×); on dark or accent backgrounds use the one-colour version in `#ffffff` / `#ffffff`. Keep clear space equal to the mark's height and never stretch, outline or recolour it otherwise. | Output | Where the logo goes | |---|---| | Web and app UI | Top-left of the header on every page and screen; again in the footer; the mark as favicon and app icon | | Presentations | Title slide, top-left (about 0.5 in tall); every slide's footer, bottom-left (about 0.25 in); the closing slide | | Print, articles, whitepapers | Cover or masthead, top-left; running header on every page; back cover or colophon | | Banners and ads | Every size, top-left or left of the message, at least 24 px tall digital / 40 mm on a roll-up | | Posters and social posts | Top-left, plus the sign-off at the bottom | | Email | Header (120–160 px wide) and footer | | Native apps | Navigation bar on the first screen (iOS: an asset named BrandLogo; Android: res/drawable/brand_logo) | ### Presentations (PowerPoint, Keynote, Google Slides) - 16:9, 13.333 × 7.5 in (1920 × 1080). Margins 0.6 in; a 12-column grid. - **Theme** (set it on the master so every slide inherits it): dark 1 = `#0a0908`, light 1 = `#fafcfe`, dark 2 = `#4d4d4d`, light 2 = `#f5f5f5`, accent 1–6 = `#3c4eee`, `#2b369e`, `#929cf5`, `#4d4d4d`, `#6a6b6a`, `#cbd1fa`; heading font = Poppins, body font = Poppins. - **Title slide**: background `#fafcfe`; headline in Poppins 54–64 pt, ink; one-line subtitle in Poppins 20 pt, muted; the logo at the top left with clear space equal to its own height. - **Section divider**: full-bleed `#f5f5f5` (or `#0a0908` with `#ffffff` text); section number in monospace. - **Content slide**: title in Poppins 32–40 pt; body Poppins 18–24 pt, max six bullets; one accent highlight at most. - **Shapes and cards**: fill `#ffffff`, 1 pt `#e6e6e9` border, corner radius 8px (about 0.08 in). - **Charts**: series in the accent order above; gridlines `#e6e6e9`; labels `#6a6b6a`; no 3-D, no gradients. - **Footer**: monospace 10 pt in `#6a6b6a`: Nova · title · page number. - When generating .pptx with code (e.g. python-pptx), write these colours and fonts into the theme and master first, then add slides from the master. ### Documents and PDF reports (Word, Google Docs, PDF) - Page `#fafcfe`, text `#0a0908`. H1 Poppins 28 pt, H2 20 pt, H3 15 pt; body Poppins 11 pt, line spacing 1.5. - Table header row `#f5f5f5`, 1 pt `#e6e6e9` rules, numbers right-aligned in monospace. - Callouts: `#ffffff` box with a 3 pt left rule in `#3c4eee`. - Cover page: logo, title in Poppins, date and owner in monospace. ### Email, social and diagrams - Email: 600 px column on `#fafcfe`; one primary button in `#3c4eee` with `#ffffff` text, 8px corners. - Social: square 1080 × 1080 or 1200 × 628; headline in Poppins; accent used once; logo bottom-left. - Diagrams: nodes `#ffffff` with `#e6e6e9` borders and 8px corners; connectors `#6a6b6a`; the one emphasised node in `#3c4eee`. ## Brand assets ### Logo (SVG) Use this mark as-is: don't redraw, recolour (except to one solid colour on dark backgrounds), stretch or add effects. ```svg ``` ### Fonts - Poppins - monospace ## Celestial core foundations (included) This brand sits on Celestial core v1.0. The shared rules are included here so this file works on its own. Shared by every Celestial design skill. Locked values live here once; a brand SKILL.md documents only its deltas and never restates core. ### Spacing Base unit 4px. Scale: 0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160px. Components use only scale values. ### Grid and layout | Breakpoint | Min width | Columns | Gutter | Page margin | |---|---|---|---|---| | Mobile | 0px | 4 | 16px | 16–20px | | Tablet | 640px | 8 | 24px | 32px | | Desktop | 1024px | 12 | 24px | 32–40px | | Wide | 1440px | 12 | 32px | auto · max 1120 / 1200 / 1280px | ### Ladders (brands pick a step, never invent a value) - Control height: 32 / 36 / 40 / 44px — inputs, buttons and selects share one height per size. - Control radius: 2 / 4 / 6 / 8 / full. Card radius: 8 / 12 / 14 / 16 / 24px. Rule: card radius ≥ control radius; nested radius = outer radius − padding. - Type scale ratio: 1.2 / 1.25 / 1.333 from a 16px base (14px in dense apps): caption, body, body-lg, h6 → h1. Line height 1.4–1.5 body, 1.0–1.2 display. - Density: Compact / Default / Comfortable. Border width: 0.5 / 1 / 1.5px. ### Elevation - Level 0 · flat — page - Level 1 · card — cards, tiles - Level 2 · raised — hover, dragged - Level 3 · popover — menus, tooltips - Level 4 · modal — dialogs, sheets The brand's depth dial decides whether a level renders as a hairline, a background step or a shadow. ### Motion - 120ms · micro — hover, toggle, focus - 200ms · standard — expand, reveal, tab change - 320ms · enter / exit — dialogs, drawers, page Respects prefers-reduced-motion. Brands choose the easing curve only. ### Accessibility - 4.5:1 contrast for body text, 3:1 for large text and UI parts - Visible focus on every interactive element (ring colour is the brand's only choice) - 44px touch targets on mobile - No meaning carried by colour alone — pair with a label, icon or shape - Respects prefers-reduced-motion ### Component states Every component specifies: default, hover, focus-visible, active, disabled, loading, error (inputs), success (inputs). Core defines which token each state reads; brands only supply the token values. ### Z-index base 0 · sticky 100 · dropdown 200 · overlay 300 · modal 400 · toast 500 ### Token classification | Token / decision | Class | Who sets it | Brand may change | |---|---|---|---| | Spacing unit (4px) and scale | Locked | Core | Nothing | | 12-column grid, gutters, breakpoints | Locked | Core | Nothing (may pick max width 1120 / 1200 / 1280px) | | Touch target minimum (44px) | Locked | Core | Nothing | | Contrast minimums (4.5:1 text, 3:1 UI) | Locked | Core | Nothing | | Focus ring presence and offset | Locked | Core | Colour only | | Component anatomy and states | Locked | Core | Nothing | | Motion durations (120 / 200 / 320ms) | Locked | Core | Easing curve choice | | Z-index scale | Locked | Core | Nothing | | Control height | Tunable | Brand picks step | 32 / 36 / 40 / 44px | | Control radius | Tunable | Brand picks step | 2 / 4 / 6 / 8px / full | | Card radius | Tunable | Brand picks step | 8 / 12 / 14 / 16 / 24px | | Type scale ratio | Tunable | Brand picks step | 1.200 / 1.250 / 1.333 | | Density (padding step) | Tunable | Brand picks step | Compact / Default / Comfortable | | Border width | Tunable | Brand picks step | 0.5 / 1 / 1.5px | | Colour palette | Free | Brand | Any, mapped to semantic roles | | Typefaces and weights | Free | Brand | Any, mapped to display / body / mono | | Heading tracking and case | Free | Brand | Any | | Rule style (solid / dashed) | Free | Brand | Any | | Icon set and stroke | Free | Brand | Phosphor / Lucide / Core Line / custom | | Logo, voice, imagery | Free | Brand | Any | | Signature patterns | Free (extension) | Brand | New components built from core primitives | A value outside its class is an override: allowed only with a written reason in the brand's SKILL.md and a conformance flag in Celestial. ## Design tokens (W3C format) ```json { "$schema": "https://design-tokens.github.io/community-group/format/", "$name": "Nova", "core": "{core.version 1.0}", "dials": { "density": "Default", "shape": "Soft", "depth": "Flat", "contrast": "Standard" }, "accent-scope": "primary actions, links and selected states", "surface": { "ground": { "$type": "color", "$value": "#fafcfe" }, "raised": { "$type": "color", "$value": "#ffffff" }, "card": { "$type": "color", "$value": "#ffffff" }, "muted": { "$type": "color", "$value": "#f5f5f5" } }, "ink": { "primary": { "$type": "color", "$value": "#0a0908" }, "body": { "$type": "color", "$value": "#4d4d4d" }, "muted": { "$type": "color", "$value": "#6a6b6a" } }, "line": { "default": { "$type": "color", "$value": "#e6e6e9" }, "width": { "$type": "dimension", "$value": "1px" }, "style": { "$type": "string", "$value": "solid 1px" } }, "accent": { "$type": "color", "$value": "#3c4eee" }, "action": { "primary-bg": { "$type": "color", "$value": "#3c4eee" }, "primary-hover": { "$type": "color", "$value": "#303cbd" }, "focus-ring": { "$type": "color", "$value": "#3c4eee" } }, "status": { "success": { "$type": "color", "$value": "#8fffb1" }, "warning": { "$type": "color", "$value": "#ff9500" }, "error": { "$type": "color", "$value": "#ff4b24" } }, "font": { "display": { "$type": "fontFamily", "$value": [ "Poppins" ] }, "body": { "$type": "fontFamily", "$value": [ "Poppins" ] }, "mono": { "$type": "fontFamily", "$value": [ "monospace" ] }, "weight-display": { "$type": "fontWeight", "$value": 500 }, "tracking-display": { "$type": "dimension", "$value": "-.01em" }, "case-label": { "$type": "string", "$value": "Sentence case" } }, "control": { "height": { "$type": "dimension", "$value": "{core.control.44}" }, "radius": { "$type": "dimension", "$value": "{core.radius.8}" } }, "card": { "radius": { "$type": "dimension", "$value": "{core.radius.8}" } }, "elevation": { "mode": { "$type": "string", "$value": "Background step" } }, "icons": { "set": { "$type": "string", "$value": "lucide" } }, "overrides": [ { "token": "radius-control", "value": "7px", "reason": "Nova buttons use a 7px corner between the 6px and 8px core steps; inputs and cards use 8px" }, { "token": "letter-spacing-body", "value": "0.02em–0.07em", "reason": "Body and small text are tracked open (+1–2px), headings tight (−2px)" } ] } ```