SeinX Design System Specimen v1.7.0

0. Branding — Canonical Marks

Wordmark · screen · Plus Jakarta Sans ExtraBold · paper #f0ede8 · gold→signal radial X.

Wordmark · print · near-black #1a1a1a wordmark on white/paper stock · solid print-forest #1f6838 X (no gradient — reproduces cleanly on uncoated paper / CMYK). Use for PDF proposals, invoices, hard-copy artifacts.

Download logo-print.svg →

Icon · X glyph over a frozen render of nn-canvas-animation.

Download icon.svg →

Favicon · rounded-square smoke backdrop · 22% radius (iOS-squircle).

Download favicon.svg →

Open Graph cards

English · 1200×630 (OG spec) · "People-first AI cooperative".

Download og-en.png →

Nederlands · 1200×630 (OG spec) · "Mensgerichte AI-coöperatie".

Download og-nl.png →

Backdrop raster

og-canvas.png · 2400×1260 · frozen render of seinx-nn-canvas-animation v3.2.1 with the thin-line backdrop preset. Used as the backdrop for OG cards and embedded into icon.svg.

Download og-canvas.png →

Imports via seinx-design-tokens/branding/<file>. Source-of-truth lives in the package — see src/branding/.

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

People-first 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.

Exploring what AI work could look like when it's built around people, not hype. If that resonates, I'd love to hear what you're thinking about.

Note: This section uses a static overlay from branding/og-canvas.png. For the production experience, we recommend using the live nn-canvas-animation library for a fluid, interactive tech aesthetic.

5. The Pitch — Trifecta Cards

SeinX Solutions

We'll consult.

Helping organisations find the AI use cases that actually matter — and building the team confidence to own them. No hype. No magic bullets. Practical, human-centered strategy.

SeinX Labs

We'll build.

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'll teach.

Sharing 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

A cooperative, not a corporation.

SeinX is a collective of independent professionals building something together. No hierarchy. No equity games. Every member owns what they build, shares in what we earn, and keeps the autonomy that made them good in the first place.

There's no team of fifty behind this. Not yet. That's the whole point. If you care about craft, think long-term, and know that the best work happens when you feel safe enough to take risks — this might be your kind of place.

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. Together we scaled systems, migrated architectures, and navigated the kind of growing pains that teach you what really matters: that great technology is built by people who feel safe enough to do great work.

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 — without the hype, the isolation, or the pressure to move fast and break things.

If you've been looking for something like that, I'd love to hear from you.

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.