Sngular Design System & Skill — Architecture & Installation Guide

1. System Overview & Mission

In modern autonomous AI workflows, developers and consultants frequently use pair-programming assistants to draft executive slide decks, customer proposals, design mockups, and application frontends. Without strict brand grounding, general-purpose LLMs inevitably succumb to brand drift—producing non-standard typography, unverified color values, and inaccessible contrast pairings.

The Sngular Design System & Skill solves this fundamentally by providing Google Antigravity with a deterministic design runtime directly integrated into the agent loop.

Core Engine

Brand Book 2025

Direct translation of the official brand identity, layout catalogs, and tone into machine-readable prompts and tokens.

Channel Reach

Omni-Channel

Supports interactive HTML decks (16:9), formal Word/Docs deliverables, responsive web mockups, and chat cards.

Compliance

WCAG 2.1 AA

Every color pair and deliverable undergoes programmatic validation with automated contrast calculation.

lightbulb Strategic Principle: Unconventional Delivery

The skill embodies the Sngular ethos: "Because you are Unconventional and we always Deliver." It eliminates friction by generating zero-dependency, self-contained artifacts that work offline, in browsers, and in corporate client suites.

2. Architectural Structure & Anatomy

The Sngular Skill adheres strictly to the Google Antigravity customization specification, combining workspace rules, a skill definition manifest, W3C design tokens, channel references, and CLI automation.

Directory Layout

Filesystem Hierarchy bash

sngular-design-system-google/
├── .agents/
│   ├── rules/
│   │   └── AGENTS.md                  # Persistent brand guardrails (invariants)
│   └── skills/
│       └── sngular-design/            # Active Antigravity Skill
│           ├── SKILL.md               # Skill manifest & channel router
│           ├── assets/
│           │   ├── fonts/             # Outfit Variable Font & OFL.txt
│           │   ├── logos/             # Vector SVGs (Isotypes & Logotypes)
│           │   ├── tokens.css         # CSS Variables (tokens)
│           │   └── tokens.json        # Machine-readable token dictionary
│           ├── references/            # Deep-dive execution guides
│           │   ├── presentations.md   # 16:9 presentation rules & catalog
│           │   ├── documents.md       # Word / Google Docs formatting rules
│           │   ├── web.md & apps.md   # Web & mobile interface standards
│           │   └── brand-foundations.md # Color, typography & contrast baseline
│           ├── scripts/
│           │   ├── check_contrast.py  # Automated WCAG 2.1 AA validator
│           │   └── generate_deck.py   # Automated slide deck builder
│           └── templates/             # Interactive HTML canvases
└── sngular-design-antigravity.tar.gz  # Standalone distribution package archive

The 4-Layer Agent Execution Loop

Execution Layer	Component / Technology	Role in Antigravity Lifecycle
1. Invariant Rules	`AGENTS.md` / `GEMINI.md`	Injected into every turn. Guarantees that palette (95/5 rule) and fonts cannot be overridden by user requests.
2. Skill Manifest	`SKILL.md`	Activated on keywords or slash commands (`/sngular-design`). Directs the agent to appropriate channel references.
3. Asset Runtime	`tokens.css`, SVGs, Outfit, Verdana	Provides the single source of truth for all styling, dimensions, margins, and logos.
4. Audit & Delivery	`check_contrast.py` & Artifact Engine	Builds standalone artifacts into the conversation directory and validates accessibility before completion.

3. Configuration Tokens & Brand Gestures

The design system is grounded in the 95/5 Palette Discipline. Compositions are composed 95% of Primary colors, reserving secondary colors for fine lines, status badges, and chart series.

Primary Palette (95% of Compositions)

Navy

#061B2B
Primary Ink & Dark Surfaces

Blue

#0070F6
Actions, Cursors & Highlights

Navy-Light

#F2F3F4
Card Surfaces & Zebra Rows

White

#FFFFFF
Primary Canvas Base

Secondary Palette (Max 5% • Accents Only)

Purple

#9747FF
Icons & Lines

Green

#B3E500
Navy Surfaces Only (Never on White)

Red

#FF0059
Error Indicators & Borders

gpp_bad STRICT BRAND PROHIBITION

Secondary accent colors (Purple, Green, Red) must NEVER be used for headings, titles, body paragraphs, or solid text containers. Green text on white fails WCAG with a catastrophic 1.49:1 ratio.

The 4 Signature Brand Gestures

Gesture	Visual Specification	Composition Rule
1. SpecialTitle	`S\|` isotype followed by a solid blue container with white text.	Maximum 1 per composition. Slide dividers and web section headers.
2. Highlight	1 or 2 key phrases wrapped in solid blue background with white text.	Emphasizes strategic takeaways without clutter.
3. Cursor	5px vertical blue bar to the left of a paragraph, or 20px bar beside an image.	Pairs with lead statements or key diagram callouts.
4. BigS	Giant outline S cut by an asymmetrical geometric panel.	Covers and major brand impact statements.

4. Installation & Deployment Guide

The skill distributes as a self-contained compressed archive: sngular-design-antigravity.tar.gz (~114 KB). Installation requires no build step, compiler, or external dependency.

Step 1: Download & Extract into Skills Directory

Extract the archive directly into your Antigravity personal skills location (for all projects):

Terminal • Global Install

mkdir -p ~/.gemini/config/skills
tar -xzf sngular-design-antigravity.tar.gz -C ~/.gemini/config/skills/

Alternative: Workspace-Specific Installation

To provide the skill strictly inside a specific repository or workspace:

Terminal • Workspace Install

mkdir -p .agents/skills
tar -xzf sngular-design-antigravity.tar.gz -C .agents/skills/

Step 2: Instant Activation

Start any Antigravity conversation or use the agy CLI. The agent detects the skill immediately:

Command Prompt

/sngular-design Create an executive deck for cloud architecture

5. Automated WCAG 2.1 AA Contrast Testing

Antigravity executes scripts/check_contrast.py programmatically to guarantee accessibility. You can test pairs dynamically below:

Interactive WCAG 2.1 AA Contrast Evaluator

Test any foreground / background hex pair against WCAG 2.1 AA compliance standards:

FOREGROUND (HEX)

BACKGROUND (HEX)

Sample Brand Typography

Ratio: 4.52:1 • PASSES AA (Normal Text)

6. Official Pre-Delivery Checklist

Before any artifact is finalized for leadership or clients, it must verify the 10 compliance points:

Check	Brand Specification	Enforcement Criteria
[ 1 ]	Palette Discipline	Primary Navy (#061B2B), Blue (#0070F6), Navy-Light (#F2F3F4), White (#FFFFFF) only. Accents ≤ 5%.
[ 2 ]	Typography Match	Outfit for slides/web/apps; Verdana for Word/Docs body; Outfit Light only for covers.
[ 3 ]	Contrast AA	Normal text ≥ 4.5:1, Large ≥ 3:1. Blue text only on white. Never green text on light.
[ 4 ]	Logo Integrity	Official SVG isotype/logotype used; correct clear space and minimum height.
[ 5 ]	Single Brand Gesture	Maximum 1 gesture (SpecialTitle, Highlight, Cursor, or BigS) per composition.
[ 6 ]	Safe Area Margins	96px side margins and 144px top/bottom margins on 1920×1080 slide canvas.
[ 7 ]	Authentic Data	Real figures (+1,300 people, +500 clients, +900 projects). No generic stock text.
[ 8 ]	Table Geometry	17.5 cm full text width, blue header, white bold text, alternating navy-light/white zebra striping.
[ 9 ]	Slide / Doc Footers	"Copyright © Sngular. All rights reserved." on content slides; page numbers on docs.
[ 10 ]	Delivery Standard	Interactive HTML decks by default; PPTX exported only on explicit request.