25 · Shared values

Family tokens

Tokens are the named values that Nitente and its products share: spacing, radii, borders, shadows, opacities and timings. Each product adds its own color on top, without changing this base.

Radii

r-2
Symbol stripe

r-4
Tags

r-8
Small fields

r-10
Buttons and fields

r-14
Cards

r-20
Large panels

r-full
Pill

An inner container has a radius 4 px smaller than the outer one (outer 14, inner 10).

Borders, shadows and layers

Thin border

1 px · line at 10 to 18%. It separates without weighing. It is the main elevation device.

Focus border

2 px with a 3 px offset. Always visible.

Shadow

Only in the light theme and on floating objects (menu, modal). In dark, it is replaced by a border and a surface one step lighter.

Level	Use	Light	Dark
0 · Base	Page	No shadow	No shadow
1 · Card	Cards, fields	Thin border	Thin border
2 · Floating	Menus, tooltips	Border + shadow 0 8 24 -12 / 25%	Strong border + 7% surface
3 · Modal	Dialogs	Border + shadow 0 24 60 -20 / 45%	Strong border + 60% scrim behind

Opacities

12%

16%

40%

64%

88%

Value	Use
4 to 8%	Subtle surfaces, patterns
10 to 16%	Thin and strong lines
40%	Disabled elements
64%	Supporting text on images
88%	Primary button hover

Layers (z-index)

Name	Value	What goes here
base	0	Content
sticky	10	Fixed headers and bars
menu	30	Menus and dropdowns
modal	50	Dialogs and their scrim
aviso	70	Temporary notices (toast)

Token code

:root{
  /* Spacing (base 4) */
  --nt-s-1:4px; --nt-s-2:8px; --nt-s-3:12px; --nt-s-4:16px; --nt-s-6:24px; --nt-s-8:32px; --nt-s-12:48px; --nt-s-16:64px; --nt-s-24:96px;
  /* Radii */
  --nt-r-4:4px; --nt-r-8:8px; --nt-r-10:10px; --nt-r-14:14px; --nt-r-20:20px; --nt-r-full:999px;
  /* Borders and focus */
  --nt-border:1px solid var(--nt-line); --nt-focus:2px solid var(--nt-fg);
  /* Timings */
  --nt-t-fast:120ms; --nt-t-base:200ms; --nt-t-slow:320ms; --nt-t-emph:480ms;
  --nt-ease:cubic-bezier(.2,0,0,1); --nt-ease-light:cubic-bezier(.16,1,.3,1);
  /* Layers */
  --nt-z-sticky:10; --nt-z-menu:30; --nt-z-modal:50; --nt-z-toast:70;
}

{
  "space": {
    "1": "4px",
    "2": "8px",
    "3": "12px",
    "4": "16px",
    "6": "24px",
    "8": "32px",
    "12": "48px",
    "16": "64px",
    "24": "96px"
  },
  "radius": {
    "4": "4px",
    "8": "8px",
    "10": "10px",
    "14": "14px",
    "20": "20px",
    "full": "999px"
  },
  "motion": {
    "fast": "120ms",
    "base": "200ms",
    "slow": "320ms",
    "emphasis": "480ms"
  },
  "ease": {
    "standard": "cubic-bezier(.2,0,0,1)",
    "light": "cubic-bezier(.16,1,.3,1)"
  }
}

@theme {
  --spacing: 4px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --ease-nt: cubic-bezier(.2,0,0,1);
  --ease-nt-light: cubic-bezier(.16,1,.3,1);
}

Neutral colors are in Neutral scale and surfaces; each product's colors are in its own manual.