Overview
Signal Amber Industrial Systems is a dark industrial marketing language that treats every page like a machine stage. Amber carries both signal and brand energy, while black space and technical imagery do most of the compositional work.
OneTech
OneTech Coatings delivers intelligent coating solutions for automotive and industrial applications — combining precision, efficiency, and long-term performance trusted by professionals worldwide.
4.0
13
Visits
Categories
Available Pages
Version History
Workflow Collections
Design Analysis
OneTech Home design analysis
Signal Amber Industrial Systems is a dark industrial marketing language that treats every page like a machine stage. Amber carries both signal and brand energy, while black space and technical imagery do most of the comp...
Image Direction
Use clean equipment photography, product cutouts, and CAD-like or rendered industrial systems with sharp edges and low visual clutter. Scenes should feel like catalog proof or engineering visualization rather than corporate lifestyle content.
Colors
The palette is brutally narrow: matte black, signal amber, warm white, and a little industrial gray. Keep amber concentrated in headlines, navigation accents, filter chips, and filled CTAs. Most large surfaces should stay black, with white reserved for images or content panels that need contrast.
Typography
Use a direct Swiss grotesk for display and a calmer utilitarian sans for body copy. Headline scale should be aggressive and compact. Utility labels and nav items should remain small and box-aligned, almost like product control labels.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Signal Amber Industrial Systems
An industrial product-marketing system built from matte black staging, amber signal color, compact boxed navigation, and large technical object renders.
industrial, sparse, technical, and signal-led
Primary mode: darkindustrial equipment marketingproduct-marketing
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
industrial, sparse, technical, and signal-led
Density
3
Variance
3
Motion
2
Signals
matte black page field · amber signal actions · small module navigation · large isolated product render
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Matte Black
#111111
Signal Amber
#FBAA19
Tool Gray
#8E8E8E
Panel Charcoal
#242424
Outline Amber
#D08E1C
Warm White
#F1F1F1
Usage rules
Let black dominate so the amber reads like machine-signal paint rather than brand wallpaper.
Use amber in large type, small labels, and decisive actions only.
Keep gray text muted and subordinate to the amber display language.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
xs
6px
sm
10px
md
16px
lg
24px
section
96px
Token Radii
Corner radii tokens with a live surface sample.
sm
3px
md
4px
lg
6px
full
999px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Suisse Intl
compressed industrial grotesk with high legibility
Body
Neue Montreal
clean utilitarian body voice
Mono
Suisse Intl
compact technical labeling without a separate coding tone
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
clamp(3.4rem, 7vw, 5.8rem)/—
Display
H2
clamp(2rem, 4vw, 3rem)/—
H2
Body
1rem/—
Body
Caption
0.75rem/—
Caption
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use oversized amber headlines with tight line breaks on black fields. · Keep interface labels small, uppercase-leaning, and box-aligned. · Avoid decorative letterforms; the site should feel engineered, not branded like fashion.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
180ms-260ms
Easing
cubic-bezier(.2,.8,.2,1)
Spring
stiffness 110, damping 18
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 180ms-260ms |
easing | cubic-bezier(.2,.8,.2,1) |
spring | stiffness 110, damping 18 |
Layout Principles
Use broad black sections with one dominant render or diagram per view.
Anchor navigation and CTAs inside compact rectilinear modules rather than floating pills.
Let project grids and filters feel like catalog controls, not editorial cards.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#FBAA19
Text
#0D0D0D
Border
1px solid #FBAA19
Radius
4px
Padding
16px 42px
Min height
52px
Buttons secondary
Base Attributes
Background
transparent
Text
#FBAA19
Border
1px solid #D08E1C
Radius
4px
Padding
16px 32px
Min height
53px
Buttons nav cta
OverviewFeaturesDocs
Base Attributes
Background
#FBAA19
Text
#0D0D0D
Border
0px none #FBAA19
Radius
3px
Padding
20px
Min height
53px
Cards default
Feature Card
Component preview content
Base Attributes
Background
#111111
Text
#F1F1F1
Border
1px solid rgba(251,170,25,0.18)
Radius
4px
Padding
24px
Shadow
none
Cards media panel
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#111111
Border
0px none transparent
Radius
4px
Padding
0px
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
#242424
Text
#F1F1F1
Height
53px
Active text
#F1F1F1
Item padding
16px 20px
Item radius
3px
Toggles filter
Base Attributes
Background
transparent
Text
#FBAA19
Border
1px solid #D08E1C
Radius
3px
Padding
10px 18px
Min height
38px
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Summary
Use isolated product photography, CAD-like equipment renders, and technical industrial imagery on plain black or white stages.
Guidance
- -Keep objects large in frame and clearly separated from the background.
- -Favor engineering clarity over atmospheric lifestyle staging.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -No glossy chrome or industrial sci-fi gradients.
- -No soft cards floating above the black field.
- -No rounded consumer-app pills replacing the boxed machine-control language.
- -No bright multicolor palette competing with the amber signal system.