Signal System

InnovEthics design tokens · v0.1

Cold steel / signal orange. Every value is a CSS custom property. Angular Material v3 tokens are bridged via --mat-sys-* overrides, so one hex change propagates to all Material components and custom SCSS at once. The Expert density register uses muted colours and tighter spacing for power users; Standard is vivid and spacious. Toggle above to preview live: it sets data-density on <html>.

--bg#080d14Page ground

--surface#0f1926Cards, panels

--surface-up#162235Inputs, elevated

--text#c8dce8Body copy

--text-2#5a7a94Secondary text

--signal#e05a0aCTAs, active

--data#3a9fbfReadouts, values

--ok#1fa86aAvailable

--warn#e0a010Caution

--fault#cc3333Blocked, error

--border#1e3048Dividers

Token	Dark	Light	Material override	Role
--bg	#080d14	#eef2f6	--mat-sys-background	Page ground
--surface	#0f1926	#ffffff	--mat-sys-surface	Cards, panels
--surface-up	#162235	#f4f7fa	--mat-sys-surface-variant	Inputs, elevated
--text	#c8dce8	#0a1520	--mat-sys-on-surface	Body copy
--text-2	#5a7a94	#3d6080	--mat-sys-on-surface-variant	Secondary text
--signal	#e05a0a	#c44400	--mat-sys-primary	CTAs, active
--data	#3a9fbf	#1a7a9a	--mat-sys-secondary	Readouts, values
--ok	#1fa86a	#0f7a4a	--mat-sys-tertiary	Available
--warn	#e0a010	#9a6a00	—	Caution
--fault	#cc3333	#aa2020	--mat-sys-error	Blocked, error
--border	#1e3048	#c4d4e0	--mat-sys-outline	Dividers

Typography

Rajdhani 700 · Display / headings

AUTONOMOUS SYSTEMS

IBM Plex Mono · Data / readouts / tokens

UNIT-04 · lat: 41.3851°N · lng: 2.1734°E · --signal: #e05a0a

Rubik 400 · Body / prose / form copy

Available for contract engagements across Europe. Specialising in Angular architecture, real-time data systems, and 3D operational interfaces.

Dynamic form components

Forms are described as data and rendered with Angular Material. The enquiry form below is the exact definition used by the Check my availability side panel, so the schema could equally arrive from a server or be generated by an AI assistant.

Show measurements on the form (redlines)

Enquiry form · live

Field statesField config → UI (budget select)

{
  "key": "remote",
  "type": "radio",
  "wrappers": [
    "field-meta",
    "form-field"
  ],
  "props": {
    "qid": "ENQ-WK-01",
    "label": "Can this work be done remotely from my office in Barcelona?",
    "required": true,
    "options": [
      {
        "value": "remote",
        "label": "Yes, fully remote"
      },
      {
        "value": "hybrid",
        "label": "Mostly remote, occasional on-site visits"
      },
      {
        "value": "on-site",
        "label": "No, on-site presence is required"
      }
    ],
    "weight": 20
  },
  "validation": {
    "messages": {
      "required": "This field is required"
    }
  }
}

Live model

{}

Form spec · what Figma Dev Mode shows

Measured live from the rendered fields, so it follows the density toggle and the language. Spacing, gaps and heights are written in units (u), never raw pixels. 1u = ½ × the browser's default text size × a window-width factor (0.9 to 1.5, so the whole page grows on wide windows) × the user's text-size choice (stored in NgRx) × the density ratio. Text size and window width scale everything; density only tightens or loosens spacing. Figma should show these by default: text styles (family, size / line-height, weight, tracking, colour), auto-layout spacing (gap, padding), stroke width and corner radius.

Text styles

Role	Token	Family	Size / line-height	Weight	Tracking	Colour

Separation and shape

Role	Token	Token value	Measured

Material form-field tokens in play

Token	Token value

Figma variables (Tokens Studio JSON)

Density registers

Signal orange--signal

Data blue--data

Status OK--ok

Warning--warn

Fault--fault