Pare design system

Specs

• Classes.action-button, with .is-primary for the primary; .action-row for a group, .case-action for one button on its own line
• TypeAction: Geist Mono 12px 500, capitals, +0.04em
• SizeDrawn 40px tall with a 44 × 44px target. 8 × 16px padding, 8px radius (--radius-sm)
• AnatomyLabel, then an optional 16px icon 8px after it
• StatesHover, keyboard focus and pressed. Focus is a 2px white outline at a 3px offset
• Motion0.3s on fills and the arrow; none with reduced motion
• VariantsPrimary and secondary. Both work on dark grounds and, inside .pare-inverse, on white panels

Accessibility

• ContrastWhite on the accent is 4.58:1, above the 4.5:1 that 12px text needs. White on black is 21:1, and the secondary edge is 3.01:1, above the 3:1 for a control edge
• TargetsNever smaller than 44px: a transparent ::before reaches past the 40px box. The focus style is never removed
• ElementA link when it goes somewhere, a button when it acts on the page, so screen readers announce the right thing
• StateHover and pressed change the fill and the edge, not only the colour of the label

Button

Source: Button.astro ↗

Code

---
import Button from '@eunsungux/pare/components/Button.astro';
---
<Button variant="primary" href="#contact" arrow>Send a message</Button>
<Button href="/resume.html" arrow>View resume</Button>

<a class="action-button is-primary" href="#contact">Send a message <span class="action-button-arrow" aria-hidden="true"><svg viewBox="0 0 16 16" …><path d="M3 8h10M9 4l4 4-4 4"/></svg></span></a>
<a class="action-button" href="/resume.html">View resume <span class="action-button-arrow" aria-hidden="true"><svg viewBox="0 0 16 16" …><path d="M3 8h10M9 4l4 4-4 4"/></svg></span></a>

Specs

• Class.menu-button, with .menu-button-icon for the two lines
• AnatomyTwo 20 × 2px lines, 8px apart, at 90% of currentColor, inside a 40px tile (8px radius, inset 2px) within the 44px button
• PlacementThe icon, not the target, sits on the page gutter. It shows below 860px
• Motion0.35s on the lines; none with reduced motion
• ScriptNone: it opens nothing by itself, and your script sets the open state

Accessibility

• Statearia-expanded reports whether the menu is open, and aria-controls names it
• KeyboardEscape closes the menu
• TargetThe button is the 44px target; the 40px tile is drawn inside it

MenuButton

Source: MenuButton.astro ↗

Code

---
import MenuButton from '@eunsungux/pare/components/MenuButton.astro';
---
<MenuButton type="button" aria-expanded="false" aria-controls="site-nav">
  <span class="visually-hidden">Menu</span>
</MenuButton>

<button class="menu-button" type="button" aria-expanded="false" aria-controls="site-nav">
  <span class="menu-button-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Menu</span>
</button>

Specs

• Classes.case-chips with .chip; .chip-status; .chip-select for the selectable chip
• DefaultLabel type, pill radius, 72% white, a 1px edge. Not interactive
• TargetThe selectable chip is drawn about 34px tall; a transparent ::before makes the target at least 44px. If chips wrap onto two rows, give the rows at least 10px of gap
• VariantsFact chips with one status chip first, and a selectable chip built on a real radio. All work on dark grounds and white panels

Accessibility

• InputEach selectable chip holds a hidden radio: arrow keys move between them and a screen reader hears one choice
• Contrast10.5:1 for the label on black and 7.0:1 on white, both AAA. Selected differs by a 21:1 solid fill, not only the edge
• ListsA screen reader reads the fact row as a list

Chips

Source: Chips.astro ↗

Code

---
import Chips from '@eunsungux/pare/components/Chips.astro';
---
<Chips status="Live" items={['2-week design and build (09.2026)', 'Web, desktop and mobile']} />

<ul class="case-chips">
  <li class="chip chip-status">Live</li>
  <li class="chip">2-week design and build (09.2026)</li>
  <li class="chip">Web, desktop and mobile</li>
</ul>

Specs

• Classes.cp-field around the question and the control; .cp-label for the question; a plain input or textarea
• Anatomy8px of padding above a 1px line, the only space between question and answer. No box and no fill; on focus the line turns accent, still 1px. A message box starts one line tall
• TypeQuestion in Title, answer in Body
• In a formWritten answers in input fields, set answers in a choice group, then one primary Send button. One error message in the accent with role="alert" that says what to fix
• Tokens--field-ink, --field-muted and --field-edge: white, #BDBDBD and 35% white on dark; black, #595959 and 42% black inside .pare-inverse. --field-focus is the accent

Accessibility

• LabelThe label wraps the control, so clicking the question focuses the input
• FocusThe accent underline is 4.58:1 on both grounds, above the 3:1 for a state indicator. It uses :focus, so a click shows it too
• Contrast--field-ink is 21:1 on both grounds; the edge is 3:1 or more

InputField

Source: InputField.astro ↗

Code

---
import InputField from '@eunsungux/pare/components/InputField.astro';
---
<InputField label="What is your name?" name="name" autocomplete="name" required />

<label class="cp-field"><span class="cp-label">What is your name?</span>
  <input type="text" name="name" autocomplete="name" required></label>

Specs

• Classes.cp-choices for the row; .cp-choice for a box and its label; inside a fieldset with a legend
• Checkbox24px box, --radius-sm corners, a 1px edge in the control colour, no fill. Checked fills it with the accent and shows a white tick at stroke 2.2
• RadioA 24px circle. Selected keeps the ring, which turns accent, and adds a 12px accent dot, so it never looks like a checked box. Every radio starts unselected unless you set checked
• Row8px from box to label. Wraps with 24px between choices and 16px between rows
• TypeLegend in Title at full colour; choices in Body in --field-muted, rising to full colour with the edge on hover

Accessibility

• NativeSpace toggles a checkbox; arrow keys move inside a radio group and Tab leaves it
• TargetsThe box meets the 24 × 24px minimum, and the wrapping label makes the text a target too
• GroupingThe fieldset and legend let a screen reader read the question once, then the options
• High contrastUnder forced colours the custom style is removed and the system draws the control

ChoiceGroup

Source: ChoiceGroup.astro ↗

Code

---
import ChoiceGroup from '@eunsungux/pare/components/ChoiceGroup.astro';
---
<ChoiceGroup legend="What kind of project?" hint="(Select all)" name="kind" options={[
  { label: 'Product design' }, { label: 'Visual design' }, { label: 'Design & front-end' },
]} />

<fieldset class="cp-field">
  <legend>What kind of project?<span>(Select all)</span></legend>
  <div class="cp-choices">
    <label class="cp-choice"><input type="checkbox" name="kind" value="Product design"><span>Product design</span></label>
  </div>
</fieldset>

Specs

• Markupfigure for one picture; figure.figure-pair for two
• Radius16px (--radius-lg) for one picture, 12px (--radius-md) for each picture of a pair
• PairTwo columns, a 16px gap, stacked below 640px. Each picture keeps its ratio; set --pair-ratio to crop both to one ratio
• Captionfigcaption in Body at --muted-foreground, 16px under the picture
• LoadingLazy-loaded at its real width and height

Accessibility

• Alt textSays what the picture shows. On the site it is also the name of the button that opens the picture full size
• KeyboardOn the site each picture in a case study is a keyboard stop; the full-size view keeps focus on Close and Escape returns it

Figure

Source: Figure.astro ↗

Code

---
import Figure from '@eunsungux/pare/components/Figure.astro';
---
<Figure class="reveal" images={[{ src: '…', alt: '…', width: 2400, height: 1500 }]} />

<figure><img src="…" alt="What the screen shows, specifically" loading="lazy" width="2000" height="1125"></figure>

Specs

• Class.point, in .grid-3 for rows of three
• Surface#141414 (--card) at 12px radius, outlined by a 10% white ring (--shadow-sm) instead of a border
• Padding24px
• TypeHeading in Title, body in Body at --muted-foreground
• ResponsiveRows of three; one column on phones
• ContentOne heading and one or two sentences; no picture, link or action

Accessibility

• ContrastMuted body text is 9.8:1 on the card surface
• HeadingsThe title is an h3, so it sits under the section’s h2

Point

Source: Point.astro ↗

Code

---
import Point from '@eunsungux/pare/components/Point.astro';
---
<Point class="reveal" title="Contrast checked" text="The accent reads at 4.58:1 on black, body type at 21:1." />

<div class="point"><h3>Contrast checked</h3><p>The accent reads at 4.58:1 on black, body type at 21:1.</p></div>

Specs

• Class.option inside .compare
• AnatomyTitle, a one-line description (.option-lede), optional evidence (.option-evidence), then .option-verdict with Pros and Cons
• Padding32px
• LabelsPros and Cons in Label type at 72% white (--option-label-ink), 9.8:1 on the card. Never green and red
• Evidence.option-shots-single or .option-shots-quad sets the layout of the screenshots

Accessibility

• StructurePros and cons are a description list, so each label is read with its points
• Not colour aloneThe labels say Pros and Cons in words; both use the same colour

Option

Source: Option.astro ↗

Code

---
import Option from '@eunsungux/pare/components/Option.astro';
---
<Option title="Option A — Posture analysis" lede="…" pros={['…']} cons={['…']} />

<div class="option">
  <h3>Option A &#8212; Posture analysis</h3>
  <p class="option-lede">One line.</p>
  <dl class="option-verdict">
    <dt class="pc-label pro">Pros</dt><dd><ul><li>…</li></ul></dd>
    <dt class="pc-label con">Cons</dt><dd><ul><li>…</li></ul></dd>
  </dl>
</div>

Specs

• Class.compare
• LayoutTwo columns; the cards share a height so title, description, evidence and verdict line up across the pair
• ResponsiveOne column below 860px, 32px apart

Accessibility

• OrderOption A is read before Option B, in the order they appear

Compare

Source: Compare.astro ↗

Code

---
import Compare from '@eunsungux/pare/components/Compare.astro';
import Option from '@eunsungux/pare/components/Option.astro';
---
<Compare>
  <Option title="Option A — Posture analysis" lede="…" pros={['…']} cons={['…']} />
  <Option title="Option B — Boundary crossing" lede="…" pros={['…']} cons={['…']} />
</Compare>

<div class="compare">
  <div class="option">…Option A…</div>
  <div class="option">…Option B…</div>
</div>

Specs

• Classes.overview-list with one .overview-row per line
• AnatomyA description list of four rows: Background, Problem, Approach, Outcome. Label on the left in Small, value on the right in Body, a hairline between rows
• ResponsiveThe label sits above the value below 900px, so neither column gets too narrow

Accessibility

• StructureA description list, so each label is read with its value

OverviewList

Source: OverviewList.astro ↗

Code

---
import OverviewList from '@eunsungux/pare/components/OverviewList.astro';
---
<OverviewList rows={[
  { label: 'Background', text: '…' },
  { label: 'Problem', text: '…' },
  { label: 'Approach', text: '…' },
  { label: 'Outcome', text: '…' },
]} />

<dl class="overview-list">
  <div class="overview-row"><dt>Background</dt><dd>…</dd></div>
  <div class="overview-row"><dt>Problem</dt><dd>…</dd></div>
</dl>

Specs

• Classes.stats with one .stat per figure; .overview-stats under the overview
• AnatomyValue in H3 with tabular numbers, label in Small. Equal columns parted by a hairline with 32px on each side
• ResponsiveTwo to four across, filling the row; one per row at 900px and below

Accessibility

• TextThe number is text, never an image
• MotionOn the site it counts up only when motion is allowed, and holds its final width so the row doesn’t reflow

Stats

Source: Stats.astro ↗

Code

---
import Stats from '@eunsungux/pare/components/Stats.astro';
---
<Stats class="overview-stats" items={[
  { value: '23%', label: 'Fewer falls' },
  { value: '36', label: 'Patients in the pilot' },
]} />

<div class="stats">
  <div class="stat"><b>23%</b><span>Fewer falls</span></div>
  <div class="stat"><b>36</b><span>Patients in the pilot</span></div>
</div>

Specs

• Markupblockquote.quote with a p and a cite
• AnatomyThe quote in Lead, the source in Label
• Measure60 characters per line, set by an inline max-width: the class sets no width

Accessibility

• AttributionThe cite is read as the source of the quote

Quote

Source: Quote.astro ↗

Code

---
import Quote from '@eunsungux/pare/components/Quote.astro';
---
<Quote class="reveal" style="max-width:60ch" text="“…”" source="Dr. Neth, HealthTap" />

<blockquote class="quote" style="max-width:60ch">
  <p>&#8220;Real words, cut but never reworded.&#8221;</p>
  <cite>Elizabeth N., Patient Safety Monitoring Technician</cite>
</blockquote>

Specs

• Built fromButton (the action), Menu button (below 860px), and the nav indicator: a 2px bar whose brightness alone changes
• Classes.site-header, .brand, .nav, .nav-link; .nav-toggle for the menu button
• Bar2px, on the header’s bottom edge on desktop; on the left edge in the white mobile menu
• TypeLabel on desktop; Title in Geist Mono capitals in the mobile menu
• ScriptIts own: scroll state, the current link and the menu. No other script needed
• ScrollA frosted band once the page scrolls; it hides on scroll down and returns on scroll up

Accessibility

• Currentaria-current marks the section you are in, so the accent bar is never the only signal
• MenuThe menu button reports aria-expanded, and Escape closes the menu
• LogoThe link is named by logo.label; keep the mark’s own alt empty

Header

Source: Header.astro ↗

Code

---
import Header from '@eunsungux/pare/components/Header.astro';
---
<Header logo={{ href: 'index.html', label: 'Studio name' }}
  links={[{ href: '#top', label: 'Home' }, { href: '#work', label: 'Featured work' }]}
  action={{ href: '#contact', label: 'Contact' }}>
  <img slot="logo" src="logo.svg" alt="" width="64" height="64">
</Header>

Specs

• Built fromChips, the eyebrow (Label type) and the H2 style for the title
• Class.case-hero, with .lede for the intro
• EyebrowLeft-aligned, not numbered, --muted-foreground, with the 48px rule
• SpacingThe lede closes the hero 48px above the first section; the chips sit 48px above the cover
• Lede18px, weight 400, line height 1.5, --muted-foreground
• TitleThe page’s only h1. The status chip comes first in the chips

Accessibility

• HeadingsThe title is the page’s only h1
• ListsThe chips are read as a list

Hero

Source: Hero.astro ↗

Code

---
import Hero from '@eunsungux/pare/components/Hero.astro';
---
<Hero eyebrow="Feature design · LG, 2024" title="Telehealth Smart Rails"
  status="Shipped" chips={['Product designer', '1 PM, 3 engineers', 'Web']} />

Specs

• Built fromA 40px filled arrow button (.project-card-go), the frosted surface (the tags), Lead and Small type, and --radius-lg
• Classes.project-card inside .work-list or .more-track; on the home page also .work-row, which the home fade-in targets
• FrameSquare picture at 16px radius (--radius-lg). The whole card is one link. The grid or the track sets the width
• TagsIn Label type on a 45% black frosted pill, top right
• CaptionTitle in Lead at 500; the meta line in Small at 55% white
• StatesHover and focus zoom the picture to 1.03, change the title to the action label and bring up a 40px white arrow. Focus adds the 2px outline at a 6px offset; touch always shows the arrow
• Without hrefA <div> with the title as a paragraph: a sample that goes nowhere, as on this page
• ResponsiveTwo columns on the home page, one below 760px

Accessibility

• StructureThe whole card is one link. The arrow is hidden from screen readers, and the title holds the name
• FocusThe ring follows the picture’s 16px radius, 6px out

Card

Source: Card.astro ↗

Code

---
import Card from '@eunsungux/pare/components/Card.astro';
---
<Card href="smart-rails.html" title="Telehealth Smart Rails" meta="Feature design · LG, 2024"
  chips={['Web']} image={{ src: 'thumb.jpg', alt: 'The monitoring screen on a wall display' }} />

Specs

• Built fromCard, and two 40px round arrow buttons (.more-btn) with the button tokens’ hover, pressed and focus states
• Classes.more-projects; .more-track for the row; .more-btn for the arrows
• Card widthWhole columns of the content width: three per row on desktop, two on tablets, so the last card is never cut. At 600px and below a card is 82% of the width, so the next one peeks in
• ScrollingSnaps to a card above 600px. On a phone it reaches the screen edge and scrolls freely with native momentum; the arrows still move one card
• ScriptIts own: the arrows and their disabled and hidden states. No other script needed
• HeadAt least 44px tall, so the row sits in the same place whether the arrows show or not
• SpacingOn a phone the section ends 32px under the row instead of 96px

Accessibility

• KeyboardThe track can be scrolled with the keyboard, the arrows have aria-labels, and they leave the page when all cards fit

Carousel

Source: Carousel.astro ↗

Code

---
import Carousel from '@eunsungux/pare/components/Carousel.astro';
---
<Carousel title="More projects" prevLabel="Previous projects" nextLabel="Next projects" items={[
  { href: 'smart-rails.html', title: 'Telehealth Smart Rails', meta: 'Feature design · LG, 2024', chips: ['Web'], image: { src: 'thumb.jpg', alt: '' } },
  { href: 'notes.html', title: 'Non-visit encounter note', meta: 'New product design · HealthTap, 2026', chips: ['Web', 'iOS'], image: { src: 'notes.jpg', alt: '' } },
]} />

Specs

• Built fromThe nav indicator pattern and the spacing tokens; its group labels use Label type
• Class.case-toc; main.js adds .is-current to the section you are in and .is-stuck once the row passes its place
• DesktopA stacked list in Body type on columns 1–3, sticky 32px under the header. If taller than the screen it scrolls on its own, keeping the current item in view
• Below 1000pxOne row above the content that scrolls sideways, never wraps and reaches both screen edges. 64px tall like the header, 72% black with blur and a bottom hairline, 24px between items
• PinningOnce passed, the row stays pinned: at the top when scrolling down, and 64px lower, under the returning header, when scrolling up, with the header’s 0.35s transition. Section links land below both bars

Accessibility

• Currentaria-current marks the current section, so the accent bar is never the only signal
• Reduced motionThe row doesn’t slide or smooth-scroll; it appears and jumps

CaseToc

Source: src/components/CaseToc.astro. Not in @eunsungux/pare; it holds this site’s own content.

Code

---
import CaseToc from '../components/CaseToc.astro';
---
<CaseToc label="Sections of this case study"
  groups={[{ items: [{ id: 'overview', label: 'Overview' }, { id: 'problem', label: 'Problem' }] }]} />

Specs

• Built fromSmall type and a 40px round link (.footer-top) with the up arrow
• Classes.site-footer, with .footer-top for back to top
• AnatomyCopyright and location in Small on the left, the back-to-top button on the right; its arrow moves up 3px on hover
• On a phoneStacked and centred, the button above the text, so text and not a control is the last thing on the page: on iOS Safari a tap near the bottom edge opens the toolbar instead. The bottom padding adds the safe-area inset

Accessibility

• Back to topA labelled link to #top, not a script-only control

SiteFooter

Source: src/components/SiteFooter.astro. Not in @eunsungux/pare; it holds this site’s own content.

Takes no props.

Code

---
import SiteFooter from '../components/SiteFooter.astro';
---
<SiteFooter />