01
Content first
Typography and rhythm carry hierarchy before decoration does.
cofob Design System v1
Quiet structure. Clear content.
A framework-independent design language for cofob.dev sites, with one semantic CSS contract and native, React, and Svelte implementations.
Design principles
The visual language preserves the original cofob.dev character while making its decisions explicit.
02
Calm confidence
Sky accents, zinc surfaces, and soft geometry support rather than compete.
03
Platform aligned
Semantic HTML and native browser behavior are the foundation of interaction.
04
Accessible by default
Every state remains visible by keyboard, contrast, motion, and assistive technology.
Framework adapters
Both implementations below are rendered and hydrated on this Astro page, not recreated as showroom-only HTML.
Foundation and layout
Theme, typography, semantic navigation, and composable layout primitives.
ThemeProvider
Supplies reactive light, dark, and system theme state.
Theme contextOne preference, resolved before paint.
Theme contextOne preference, resolved before paint.
Theme context One preference, resolved before paint.
ThemeScript
Applies the saved theme before first paint.
<ThemeScript /><ThemeScript /><ThemeScript />ThemeToggle
Accessible three-way theme preference control.
SkipLink
Keyboard shortcut to the primary page content.
Focus this frame, then press Tab.
Skip to preview content
Preview content target
Focus this frame, then press Tab.
Skip to preview content
Preview content target
Focus this frame, then press Tab.
Skip to preview content
Preview content target
Heading
Responsive heading hierarchy from h1 through h6.
Content comes first.
Content comes first.
Content comes first.
Text
Body, muted, lead, small, and caption text styles.
Readable body text for long-form content.
Supporting metadata stays quiet.
Readable body text for long-form content.
Supporting metadata stays quiet.
Readable body text for long-form content.
Supporting metadata stays quiet.
Link
Accessible inline and standalone navigation links.
API and examples →Prose
Long-form article typography and media rhythm.
Long-form rhythm
Headings, paragraphs, links, and inline code share a comfortable reading measure.
Long-form rhythm
Headings, paragraphs, links, and inline code share a comfortable reading measure.
Long-form rhythm
Headings, paragraphs, links, and inline code share a comfortable reading measure.
Container
Centered responsive content width.
A centered, narrow content container.
A centered, narrow content container.
A centered, narrow content container.
Section
Vertical page section with consistent spacing.
Foundation
A clear section
Semantic page rhythm.
Section content follows its optional header.
Foundation
A clear section
Semantic page rhythm.
Section content follows its optional header.
Foundation
A clear section
Semantic page rhythm.
Section content follows its optional header.
Stack
Vertical flow layout with token-based gaps.
FirstSecondThird
FirstSecondThird
FirstSecondThird
Inline
Wrapping horizontal layout with alignment controls.
OneTwoThree
OneTwoThree
OneTwoThree
Actions and forms
Everyday controls with consistent focus, validation, and disabled states.
Button
Primary, secondary, ghost, and danger actions.
IconButton
Compact labelled action for a single Lucide icon.
Field
Label, hint, required, and error message composition.
Use a short, recognizable name.
A slug is required.
Use a short, recognizable name.
A slug is required.
Use a short, recognizable name.
A slug is required.
TextField
Single-line text and search input.
We only use this for replies.
Enter a valid address.
Textarea
Multi-line text entry with validation styling.
20 characters
A summary is required.
Select
Native selection control styled by the system.
Choose how the interface resolves color.
Choose an available option.
Checkbox
Boolean selection with a visible native control.
Switch
Immediate boolean setting with switch semantics.
Captcha
Controlled, presentation-only human-verification surface inspired by Cap.
Display and feedback
Surfaces, labels, status messaging, and empty states.
Badge
Compact semantic status label.
NeutralAccentInfoSuccessWarningDanger
NeutralAccentInfoSuccessWarningDanger
Neutral Accent Info Success Warning Danger
Tag
Static or interactive content taxonomy label.
taxonomydesign systems
taxonomydesign systems
taxonomy design systems
Alert
Info, success, warning, and danger callout.
Note
Shared contract.
Saved
The update is live.
Review
Check this value.
Failed
Try again.
Note
Shared contract.
Saved
The update is live.
Review
Check this value.
Failed
Try again.
Card
Neutral, accent, and interactive content surface.
Default
Quiet structure.
Elevated
Raised context.
Outlined
Interactive Defined boundary.
Linked surface.
EmptyState
Concise no-data explanation and next action.
No posts yet
Publish the first note when it is ready.
No posts yet
Publish the first note when it is ready.
No posts yet
Publish the first note when it is ready.
CodeBlock
Readable source code with an optional language label and copy action.
const preference = "system";
applyTheme(preference);
const preference = "system";
applyTheme(preference);const preference = "system";
applyTheme(preference);TerminalCodeBlock
Terminal transcript with commands separated from output and individually copyable.
npm install @cofob/design-system-cssadded 1 package in 842msnpm run build -- --mode production✓ 51 pages builtnpm install @cofob/design-system-cssadded 1 package in 842msnpm run build -- --mode production✓ 51 pages builtnpm install @cofob/design-system-cssadded 1 package in 842msnpm run build -- --mode production✓ 51 pages builtTable
Accessible responsive data table with explicit surfaces, density, and striped rows.
| Package | Adapter | Status |
|---|---|---|
| CSS | Native | Ready |
| React | React 19 | Ready |
| Svelte | Svelte 5 | Ready |
| Package | Adapter | Status |
|---|---|---|
| CSS | Native | Ready |
| React | React 19 | Ready |
| Svelte | Svelte 5 | Ready |
| Package | Adapter | Status |
|---|---|---|
| CSS | Native | Ready |
| React | React 19 | Ready |
| Svelte | Svelte 5 | Ready |
Navigation and interaction
Stateful patterns backed by the platform and shared vanilla controllers.
Pagination
Previous, numbered, and next page navigation.
Dialog
Modal dialog using the native dialog element.
Popover
Light-dismiss non-modal floating content.
Semantic detailsHelpful contextual content.
Semantic detailsHelpful contextual content.
Semantic details Helpful contextual content.
DropdownMenu
Roving-focus action menu with typeahead.
API and examples →Tabs
Automatic or manual tab activation.
A shared semantic class contract.
Typed React adapters.
Svelte 5 adapter.
A shared semantic class contract.
Typed React adapters.
Svelte 5 adapter.
A shared semantic class contract.
Typed React adapters.
Svelte 5 adapter.
Accordion
Single or multiple disclosure sections.
What is shared?
Tokens, classes, states, and behavior.
Which frameworks?
Native, React, and Svelte.
What is shared?
Which frameworks?
Native, React, and Svelte.
What is shared?
Tokens, classes, states, and behavior.
Which frameworks?
Native, React, and Svelte.
Tooltip
Supplementary hover and focus description.
More information
ToastProvider
Owns queued transient notification state.
ToastViewport
Polite and assertive toast live region.
Brand and content
Recognizable cofob.dev brand treatments and publishing patterns.
BlueLine
Sky or rainbow marker stroke behind inline content.
Hello, cofob.dev.
Hello, cofob.dev.
Hello, cofob.dev.
Navbar
Router-independent brand and navigation shell.
API and examples →Footer
Copyright, feed, license, and secondary link footer.
API and examples →PostCard
Article preview with cover, dates, tags, and action.
Building a calmer interface
A practical note about content-first design.
Building a calmer interface
A practical note about content-first design.
Building a calmer interface
A practical note about content-first design.
LatestPostCard
Compact highlighted latest-publication link.
SearchResultCard
Search result summary with metadata.
Building a calmer interface
A practical note about content-first design.
Building a calmer interface
A practical note about content-first design.
Building a calmer interface
A practical note about content-first design.
ResponsiveImage
Intrinsic image with srcset and loading controls.
ChatThread
Accessible message transcript with decorative avatars.
- Ship the semantic contract first.
- Then every adapter stays aligned.
- Ship the semantic contract first.
- Then every adapter stays aligned.
- Ship the semantic contract first.
- Then every adapter stays aligned.
Sticker
Attributed sticker figure with required alternative text.
🦊 cofob.dev
Source: PhSilver sticker pack
🦊 cofob.devSource: PhSilver sticker pack
🦊 cofob.dev Source: PhSilver sticker pack