Skip to content

DESIGN.md

Latest commit

 

History

History
391 lines (356 loc) · 15.8 KB

DESIGN.md

File metadata and controls

391 lines (356 loc) · 15.8 KB
version alpha
name Sistent
description Open-source dashboard and component-system visual identity with a neutral application shell, teal brand actions, saffron CTAs, and a first-class dark mode.
colors
primary on-primary primary-hover primary-pressed secondary on-secondary accent on-accent accent-hover navigation-light on-navigation-light navigation-dark on-navigation-dark surface-light-app surface-light-card surface-light-muted surface-light-tabs on-surface-light surface-dark-app surface-dark-card surface-dark-muted surface-dark-tabs on-surface-dark on-ribbon ribbon-community ribbon-official ribbon-verified
#00B39F
#FDFDFD
#41CCB3
#93E6D1
#3C494F
#FDFDFD
#EBC017
#000D12
#FFEB6B
#252E31
#FDFDFD
#000D12
#FDFDFD
#FDFDFD
#FFFFFF
#F6F8F8
#F6F8F8
#000D12
#000D12
#121212
#15272F
#1A1A1A
#FDFDFD
#FDFDFD
#7A848E
#EBC017
#00B39F
typography
textH1Bold textH2Medium textH3Medium textB1Regular textB2SemiBold textB3Regular textL1Bold textL2Regular textC1Regular textC2Regular
fontFamily fontSize fontWeight lineHeight letterSpacing
Qanelas Soft Regular, Roboto, Helvetica, Arial, sans-serif
3.25rem
700
4rem
-0.02em
fontFamily fontSize fontWeight lineHeight
Qanelas Soft Regular, Roboto, Helvetica, Arial, sans-serif
2rem
500
2.5rem
fontFamily fontSize fontWeight lineHeight
Qanelas Soft Regular, Roboto, Helvetica, Arial, sans-serif
1.5rem
500
2.25rem
fontFamily fontSize fontWeight lineHeight
Qanelas Soft Regular, Open Sans, sans-serif
1rem
400
1.75rem
fontFamily fontSize fontWeight lineHeight
Qanelas Soft Regular, Open Sans, sans-serif
1rem
600
1.75rem
fontFamily fontSize fontWeight lineHeight
Open Sans, sans-serif
0.875rem
400
1.5rem
fontFamily fontSize fontWeight lineHeight letterSpacing
Qanelas Soft Regular, Open Sans, sans-serif
0.75rem
700
1rem
0.02em
fontFamily fontSize fontWeight lineHeight
Open Sans, sans-serif
0.75rem
400
1.5rem
fontFamily fontSize fontWeight lineHeight
Consolas, monospace
0.75rem
400
1.5rem
fontFamily fontSize fontWeight lineHeight
Consolas, monospace
1rem
400
1.75rem
rounded
xs sm md lg xl xxl full
2px
4px
5px
8px
15px
16px
9999px
spacing
base xxs xs sm md lg xl xxl xxxl
8px
2px
4px
8px
12px
16px
20px
24px
32px
strokes
light-default light-strong light-normal dark-default dark-strong dark-normal
#EAEDEE
#28353A
#8C999E
#15272F
#8D9FA7
#3D4F57
status-colors
info success warning error
#2196F3
#206D24
#F0A303
#F91313
icons
light-primary dark-primary
#15272F
#D2D8DA
motion
duration-fast duration-short duration-medium duration-long duration-xlong easing-standard easing-emphasized
150ms
200ms
600ms
800ms
900ms
ease-out
cubic-bezier(0.2, 0.8, 0.2, 1)
shadows
card-accent hover-sm floating-panel-light floating-panel-dark tooltip-light tooltip-dark
2px 2px 3px 0px #00B39F
0 3px 10px 0px rgba(0, 0, 0, 0.08)
0 4px 16px rgba(234, 237, 238, 0.5)
0 4px 16px rgba(0, 13, 18, 0.5)
0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08)
0 10px 30px rgba(0, 179, 159, 0.28), 0 2px 8px rgba(0, 179, 159, 0.20), 0 0 1px rgba(0, 179, 159, 0.32)
elevation
flat raised-sm raised-accent floating-panel-light floating-panel-dark tooltip-light tooltip-dark
none
0 3px 10px 0px rgba(0, 0, 0, 0.08)
2px 2px 3px 0px #00B39F
0 4px 16px rgba(234, 237, 238, 0.5)
0 4px 16px rgba(0, 13, 18, 0.5)
0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08)
0 10px 30px rgba(0, 179, 159, 0.28), 0 2px 8px rgba(0, 179, 159, 0.20), 0 0 1px rgba(0, 179, 159, 0.32)
gradients
tint-light tint-dark panel-header-light panel-header-dark
linear-gradient(90deg, #477E96 0%, #455A64 100%)
linear-gradient(90deg, #28353A 0%, #3D4F57 100%)
linear-gradient(90deg, #3B687B 0%, #507D90 100%)
linear-gradient(90deg, #28353A 0%, #3D4F57 100%)
effects
card-wash panel-blur-light panel-blur-dark
radial-gradient(circle 3000px at 50% 50%, rgba(30, 33, 23, 0) 0%, rgba(30, 33, 23, 0.05) 10%, rgba(30, 33, 23, 0.1) 100%)
rgba(234, 237, 238, 0.5)
rgba(0, 13, 18, 0.5)
components
app-shell-light app-shell-dark navigation-bar-light navigation-bar-dark button-primary button-primary-hover button-primary-pressed button-secondary button-cta button-cta-hover card-standard-light card-standard-dark tab-selected-light tab-selected-dark input-field-light input-field-dark checkbox modal-header-light modal-header-dark panel-floating-light panel-floating-dark table-header-light table-header-dark badge-community badge-official badge-verified
backgroundColor textColor typography padding
{colors.surface-light-app}
{colors.on-surface-light}
{typography.textB1Regular}
{spacing.xxl}
backgroundColor textColor typography padding
{colors.surface-dark-app}
{colors.on-surface-dark}
{typography.textB1Regular}
{spacing.xxl}
backgroundColor textColor typography padding
{colors.navigation-light}
{colors.on-navigation-light}
{typography.textB2SemiBold}
{spacing.lg}
backgroundColor textColor typography padding
{colors.navigation-dark}
{colors.on-navigation-dark}
{typography.textB2SemiBold}
{spacing.lg}
backgroundColor textColor typography rounded padding
{colors.primary}
{colors.on-primary}
{typography.textB2SemiBold}
{rounded.sm}
6px 16px
backgroundColor textColor typography rounded padding
{colors.primary-hover}
{colors.on-primary}
{typography.textB2SemiBold}
{rounded.sm}
6px 16px
backgroundColor textColor typography rounded padding
{colors.primary-pressed}
{colors.on-surface-light}
{typography.textB2SemiBold}
{rounded.sm}
6px 16px
backgroundColor textColor typography rounded padding
{colors.secondary}
{colors.on-secondary}
{typography.textB2SemiBold}
{rounded.sm}
6px 16px
backgroundColor textColor typography rounded padding
{colors.accent}
{colors.on-accent}
{typography.textB2SemiBold}
{rounded.sm}
6px 16px
backgroundColor textColor typography rounded padding
{colors.accent-hover}
{colors.on-accent}
{typography.textB2SemiBold}
{rounded.sm}
6px 16px
backgroundColor textColor rounded padding
{colors.surface-light-card}
{colors.on-surface-light}
{rounded.sm}
{spacing.lg}
backgroundColor textColor rounded padding
{colors.surface-dark-card}
{colors.on-surface-dark}
{rounded.sm}
{spacing.lg}
backgroundColor textColor typography rounded padding
{colors.surface-light-tabs}
{colors.on-surface-light}
{typography.textB2SemiBold}
{rounded.sm}
12px 16px
backgroundColor textColor typography rounded padding
{colors.surface-dark-tabs}
{colors.on-surface-dark}
{typography.textB2SemiBold}
{rounded.sm}
12px 16px
backgroundColor textColor typography rounded padding
transparent
{colors.on-surface-light}
{typography.textB1Regular}
{rounded.sm}
16px 14px
backgroundColor textColor typography rounded padding
transparent
{colors.on-surface-dark}
{typography.textB1Regular}
{rounded.sm}
16px 14px
backgroundColor textColor rounded size
transparent
{colors.on-surface-light}
{rounded.xs}
20px
backgroundColor textColor typography rounded height padding
linear-gradient(90deg, #477E96 0%, #455A64 100%)
{colors.on-primary}
{typography.textB1Regular}
{rounded.md}
52px
11px 16px
backgroundColor textColor typography rounded height padding
linear-gradient(90deg, #28353A 0%, #3D4F57 100%)
{colors.on-surface-dark}
{typography.textB1Regular}
{rounded.md}
52px
11px 16px
backgroundColor textColor rounded padding
rgba(234, 237, 238, 0.5)
{colors.on-surface-light}
{rounded.lg}
{spacing.xl}
backgroundColor textColor rounded padding
rgba(0, 13, 18, 0.5)
{colors.on-surface-dark}
{rounded.lg}
{spacing.xl}
backgroundColor textColor typography padding
{colors.surface-light-muted}
{colors.on-surface-light}
{typography.textB2SemiBold}
{spacing.lg}
backgroundColor textColor typography padding
{colors.surface-dark-muted}
{colors.on-surface-dark}
{typography.textB2SemiBold}
{spacing.lg}
backgroundColor textColor typography rounded padding
{colors.ribbon-community}
{colors.on-ribbon}
{typography.textL1Bold}
{rounded.full}
4px 8px
backgroundColor textColor typography rounded padding
{colors.ribbon-official}
{colors.on-accent}
{typography.textL1Bold}
{rounded.full}
4px 8px
backgroundColor textColor typography rounded padding
{colors.ribbon-verified}
{colors.on-ribbon}
{typography.textL1Bold}
{rounded.full}
4px 8px

Overview

Sistent presents itself as a practical open-source product system for dashboards, admin surfaces, and data-heavy workflows. The visual identity is calm and technical rather than decorative: a cool neutral shell carries the interface, a vivid teal handles primary interaction, saffron is reserved for CTA or status emphasis, and dark mode is treated as a real peer instead of an afterthought.

The design language blends Material UI's structural discipline with a few unmistakable Layer5 signatures: blue-gray gradient chrome, a faint radial wash on cards, accent-tinted hover depth on showcase surfaces, and a teal luminescent tooltip shadow in dark mode. The result feels reliable, community-built, and slightly optimistic without becoming playful or glossy.

Colors

The palette is anchored by restrained neutrals. In light mode, the application canvas is near-white with gentle charcoal steps for borders, tabs, and secondary surfaces. In dark mode, those same layers invert into deep charcoal and blue-black slabs with softened gray dividers instead of pure black-on-black contrast.

  • Brand teal is the primary interactive color. Use it for contained buttons, active states, verification cues, and brand-positive emphasis.
  • Saffron is a secondary accent. Use it more sparingly for CTAs, official badges, and graphic emphasis so it remains noticeable.
  • Navigation chrome is darker and cooler than content surfaces. Even in light mode, nav bars and drawers sit in blue-gray territory rather than white.
  • Status colors are intentionally distinct from the brand color so alerts, warnings, and errors remain legible inside data-heavy interfaces.

Typography

Sistent's hierarchy is built around Qanelas Soft Regular for most UI copy and headings, with Open Sans appearing in supporting body and label roles, and Consolas reserved for code-styled content. The overall tone is soft enough to feel approachable, but still structured enough for operational interfaces.

  • Headings are large and clean, with medium-to-bold weights and compact tracking.
  • Body copy uses a generous 1.75rem line height, which keeps settings screens, tables, and instructional content readable.
  • Buttons and active labels lean semi-bold and capitalize words rather than shouting in full uppercase.
  • Code treatments are small, utilitarian, and intentionally plain.

On smaller screens, the largest heading sizes step down rather than reflowing into dramatic mobile-specific styles. The system preserves hierarchy, but avoids oversized hero typography.

Layout & Spacing

Spacing follows a clear 8px grid. The most common working values are 16px, 20px, and 24px, with 12px used for more compact interactive padding and 32px reserved for larger layout separation.

The system generally prefers compact, information-dense arrangement over expansive marketing whitespace. That said, it avoids feeling cramped by keeping horizontal padding predictable and by separating structural chrome from content with tonal layers instead of large gutters.

  • Buttons and tabs commonly use 16px horizontal padding.
  • Modal headers and action bars land on 11px 16px and 20px 16px style rhythms.
  • Panels and cards stay tidy; they read as tools, not canvas art.

Elevation & Depth

Depth in Sistent is subtle. Most surfaces separate through tone, border, and surface step, not through large shadows. This keeps tables, cards, and forms feeling crisp and controlled.

  • Standard cards use a very faint radial wash rather than dramatic dropshadow.
  • Interactive showcase cards lift slightly on hover and gain a soft shadow or teal-tinted accent shadow.
  • Floating panels rely on semi-opaque blurred surfaces plus a modest 0 4px 16px shadow.
  • Tooltips are the most expressive surface in the system: neutral shadow in light mode, teal glow in dark mode.

When elevation appears, it should feel functional and technical, not plush.

Shapes

The shape language is mostly rectangular with measured softening. The default rhythm still feels MUI-like: many base components sit at a 4px radius, while a few custom shells push slightly further.

  • Default controls and cards: 4px
  • Modal wrappers and gradient headers: 5px
  • Floating panels and image wells: 8px
  • Feature and catalog cards: 15px to 16px
  • Micro-controls like checkboxes: 2px

Use larger radii as a signal that a surface is more editorial, showcase-oriented, or independently draggable. Do not round everything equally.

Components

Buttons

Contained buttons are solid teal with white text and semi-bold labels. Outlined buttons are intentionally spare: neutral strokes, transparent fill, and color that adapts cleanly across light and dark surfaces.

Tabs

Tabs use flat segmented surfaces rather than pills. The selected tab sits on a dedicated tab background and is reinforced by a brand-colored indicator, which keeps navigation clear without excessive ornament.

Inputs and Checks

Text inputs are understated. Their identity comes mostly from border treatment and focus color, not from filled backgrounds. Checkboxes are squared-off and compact, reinforcing the design system's utilitarian feel.

Cards, Tables, and Panels

Standard cards and data tables stay quiet, bright, and neutral in light mode, then shift to charcoal slabs in dark mode. Floating panels and modal chrome are where the system becomes more expressive: blurred backgrounds, cool blue-gray gradients, and stronger contrast between header, body, and action areas.

Catalog and Learning Surfaces

The more editorial custom components introduce a bit more motion and softness: slightly larger radii, hover lift, accent shadows, and corner ribbons for classification. These are still grounded in the same teal-gray palette, so they feel related to the core admin surfaces.

Do's and Don'ts

  • Do keep teal as the default primary interaction color.
  • Do reserve gradients for modal headers, panel chrome, and other structural framing surfaces.
  • Do prefer tonal layering, border contrast, and subtle depth before adding large shadows.
  • Do treat dark mode as a fully supported surface system, not a simple inversion.
  • Don't flood content areas with saturated fills.
  • Don't overuse large radii on utilitarian controls.
  • Don't replace neutral text with accent colors unless the content is genuinely interactive or status-bearing.
  • Don't make tables, forms, or list rows feel decorative; Sistent works best when dense interfaces stay disciplined.