Foundations
Spacing & shape
Inspect spacing, borders, radii, strokes, and decoration while keeping marketing and video token scopes clear.
On this page
Marketing CSS and video foundation scope
Existing marketing rule: use rounded-card for card-shaped components and rounded-hero for hero shells. Their CSS variables are shown below in rem units. The marketing conventions say not to introduce other radii within that system; they do not define a separate named spacing, border, or stroke scale.
The video-derived primitives use the exported JavaScript groups on this page and inline styles. Their small and pill radii belong to that family and do not replace the marketing rule. Import a group from @coreux/ui when composing a consumer-owned surface; use a component’s supported props to configure that component.
--ds-radius-card1rem--ds-radius-hero1.5remSpacing tokens
Each band below is drawn at its exact pixel width. Use these numeric values for padding and gaps in React styles. Consistent spacing helps separate a headline, supporting text, and its surrounding surface.
spacingTokens.8spacingTokens.12spacingTokens.16spacingTokens.24spacingTokens.32spacingTokens.48spacingTokens.72Border and radius tokens
Border tokens are thicknesses; radius tokens are corner radii, all in pixels. A large radius such as radiusTokens.pill makes a capsule only when the element’s dimensions allow it. These specimens are consumer-owned geometry, not new library components.
borderTokens.1borderTokens.2borderTokens.3radiusTokens.0radiusTokens.8radiusTokens.16radiusTokens.24radiusTokens.999Stroke and decoration tokens
Stroke tokens define line widths. Decoration tokens include two unitless opacity values, a crosshair size, and an underline width. The construction line and dot field below deliberately remain quiet; the text labels and copy controls stay at full opacity. For branded artwork use the actual HalftoneCircle, CrosshairMark, and HandDrawnUnderline primitives.
strokeTokens.1strokeTokens.2strokeTokens.4decorationTokens.0.16decorationTokens.0.1decorationTokens.24decorationTokens.3The foundationTokens aggregate
foundationTokens groups palette, spacing, borders, radii, strokes, typography, fields, tones, and decoration. Its keys differ from some individual export names: for example, foundationTokens.radii contains radiusTokens. Appearance fields and every shared tone are demonstrated in the color guide; the typography guide renders the type scale.
Inspect and copy the complete aggregate
foundationTokens{
"palette": {
"warmIvory": "#F4F1E9",
"inkNavy": "#0B1221",
"coreCobalt": "#2457F5",
"slate": "#596579",
"paleSteel": "#C7CDD6",
"cornflower": "#6F91E8",
"signalTeal": "#15877A",
"insightCoral": "#E66752",
"focusSaffron": "#D99A24",
"systemsViolet": "#7657A8",
"positiveGreen": "#2F8A5B"
},
"spacing": {
"xs": 8,
"sm": 12,
"md": 16,
"lg": 24,
"xl": 32,
"xxl": 48,
"display": 72
},
"borders": {
"hairline": 1,
"standard": 2,
"emphasis": 3
},
"radii": {
"none": 0,
"small": 8,
"medium": 16,
"large": 24,
"pill": 999
},
"strokes": {
"fine": 1,
"regular": 2,
"strong": 4
},
"typography": {
"display": {
"family": "The Seasons",
"size": 72,
"lineHeight": 0.94,
"weight": 400
},
"heading": {
"family": "Switzer",
"size": 42,
"lineHeight": 1.05,
"weight": 600
},
"subheading": {
"family": "Switzer",
"size": 24,
"lineHeight": 1.3,
"weight": 600
},
"body": {
"family": "Switzer",
"size": 18,
"lineHeight": 1.45,
"weight": 400
},
"label": {
"family": "Switzer",
"size": 13,
"lineHeight": 1.2,
"weight": 600,
"letterSpacing": 1.5
}
},
"fields": {
"light": {
"field": "#F4F1E9",
"foreground": "#0B1221",
"mutedForeground": "#596579",
"surface": "#F4F1E9",
"border": "#596579",
"grid": "#C7CDD6"
},
"dark": {
"field": "#0B1221",
"foreground": "#F4F1E9",
"mutedForeground": "#C7CDD6",
"surface": "#0B1221",
"border": "#C7CDD6",
"grid": "#596579"
}
},
"tones": {
"light": {
"neutral": {
"surface": "#F4F1E9",
"text": "#0B1221",
"border": "#596579",
"accent": "#0B1221"
},
"accent": {
"surface": "#2457F5",
"text": "#F4F1E9",
"border": "#2457F5",
"accent": "#F4F1E9"
},
"muted": {
"surface": "#C7CDD6",
"text": "#0B1221",
"border": "#596579",
"accent": "#596579"
},
"positive": {
"surface": "#F4F1E9",
"text": "#0B1221",
"border": "#2F8A5B",
"accent": "#2F8A5B"
},
"warning": {
"surface": "#F4F1E9",
"text": "#0B1221",
"border": "#D99A24",
"accent": "#D99A24"
},
"error": {
"surface": "#F4F1E9",
"text": "#0B1221",
"border": "#E66752",
"accent": "#E66752"
}
},
"dark": {
"neutral": {
"surface": "#0B1221",
"text": "#F4F1E9",
"border": "#C7CDD6",
"accent": "#F4F1E9"
},
"accent": {
"surface": "#2457F5",
"text": "#F4F1E9",
"border": "#6F91E8",
"accent": "#F4F1E9"
},
"muted": {
"surface": "#596579",
"text": "#F4F1E9",
"border": "#C7CDD6",
"accent": "#C7CDD6"
},
"positive": {
"surface": "#0B1221",
"text": "#F4F1E9",
"border": "#2F8A5B",
"accent": "#2F8A5B"
},
"warning": {
"surface": "#0B1221",
"text": "#F4F1E9",
"border": "#D99A24",
"accent": "#D99A24"
},
"error": {
"surface": "#0B1221",
"text": "#F4F1E9",
"border": "#E66752",
"accent": "#E66752"
}
}
},
"decoration": {
"constructionLineOpacity": 0.16,
"halftoneOpacity": 0.1,
"crosshairSize": 24,
"underlineStroke": 3
}
}Apply spacing and shape tokens
Use the public foundation exports directly in React inline styles.
A consistent rhythm
This consumer-owned surface uses 24px padding, a 16px gap, a 2px border, and a 16px radius from the exported video foundation tokens.
Preview only: surrounding canvas and spacing. All metrics are illustrative.
'use client';
import { spacingTokens, borderTokens, radiusTokens, fieldModeTokens } from '@coreux/ui';
export default function SpacingComposition() {
const field = fieldModeTokens.light;
return (
<div style={{ display: 'grid', gap: spacingTokens.md, padding: spacingTokens.lg, border: `${borderTokens.standard}px solid ${field.border}`, borderRadius: radiusTokens.medium, background: field.field, color: field.foreground }}>
<p style={{ margin: 0, fontFamily: 'Switzer', fontSize: 24, fontWeight: 600, lineHeight: 1.3 }}>A consistent rhythm</p>
<p style={{ margin: 0, fontFamily: 'Switzer', fontSize: 18, lineHeight: 1.45, color: field.mutedForeground }}>This consumer-owned surface uses 24px padding, a 16px gap, a 2px border, and a 16px radius from the exported video foundation tokens.</p>
</div>
);
}
Values generated from @coreux/ui at 06f42fd: public foundation tokens, marketing stylesheet, bundled font definitions, and marketing conventions. Source links require repository access. Install the package and styles once.