Style Guide | FD-258 Editor

Introduction

This page (/style) is the canonical style guide for this app. All UI work should use the tokens and patterns documented here—semantic colors (background, foreground, muted, border, card, primary), typography, spacing, and components—not one-off palette utilities unless they are added to this guide first.

Colors

The color palette uses OKLCH values for perceptually uniform colors. The system supports both light and dark modes through CSS custom properties.

Primary Colors

In light mode, --primary is the dark brand blue (hue 240). The site header and footer use bg-primary with text-primary-foreground and muted on-bar text via text-primary-foreground/70 (same pattern as FD258Header).

Background

--background

Foreground

--foreground

Primary

--primary

Primary Foreground

--primary-foreground

Secondary & Muted

Secondary

--secondary

Secondary Foreground

--secondary-foreground

Muted

--muted

Muted Foreground

--muted-foreground

Accent & Destructive

Accent

--accent

Accent Foreground

--accent-foreground

Destructive

--destructive

Destructive Foreground

--destructive-foreground

UI Elements

Card

--card

Border

--border

Input

--input

Ring

--ring

Typography

The platform uses Geist Sans for body text and UI elements, and Geist Mono for technical content like form field labels and code.

Font Families

Geist Sans

The quick brown fox jumps over the lazy dog. 0123456789

Geist Mono

The quick brown fox jumps over the lazy dog. 0123456789

Type Scale

text-xsExtra Small Text (12px)

text-smSmall Text (14px)

text-baseBase Text (16px)

text-lgLarge Text (18px)

text-xlExtra Large (20px)

text-2xl2XL Text (24px)

text-3xl3XL Text (30px)

Font Weights

Normal (400)

Medium (500)

Semibold (600)

Bold (700)

Spacing

Consistent spacing creates visual rhythm and hierarchy. The platform uses Tailwind's default spacing scale based on 4px increments.

Spacing Scale

14px

28px

312px

416px

624px

832px

1040px

1248px

1664px

Border Radius

Border radius values create consistent rounded corners throughout the interface. The base radius is 0.625rem (10px).

Small

rounded-sm

Medium

rounded-md

Large

rounded-lg

rounded-xl

Buttons

Buttons use consistent sizing, spacing, and color variants to indicate different actions and levels of importance.

Variants

Sizes

States

Form Elements

Form elements follow a consistent pattern with labels, inputs, and optional helper text.

Input

Label

Input (Disabled)

Label

Cards

Cards group related content and actions. They provide visual containment and hierarchy.

Card Title

Card description text goes here.

Card content with supporting information.

Muted Card

Alternate card style with muted background.

Used for secondary or less prominent sections.

Badges

Badges are used to highlight status, categories, or other metadata.

DefaultSecondaryOutlineDestructive

Section Headings

Section headings use consistent typography to create visual hierarchy within forms and content areas.

Section Label

Used for grouping form fields and content sections. All caps, small size, wide letter spacing.

Content Heading

Used for prominent section titles within cards or pages.

Design Principles

Clarity

Every element serves a purpose. The interface guides users through complex form fields with clear labels and logical groupings.

Consistency

Repeated patterns reduce cognitive load. Buttons, inputs, and spacing follow predictable rules throughout the platform.

Accessibility

Color contrast, keyboard navigation, and screen reader support ensure the tool is usable by everyone.

Professional

The visual design reflects the serious nature of official documentation while remaining approachable and modern.