Seeghra Reference

Colour

270 theme tokens from @carbon/themes 11.83.0. Values below are read live from the active theme. Carbon's AI and chat tokens are left out of Seeghra.

Layering model

Contextual tokens such as --sg-layer, --sg-field and --sg-border-subtle resolve to the right step when a container sets data-sg-layer.

background

data-sg-layer="1" · layer-01

field-01

data-sg-layer="2" · layer-02

field-02

data-sg-layer="3" · layer-03

field-03

Palette

The Carbon colour palette from @carbon/colors 11.60.0. Theme tokens map onto these steps. Hover variants such as --sg-blue-60-hover are in tokens.css too.

Type

Carbon's type scale with Geist in place of IBM Plex. Sizes, weights, line heights and letter spacing are unchanged. Display and fluid styles scale between breakpoints using Carbon's own fluid formula.

Geist SansAa Gg 0123--sg-font-family-sans · 300 400 600

Geist MonoAa Gg 0123--sg-font-family-mono · 400 600

Geist adjustments

Geist was measured against IBM Plex with fontTools and rendered in Chromium at every Carbon size. Its line box is the same height as Plex (1.300 em), so no line height moves. Mixed text runs about 2 percent wider, which does not change line counts in any fixed-height component. Only the items below change.

Token	Carbon	Seeghra	Reason
`font-family-sans`	IBM Plex Sans	Geist	The typeface swap.
`font-family-mono`	IBM Plex Mono	Geist Mono	The typeface swap.
`font-family-serif`, `fluid-quotation-01`, `fluid-quotation-02`	IBM Plex Serif	Geist	Geist has no serif. Quotation styles keep their sizes and weights.
`font-family-sans-condensed`, `font-family-sans-hebrew`	Plex Sans Condensed, Plex Sans Hebrew	Geist	Geist ships neither.
`font-variant-numeric-tabular` (added)	Not needed	tabular-nums	Plex figures are tabular by default. Geist figures are proportional (the 1 is 384 units, the 0 is 663), so data tables, numbers and code switch on tabular figures to keep columns aligned.
All size, weight, line height and letter spacing tokens	Carbon values	Unchanged	Measured and kept. Details in the next table.

Metric (per em)	IBM Plex Sans	Geist	Effect
Ascender plus descender	1.025 + 0.275 = 1.300	1.005 + 0.295 = 1.300	Same line box, so Carbon line heights hold.
Cap height	0.698	0.710	Caps sit centred in Geist's line box, slightly better than Plex in buttons and tags.
x-height	0.516	0.530	Lowercase reads about 3 percent larger. Below the point where sizes need to drop.
Rendered width, mixed text	Baseline	+2.1 to +3.2 percent	Kept Carbon tracking. Removing it would make 12 px labels 3.5 percent narrower than Plex.
Figure width	0.600, all equal	0.384 to 0.663	Handled by the tabular figures token.

Type scale

Geist Pixel

A Seeghra addition. Five pixel variants from Vercel's Geist family, used only where a file asks for one. No Carbon type token changes, and every Carbon style above stays in Geist Sans. The faces are embedded in tokens.css.

--sg-font-family-pixel-squareGeist Pixel Square, 400

Access review 2026

--sg-font-family-pixel-gridGeist Pixel Grid, 400

Access review 2026

--sg-font-family-pixel-circleGeist Pixel Circle, 400

Access review 2026

--sg-font-family-pixel-triangleGeist Pixel Triangle, 400

Access review 2026

--sg-font-family-pixel-lineGeist Pixel Line, 400

Access review 2026

Rule	Why
Use for large numbers, banner headlines, covers and section openers	Pixel is a display face. It carries personality at size and costs legibility below it.
Set it at heading-04 (28 px) or larger	Below that the pixel grid starts to break up the letterforms.
Weight 400 only, with `font-synthesis: none`	Pixel has one weight. The browser would fake bold or light from it.
Take size and line height from a Carbon type token	Pixel shares Geist's line box, so Carbon line heights fit it with no change.
Never for body text, labels, form fields or table cells	These must stay readable at 12 to 16 px.

In use: Grid for figures, Line for a banner headline

Accounts reviewed1,240

Access revoked86

Reviews overdue12

Spacing

Carbon's 13 step spacing scale, built on a 2 px mini unit and 8 px rhythm.

Layout sizes

Component heights. Buttons, inputs, dropdowns, toolbars and table rows all snap to these six sizes.

Grid

Carbon's 2x grid: 4 columns on small, 8 on medium, 16 from large up, with a 32 px gutter. Carbon centres the grid container at its maximum width; Seeghra pins it to the left edge.

Breakpoint	Min width	Columns	Margin

Wide gutter (default), live at this window width

Narrow gutter

Condensed gutter

Motion

Six durations and two easing styles. Productive motion is for small, frequent UI changes; expressive motion is for larger moments such as opening a modal.

Iconography

Carbon icons from @carbon/icons 11.90.0, shown at 16, 20, 24 and 32. Icons inherit the text colour of their container.

add

close

chevron--down

checkmark

search

filter

settings

download

edit

trash-can

overflow-menu--vertical

arrows--vertical

information--filled

checkmark--filled

warning--alt--filled

error--filled

Radius

Carbon v11 ships radius tokens and rounds a few components. Seeghra sets every radius to zero.

Token or component	Carbon	Seeghra
Tag	Pill, 1rem	0
Tag close button	Circle	0
Checkbox	2px	0
Toggle track and handle	Pill track, round handle	0, square track and handle

Button

Five kinds plus three danger kinds, five sizes. Labels sit at the start with the icon at the end, as in Carbon. Hover, active and focus are shown as fixed states below; the buttons are also live.

Sizes: sm 32, md 40, lg 48 (default), xl 64, 2xl 80

Icon only, all sizes. The icon sits in the middle of its square, the only geometric centring in Seeghra.

Text input

Label above, helper or validation text below. The field fills its container up to 20rem here.

Default

Display name

Shown to everyone in the group.

Hover

Display name

Focus

Display name

Invalid

Email

Enter an email address with a domain, such as jordan.lee@example.com.

Warning

Group size

Groups over 1,000 members sync more slowly.

Disabled

Group ID

Created by the system.

Read only

Group ID

Sizes: sm 32, md 40, lg 48

Dropdown

Same field shell as the text input. The open menu sits on the layer above, with dividers between options and a check on the selected one.

Closed

Region

Open, second option selected, third highlighted

Region

Hover

Region

Focus

Region

Invalid

Region

Choose a region before you continue.

Disabled

Region

Checkbox

A 16 px box with a square corner. The boxes below are live.

States

Notify me about

Unchecked

Checked

Indeterminate

Focus

Disabled

Notify me about

Disabled

Disabled and selected

Disabled and indeterminate

Invalid and read only

Terms

I accept the data processing terms

Accept the terms to continue.

Read only, checked

Toggle

Carbon's toggle with a square track and a square handle. Size, travel and colours follow Carbon exactly.

Off

Email alerts

On

Email alerts

Focus

Email alerts

Disabled

Email alerts

Disabled on

Email alerts

Read only

Email alerts

Small off

Email alerts

Small on

Email alerts

Tag

Square tags with the label at the start. Three sizes, eleven colours, plus filter, interactive and disabled states.

Colours, md 24

Red Magenta Purple Blue Cyan Teal Green Gray Cool gray Warm gray High contrast Outline

Sizes: sm 18, md 24, lg 32

Small Medium Large

Filter (dismissible), interactive, focus, disabled

Last 30 days Region: Europe Focus Disabled filter Disabled

Notification

Inline, actionable and toast notifications in four kinds, each in high and low contrast. The close buttons are live.

Inline, high contrast

Sync failed.

The directory server did not respond within 30 seconds.

Policy saved.

Changes apply at the next sign in.

Scheduled maintenance.

Reports pause on Sunday from 02:00 to 04:00 UTC.

Licence limit near.

46 of 50 seats are in use.

Inline, low contrast

Sync failed.

The directory server did not respond within 30 seconds.

Policy saved.

Changes apply at the next sign in.

Scheduled maintenance.

Reports pause on Sunday from 02:00 to 04:00 UTC.

Licence limit near.

46 of 50 seats are in use.

Actionable, high and low contrast

Sync failed.

12 accounts were not updated.

Licence limit near.

46 of 50 seats are in use.

Toast, high and low contrast

Export failed

The audit export stopped at 62 percent.

Today, 10:42

Export ready

Your audit export is ready to download.

Today, 10:42

Report scheduled

The access report runs every Monday at 08:00.

Today, 10:42

Approaching quota

Log storage is 91 percent full.

Today, 10:42

Tabs

Line tabs (40 px) and contained tabs (48 px). Selected tabs use the semibold compact heading style. Both sets are live; use the arrow keys to move between tabs.

Line tabs: selected, hover, focus, default, disabled

Overview: account status, sign in history and recent changes.

Contained tabs with icons: selected, hover, default, disabled

Summary view: totals for the selected period.

Data table

Title, toolbar with search and actions, sortable headers, row selection with a batch action bar, and expandable rows. Select a row to see the batch bar. Numbers are left aligned and use tabular figures.

Component audit

Each Seeghra component checked against its Carbon v11 spec. Expand a row to see what changed.

Select all rows	Expand				Status

Row sizes: xs 24, sm 32, md 40, lg 48 (default), xl 64. Zebra striping shown on md.

Size	Height
Extra small	24
Extra small	24

Size	Height
Small	32
Small	32

Size	Height
Medium, zebra	40
Medium, zebra	40
Medium, zebra	40

Size	Height
Extra large	64
Extra large	64

Modal

Passive, transactional and danger modals, shown in place on their overlay. Footer buttons split the width in half. Open the live version to check focus, Escape and the overlay click.

Transactional, md Danger, sm Passive, xs (no footer)

Seeghra

Foundations

Colour

Layering model

Palette

Type

Geist adjustments

Type scale

Geist Pixel

Spacing

Layout sizes

Grid

Motion

Iconography

Radius

Components

Button

Text input

Checkbox

Toggle

Tag

Notification

Tabs

Data table

Component audit