Skip to main content
JoshuaBriley.

Explore

Contact me

Style guide The portfolio’s working design system

How this site is designed.

The colors, type, components, and interactions used across this portfolio. Live examples, usage notes, and links to the pages where they do the work.

Colors & surfaces.

Cool paper, charcoal, and denim. The palette stays in tune with the photograph on the home and about pages.

Joshua Briley, smiling in a navy suit in front of a bookshelf

A photograph sets the tone.

The navy suit and throw, dark shelves, and daylight give the site its color direction. Strong typography provides the emphasis; blue connects the actions, feature sections, and editorial details.

Use paper for reading, denim tint to group related content, and ink or denim for a deliberate change of pace.

See the portrait in context

  • Paper

    #FAFBFC

    --paper

    Default page surface.

  • Raised

    #FFFFFF

    --raised

    Inputs and selected content panels.

  • Ink

    #1A1B1E

    --ink

    Primary text, the footer, and dark feature surfaces.

  • Muted ink

    #565760

    --ink-muted

    Descriptions, captions, and supporting text.

  • Denim

    #244C71

    --portfolio-blue

    Primary actions, editorial italics, and feature bands.

  • Denim tint

    #EDF1F4

    --portfolio-tint

    Tool workspaces, related content, and quiet emphasis.

  • Accent

    #2E5C8A

    --accent

    Surface-aware icons, links, and focus indicators.

  • Line

    #E5E7EB

    --line

    Quiet dividers; not a sufficient input boundary on its own.

  • Strong line

    #D4D7DD

    --line-strong

    Stronger rules and panel outlines.

  • Faint ink

    #9A9AA1

    --ink-faint

    Decoration only. Use muted ink for readable text.

Paper & ink

Primary text stays dark. Descriptions use muted ink; readable text never uses faint ink.

Browse writing

Denim & paper

Feature bands use white text and lighter blue supporting text. Keep links underlined or otherwise explicit.

Read recommendations

Ink & paper

The footer, project navigation, and code artifacts use light text on ink. Links, icons, and focus styles need enough contrast against the dark surface.

Get in touch

Swatch values are read from the site’s CSS at build time. Decorative borders and colors are separate from the contrast required for text, focus indicators, and controls.

Type and hierarchy.

Four typefaces, with distinct jobs. Bold headings carry the message; italics add a little character.

Hanken Grotesk

Built to be used.

Headlines, paragraphs, navigation, form labels, and most metadata. Display type is heavy and tightly tracked; reading text has a more relaxed rhythm.

Newsreader

A little character.

Editorial italics within large headings and occasional pull quotes. It adds contrast without taking over the reading experience.

Geist Mono

const shared = true;

Code and selected technical metadata. It identifies technical detail rather than serving as a label on every section.

Style Script

The wordmark in the header and footer. Keep it out of body copy, buttons, and interface labels.

Page and section headings

Use the shared page-type and section-type classes for the main editorial hierarchy. Semantic heading levels still follow the document outline.

See it in use

Shared UI. Clear intent.

Accessible components and product interfaces, built for the teams using them.

Section heading.

View markup
Shared heading styles astro 
<h1 class="page-type">How this site <em>is designed.</em></h1>
<p class="page-lede">A short introduction with a clear purpose.</p>
<h2 class="section-type">Section <em>heading.</em></h2>

Supporting headings and body copy

Heading and Text remain in use for case studies and supporting pages. Visual size is independent of the heading’s semantic level.

See it in use

Decisions need context.

Explain the situation, the alternatives, and the reason for a decision. Keep the reading column comfortable rather than stretching every paragraph across the page.

Captions describe what the reader is seeing and why it matters.

Buttons and links.

Use a filled denim action for the next important step, and an underlined editorial link for the supporting route.

Primary action and editorial link

The same styles appear on the home page, résumé, articles, and tools. Arrow glyphs are decorative; the visible words name the destination.

See it in use
Explore my work View résumé
View markup
Shared actions astro 
<a class="action-link" href="/projects/">
  Explore my work <span aria-hidden="true" data-link-arrow="down-right">↘</span>
</a>
<a class="editorial-link" href="/resume/">
  View résumé <span aria-hidden="true" data-link-arrow="up-right">↗</span>
</a>

Links on ink

Use the light editorial-link variant on dark surfaces. The underline remains visible before hover.

See it in use
Talk shop

Navigation links and icons

The Link component still supplies site navigation and inline legal-page links. Decorative icons stay out of the accessible name; standalone controls need a label.

See it in use
Privacy policy View projects Keyboard access

Try hovering and tabbing through the examples. Hover changes the fill, underline, or border. Keyboard focus adds a visible outline. The primary action is at least 52px tall; editorial links provide a 44px minimum target.

Forms and feedback.

Visible labels, useful hints, specific errors, and feedback while sending. The contact page uses these same components.

Fields, validation, and submission

Try the validation and sending state. This demonstration stays in your browser and does not send a message.

See it in use

Use an address like you@example.com.

A few sentences is plenty.

View markup
Contact field pattern astro 
<Field label="Email" name="email" required hint="Only used to reply.">
  <Input name="email" type="email" required
    describedBy="field-email-hint" />
</Field>
<SubmitButton label="Send message" loadingLabel="Sending…" />

Busy and disabled

The busy state changes the label, shows a spinner, and prevents repeat submission. A disabled action keeps its label and uses reduced opacity.

Inline error

Match label and input IDs. Connect the hint and error with describedBy, and apply aria-invalid when a field needs attention.

Content patterns.

Case studies make ownership and evidence clear. Articles support long reading. Recommendations keep the words and their author together.

Project summaries and evidence

ProjectHero establishes context and ownership. Tldr expands the decision record. WorkList and ProjectNext connect related work; CaseReview provides page shortcuts.

See it in use
75%

fewer support calls

55%

fewer shipping errors

Reported outcomes from the IVFCRYO case study. Keep a metric’s source, scope, and explanation close to the number.

Project summary.

Interviews with the owner, the COO, and the office manager showed the hard part wasn't the drive. It was getting five people, the patient, two clinics, a courier, and IVFCRYO, all confirmed and ready before a shipment could start.

The decision
I chose one shared record instead of two separate apps, so a shipment could never show one status to the patient and a different one to staff.
The result
Support calls dropped 75%, and shipping errors dropped 55%, once patients could see for themselves that both clinics had signed off.
Alternatives, implementation, and lessons

Two separate apps

One app for patients, one for staff. Simpler to build, but each would keep its own copy of a shipment's status, and the two could disagree.

One shared record, two views

Patients and staff look at the same shipment record, plus a plain tracking page for anyone else involved.

How it was built

The shipment moves through clear stages, from draft to delivered, and can't be scheduled until everyone involved has confirmed they're ready. Alerts are sorted by how serious they are, so a small temperature change doesn't trigger the same alarm as a real problem.

What I would improve

A blind customer testing with a screen reader found two issues I'd fix first: status updates read aloud too fast, and when a shipment uses two couriers, the screen reader can't tell them apart.

Design sheets and the artifact viewer

Plate shows the full design sheet at its natural aspect ratio. Open the viewer to inspect details; Escape closes it and returns focus.

See it in use
IVFCRYO shipment detail design sheet, showing readiness, shipment status, and tracking
Shipment detail

A real interface artifact from the IVFCRYO case study.

Recommendations

Use Recommendation for a named, attributed quote. The testimonials page also has a larger featured treatment on denim with a small Newsreader quotation mark.

See it in use

Josh was always a great design and research partner… He always worked hard to ensure accessibility across our experience.

Drew DiPasquale

Principal Researcher

HubSpot

Article prose and comparison tables

Articles use a focused reading measure, strong chapter headings, underlined links, and a section index. Tables keep their column headings and scroll horizontally when needed.

See it in use

Make the contract visible

Component APIs, examples, and tests describe how shared UI behaves. A reader should be able to find the decision behind the interface.

Shared interfaces need shared contracts.

PatternPurposeWhere it appears
Contents navigationJump between sections and track reading positionBlog articles
Expandable summaryRead the decision record without extending the opening summaryProject pages

Article author credit

A small portrait, modest name, and short biography close each article. Keep the credit on the page surface and use muted text for supporting details.

See it in use

Written by

Joshua Briley

Product design engineer with twenty-plus years building accessible interfaces and shared UI foundations.

More about my work

Article pager

Older and newer links close each article below the author credit. Keep it to a hairline, a small direction label, and the title; arrows point the way the reader travels: left for older, right for newer. Hover brings the title into the accent color.

See it in use

Article resource lists

Give each resource its own linked name and a short description when it helps readers choose. Simple link collections can use two columns on wider screens; phones keep a single reading column.

See it in use

Visual details need a content purpose. The résumé timeline connects employment dates; a small quotation mark identifies the featured recommendation. Keep project previews on plain stages, and reserve numbering for content where sequence matters.

SiteShot, ScrollShot, and LiveEmbed support personal-project and case-study media. FidelityBand compares design stages. CodeBlock uses the same GitHub Dark syntax highlighting as articles, with readable comment colors, line numbers, wrapped lines, and a copy action; open any “View markup” example here to try it.

Interactive tools.

Four explanatory illustrations, each tied to a working tool. Their controls and results share the portfolio’s type, surfaces, and action styles.

Inputs and choices

The calculator and token playground use labelled sliders and numeric inputs. The Scorecard uses grouped choices with a visible selected state. Preserve the label, value, and keyboard behavior.

Results and state

The calculator recalculates estimates from its inputs. The Scorecard preserves progress locally and opens a report. The audit tool pairs findings with fixes; it is a sample interface, not a scan of the reader’s website.

Spacing, layout, and motion.

Shared widths and spacing keep pages coherent. Motion helps explain a state change or makes an available action easier to notice.

Containers and spacing

Container provides a 24px gutter on each side. Its width caps include those gutters. Editorial sections use 5.5rem vertical padding on larger screens and 3.75rem on phones.

narrow 48rem
Supporting copy and narrow page content
content 64rem
Case-study reading layouts
default 72rem
General page content
wide 80rem
Main page grids and full design sheets

Reading and responsive layout

Article text is capped at 48rem, with a separate contents rail on desktop and an expandable index on smaller screens. Project pages combine narrower reading columns with wider interface artifacts.

Headings use fluid sizes. Section shortcut navigation becomes a full-width list below 768px, with labels on the left and arrows on the right. Multi-column content stacks when its reading space gets too tight; data tables keep a horizontal scroller rather than dropping their headers.

Entry and scroll reveal

Hero content rises 12px over 0.7 seconds with a small stagger. Sections reveal once as they enter the viewport. Content stays visible when reduced motion is requested.

Clear, then a little character.Heading entrance and restrained movement.

Hover, focus, and reading progress

Link arrows move 3px in their pointing direction over 200ms with the shared ease-out curve, on hover and keyboard focus. Reduced motion keeps arrows still. Article previews fade in a title underline and accent color on hover, with no enclosing hover border. Keyboard focus adds the enclosing border and outline. Other related-content links may also change their background or underline. A visible focus outline supports keyboard navigation. The thin page-top progress bar tracks scrolling where the browser supports scroll timelines.

Try the related-tool links

Designed for paper

Print uses one centered 70ch measure for body content and headings, with no narrower text limits inside it. Hanken headings with Newsreader emphasis, generous page margins and spacing, white surfaces, and a small identity and source line keep the document coherent. Whitespace separates sections; horizontal section rules are omitted. Screen navigation, share controls, and decorative effects are omitted. Headings stay with their content; tables repeat their column headings and code wraps to the page width.

Complete, readable snapshots

Disclosures expand for print and return to their previous state afterward. Case-study artwork fits within a sheet, live demos use their poster images, and external links receive numbered references. Tools retain current answers, values, and results. The downloadable résumé keeps its separate document layout.

Navigation, dialogs, and clipboard

The skip link is the first keyboard stop. Mobile navigation uses a native modal dialog with bold primary links, supporting destinations, and a Contact me link. It contains keyboard focus, locks background scrolling, closes on an outside click or Escape, and returns focus to the menu button. Artifact dialogs also support Escape dismissal. The artifact viewer restores focus to its trigger. Code and article-share actions announce clipboard success or failure.

Optional inspection features

Alt/Option plus hover reveals source information on elements with data-source. The layout inspector is activated with ↑ ↑ ↓ ↓ ← → ← → B A; Escape dismisses it. These are optional inspection aids, separate from normal site navigation.

The component index.

44 components reached by the site’s pages. Each entry links to a page that uses it; examples created only for this guide are excluded.

Shared CSS patterns such as action-link, page-type, and editorial-section are documented above. Run npm run audit:components to check production usage and this index.

Site navigation4

  • Footer

    Site navigation, contact information, and supporting links.

    src/components/chrome/Footer.astro
    See in use

  • Header

    The shared wordmark, primary navigation, and contact link.

    src/components/chrome/Header.astro
    See in use

  • MobileNav

    The mobile navigation modal with outside-click and Escape dismissal, focus containment, and scroll locking.

    src/components/chrome/MobileNav.astro
    See in use

  • SkipLink

    The first keyboard stop, taking readers directly to main content.

    src/components/chrome/SkipLink.astro
    See in use
Layout2

  • Container

    Content widths with a shared 24px horizontal gutter.

    src/components/layout/Container.astro
    See in use

  • Section

    Surface and spacing wrapper used by case studies and supporting pages.

    src/components/layout/Section.astro
    See in use
Type, links & icons5

  • Heading

    Heading semantics and visual size controlled independently.

    src/components/primitives/Heading.astro
    See in use

  • Icon

    Iconify icons with decorative or explicitly labelled semantics.

    src/components/primitives/Icon.astro
    See in use

  • Link

    Navigation, inline, and arrow links used by the site chrome and legal pages.

    src/components/primitives/Link.astro
    See in use

  • Logo

    The Style Script wordmark used in the header and footer.

    src/components/primitives/Logo.astro
    See in use

  • Text

    Body, caption, and supporting text used by case studies and supporting pages.

    src/components/primitives/Text.astro
    See in use
Form controls5

  • Field

    A visible label with optional hint, required marker, and error text.

    src/components/form/Field.astro
    See in use

  • FormAlert

    Polite success status or assertive error feedback.

    src/components/form/FormAlert.astro
    See in use

  • Input

    Text, email, and phone inputs used by the contact form.

    src/components/form/Input.astro
    See in use

  • SubmitButton

    Primary action with ready, busy, and disabled states.

    src/components/form/SubmitButton.astro
    See in use

  • Textarea

    Multiline input with explicit label and description references.

    src/components/form/Textarea.astro
    See in use
Content & media patterns18

  • CaseReview

    Case-study shortcuts to the summary, interface, and outcomes.

    src/components/patterns/CaseReview.astro
    See in use

  • CodeBlock

    A captioned code artifact with article-matched syntax highlighting, line numbers, and a copy action.

    src/components/patterns/CodeBlock.astro
    See in use

  • FidelityBand

    A case-study comparison of design fidelity and implementation.

    src/components/patterns/FidelityBand.astro
    See in use

  • Lightbox

    The shared artifact viewer, with zoom and keyboard dismissal.

    src/components/patterns/Lightbox.astro
    See in use

  • LiveEmbed

    An optional, explicitly loaded live website preview.

    src/components/patterns/LiveEmbed.astro
    See in use

  • Metric

    A measured result with a label and supporting context.

    src/components/patterns/Metric.astro
    See in use

  • Plate

    A full design sheet with a caption and keyboard-accessible zoom.

    src/components/patterns/Plate.astro
    See in use

  • Portrait

    The responsive photograph used on the home and about pages.

    src/components/patterns/Portrait.astro
    See in use

  • ProjectHero

    A project title, ownership details, evidence, and interface preview.

    src/components/patterns/ProjectHero.astro
    See in use

  • ProjectNext

    A large link to the next project, using the shared project data.

    src/components/patterns/ProjectNext.astro
    See in use

  • Recommendation

    A quotation attributed to a named colleague; regular and featured layouts.

    src/components/patterns/Recommendation.astro
    See in use

  • ScrollShot

    A scrollable long-page screenshot with an inspection control.

    src/components/patterns/ScrollShot.astro
    See in use

  • SiteShot

    A website screenshot with a caption and optional image viewer.

    src/components/patterns/SiteShot.astro
    See in use

  • Tldr

    A project summary with expandable decisions, evidence, and reflection.

    src/components/patterns/Tldr.astro
    See in use

  • ToolIllustration

    An explanatory SVG for each of the four tools.

    src/components/patterns/ToolIllustration.astro
    See in use

  • ArticleIllustration

    An explanatory SVG for each article, drawn in the same style as the tool illustrations.

    src/components/patterns/ArticleIllustration.astro
    See in use

  • BookList

    Josh's free online books, each with a typographic cover.

    src/components/patterns/BookList.astro
    See in use

  • WorkList

    Selected case studies with interface images, roles, and results.

    src/components/patterns/WorkList.astro
    See in use
Interactive features8

  • ContactForm

    Client-side validation, submission, and status handling for contact messages.

    src/components/islands/ContactForm.astro
    See in use

  • CopyButton

    A clipboard action with visible and announced feedback.

    src/components/islands/CopyButton.astro
    See in use

  • Diagnostic

    An interactive sample audit with review findings and proposed fixes.

    src/components/islands/Diagnostic.astro
    See in use

  • InspectorMode

    A keyboard-activated layout overlay for inspecting the site.

    src/components/islands/InspectorMode.astro
    See in use

  • RoiCalculator

    A rework estimate that recalculates from the reader’s inputs.

    src/components/islands/RoiCalculator.astro
    See in use

  • ScorecardEngine

    A design-system self-assessment with local progress and report output.

    src/components/islands/ScorecardEngine.astro
    See in use

  • TokenPlayground

    Live controls showing how shared tokens change several UI elements.

    src/components/islands/TokenPlayground.astro
    See in use

  • ViewSource

    An optional Alt/Option-hover overlay for elements carrying source metadata.

    src/components/islands/ViewSource.astro
    See in use
Article components2

  • ResourceList

    Scannable article resources with clear links, optional descriptions, and responsive columns.

    src/components/writing/ResourceList.astro
    See in use

  • ArticleTable

    A labelled, keyboard-scrollable table region that preserves column headings.

    src/components/writing/ArticleTable.astro
    See in use

Source: https://joshuabriley.com/style-guide/