wehub-resource-sync
d25d482dc2
Publish CLI Package / publish-npm (push) Waiting to run
Publish Python SDK / publish-pypi (push) Waiting to run
Publish TypeScript SDK / publish-npm (push) Waiting to run
CI / Migrate Dev DB (push) Has been skipped
CI / Detect Version (push) Has been cancelled
CI / Migrate DB (push) Has been cancelled
CI / Build Dev ECR (./docker/app.Dockerfile, ECR_APP) (push) Has been cancelled
CI / Build Dev ECR (./docker/db.Dockerfile, ECR_MIGRATIONS) (push) Has been cancelled
CI / Build Dev ECR (./docker/pii.Dockerfile, ECR_PII) (push) Has been cancelled
CI / Build Dev ECR (./docker/realtime.Dockerfile, ECR_REALTIME) (push) Has been cancelled
CI / Deploy Trigger.dev (Dev) (push) Has been cancelled
CI / Build AMD64 (./docker/app.Dockerfile, ECR_APP, ghcr.io/simstudioai/simstudio) (push) Has been cancelled
CI / Build AMD64 (./docker/db.Dockerfile, ECR_MIGRATIONS, ghcr.io/simstudioai/migrations) (push) Has been cancelled
CI / Build AMD64 (./docker/pii.Dockerfile, ECR_PII, ghcr.io/simstudioai/pii) (push) Has been cancelled
CI / Build AMD64 (./docker/realtime.Dockerfile, ECR_REALTIME, ghcr.io/simstudioai/realtime) (push) Has been cancelled
CI / Build ARM64 (GHCR Only) (./docker/app.Dockerfile, ghcr.io/simstudioai/simstudio) (push) Has been cancelled
CI / Build ARM64 (GHCR Only) (./docker/db.Dockerfile, ghcr.io/simstudioai/migrations) (push) Has been cancelled
CI / Build ARM64 (GHCR Only) (./docker/pii.Dockerfile, ghcr.io/simstudioai/pii) (push) Has been cancelled
CI / Build ARM64 (GHCR Only) (./docker/realtime.Dockerfile, ghcr.io/simstudioai/realtime) (push) Has been cancelled
CI / Create GHCR Manifests (ghcr.io/simstudioai/migrations) (push) Has been cancelled
CI / Create GHCR Manifests (ghcr.io/simstudioai/pii) (push) Has been cancelled
CI / Create GHCR Manifests (ghcr.io/simstudioai/realtime) (push) Has been cancelled
CI / Create GHCR Manifests (ghcr.io/simstudioai/simstudio) (push) Has been cancelled
CI / Check Docs Changes (push) Has been cancelled
CI / Process Docs (push) Has been cancelled
CI / Create GitHub Release (push) Has been cancelled
CI / Test and Build (push) Has been cancelled
98 lines
3.2 KiB
Plaintext
98 lines
3.2 KiB
Plaintext
---
|
||
slug: emcn
|
||
title: 'Introducing Emcn — Sim’s new design system'
|
||
description: Emcn is the heart of our new design language at Sim. Here’s the scaffolding of the system—principles, tokens, components, and roadmap—as we prepare the full launch.
|
||
date: 2025-11-08
|
||
updated: 2025-11-08
|
||
authors:
|
||
- emir
|
||
readingTime: 6
|
||
tags: [Design, Emcn, UI, UX, Components, Sim]
|
||
ogImage: /blog/emcn/cover.png
|
||
ogAlt: 'Emcn design system cover'
|
||
about: ['Design Systems', 'Component Libraries', 'Design Tokens', 'Accessibility']
|
||
timeRequired: PT6M
|
||
canonical: https://www.sim.ai/blog/emcn
|
||
featured: false
|
||
draft: true
|
||
---
|
||
|
||
> This post is the scaffolding for Emcn, our new design system. We’ll fill it in as we publish the full documentation and component gallery.
|
||
|
||
|
||
|
||
## What is Emcn?
|
||
|
||
Emcn is the design system that powers Sim’s product and brand. It aims to give us:
|
||
|
||
- Consistent, accessible UI across web surfaces
|
||
- A fast path from Figma to code with strongly‑typed tokens
|
||
- A composable component library that scales with product complexity
|
||
|
||
## Principles
|
||
|
||
1. Opinionated but flexible
|
||
2. Accessible by default (WCAG AA+)
|
||
3. Strongly‑typed, themeable tokens (light/dark + brand accents)
|
||
4. Composable components over one‑off variants
|
||
5. Performance first (minimal runtime, zero layout shift)
|
||
|
||
## Foundations (Tokens)
|
||
|
||
- Color: semantic palettes (bg, fg, muted, accent, destructive) with on‑colors
|
||
- Typography: scale + weights mapped to roles (display, title, body, code)
|
||
- Spacing: 2/4 grid, container and gutter rules
|
||
- Radius: component tiers (base, interactive, card, sheet)
|
||
- Shadows: subtle elevation scale for surfaces and overlays
|
||
- Motion: duration/easing tokens for affordances (not decoration)
|
||
|
||
## Components (Initial Set)
|
||
|
||
- Primitives: Button, Input, Select, Checkbox, Radio, Switch, Slider, Badge, Tooltip
|
||
- Navigation: NavBar, SideBar, Tabs, Breadcrumbs
|
||
- Feedback: Toast, Banner, Alert, Dialog, Drawer, Popover
|
||
- Layout: Grid, Stack, Container, Card, Sheet
|
||
- Content: CodeBlock, Markdown, Table, EmptyState
|
||
|
||
> Each component will include: anatomy, a11y contract, variants/slots, and code examples.
|
||
|
||
## Theming
|
||
|
||
- Light + Dark, with brand accent tokens
|
||
- Per‑workspace theming hooks for enterprise deployments
|
||
- SSR‑safe color mode with no flash (hydration‑safe)
|
||
|
||
## Accessibility
|
||
|
||
- Focus outlines and target sizes audited
|
||
- Color contrast tracked at token level
|
||
- Keyboard and screen reader interactions defined per component
|
||
|
||
## Tooling
|
||
|
||
- Tokens exported as TypeScript + CSS variables
|
||
- Figma library mapped 1:1 to code components
|
||
- Lint rules for token usage and a11y checks
|
||
|
||
## Roadmap
|
||
|
||
- v0: Foundations + Core components (internal)
|
||
- v1: Public docs and examples site
|
||
- v1.x: Data display, advanced forms, charts bridge
|
||
|
||
## FAQ
|
||
|
||
- What does “Emcn” mean?
|
||
A short, crisp name we liked—easy to type and remember.
|
||
|
||
- Will Emcn be open‑sourced?
|
||
We plan to share the foundations and many components as part of our commitment to open source.
|
||
|
||
## We’re hiring
|
||
|
||
We’re hiring designers and engineers who care deeply about craft and DX. If you want to help shape Emcn and Sim’s product, we’d love to talk.
|
||
|
||
— Team Sim
|
||
|
||
|