Inspiration first, drift never.

Granite Ledger

Professional, slate-toned layouts with calm structure and clear hierarchy.

Vanilla HTMLTailwindShadcn UIMaterial UIBalanced densitystable

ID: granite-ledger

Version: v0.1.0

Updated: 2026-01-01

Get JSON

Constraints

density:balancedstacks:html,tailwind,shadcn,muitags:professional,enterprise,finance

Token summary

6 palette tokens · 6 spacing steps · balanced density

Stability cue

stable contract · enforce tokens & guardrails

Token boundaries (hard limits)

Density in {balanced}Palette tokens = 6Accent usage <= 1 primary per section

Pair with a structure

Choose the execution surface.

Structures define the required slots. Pair this visual language with a structure when calling `POST /api/emit` to get deterministic output targets.

Structure

Dashboard

Full-width app shell with persistent sidebar navigation, filter toolbar, alert banner, stats tiers, data tables, charts, and right-rail insights.

Structure

SaaS

Marketing page with hero, trust strip, metrics, feature grid, integrations, pricing, case study, FAQ, and CTA.

Structure

Editorial

Publication layout with masthead, nav, featured story, highlights, trending, resources, archive, and newsletter signup.

Structure

Portfolio

Personal or studio portfolio with hero, work gallery, services, testimonials, and contact call-to-action.

Structure

Support

Helpdesk workspace with ticket inbox, ticket detail, customer context, and response tools.

Token sandbox

Component Preview

See how buttons, cards, and forms look with this language's tokens applied.

Component Previewprofessionalbalanced density
signaturefadffc28

Buttons

Tokens applied

Card

professionalActive

Dashboard Overview

A sample card showing typography, badges, and layout rhythm.

Form Elements

Badges

AccentHighlightOutline

Alert

Quiet Lattice Notice

New

Tokens applied to emphasize clear, low-noise messaging.

Input Group

Palette

#F4F5F7
#1A1F2B
#3F6AE0
#9CA3AF
#E5E7EB
#0F766E

Guardrail cues

  • Density: balanced
  • Buttons: primary · secondary · ghost · highlight
  • Layout: button row, card, form fields

Language brief

Intent

Granite Ledger is a professional visual language for analytics, compliance, and internal tooling. It favors slate neutrals, precise spacing, and calm accents that read as trustworthy.

Tokens

  • Background: #F4F5F7
  • Ink: #1A1F2B
  • Accent: #3F6AE0
  • Muted: #9CA3AF
  • Surface: #E5E7EB
  • Signal: #0F766E
  • Radius: 14px
  • Divider: 1px solid rgba(26, 31, 43, 0.16)

Layout cues

  • Keep layouts aligned to a 12-column grid with measured gaps.
  • Use accent on primary actions and key status markers only.
  • Favor subtle borders over heavy shadows.

Shadcn UI snippet

<Card className="rounded-[14px] border-slate-200 bg-white">
  <CardHeader>
    <CardTitle>Ledger overview</CardTitle>
    <CardDescription>Quiet structure with dependable hierarchy.</CardDescription>
  </CardHeader>
  <CardContent className="space-y-3">
    <div className="rounded-lg border border-slate-200 px-4 py-3">
      <p className="text-sm text-slate-600">Compliance status</p>
    </div>
    <Button size="sm">Review</Button>
  </CardContent>
</Card>

Ledger overview

Quiet structure with dependable hierarchy.

Compliance status

Density: balanced