Glyde style guide

Tokens and components for the Glyde app — not the marketing site. Every specimen is the live component, so this page stays accurate as they change.

Colour

Light mode only. Token names mirror Traktion so shared components port across unchanged — always use the token, never a raw Tailwind palette value.

Surfaces

Light layers from chrome to hover. Panels sit white on the grey canvas.

base#FFFFFFTop bar, sidebar, editor footer
canvas#F6F7F9Page background
surface#FFFFFFPanels, cards, modals
surface-sunken#F8F9FBTable heads, panel footers, code
surface-hover#F1F3F6Row and menu hover
surface-deep#E4F3FCAvatar fill

Ink & lines

Three text weights and two border weights. Never put faint ink on sunken fills at small sizes.

ink#0F0E20Headings, values, primary text
ink-muted#4B4D5EBody copy, descriptions
ink-faint#6B6E7EMeta, hints, timestamps
line#E3E6ECDividers, panel borders
line-strong#CBD0D9Control hover, dashed empty borders

Action

Glyde sky, taken from the paper-plane mark. Digital is for focus rings only.

action#0A72B5Primary buttons, links, active nav
action-hover#08629CPrimary hover
action-soft#E8F5FDActive nav fill, loc chips
digital#28A8E8Focus rings, folder icons

Status

Used as text on tinted fills (6–8% opacity), never as solid backgrounds.

success#0A7D57Mapped, committed, valid
warn#A15C00Pending, needs scan, blocked fields
danger#C4362FErrors, protected branches, delete

Typography

Epilogue (from the Artificial Studio site) for page and editor titles only. Inter carries all interface text in sentence case. JetBrains Mono for paths, branches, locs and code.

Page title
Epilogue 600 · 28px · −0.03em
Review changes
Editor title
Epilogue 600 · 24px · −0.02em
Navigation
Panel title
Inter 600 · 15px
Recent commits
Body
Inter 400 · 14px · relaxed
Saves commit to the selected branch. Creating a branch is optional.
UI
Inter 500 · 13px
Create branch
Meta
Inter 400 · 11px
Edited 2 hours ago · 3 files
Mono
JetBrains Mono · 12–13px
src/data/navigation.ts

Shape & elevation

Three radii and two shadows. Group with whitespace and hairlines first; reach for a bordered panel only when content needs its own surface.

Radius

md · 6pxButtons, inputs, badges
lg · 8pxAlerts, menus, code blocks
xl · 12pxPanels, cards, modals

Elevation

shadow-hairResting panels and controls
shadow-liftMenus, modals, drawers, commit card

Motion

Motion confirms and orients — it never decorates. Nothing exceeds 300ms, keyboard-triggered actions don't animate, and reduced-motion preferences are honoured app-wide.

Moment	Duration	Easing	Behaviour
Press & hover	150ms	ease-out	Colour changes on buttons, rows, links
Menus	150ms	cubic-bezier(0.23, 1, 0.32, 1)	Branch selector, account menu
Modals	200ms	cubic-bezier(0.23, 1, 0.32, 1)	Enter from scale 0.96 + 8px
Drawers	220ms	cubic-bezier(0.23, 1, 0.32, 1)	Slide 24px from the right

Brand marks

The paper-plane mark with the Epilogue wordmark, and the two Git host marks used wherever a repository or account is named.

Logo

Top bar and sign-in. Drop the wordmark below 640px.

components/brand/Logo.tsx

With wordmark · 22px

Glyde

Mark only

ProviderMark

Prefix owner and repo names. Pair with a visually hidden provider name for screen readers.

components/brand/ProviderMark.tsx

artificial-studio / websiteartificial-studio / glyde-docs

Actions

One primary action per view. Labels are a verb plus the object and never wrap — Commit to main, Create branch, Upload file.

Button

Four variants, three sizes, plus icon-only. Danger is outlined so it never outshouts the primary action.

components/ui/Button.tsx

Variants · md

Sizes

Icon-only · disabled

buttonClasses

Apply button styling to a router link so navigation stays a real link.

components/ui/Button.tsx

Back to dashboard

CopyButton

Next to commands and URLs. Confirms inline for 1.5s.

components/ui/CopyButton.tsx

$ npx glyde scan

Form controls

Ported from Traktion. Labels sit above controls, hints below; an error replaces the hint and is announced.

Field + Input

Every control is wrapped in Field for its label, hint, error and required marker.

components/ui/form/Field.tsx

Branch name

Use lowercase and hyphens. Example: content/hero-update

Commit message

Commit message is required

BucketOptional

s3://

Read-only values use the disabled state.

Textarea

Multi-line text. Markdown fields add font-mono.

components/ui/form/Textarea.tsx

Description

Select

Native select with a custom chevron. sm size for toolbars.

components/ui/form/Select.tsx

Region

Checkbox

Independent preferences that are saved with a button.

components/ui/form/Checkbox.tsx

Remember the last branch for each repository

Otherwise repositories open on their default branch.

Toggle

Settings that apply immediately.

components/ui/form/Toggle.tsx

Restrict to allowlist

Only matching repositories can be opened.

FormSection

Two-column settings group: title and description left, controls right.

components/ui/form/FormSection.tsx

Account

Your name appears as the author on commits made through Glyde.

Name

Status & feedback

Status colour is always paired with text. Toasts (Sonner, bottom-right) confirm saves and commits; alerts explain conditions that block work.

Badge

Short status labels. Add a dot for live states such as Mapped or Connected.

components/ui/Badge.tsx

DefaultCurrentMappedNeeds scanProtected

Alert

Inline, persistent messages with an optional action. Danger announces as an alert.

components/ui/Alert.tsx

Never stored in Git

Secrets live on the Glyde instance only.

All files passed validation

1 field is blocked

Glyde couldn't find the recorded locator, so it won't guess.

Protected branch

This branch cannot receive commits from Glyde.

Layout & containers

Pages sit on the canvas at max 1180px. One page header per view; panels group content that needs its own surface.

PageHeader

Title, optional breadcrumb eyebrow, description and right-aligned actions.

components/layout/PageHeader.tsx

Overviewsrc/pages/*.astro

Pages

Astro pages. Each one opens as a form.

Panel

Panel, PanelHeader and PanelFooter. Rows inside are divided by hairlines, not nested cards.

components/ui/Panel.tsx

Globals

Single documents — one form each.

Navigation4 fields
Contact4 fields

Last scanned 14 OctView map

EmptyState

Say what's missing and offer the next step. Used for empty lists, no results and missing config.

components/ui/EmptyState.tsx

Nothing to commit

There are no pending changes on main.

ScanRequired

Repo overview when glyde.yaml is missing. The scan is a CLI, not a button in Glyde.

components/repo/ScanRequired.tsx

Run a scan to start

Glyde needs glyde.yaml on main before this repo is editable. The scan reads your content files and writes the map — globals, collections and a locator for every field.

1Clone the repository
git clone <repo-url> && cd <repo>
2Run the scan
npx glyde scan
3Commit the map
git add glyde.yaml && git commit -m "Add Glyde map" && git push

Active items use action-soft with action text. Segmented tabs switch editor modes, not pages.

Tabs

Segmented control for 2–3 editor modes.

components/ui/Tabs.tsx

NavItem

Repository navigation. Counts sit right-aligned in faint ink.

components/layout/NavItem.tsx

Overview
Branches
Media12

BranchSelector

Persistent in repo chrome. Encodes branch names that contain slashes as one path segment.

components/layout/BranchSelector.tsx

RepoSidebar

Globals and collections from the CMS map, then repository tools. Counts sit right-aligned.

components/layout/RepoSidebar.tsx

Overlays

Modals confirm or collect a few inputs; drawers show detail without leaving a list. Both close on Escape and the backdrop.

Modal

sm for confirmations, md for short forms, lg for uploads and credentials.

components/ui/Modal.tsx

Drawer

Right-hand detail panel, 448px wide.

components/ui/Drawer.tsx

Toast

Brief confirmation after saves, commits and copies. Bottom-right, never for errors that need action.

sonner · components/providers.tsx

Code & diffs

Anything a developer might paste — paths, branches, locs, commands — is set in mono.

Mono

Inline paths and branch names inside sentences.

components/ui/Code.tsx

Glyde needs glyde.yaml on main before this repo is editable.

CodeBlock

Read-only snippets and source previews.

components/ui/Code.tsx

media:
  credential: production-s3

DiffView

Line diff on review. Additions and removals are marked with symbols and screen-reader text, not colour alone.

components/commit/DiffView.tsx

src/data/blog.tsModified+1 −1

 @@ blogPosts[slug='edge-hosting'].title
−Removed:   title: 'Why we moved client sites to the edge',
+Added:   title: 'Moving client sites to the edge',

Editor

The field form, loc inspector and sticky footer combine into every global and collection editor. Focus a field to update the inspector.

FieldControl + LocInspector

One control per mapped field type. Multi-location, repeater and blocked states shown.

components/editor/FieldControl.tsx · LocInspector.tsx

Post titleWrites 2 locations

Header links

Locator footer p.legal was not found in src/components/Footer.tsx. This field cannot be saved.

Writes to

Post title

src/data/blog.tsloc: blogPosts[slug='edge-hosting'].title
src/data/articles.tsloc: articles[slug='edge-hosting'].title

Current source

  title: 'Why we moved client sites to the edge',

type: string · required

Nothing focused

Focus a field to see where it writes.

EditorFooter

Sticky save bar: validation, save status, review link and Save. Status follows the form above.

components/editor/EditorFooter.tsx

3 locs resolved · 1 blocked

No changes

Review changes2