Design System
Download Design Tokens
Export Scicom design tokens for use in Figma or your development environment.
- All color palettes (Primary, Secondary, Gray, Status)
- Typography tokens (fonts, sizes, weights)
- Spacing and border radius scales
- Scicom brand theme
Import into Figma using Tokens Studio plugin
- Pure CSS custom properties
- No build tools required
- Light and dark mode semantics
- Scicom brand theme
Import with: @import 'scicom-design-tokens.css';
Semantic Color Reference
Design tokens that map to different values in light and dark mode. Use these semantic classes instead of hardcoded colors to ensure proper theme support.
Primary Theme Colors
Background
bg-backgroundForeground
text-foregroundPrimary
bg-primaryPrimary Foreground
text-primary-foregroundSecondary & Accent Colors
Secondary
bg-secondarySecondary Foreground
text-secondary-foregroundAccent
bg-accentAccent Foreground
text-accent-foregroundUI Component Colors
Card
bg-cardCard Foreground
text-card-foregroundPopover
bg-popoverPopover Foreground
text-popover-foregroundMuted
bg-mutedMuted Foreground
text-muted-foregroundUtility & Form Colors
Border
border-borderInput
border-inputRing
ring-ringStatus & Feedback Colors
Destructive
bg-destructiveDestructive Foreground
text-destructive-foregroundChart & Visualization Colors
Chart 1
text-chart-1Chart 2
text-chart-2Chart 3
text-chart-3Chart 4
text-chart-4Chart 5
text-chart-5Sidebar & Navigation Colors
Sidebar
bg-sidebarSidebar Foreground
text-sidebar-foregroundSidebar Primary
bg-sidebar-primarySidebar Primary FG
text-sidebar-primary-foregroundSidebar Accent
bg-sidebar-accentSidebar Accent FG
text-sidebar-accent-foregroundSidebar Border
border-sidebar-borderSidebar Ring
ring-sidebar-ringColor Palettes
Colors extracted from your Figma design system. Each palette includes shades from 50 (lightest) to 950 (darkest).
Primary
Secondary
Used as accent colour in light mode. Becomes the primary colour in dark mode.
Red
Orange
Amber
Yellow
Lime
Green
Emerald
Teal
Cyan
Sky
Blue
Indigo
Violet
Purple
Fuchsia
Pink
Rose
Slate
Gray
Zinc
Neutral
Stone
Taupe
Mauve
Mist
Olive
Preline-Khaki
Preline-Mauve
Preline-Avocado
Preline-Avocado-Soft
Typography Scale
Heading
Satoshi font family is used for home page section titles, page headers, and important text elements to create a clear visual hierarchy and improve user navigation. Not applicable for rich-text.
Satoshi
ABCDEFGHIJKLMNOPQRSTUVWXYZ
The quick brown fox jumps over the lazy dog.
1234567890~!@#$%^&*()-+
Font size and weight
Each sizes includes font weight in Regular (400), Medium (500), and Semibold (600).
| Name | HTML Tag | Font Size | Line Height |
|---|---|---|---|
| Heading Extra Large | — | 60px (3.75rem) | 72px (4.5rem) |
| Heading Large | — | 48px (3rem) | 60px (3.75rem) |
| Heading Medium | <h1> | 36px (2.25rem) | 44px (2.75rem) |
| Heading Small | <h2> | 30px (1.875rem) | 38px (2.375rem) |
| Heading Extra Small | <h3> | 24px (1.5rem) | 32px (2rem) |
| Heading 2X Small | <h4> | 20px (1.25rem) | 28px (1.75rem) |
| Heading 3X Small | <h5> | 16px (1rem) | 24px (1.5rem) |
| Heading 4X Small | <h6> | 14px (0.875rem) | 20px (1.25rem) |
Body
Inter font family is used for body text, paragraphs, labels, captions, and all general-purpose content. Optimised for screen readability at small sizes. Used for rich-text content.
Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZ
The quick brown fox jumps over the lazy dog.
1234567890~!@#$%^&*()-+
Font size and weight
Each sizes includes font weight in Regular (400), Medium (500), and Semibold (600).
| Name | HTML Tag | Font Size | Line Height |
|---|---|---|---|
| Body Extra Large | <p> | 20px (1.25rem) | 30px (1.875rem) |
| Body Large | <p> | 18px (1.125rem) | 28px (1.75rem) |
| Body Medium | <p> | 16px (1rem) | 24px (1.5rem) |
| Body Small | <p> | 14px (0.875rem) | 20px (1.25rem) |
| Body Extra Small | <p> | 12px (0.75rem) | 18px (1.125rem) |
| Caption | <span> | 12px (0.75rem) | 16px (1rem) |
| Overline | <span> | 11px (0.6875rem) | 16px (1rem) |
Icons
The design system uses Lucide React for iconography. Icons are available in multiple sizes and inherit the current text colour.
Size Reference
Border Radius
Consistent border radius tokens used across all components. Based on a base radius of 0.5rem (8px).
Shadows
Elevation levels using box shadows to create visual hierarchy and depth.
Spacing
A consistent spacing scale based on a 4px grid. Used for padding, margin, and gap values throughout the design system.