Tungsten Design System

Foundations

Design Principles

Three core principles guide every design decision in the Tungsten ecosystem. Like the language itself — no noise, just the algorithm.

Pseudocode That Ships

Every interface element should feel as natural as reading pseudocode in a notebook. If a user has to think about the UI instead of their work, we've failed. Reduce cognitive load ruthlessly — strip away every element that doesn't directly serve comprehension.

No ends. No braces. No colons. No return. Just the algorithm.

Warm Precision

Tungsten is named after an element that glows when heated. Our interfaces balance scientific precision with approachable warmth. We use monospaced type for code and data, but pair it with a serif display face that feels human. Colors are warm but never garish — the amber glow of a filament, not a neon sign.

Technical rigor + human warmth = Tungsten

Density by Choice

Scientists and programmers need information density. Our system supports high-density layouts without sacrificing readability. Every spacing decision, every type size, every component variant exists to let users control how much they see.

<< 3ft + 12in # => 4ft — Compact, readable, powerful.

Foundations / Color

Color System

Inspired by the warm glow of heated tungsten filaments. A dark-first palette that reduces eye strain for long coding sessions.

Primary Palette

AAA on Carbon

Tungsten

Primary brand, CTAs, active states

HEX #E8A020
RGB 232, 160, 32
HSL 38°, 83%, 52%

AAA on Carbon

Filament

Highlights, hover states

HEX #F5C563
RGB 245, 197, 99
HSL 40°, 89%, 67%

Primary BG

Carbon

Primary background, text on light

HEX #1A1A1E
RGB 26, 26, 30
HSL 240°, 7%, 11%

Surface

Graphite

Cards, elevated surfaces

HEX #2A2A30
RGB 42, 42, 48
HSL 240°, 7%, 18%

AA on Carbon

Cobalt

Links, focus rings

HEX #4A7BF7
RGB 74, 123, 247
HSL 223°, 92%, 63%

Light Mode BG

Paper

Light mode background

HEX #F2F1EE
RGB 242, 241, 238
HSL 45°, 14%, 94%

Semantic Colors

Success / Emerald

Passing tests, confirmations

HEX #34B86A · BG #1A2E22

AAA

Warning / Tungsten

Deprecations, lint warnings

HEX #E8A020 · BG #2E2518

Error / Ruby

Compilation errors, destructive

HEX #E54D5E · BG #2E1A1E

Info / Cobalt

Informational messages

HEX #4A7BF7 · BG #1A2030

Color Usage Rules

Rule	Guidance
Tungsten amber	Only for primary actions and brand marks. Never for large background fills.
Cobalt blue	Reserved for links and focus indicators only.
Semantic colors	Always pair with matching background tint. Never use error-red for decoration.
Contrast ratios	Text on Carbon: minimum 4.5:1 (AA). Large text: 3:1. Interactive: 3:1.
Dark mode default	Tungsten is dark-first. Light mode uses Paper (#F2F1EE) as base.

Foundations / Typography

Typography

Three fonts: Fraunces for warmth, DM Sans for clarity, JetBrains Mono for code. Together they embody "warm precision."

Font Families

Role	Family	Usage
Display	`Fraunces` — Variable serif	Headlines, hero text, section titles
Body	`DM Sans` — Geometric sans	Paragraphs, UI labels, buttons, navigation
Code	`JetBrains Mono` — Monospace	Code blocks, tokens, data values, specs

Type Scale

Display48 / 52 · -0.03emFraunces 800

Pseudocode that runs.

Headline32 / 38 · -0.02emFraunces 700

Just the algorithm.

Title 124 / 30 · -0.01emFraunces 700

Units of measurement

Title 220 / 26 · 0DM Sans 700

Classes without the noise

Body16 / 26 · 0DM Sans 400

Tungsten is an object-oriented language that reads like the pseudocode in your notebook.

Callout14 / 22DM Sans 500

For scientists, mathematicians, and anyone who thinks in code.

Footnote12 / 18DM Sans 400

From the Swedish tung sten — literally heavy stone.

Code14 / 22JetBrains Mono 400

<< price - 15% + 8.25% # => $460.05

Responsive Type

Style	Desktop (1440)	Tablet (768)	Mobile (375)
Display	`48/52`	`38/42`	`30/36`
Headline	`32/38`	`28/34`	`24/30`
Body	`16/26`	`16/26`	`15/24`
Code	`14/22`	`14/22`	`13/20`

Foundations / Layout

Layout & Grid

A responsive 12-column grid built on an 8px spatial unit.

12-Column Grid

Breakpoint	Width	Columns	Gutter	Margin
Desktop XL	`≥ 1440px`	12	`24px`	`80px`
Desktop	`1024–1439`	12	`24px`	`48px`
Tablet	`768–1023`	8	`16px`	`32px`
Mobile	`375–767`	4	`16px`	`16px`

Breakpoint Tokens

Token	Value	Usage
`--bp-sm`	`375px`	Small phones
`--bp-md`	`768px`	Tablets
`--bp-lg`	`1024px`	Laptops
`--bp-xl`	`1440px`	Large displays
`--bp-xxl`	`1920px`	Ultra-wide

Safe Areas

For notched devices, respect env(safe-area-inset-*). Tab bars should include padding-bottom: max(16px, env(safe-area-inset-bottom)).

Foundations / Spacing

Spacing System

An 8px base unit produces a harmonious spatial rhythm. Each step has a defined semantic use.

Scale

space-1 4px

space-2 8px

space-3 12px

space-4 16px

space-5 24px

space-6 32px

space-7 48px

space-8 64px

space-9 96px

space-10 128px

Use only these 10 values. Do not introduce arbitrary spacing.

Components

Component Library

30+ components with live previews. Every component supports default, hover, active, disabled, loading, and error states.

Navigation

Editor

Terminal

Output

Tests

Tab Bar

4 variants: Default, Pill, Underline, Enclosed

default · hover · active · disabled

Docs›Guides›Getting Started

Breadcrumbs

2 variants: Chevron, Slash

default · hover · truncated

◉ Dashboard

◯ Projects

◯ Settings

Sidebar Navigation

3 variants: Compact, Standard, Collapsible

default · active · collapsed

₇₄W

DocsAPI

Header / Nav Bar

3 variants: Default, Transparent, Compact

default · sticky · mobile-menu

Input Controls

Buttons

6 variants: Primary, Secondary, Ghost, Danger, Icon, Link

default · hover · active · disabled · loading

Text Fields

4 variants: Default, With label, With help, Textarea

default · focus · error · disabled

Dropdown / Select

3 variants: Default, Searchable, Multi

closed · open · selected · disabled

Toggle Switch

2 variants: Default, With label

on · off · disabled

✓

—

Checkbox

Checked, Unchecked, Indeterminate

default · hover · checked · disabled

Radio Button

1 variant with group support

selected · unselected · disabled

Slider / Range

2 variants: Single, Range

default · hover · dragging · disabled

Feedback

✓ Compiled successfully in 0.42s

⚠ Deprecated: use Point#dist/1

✗ SyntaxError on line 12

ℹ Bit v2.3.0 available

Alert / Banner

4 semantic variants

default · dismissible · with-action

Build complete

3 tests failed

Toast

4 semantic variants

entering · visible · exiting

Modal / Dialog

3 variants: Confirm, Form, Alert

opening · open · closing

Building… 65%

Progress Indicators

3 variants: Bar, Spinner, Dots

determinate · indeterminate · complete

Skeleton Screen

2 variants: Text, Card

loading · loaded (transition)

Data Display

math_utils.w

Standard math operations, matrix support, unit conversion.

v2.1passing

Card

4 variants: Default, Interactive, Media, Stat

default · hover · selected · loading

Module	Version	Status
core	1.0.0	stable
math	2.3.1	beta

Table

3 variants: Default, Compact, Striped

default · sortable · selectable

742

Packages

99.2%

Build Pass

14ms

Avg Parse

Stat Display

3 variants: Default, Trend, Sparkline

default · loading · empty

point.wcompiled

vector.werror

matrix.wpending

List

3 variants: Simple, Meta, Interactive

default · selected · empty

Media & Identity

Avatar

3 sizes + group variant

default · image · placeholder

16:9 Container

Image Container

3 ratios: 16:9, 4:3, 1:1

loading · loaded · error

tungstenpassingfailingv2.0

Badge / Tag

4 colors + outlined

default · removable · interactive

▶

Tutorial 013:42

Video Player

2 variants: Inline, Fullscreen

idle · playing · paused · ended

Accessibility (All Components)

Requirement	Implementation
Focus indicators	`box-shadow: 0 0 0 3px rgba(232,160,32,0.4)` on `:focus-visible`
Keyboard nav	Full Tab support. Arrows within composites. Esc closes overlays.
ARIA	Icon buttons: `aria-label`. Toggles: `role="switch"`. Modals: `role="dialog" aria-modal="true"`.
Motion	Respect `prefers-reduced-motion: reduce`.
Color independence	Icons + text labels always accompany semantic colors.

Patterns

Page Patterns & Flows

Reusable page templates and interaction patterns for Tungsten interfaces.

Page Templates

Landing Page

Hero with code example, feature grid (3-col), comparison table, CTA section. Maximum visual impact.

herofeaturesCTA

Dashboard

Sidebar nav + content. Top stat row (4 cards), activity feed, quick actions panel.

sidebarstatsfeed

Documentation

Three-column: sidebar TOC, main content, right mini-nav. Search via ⌘K command palette.

docscodeTOC

Settings

Vertical tabs left, forms right. Group under Title 2 headers. Save via toast confirmation.

formstabs

Package Profile

Header with icon + metadata, tabbed content below (README, versions, deps, stats).

headertabs

User Flows

Onboarding

3-step progressive: Install → Create file → Run. Each shows terminal command + expected output.

3 stepsskippable

Authentication

Email-first flow. Single input per step. Magic link preferred, password fallback.

magic-linkprogressive

Search

Command palette (⌘K). Instant type-ahead. Results grouped: Packages, Docs, API.

⌘Kinstant

Empty States

Illustration/icon + heading + action button. Use Tungsten code snippets as examples.

illustrationaction

Feedback Patterns

Pattern	Component	Behavior
Success	Toast (top-right)	Auto-dismiss 4s. Green dot. Optional undo.
Error	Inline Alert + Toast	Inline persists until fixed. Toast for system errors (8s).
Loading	Skeleton → Content	Skeleton immediately. 200ms fade transition. Progress bar if >3s.
Empty	Empty State Card	Centered illustration, heading, description, primary action.

Developer Handoff

Design Tokens

Complete token structure in JSON for CSS custom properties, Tailwind, or native platforms.

{
  "color": {
    "brand": {
      "tungsten":  { "value": "#E8A020" },
      "filament":  { "value": "#F5C563" },
      "carbon":    { "value": "#1A1A1E" },
      "graphite":  { "value": "#2A2A30" },
      "slate":     { "value": "#44444D" },
      "smoke":     { "value": "#8A8A96" },
      "ash":       { "value": "#C4C4CC" },
      "paper":     { "value": "#F2F1EE" },
      "cobalt":    { "value": "#4A7BF7" }
    },
    "semantic": {
      "success":    { "value": "#34B86A", "bg": "#1A2E22" },
      "warning":    { "value": "#E8A020", "bg": "#2E2518" },
      "error":      { "value": "#E54D5E", "bg": "#2E1A1E" },
      "info":       { "value": "#4A7BF7", "bg": "#1A2030" }
    }
  },
  "typography": {
    "family": {
      "display": "'Fraunces', serif",
      "body":    "'DM Sans', sans-serif",
      "mono":    "'JetBrains Mono', monospace"
    },
    "scale": {
      "display":     { "size": 48, "line": 52, "tracking": -0.03, "weight": 800 },
      "headline":    { "size": 32, "line": 38, "tracking": -0.02, "weight": 700 },
      "title1":      { "size": 24, "line": 30, "tracking": -0.01, "weight": 700 },
      "title2":      { "size": 20, "line": 26, "tracking": 0,     "weight": 700 },
      "body":        { "size": 16, "line": 26, "tracking": 0,     "weight": 400 },
      "callout":     { "size": 14, "line": 22, "tracking": 0,     "weight": 500 },
      "footnote":    { "size": 12, "line": 18, "tracking": 0,     "weight": 400 },
      "caption":     { "size": 11, "line": 16, "tracking": 0.02,  "weight": 400 }
    }
  },
  "spacing": { "1":"4px", "2":"8px", "3":"12px", "4":"16px", "5":"24px",
              "6":"32px", "7":"48px", "8":"64px", "9":"96px", "10":"128px" },
  "radius":  { "sm":"6px", "md":"10px", "lg":"16px", "xl":"24px", "full":"9999px" },
  "shadow":  { "sm":"0 1px 2px rgba(0,0,0,0.3)", "md":"0 4px 12px rgba(0,0,0,0.25)",
              "lg":"0 8px 32px rgba(0,0,0,0.3)", "glow":"0 0 24px rgba(232,160,32,0.15)" },
  "transition": { "ease":"cubic-bezier(0.22,1,0.36,1)",
                 "fast":"120ms", "normal":"200ms", "slow":"400ms" }
}

Documentation

Do's & Don'ts

Guidelines to keep implementations consistent across the Tungsten ecosystem.

✓ Do

Use Tungsten amber only for the single most important action per view.

✗ Don't

Use multiple amber buttons in the same area — it dilutes CTA hierarchy.

✓ Do

Use JetBrains Mono for all code, data values, and technical specifications.

✗ Don't

Mix monospace fonts. Never use system mono alongside JetBrains Mono.

✓ Do

Pair semantic colors with their background tints (green text on #1A2E22).

✗ Don't

Place semantic colors on arbitrary backgrounds — fails aesthetically and for a11y.

✓ Do

Use skeleton screens for content loading >200ms. Show expected layout shape.

✗ Don't

Use generic spinners for page-level loading — they convey no layout info.

✓ Do

Stick to the 8px spacing scale (4, 8, 12, 16, 24, 32, 48, 64, 96, 128).

✗ Don't

Use arbitrary values like 10px, 18px, 22px — breaks spatial rhythm.

✓ Do

Provide visible focus indicators on all interactive elements.

✗ Don't

Remove focus styles for aesthetics. Keyboard users depend on them.

✓ Do

Use Fraunces for display/headline type (≥20px). Switch to DM Sans below.

✗ Don't

Use Fraunces for body text or small labels — illegible below 20px.

✓ Do

Show inline error messages below fields with error-red left border.

✗ Don't

Use modal dialogs for form validation — interrupts flow, hostile on mobile.

✓ Do

Test all color combos against WCAG 2.1 AA. Use contrast badges as reference.

✗ Don't

Rely on color alone for state. Always pair with icon, label, or pattern.

✓ Do

Design dark mode first. Light mode is derived — tune colors individually.

✗ Don't

Simply invert dark theme for light mode. Contrast needs differ.

Developer Guide

Implementation

How to integrate the Tungsten Design System into your project.

Quick Start

# Install via Bit (Tungsten's package manager)
bit add tungsten-ds

# Or via npm for web projects
npm install @tungsten-lang/design-system

# Import tokens in CSS
@import '@tungsten-lang/design-system/tokens.css';

# Import tokens in JS/TS
import tokens from '@tungsten-lang/design-system/tokens.json';

CSS Custom Properties

/* Direct usage */
.my-button {
  background: var(--w-tungsten);
  color: var(--w-carbon);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  transition: background var(--duration-fast) var(--ease-out);
}

.my-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(232, 160, 32, 0.4);
}

Tailwind Config

module.exports = {
  theme: {
    extend: {
      colors: {
        tungsten: '#E8A020', filament: '#F5C563',
        carbon:   '#1A1A1E', graphite: '#2A2A30',
        cobalt:   '#4A7BF7', emerald:  '#34B86A',
        ruby:     '#E54D5E',
      },
      fontFamily: {
        display: ['Fraunces', 'serif'],
        body:    ['DM Sans', 'sans-serif'],
        mono:    ['JetBrains Mono', 'monospace'],
      },
    },
  },
}

Component Specs

Component	Padding	Radius	Font	Shadow
Button	`8px 16px`	`6px`	DM Sans 600 / 0.82rem	none
Button (lg)	`12px 24px`	`6px`	DM Sans 600 / 0.95rem	none
Input	`8px 12px`	`6px`	DM Sans 400 / 0.85rem	focus: glow
Card	`16px`	`10px`	Mixed	hover: shadow-md
Alert	`12px 16px`	`6px`	DM Sans 500 / 0.8rem	none
Toast	`12px 16px`	`10px`	DM Sans 400 / 0.8rem	shadow-lg
Modal	`24px`	`16px`	Mixed	shadow-lg
Badge	`2px 8px`	`full`	JetBrains Mono 700 / 0.62rem	none

Accessibility Checklist

Check	Requirement
Contrast	WCAG 2.1 AA (4.5:1 normal, 3:1 large). Use pre-validated tokens.
Focus	Modals trap focus. Dropdowns return on close. Logical tab order.
Screen readers	All images: alt text. Icon buttons: `aria-label`. Toasts: live regions.
Keyboard	All interactive via Tab. Esc closes overlays. Enter/Space activates.
Motion	Wrap in `@media (prefers-reduced-motion: no-preference)`.
Touch	Minimum 44×44px targets on mobile.

Design Principles

Pseudocode That Ships

Warm Precision

Density by Choice

Color System

Primary Palette

Semantic Colors

Color Usage Rules

Typography

Font Families

Type Scale

Responsive Type

Layout & Grid

12-Column Grid

Breakpoint Tokens

Safe Areas

Spacing System

Scale

Component Library

Navigation

Tab Bar

Breadcrumbs

Sidebar Navigation

Header / Nav Bar

Input Controls

Buttons

Text Fields

Dropdown / Select

Toggle Switch

Checkbox

Radio Button

Slider / Range

Feedback

Alert / Banner

Toast

Delete Module?

Modal / Dialog

Progress Indicators

Skeleton Screen

Data Display

Card

Table

Stat Display

List

Media & Identity

Avatar

Image Container

Badge / Tag

Video Player

Accessibility (All Components)

Page Patterns & Flows

Page Templates

Landing Page

Dashboard

Documentation

Settings

Package Profile

User Flows

Onboarding

Authentication

Search

Empty States

Feedback Patterns

Design Tokens

Do's & Don'ts

Implementation

Quick Start

CSS Custom Properties

Tailwind Config

Component Specs

Accessibility Checklist