SeinX Design System Specimen

1. Core Palette

Smoke

#323232

Base bg

Smoke Light

#3d3d3d

Elevated

Smoke Lighter

#4a4a4a

Borders

Forest

#2a7a48

Containers

Signal

#3ddc84

7.19:1 AAA

Gold

#c9a84c

5.61:1 AA

Terracotta

#c27a5a

3.80:1 lg only

Neutral Scale

Neutral 100

#f0ede8

10.98:1

Neutral 90

#d8d4cd

8.68:1

Neutral 80

#c4c0b8

7.07:1

Neutral 60

#8a8680

Decorative

Neutral 40

#5e5b57

Borders

Neutral 20

#3e3c39

Bg layer

Neutral 10

#2a2927

Deep bg

2. Type Scale — Plus Jakarta Sans · Major Third (1.25)

display 64px · 800 · 1.05

The AI era

h1 39px · 700 · 1.15

Humanistic AI. Collective Craft.

h2 31px · 700 · 1.2

A cooperative, not a corporation

h3 25px · 600 · 1.25

We consult. We build. We teach.

h4 20px · 600 · 1.3

Augmentation Over Automation

body 16px · 400 · 1.5

SeinX is a humanistic AI cooperative helping teams and professionals navigate the shift — with craft, care, and common sense.

body-sm 14px · 400 · 1.5

Every member owns what they build, shares in what we earn, and keeps the autonomy that made them good in the first place.

caption 12px · 500 · 1.4

13+ years in engineering & leadership · Based in Rotterdam

micro 11px · 500 · 1.35

KvK 42010977 · Rotterdam, Netherlands · EU-hosted

overline 9px · 600 · 1.3 · 0.12em

SeinX Solutions

Weight 300 (light) — available for UI chrome, section headers, and decorative use:

light 300 h2 · 300 · 1.2

Navigate the shift

3. Surfaces & Elevation

Smoke (base)

#323232

Smoke Light (card)

#3d3d3d · shadow-sm

Smoke Light (elevated)

#3d3d3d · shadow-md

Neutral 10 (recessed)

#2a2927

Forest (accent bg)

#2a7a48

Smoke Light (modal)

#3d3d3d · shadow-lg

4. Hero Section — Real Content

The AI era doesn't
have to feel like this.

SeinX is a humanistic AI cooperative helping teams and professionals navigate the shift — with craft, care, and common sense.

5. The Pitch — Trifecta Cards

SeinX Solutions

We consult.

We help organisations find the AI use cases that actually matter — and build the team confidence to own them. No hype. No magic bullets. Just practical, human-centered strategy.

SeinX Labs

We build.

We create lean, AI-native tools and products. Fast prototyping, real-world validation, European infrastructure. If it doesn't solve a real problem, it doesn't ship.

SeinX Forum

We teach.

We share what we learn. Research, mentorship, and honest discourse on the human side of AI — because the conversation matters as much as the code.

6. Blockquote / Pull Quote

We're looking for the kind of people who care about craft, who think long-term, and who know that the best work happens when you feel safe enough to take risks.

— from the SeinX cooperative invitation

7. About Section — Founder Block

Esh Sharypin

Founder

I spent 13 years building software and leading engineering teams — 7 of them at Sendcloud, where I grew with some of the best people I've worked with. That conviction is why SeinX exists. I want to build a place where experienced professionals can do meaningful work with AI — together, as co-owners.

13+ years in engineering & leadership · Scaled teams and systems at one of the Netherlands' fastest-growing SaaS companies · Based in Rotterdam

8. Buttons

Default size — 14px SemiBold, 8px radius

Small variant — 12px, 4px radius

9. Badges & Tags

Active Premium Warning Draft EU-Sovereign WCAG AAA

10. Form Elements

Full name

Email

We won't share this with anyone.

Company

Company name must be at least 2 characters.

What brings you here?

11. Inline Text Styles

Body text in neutral-100 bold with signal green links and gold emphasis for key terms. The hierarchy reads clearly. Terracotta warnings are used sparingly and only at visible sizes. Muted text in neutral-60 for secondary info.

Smaller body text (body-sm, 14px) for descriptions, supporting copy, and card content. Still fully legible at WCAG AAA with neutral-80 on smoke (7.07:1).

12. Footer

13. Multilingual — Diacritical Support

Dutch

Coöperatie · crème · reünie · één

Hungarian

Közösség · együttműködés · Kovács Márta · ügyvéd

Romanian

Știință · împreună · încredere · României

Polish

Współpraca · łączność · Wrocław · życie

14. Spacing Scale (4px base)

sp-1
4px

sp-2
8px

sp-3
12px

sp-4
16px

sp-6
24px

sp-8
32px

sp-10
40px

sp-12
48px

sp-16
64px

sp-20
80px

Border Radius

sm
4px

md
8px

lg
12px

xl
16px

full
9999px

§ 15 — Semantic Color Mapping

Semantic tokens alias primitive tokens. Consumers use semantic names; primitives define the actual values.

color-background
→ smoke #323232

color-surface
→ smoke-light #3d3d3d

color-surface-elevated
→ smoke-lighter #4a4a4a

color-interactive
→ signal #3ddc84

color-text-primary
→ neutral-100 #f0ede8

color-accent
→ gold #c9a84c

color-warning
→ terracotta #c27a5a

color-container
→ forest #2a7a48

§ 16 — Interaction States

default
#3ddc84

hover
#5ae59a

active
#34bb70

focus
#3ddc84

disabled
#8a8680

§ 17 — Motion & Transitions

Breathing tech aesthetic: slow, organic, deliberate. No bounce, no spring physics.

duration-fast

150ms

Toggles, hover feedback

hover to demo

duration-normal

300ms

Panels, modals, content reveals

hover to demo

duration-slow

600ms

Page transitions, hero animations

hover to demo

easing-default: cubic-bezier(0.4, 0, 0.2, 1)

§ 18 — Z-Index Layers

base · 0

dropdown · 100

sticky · 200

modal · 400

popover · 500

toast · 600

Values spaced by 100 to allow insertion without renumbering. Gap at 300 is intentional.

§ 19 — Opacity Scale

subtle
0.1

muted
0.3

half
0.5

prominent
0.7

near-opaque
0.9

§ 20 — Print Tokens

CMYK-safe color equivalents and type adjustments for paper output.

SeinX Print Preview

Body text at 10pt / 1.4 line-height — the standard for A4/letter documents. Colors adjusted for CMYK gamut: signal green becomes #2ab86e, gold becomes #b8962f, terracotta becomes #b06a4a.

Margins: 25mm top/bottom · 30mm left (binding) · 20mm right · 10mm gutter

§ 21 — Icon Sizing (Lucide)

Recommended: Lucide. Icons inherit color from semantic tokens. Sizes align with the type scale.

sm · 14px
body-sm

md · 16px
body (default)

lg · 20px
h4

xl · 25px
h3

§ 22 — Usage Guide & Accessibility

Consume via npm

npm install seinx-design-tokens

import tokens from 'seinx-design-tokens';
console.log(tokens.color.core.signal.$value);

Consume via URL

<link rel="stylesheet" href="https://design.seinx.ai/design-tokens.css">

const tokens = await fetch(
  'https://design.seinx.ai/design-tokens.json'
).then(r => r.json());

Accessibility Rules

AAA — Any text

signal on smoke (7.19:1), neutral-100 on smoke (10.98:1), neutral-90 (8.68:1), neutral-80 (7.07:1)

AA — Restricted

gold on smoke (5.61:1) — semibold 600+ or large text 18px+ only

Sub-AA — Decorative

terracotta on smoke (3.80:1) — icons, badges, large bold only. Error states must pair with icon + text label.

Core rule

Color is never the sole means of conveying information. Always pair with icons, text, or patterns.