Style Rules & Presentation (`styles`)

In Scapius, visual presentation concerns—such as colors, borders, stroke styles, shapes, icons, and CSS classes—are strictly decoupled from the underlying architecture domain models.

Visual styles are declared declaratively in dedicated styles { ... } blocks at the workspace root or inside individual views.

Reusable Design Systems

To package, share, and reuse styles across multiple workspaces, define a standalone Theme & Design System (.theme file).

workspace styled_enterprise "Styled Enterprise Architecture" {
    # Architecture entities and relationships...

    styles {
        theme "dark-modern"
        import_css "./corporate-theme.css"

        # Style rule on entities
        style system where tier == "Tier-1" {
            fill "#1e293b"
            stroke "#38bdf8"
            stroke_width "2px"
            shape "rounded_rectangle"
            icon "shield-check"
        }

        # Style rule on relationship edges
        style flows_to where attr.sec:encrypted == "true" {
            stroke "#22c55e"
            stroke_width "2px"
            stroke_style "dashed"
        }
    }
}

1. Syntax Overview

styles {
    # Optional theme presets & stylesheet imports
    theme "<theme_preset_name>"
    import_css "<css_file_path_or_url>"

    # Declarative Style Rules
    style <selector> (where <predicate_expression>)? {
        <style_property> <value>
    }
}

2. Entity (Node) Style Properties

When styling architectural entities (system, app, capability, actor, data_object, infrastructure, etc.), the following visual properties are supported:

Property Name	Synonyms / Aliases	Accepted Values	Description & Example
`fill`	`background`, `background_color`	Hex, RGB, or named color	Node background fill color: `fill "#0f172a"`
`stroke`	`border`, `border_color`	Hex, RGB, or named color	Node boundary stroke color: `stroke "#38bdf8"`
`stroke_width`	`border_width`	Dimension string (e.g. `"1px"`, `"2px"`, `"3px"`)	Border thickness: `stroke_width "2px"`
`stroke_style`	`border_style`	`"solid"`, `"dashed"`, `"dotted"`	Border dash pattern: `stroke_style "dashed"`
`color`	`text_color`	Hex, RGB, or named color	Node primary label text color: `color "#ffffff"`
`shape`	—	`"rectangle"`, `"rounded_rectangle"`, `"cylinder"`, `"hexagon"`, `"cloud"`, `"ellipse"`, `"diamond"`	Visual geometric node shape: `shape "cylinder"`
`icon`	—	Icon token string	Embedded icon glyph: `icon "database"`, `icon "bot"`
`css_class`	—	CSS class name	External stylesheet class name: `css_class "pci-glow"`
`custom_css`	—	Inline CSS string	Raw SVG/HTML CSS declarations: `custom_css "filter: drop-shadow(0 0 8px #38bdf8);"`

3. Relationship (Edge) Style Properties

When targeting relationship verbs (flows_to, realizes, serves, depends_on, mitigates, targets, governed_by, protects, etc.), the following edge properties are supported:

Property Name	Synonyms / Aliases	Accepted Values	Description & Example
`stroke`	`color`	Hex, RGB, or named color	Edge line color: `stroke "#ef4444"`
`stroke_width`	`width`	Dimension string (e.g. `"1px"`, `"2px"`, `"3px"`)	Edge line thickness: `stroke_width "2px"`
`stroke_style`	—	`"solid"`, `"dashed"`, `"dotted"`	Line pattern: `stroke_style "dashed"` (useful for async/event flows)
`curve_type`	—	`"smoothstep"`, `"step"`, `"straight"`, `"bezier"`	Edge routing interpolation algorithm (default: `"smoothstep"`): `curve_type "bezier"`
`arrow_head`	`arrow`	`"standard"`, `"open"`, `"diamond"`, `"none"`	Edge arrow terminal marker: `arrow_head "diamond"`
`label_color`	`text_color`	Hex, RGB, or named color	Relationship label text color: `label_color "#94a3b8"`
`css_class`	—	CSS class name	External CSS class applied to the SVG path: `css_class "animated-flow-line"`
`custom_css`	—	Inline CSS string	Raw SVG edge styling: `custom_css "stroke-dasharray: 6 3;"`

4. Selectors

Selectors determine which elements the style rule applies to:

Entity Selectors

Wildcard (*): Targets all entities across the entire model.
Entity Type: Targets all entities of a specific kind (e.g. system, app, component, capability, actor, process, data_object, threat, control, risk_scenario, infrastructure, trust_boundary).
Entity ID: Targets a specific entity by its identifier (e.g. sys_core_banking, cap_customer_onboarding).

Relationship Selectors

Relationship Verb: Targets all edges using a specific verb (e.g. realizes, serves, hosts, reads, writes, flows_to, triggers, composed_of, influences, migrates_to, depends_on, governed_by, mitigates, protects, targets, encloses).
Wildcard / Specific Source-Target Pairs: Targets relationships by verb and source/target predicates.

5. Predicate Expressions (`where ...`)

Predicates allow dynamic conditional styling based on architectural properties, tags, lifecycle phases, and custom attributes.

Supported Operators

Equality & Comparison: ==, !=, >, <, >=, <=
String Operations: contains, starts_with, ends_with
Logical Operators: && (AND), || (OR), parenthetical grouping ( ... )

Common Predicate Fields for Entities

# TIME portfolio disposition
style capability where time == "Invest" { fill "#dcfce7" stroke "#15803d" }
style system where time == "Eliminate" { fill "#fee2e2" stroke "#dc2626" }

# Criticality & Tier
style system where tier == "Tier-1" && internet_facing == true {
    stroke "#ef4444"
    stroke_width "3px"
    icon "shield-alert"
}

# Strategic Assessment Score
style system where score.business_value >= 8 && score.tech_fit <= 3 {
    css_class "high-value-legacy-remediation"
}

# Security Classification
style data_object where security.confidentiality == "Critical" || pii == true {
    stroke "#dc2626"
    stroke_style "dashed"
    shape "cylinder"
}

# Custom FinOps & Cloud Attributes
style infrastructure where attr.cloud:provider == "AWS" && attr.finops:tier == "Production" {
    stroke "#f59e0b"
}

Common Predicate Fields for Relationships

# Directional and protocol-based edge styling
style flows_to where interface_type == "gRPC" {
    stroke "#38bdf8"
    stroke_style "solid"
}

style flows_to where interface_type == "Kafka" {
    stroke "#f59e0b"
    stroke_style "dashed"
}

# Compliance & Audit status on relationships
style governed_by where status == "Non-Compliant" {
    stroke "#ef4444"
    stroke_width "2px"
    stroke_style "dotted"
}

style mitigates {
    stroke "#22c55e"
    stroke_width "2px"
}

6. Complete Comprehensive Example

workspace modern_styled_bank "Styled Financial Architecture" {

    layer "Business Layer" {
        capability cap_payments "Payment Processing" {
            time "Invest"
            maturity "High"
        }
    }

    layer "Application Layer" {
        system sys_gateway "Public API Gateway" {
            tier "Tier-1"
            internet_facing true
        }

        system sys_legacy_ledger "Legacy Mainframe Core" {
            tier "Tier-1"
            time "Eliminate"
            internet_facing false
        }
    }

    # Relationship statements
    sys_gateway flows_to sys_legacy_ledger "Synchronous Transactions" {
        interface_type "gRPC"
        attr sec:encrypted "true"
    }

    # Visual Presentation Block
    styles {
        theme "dark-modern"
        import_css "./custom-palette.css"

        # 1. Entity Node Styling
        style capability where time == "Invest" {
            fill "#064e3b"
            stroke "#059669"
            stroke_width "2px"
            shape "rounded_rectangle"
            color "#ecfdf5"
            icon "trending-up"
        }

        style system where internet_facing == true {
            stroke "#ef4444"
            stroke_width "2px"
            icon "globe"
        }

        style system where time == "Eliminate" {
            fill "#450a0a"
            stroke "#dc2626"
            stroke_style "dashed"
            color "#fef2f2"
        }

        # 2. Relationship Edge Styling
        style flows_to where attr.sec:encrypted == "true" {
            stroke "#22c55e"
            stroke_width "2px"
            stroke_style "solid"
            label_color "#86efac"
        }

        style flows_to where interface_type == "Kafka" {
            stroke "#f59e0b"
            stroke_style "dashed"
        }
    }
}

1. Syntax Overview​

2. Entity (Node) Style Properties​

3. Relationship (Edge) Style Properties​

4. Selectors​

Entity Selectors​

Relationship Selectors​

5. Predicate Expressions (where ...)​

Supported Operators​

Common Predicate Fields for Entities​

Common Predicate Fields for Relationships​

6. Complete Comprehensive Example​