🧭 Tema Oficial Artes do Sul — Design System & IDE Specification

Documentação técnica e especificação canônica de cores, tokens semânticos e configuração de ambiente (VS Code / Antigravity IDE / Web Apps) para a identidade visual do ecossistema Artes do Sul.

1. 🎨 Filosofia Visual: Cyber-Growth & Identidade Brasileira

O Tema Oficial Artes do Sul une a rusticidade e energia da identidade brasileira (tons terracota e âmbar dourado) com a precisão tecnológica do movimento Cyber-Growth (laranja de alta conversão, ciano elétrico e fundos de obsidiana profunda).

🎯 Pilares Cromáticos Principais

Token Hexadecimal Papel / Significado Uso Principal
Obsidian Deep #050609 / #07090e Fundo infinito, imersão e contraste WCAG AAA Background do Editor, ActivityBar e Janelas
Surface Dark #0e1219 / #171c26 Camada de elevação e componentes Cards, Modais, Sidebar Sections, Dropdowns
Artes do Sul Terracotta #B33A2E Assinatura e autoridade institucional TitleBar Ativa, Badges Institucionais
Cyber Orange (Growth) #ff6b35 Ação, conversão, destaque e energia Cursor, Abas ativas, Bordas de foco, Keywords
Electric Cyan (Tech) #00d9ff / #38bdf8 Lógica, dados, tipos e hiperlinks Types, Interfaces, Funções, Links, Tags
Golden Amber (Valor) #fbbf24 / #ffd270 Destaque nobre, títulos e números TitleBar Foreground, Números, Destaques Markdown
Emerald Growth (Sucesso) #10b981 Validação, confirmação e strings Strings, Git Adições, Indicadores Positivos
Alert Rose (Erro/Atenção) #f43f5e Atenção crítica e diagnóstico Erros, Git Deleções, Alertas
Slate Grey (Muted) #6b7280 / #9ca3af Hierarquia secundária sem poluição visual Comentários, Linhas de código inativas, Metadados

2. 💻 Configuração Canônica para VS Code (.vscode/settings.json)

Esta configuração transforma o editor no ambiente nativo Artes do Sul:

{
    "workbench.colorTheme": "Default Dark Modern",
    "workbench.colorCustomizations": {
        "foreground": "#f3f4f6",
        "descriptionForeground": "#9ca3af",
        "focusBorder": "#ff6b3588",
        "selection.background": "#ff6b3533",
        "widget.shadow": "#000000aa",
        "icon.foreground": "#9ca3af",

        /* Editor */
        "editor.background": "#07090e",
        "editor.foreground": "#f3f4f6",
        "editor.lineHighlightBackground": "#0e121a",
        "editor.selectionBackground": "#ff6b3533",
        "editor.inactiveSelectionBackground": "#ff6b3518",
        "editor.selectionHighlightBackground": "#ff6b3522",
        "editor.wordHighlightBackground": "#00d9ff1f",
        "editor.wordHighlightStrongBackground": "#00d9ff33",
        "editor.findMatchBackground": "#ff6b3555",
        "editor.findMatchHighlightBackground": "#ff6b3533",
        "editorCursor.foreground": "#ff6b35",
        "editorWhitespace.foreground": "#ffffff12",
        "editorIndentGuide.background1": "#ffffff0d",
        "editorIndentGuide.activeBackground1": "#ff6b3566",
        "editorLineNumber.foreground": "#4b5563",
        "editorLineNumber.activeForeground": "#ff6b35",
        "editorGutter.background": "#07090e",
        "editorGroupHeader.tabsBackground": "#07090e",
        "editorGroup.border": "#ffffff10",
        
        /* Widgets & Sugestões */
        "editorWidget.background": "#0e1219",
        "editorWidget.border": "#ff6b3533",
        "editorSuggestWidget.background": "#0e1219",
        "editorSuggestWidget.border": "#ff6b3533",
        "editorSuggestWidget.selectedBackground": "#171c26",
        "editorSuggestWidget.highlightForeground": "#ff6b35",
        
        /* Brackets & Sintaxe */
        "editorBracketMatch.background": "#ff6b3522",
        "editorBracketMatch.border": "#ff6b3588",
        "editorBracketHighlight.foreground1": "#ff6b35",
        "editorBracketHighlight.foreground2": "#00d9ff",
        "editorBracketHighlight.foreground3": "#a78bfa",
        "editorBracketHighlight.foreground4": "#10b981",
        "editorBracketHighlight.foreground5": "#fbbf24",
        "editorBracketHighlight.foreground6": "#f43f5e",
        
        /* Diagnósticos */
        "editorError.foreground": "#f43f5e",
        "editorWarning.foreground": "#fbbf24",
        "editorInfo.foreground": "#00d9ff",
        
        /* Barra Lateral & ActivityBar */
        "sideBar.background": "#07090e",
        "sideBar.foreground": "#f3f4f6",
        "sideBar.border": "#ffffff10",
        "sideBarTitle.foreground": "#ff6b35",
        "sideBarSectionHeader.background": "#0e1219",
        "sideBarSectionHeader.foreground": "#9ca3af",
        "sideBarSectionHeader.border": "#ffffff0a",
        "activityBar.background": "#050609",
        "activityBar.foreground": "#ff6b35",
        "activityBar.inactiveForeground": "#6b7280",
        "activityBar.border": "#ffffff10",
        "activityBarBadge.background": "#ff6b35",
        "activityBarBadge.foreground": "#ffffff",
        "activityBar.activeBorder": "#ff6b35",
        
        /* Barra de Título (Identidade Terracotta + Dourado) */
        "titleBar.activeBackground": "#B33A2E",
        "titleBar.activeForeground": "#fbbf24",
        "titleBar.inactiveBackground": "#050609",
        "titleBar.inactiveForeground": "#6b7280",
        "titleBar.border": "#ff6b3533",
        
        /* Barra de Status */
        "statusBar.background": "#090b10",
        "statusBar.foreground": "#f3f4f6",
        "statusBar.border": "#ffffff10",
        "statusBar.debuggingBackground": "#d4342c",
        "statusBar.debuggingForeground": "#ffffff",
        "statusBar.noFolderBackground": "#090b10",
        "statusBarItem.remoteBackground": "#ff6b35",
        "statusBarItem.remoteForeground": "#ffffff",
        "statusBarItem.prominentBackground": "#ff6b3522",
        "statusBarItem.prominentForeground": "#ff6b35",
        
        /* Abas (Tabs) */
        "tab.activeBackground": "#0e1219",
        "tab.activeForeground": "#ff6b35",
        "tab.activeBorderTop": "#ff6b35",
        "tab.inactiveBackground": "#07090e",
        "tab.inactiveForeground": "#9ca3af",
        "tab.border": "#07090e",
        "tab.hoverBackground": "#131822",
        "tab.unfocusedActiveForeground": "#ff9466",
        
        /* Painéis e Terminal Integrado */
        "panel.background": "#07090e",
        "panel.border": "#ffffff10",
        "panelTitle.activeForeground": "#ff6b35",
        "panelTitle.activeBorder": "#ff6b35",
        "panelTitle.inactiveForeground": "#9ca3af",
        "terminal.background": "#07090e",
        "terminal.foreground": "#f3f4f6",
        "terminal.ansiBlack": "#07090e",
        "terminal.ansiRed": "#f43f5e",
        "terminal.ansiGreen": "#10b981",
        "terminal.ansiYellow": "#fbbf24",
        "terminal.ansiBlue": "#38bdf8",
        "terminal.ansiMagenta": "#a78bfa",
        "terminal.ansiCyan": "#00d9ff",
        "terminal.ansiWhite": "#f3f4f6",
        "terminal.ansiBrightBlack": "#6b7280",
        "terminal.ansiBrightRed": "#fb7185",
        "terminal.ansiBrightGreen": "#34d399",
        "terminal.ansiBrightYellow": "#fde047",
        "terminal.ansiBrightBlue": "#60a5fa",
        "terminal.ansiBrightMagenta": "#c084fc",
        "terminal.ansiBrightCyan": "#38bdf8",
        "terminal.ansiBrightWhite": "#ffffff",
        "terminalCursor.foreground": "#ff6b35",
        
        /* Botões, Inputs & Menus */
        "badge.background": "#ff6b35",
        "badge.foreground": "#ffffff",
        "button.background": "#ff6b35",
        "button.foreground": "#050609",
        "button.hoverBackground": "#ff8554",
        "button.secondaryBackground": "#171c26",
        "button.secondaryForeground": "#f3f4f6",
        "button.secondaryHoverBackground": "#202735",
        "input.background": "#0e1219",
        "input.foreground": "#f3f4f6",
        "input.border": "#ffffff15",
        "input.placeholderForeground": "#6b7280",
        "inputOption.activeBorder": "#ff6b35",
        "inputOption.activeBackground": "#ff6b3533",
        "inputValidation.errorBackground": "#2a0e12",
        "inputValidation.errorBorder": "#f43f5e",
        "inputValidation.warningBackground": "#2a1b08",
        "inputValidation.warningBorder": "#fbbf24",
        "inputValidation.infoBackground": "#081a24",
        "inputValidation.infoBorder": "#00d9ff",
        "dropdown.background": "#0e1219",
        "dropdown.foreground": "#f3f4f6",
        "dropdown.border": "#ffffff15",
        "list.activeSelectionBackground": "#171c26",
        "list.activeSelectionForeground": "#ff6b35",
        "list.inactiveSelectionBackground": "#0e1219",
        "list.inactiveSelectionForeground": "#f3f4f6",
        "list.hoverBackground": "#0f141e",
        "list.focusBackground": "#171c26",
        "list.highlightForeground": "#ff6b35",
        "list.errorForeground": "#f43f5e",
        "list.warningForeground": "#fbbf24",
        "scrollbarSlider.background": "#ffffff10",
        "scrollbarSlider.hoverBackground": "#ff6b3533",
        "scrollbarSlider.activeBackground": "#ff6b3566",
        "progressBar.background": "#ff6b35",
        "breadcrumb.foreground": "#9ca3af",
        "breadcrumb.focusForeground": "#ff6b35",
        "breadcrumb.activeSelectionForeground": "#f3f4f6",
        "breadcrumbPicker.background": "#0e1219",
        "peekView.border": "#ff6b35",
        "peekViewEditor.background": "#080b10",
        "peekViewResult.background": "#0e1219",
        "peekViewTitle.background": "#0e1219",
        "notificationCenterHeader.background": "#0e1219",
        "notifications.background": "#0e1219",
        "notifications.foreground": "#f3f4f6",
        "notifications.border": "#ffffff10",
        "notificationLink.foreground": "#00d9ff",
        "gitDecoration.modifiedResourceForeground": "#ff6b35",
        "gitDecoration.untrackedResourceForeground": "#10b981",
        "gitDecoration.deletedResourceForeground": "#f43f5e",
        "gitDecoration.ignoredResourceForeground": "#6b7280",
        "gitDecoration.conflictingResourceForeground": "#a78bfa",
        "diffEditor.insertedTextBackground": "#10b98122",
        "diffEditor.removedTextBackground": "#f43f5e22",
        "minimap.background": "#07090e",
        "minimap.selectionHighlight": "#ff6b3555",
        "minimap.findMatchHighlight": "#ff6b3588",
        "minimapGutter.addedBackground": "#10b981",
        "minimapGutter.modifiedBackground": "#ff6b35",
        "minimapGutter.deletedBackground": "#f43f5e",
        "menu.background": "#0e1219",
        "menu.foreground": "#f3f4f6",
        "menu.selectionBackground": "#ff6b35",
        "menu.selectionForeground": "#171c26",
        "menu.separatorBackground": "#ffffff10",
        "menubar.selectionBackground": "#ff6b35",
        "menubar.selectionForeground": "#171c26",
        "quickInput.background": "#0e1219",
        "quickInput.foreground": "#f3f4f6",
        "quickInputList.focusBackground": "#171c26",
        "quickInputList.focusForeground": "#ff6b35",
        "commandCenter.background": "#0e1219",
        "commandCenter.foreground": "#f3f4f6",
        "commandCenter.border": "#ffffff10",
        "commandCenter.activeBackground": "#171c26",
        "commandCenter.activeForeground": "#ff6b35"
    },
    "editor.tokenColorCustomizations": {
        "comments": "#6b7280",
        "strings": "#10b981",
        "keywords": "#ff6b35",
        "numbers": "#fbbf24",
        "types": "#00d9ff",
        "functions": "#38bdf8",
        "variables": "#f3f4f6",
        "textMateRules": [
            {
                "scope": [
                    "keyword.control",
                    "keyword.operator.new",
                    "storage.type",
                    "storage.modifier"
                ],
                "settings": {
                    "foreground": "#ff6b35"
                }
            },
            {
                "scope": [
                    "entity.name.function",
                    "support.function"
                ],
                "settings": {
                    "foreground": "#38bdf8"
                }
            },
            {
                "scope": [
                    "entity.name.type",
                    "entity.name.class",
                    "support.class",
                    "support.type"
                ],
                "settings": {
                    "foreground": "#00d9ff"
                }
            },
            {
                "scope": [
                    "variable.parameter",
                    "variable.other"
                ],
                "settings": {
                    "foreground": "#f3f4f6"
                }
            },
            {
                "scope": [
                    "constant.language",
                    "constant.numeric",
                    "constant.other"
                ],
                "settings": {
                    "foreground": "#fbbf24"
                }
            },
            {
                "scope": [
                    "string",
                    "string.quoted"
                ],
                "settings": {
                    "foreground": "#10b981"
                }
            },
            {
                "scope": [
                    "comment",
                    "punctuation.definition.comment"
                ],
                "settings": {
                    "foreground": "#6b7280",
                    "fontStyle": "italic"
                }
            },
            {
                "scope": [
                    "entity.name.tag",
                    "punctuation.definition.tag"
                ],
                "settings": {
                    "foreground": "#ff6b35"
                }
            },
            {
                "scope": [
                    "entity.other.attribute-name"
                ],
                "settings": {
                    "foreground": "#00d9ff"
                }
            },
            {
                "scope": [
                    "markup.heading"
                ],
                "settings": {
                    "foreground": "#ff6b35",
                    "fontStyle": "bold"
                }
            },
            {
                "scope": [
                    "markup.bold"
                ],
                "settings": {
                    "foreground": "#ffd270",
                    "fontStyle": "bold"
                }
            },
            {
                "scope": [
                    "markup.italic"
                ],
                "settings": {
                    "foreground": "#00d9ff",
                    "fontStyle": "italic"
                }
            },
            {
                "scope": [
                    "markup.inline.raw",
                    "markup.fenced_code"
                ],
                "settings": {
                    "foreground": "#00d9ff"
                }
            },
            {
                "scope": [
                    "markup.underline.link"
                ],
                "settings": {
                    "foreground": "#38bdf8"
                }
            }
        ]
    }
}

3. 🌐 Variáveis CSS para Aplicações Web (CSS Variables)

Para manter paridade total entre o ambiente IDE e as aplicações web do portal (artesdosul.com, studio.artesdosul.com, temas.artesdosul.com, plano.artesdosul.com):

:root {
  /* Backgrounds & Surfaces */
  --as-bg-void: #050609;
  --as-bg-primary: #07090e;
  --as-bg-card: rgba(14, 18, 25, 0.85);
  --as-bg-card-hover: rgba(23, 28, 38, 0.95);
  
  /* Brand Accents */
  --as-terracotta: #B33A2E;
  --as-cyber-orange: #ff6b35;
  --as-electric-cyan: #00d9ff;
  --as-sky-blue: #38bdf8;
  --as-golden-amber: #fbbf24;
  --as-gold-soft: #ffd270;
  
  /* Semantic Status */
  --as-success: #10b981;
  --as-error: #f43f5e;
  --as-warning: #fbbf24;
  --as-info: #00d9ff;

  /* Typography Colors */
  --as-text-main: #f3f4f6;
  --as-text-muted: #9ca3af;
  --as-text-dim: #6b7280;

  /* Borders & Glows */
  --as-border-subtle: rgba(255, 255, 255, 0.08);
  --as-border-active: rgba(255, 107, 53, 0.4);
  --as-glow-orange: 0 0 20px rgba(255, 107, 53, 0.25);
  --as-glow-cyan: 0 0 20px rgba(0, 217, 255, 0.2);
}

4. 📌 Referências e Arquivos Relacionados