Design System Reference
The Color Company Style Guide

Apple-style design system for The Color Company. Bold, elegant, restrained. Every token, type sample, and component used across the new Webflow site.

01
Color

White is the brand. Accents earn their place.

Surfaces — light
surface-white
#FFFFFF
surface-paper
#F5F5F7
surface-soft
#FAFAFA
surface-line
#D2D2D7
surface-line-soft
#E8E8ED
Surfaces — dark
surface-ink
#000000
surface-graphite
#1D1D1F
surface-charcoal
#161618
surface-elevated
#2A2A2D
Brand spectrum
Atexco — cyan
#009DDC
DGI — red
#E03A3E
Fedar — orange
#F5821F
Diferro — green
#61BB46
brand-violet
#963D97
brand-yellow
#FDB827
System accents
accent-primary
#0071E3
accent-success
#34C759
accent-warning
#FF9F0A
accent-danger
#FF3B30
Gradients
gradient-spectrum
full logo spectrum
gradient-warm
yellow → red
gradient-cool
cyan → deep blue
gradient-nature
green → cyan
02
Typography

Inter Tight (display) · Inter (body) · JetBrains Mono (data). Tight tracking on headings, generous line height on body.

display--mega · 96–128px · -0.028em · 700
Color, under control.
display · 64–80px · -0.025em · 700
Four ways to print. One partner.
h2 · 32–64px · -0.02em · 700
Don't pick a machine. Prove it.
h3 · 24–36px · -0.015em · 600
See machines live, in motion.
h4 · 20–28px · -0.01em · 600
Atexco Vega One
lead · 17–21px · -0.005em · 400

Chosen, installed, and supported by people who run the machines. Twenty-five years of operating experience, three hundred installations across Europe.

body · 17px · 1.5 · 400

The Color Company is a Polish distributor of industrial textile printing systems from Atexco, DGI-d.gen, Fedar, and Diferro. We don't sell from a catalog. We help production teams choose the right machine, install it, calibrate color, and keep it running.

eyebrow · 13px · 0.08em · uppercase · 600
Demo CenterFor Atexco
mono · 12–14px · 0 tracking · 400

WIDTH 1,800 mm · SPEED 380 m²/h · HEADS 8× KYOCERA · INK REACTIVE / PIGMENT

caption · 13px · text-tertiary

FESPA 2025, Berlin — Atexco Vega One demo, on customer fabric.

03
Buttons

Pill-shaped. Dark by default. White on dark sections. Restrained motion.

On dark surfaces, primary inverts to white:

Plan a DemoSee Technologies
04
Hero — light

Generous space. Headline carries the page. Gradient highlights one short phrase.

Color Intelligence From Poland
the color company.

Industrial digital textile printing — chosen, installed, and supported by people who run the machines.

05
Hero — dark (for brand pages)

Black/graphite base with a brand-accent glow behind a hero product visual.

For Atexco
Direct to textile, at production speed.

Reactive, acid, and pigment systems on a single platform. Built for European production volumes.

06
Brands grid

Four brands. Each card glows in its own accent. Atexco · DGI-d.gen · Fedar · Diferro.

Atexco

Industrial direct-to-textile systems. Reactive, acid, and pigment on a single platform.

Explore Atexco →
DGI-d.gen

Wide-format textile specialists. Stable color across long production runs.

Explore DGI-d.gen →
Fedar

Sublimation and DTF platforms. Fast ROI for growing print operations.

Explore Fedar →
Diferro

Calenders and heat presses. Finish your sublimation line the right way.

Explore Diferro →
07
Stats strip

Numbers do the work. Optional gradient on the landmark stat.

25+
Years in the industry
300+
Installations across Europe
2,800
New demo center
4
Represented brands
08
Technology tabs

Filter machines by technology. Active tab underlines in the technology’s accent color.

Atexco
Vega One
WIDTH 1,800 mmSPEED 380 m²/hHEADS 8× Kyocera
View machine →
Atexco
Aurajet 188
WIDTH 1,880 mmSPEED 240 m²/hHEADS 4× Kyocera
View machine →
DGI-d.gen
PapyrusONE
WIDTH 1,950 mmSPEED 320 m²/hHEADS 16× Ricoh
View machine →
Fedar
FD5193E
WIDTH 1,930 mmSPEED 180 m²/hHEADS 3× i3200
View machine →
Demo Center
Don’t pick a machine. Prove it.

2,800 m² of testing space, opening soon. Bring your fabric. Bring your data. Walk out with a decision.

See machines live

Full production runs, end-to-end. No renders, no demos in a slide deck. Watch the machine work.

Test your own materials

Bring the fabric you ship. Bring your inks. Bring your color targets. We’ll match them, side by side.

See before you invest

Capital equipment decisions backed by evidence — speed, finish, color stability, throughput. On paper, then live.

10
Testimonials

Quote + author + small placeholder tag until real testimonials replace these.

“We tested three machines side by side in their space. The decision was obvious by hour two.”

Production Manager
Textile printing house, Germany
Placeholder

“Color stability across runs was the deal-breaker for us. They walked us through it on real fabric.”

Operations Director
Fashion supply chain, Italy
Placeholder

“Service is what kept us. Six months in, every question is answered the same day.”

Owner
Sportswear print shop, Czechia
Placeholder
11
Blog preview

Three latest articles. Generous imagery. Restrained metadata.

Technology Guide
Sublimation, pigment, or DTF: how to choose the right textile printing technology.

A clear breakdown of where each technology wins — and where it doesn’t.

Read article →
Investment
How much does an industrial textile printing machine actually cost?

Capital costs, ink economics, service, and total cost of ownership over five years.

Read article →
Demo Center
Why testing your own material before buying changes the decision.

A walkthrough of what a material test reveals — and what no spec sheet can.

Read article →
12
CTA strip

Massive headline. Two buttons. Generous padding. End of page.

Don’t choose from a catalog.
See it run. Test it. Then decide.
14
Tags & badges

Pill-shaped, uppercase, 11px, faint background tint in the accent color.

DTFNewPlaceholder
13
Form fields

48px height. Generous padding. Blue focus ring on active. Subtle borders.

Name
Your full name
Email
you@company.com
Message
Tell us about the production you’re planning…
Send Inquiry →
15
Class index — Webflow handoff

Suggested base class names. Use as combo classes in Webflow.

ClassPurpose
sg-sectionStandard vertical-padded section
sg-section--paperOff-white (#F5F5F7) background
sg-section--darkGraphite (#1D1D1F) background, white text
sg-container / sg-container--narrowWidth-constrained content wrapper
sg-display-mega96–128px hero headline
sg-display64–80px section headline
sg-h2 / sg-h3 / sg-h4Heading scale, Inter Tight
sg-lead21px lead paragraph, secondary color
sg-eyebrow / sg-eyebrow--atexco13px uppercase tracked label
sg-gradient-text / --cool / --warm / --natureGradient text variants
sg-btn + sg-btn--primary / --secondary / --accentPill buttons; sizes sg-btn--sm, sg-btn--lg
sg-linkArrow text link
brand-card + brand-card--atexco / --dgi / --fedar / --diferroBrand grid cards with glow
sg-stats / sg-stat / sg-stat__number / sg-stat__labelStats strip
sg-tabs / sg-tab / sg-tab--activeTechnology tabs
sg-product-cardMachine card
sg-feature-cardDemo center feature card (dark)
sg-testi-cardTestimonial card
sg-blog-cardBlog preview card
sg-cta-stripFinal dark CTA section
sg-tag + sg-tag--blue / --green / --orangePill badges
sg-monoJetBrains Mono for specs
sg-captionSmall tertiary-color caption
Design System Reference
The Color Company Style Guide

Apple-style design system for The Color Company. Bold, elegant, restrained. Every token, type sample, and component used across the new Webflow site.