Technasm Tokens

Tokens define values, not behavior. The set is intentionally small.

Colors

--color-page
#ffffff
Background color for the page surface.
--color-surface
#ffffff
Background color for card and component surfaces.
--color-border
#e5e7eb
Border color for surfaces and dividers.
--color-text-primary
#111827
Primary text color for headings and body content.
--color-text-secondary
#4b5563
Secondary text color for body content.
--color-text-muted
#6b7280
Muted text color for metadata and secondary information.
--color-action-bg
#111827
Background color for primary actions.
--color-action-text
#ffffff
Text color for primary actions.

Spacing

--space-xs
4px
Extra small spacing for tight groupings.
--space-sm
8px
Small spacing for related elements.
--space-md
16px
Medium spacing for standard element separation.
--space-lg
24px
Large spacing for section separation.
--space-xl
32px
Extra large spacing for major section breaks.

Typography

--font-sans
system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
System font stack for all text.
--text-title
18px
Font size for headings and titles.
--text-body
14px
Font size for body text and content.
--text-meta
12px
Font size for metadata and secondary information.
--font-regular
400
Regular font weight for body text.
--font-medium
500
Medium font weight for emphasis.
--font-semibold
600
Semibold font weight for headings.
--line-tight
1.3
Tight line height for headings.
--line-normal
1.5
Normal line height for body text.

Radius

--radius-sm
4px
Small border radius for buttons and small elements.
--radius-md
6px
Medium border radius for cards and surfaces.

Borders

--border-width
1px
Standard border width for all borders.
If a value is not a token, it should not exist.