Website reference / 01

One language.
Room to build.

The style guide for the DS Loop website. A shared starting point for every page, component, and illustration we add.

Color study / Ember glass

A warmer kind of energy.

Orange light, lavender glass, and deep aubergine. Our primary CTA, with the same visual language carried into our reports.

Warm light. Dark ground.

Keep the warm orange at the edge of the gradient. Let purple connect it to the glass, with aubergine doing the quiet work underneath.

Aubergine#1e0e26

Purple#9a74ed

Lilac#b9a0ff

Orange#ff743d

The CTA uses dark aubergine lettering across the gradient. Glass uses a fine bright edge, a translucent fill, and a restrained inner highlight. Keep the color away from severity meanings.

See it on the homepage →

Open the full report →

DESIGN SYSTEM LOOP / REPORT

A clear next step.

From a finding in the code to a change your team can review.

Read the completed change

Alternative / Violet orbitGet started

Primary / Ember glassGet started

Inspired by Devloopy’s visual identity. This is our own CSS treatment and palette adaptation. The homepage uses the Ember primary CTA, lilac emphasis, and aubergine supporting surfaces. Generated reports and the website report walkthrough share these foundations. Use .button-ember for primary actions.

01 / Foundations

Violet orbit.

A quiet, violet-black canvas. Pale text. Ember primary actions. Spectral color belongs to the artwork, where it can carry the story.

Structure first

Align content to shared rails. Let spacing and hierarchy do the organizing.

Color with a job

Use role-based properties for the interface. Keep decorative color local.

Depth in the details

Give illustrations the light and material. Keep reading surfaces calm.

Page

The continuous violet-black canvas.

--paper#080512

Raised surface

Panels that sit above the page.

--white#110d20

Primary text

Headings and essential reading.

--ink#f3f0ff

Secondary text

Descriptions and supporting labels.

--muted#b1abc4

Quiet border

Separators and nonessential frames.

--line#2d2541

Control boundary

Edges that need more definition.

--line-strong#776391

Accent

Links and selected emphasis.

--accent#d1bcff

Focus

A visible keyboard focus ring.

--focus#dfcbff

The primary action

--ember-action · Aubergine text · Lilac border

Reserve the lilac → purple → orange gradient for the main next step. Hover gently brightens the same gradient. Shared paints live in ember-tokens.css; the component lives in ember.css.

Token names are inherited: --white is a dark surface, not white paint. These swatches consume the live CSS properties. A quiet decorative line is not a substitute for a visible input boundary.

Supporting surface & state colors

Supporting color roles
Property	Value	Role
`--deep`	`#0e091b`	Inset surface
`--action-hover`	`#7b46dc`	Action hover
`--surface-hover`	`#211632`	Surface hover / current navigation
`--code-ground`	`#151022`	Code block
`--inline-code-ground`	`#261d38`	Inline code
`--code`	`#f3f0ff`	Code text
`--warm`	`#efd79b`	Technical severity annotation
`--loop-panel`	`#171027`	Inherited loop panel
`--loop-selected`	`#382256`	Inherited loop selection

Inherited loop properties remain for supporting styles; the current glass artwork has local paints. Warm is a severity annotation, not a success color.

02 / Typography

Three voices. One hierarchy.

Manrope brings character to headings. System UI keeps longer passages familiar. Monospace identifies code and evidence.

DisplayManrope · 50038–64px / 1.08Tracking −0.04em

Build with intention.

SectionManrope · 50028–38px / 1.18Tracking −0.035em

Shared foundations.
Different possibilities.

ReadingSystem UI · 40016px / 1.65

Build shared components, use them in your screens, and write down how they work. Give the next contributor something clear to build on.

Lead 17px · Supporting copy 14px+ · Labels 12px+
Keep paragraphs within 60–70 characters per line.

EvidenceSystem monospace13px / 1.75

.panel {
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
}

The homepage hero scales down again below 380px. Small labels inside scaled product illustrations are an exception, not a reading-text size to copy. The sample product UI uses Manrope throughout its own frame.

03 / Layout & shape

A frame, not a cage.

Share the outer edges, gutters, and section rhythm. Let the content choose the composition inside them.

The outer frame is capped at 1216px. The columns above illustrate alignment; the site uses content-led CSS grids, not a mandatory 12-column system.

Responsive frame
Viewport	Outer margin	Inner gutter	Section space
Desktop · above 1100px	64px minimum	32px	96px
Tablet · 761–1100px	32px	24px	72px
Mobile · up to 760px	8px	16px	48px

Space creates groups

4

8

12

16

24

32

48

64

96

Common working intervals, not a strict token scale. Use 8–16px within a group, 24–32px between groups, and the frame’s section spacing between stories.

Compact corners

4px
Compact

8px
Action

12px
Frame

14px
Loop glass

Header actions use 7px; text actions use 6px. Older guide-page pills are a retained variation, not the starting point for a new homepage component.

Rulers: 8px ticks, 80px numbered intervals, paired square junctions. Show the outer scales at 1200px and above. Keep decoration hidden from assistive technology and clear of interaction.

04 / Shared components

Reuse the familiar parts.

These examples use the website’s existing classes. Try the controls and Tab through them to inspect their focus states.

Action pair

One clear next step, followed by a quieter supporting link. Use links for navigation and buttons for actions.

Get started See the fix

Markup & usage

<div class="hero-summary">
  <div class="actions">
    <a class="button button-ember" href="index.html#start">Get started</a>
    <a class="text-link" href="index.html#delivery-report">See the fix</a>
  </div>
</div>

Inside .visual-home. Primary: 8px corners, 12px × 22px padding. Preserve the shared focus ring; do not use color alone to signal an action.

Copyable evidence

Keep commands and code selectable. Announce copy results without moving focus or opening a dialog.

var(--accent)

Markup & usage

<code id="token">var(--accent)</code>
<button data-copy="token" hidden>Copy</button>
<p id="token-status" role="status"></p>

Wrap the code and button in .restore-command. Load app.js; each example needs a unique ID and matching status element. Copy is revealed only when JavaScript runs.

Progressive disclosure

Keep the question visible. Use a native disclosure for optional explanations, with Enter or Space to expand.

When should we add a new component?

Start with the existing pattern. Add a shared component when the same need recurs; keep one-off illustration details local.

Markup & usage

<div class="home-faq">
  <div>
    <details>
      <summary>A useful question</summary>
      <p>A direct answer.</p>
    </details>
  </div>
</div>

Works without JavaScript. Keep essential instructions outside closed disclosures.

Navigation & evidence links

The wordmark returns home. Navigation stays open and compact. Link labels describe the destination.

Read the completed change

Markup & usage

<a class="text-link" href="worked-example.html">
  Read the completed change
</a>

Use aria-current="page" on the current navigation link. Keep SVG arrows decorative with aria-hidden="true". Never turn a whole paragraph into a link.

Composed patterns

Process loopFour pressed-state choices, pause, and a changing record.Evidence walkthroughStep selection connects findings, code changes, and results.Before / afterOne reveal range, automatic playback, and manual takeover.Product assemblySelectable screen types built from shared foundations.

Scope: these are HTML/CSS patterns, not a packaged component library. Buttons, links, copy feedback, and native disclosures have working examples here. Product-demo fields and cards are illustrations, not ready-to-use website form components.

05 / Illustration & icons

Light has a purpose.

Use transparent glass, shallow perspective, and spectral edges to explain the work. The visual should make the idea easier to understand.

The website mark

Use the original D/S outline with the full name in the header. The current header renders the mark at 42px. Keep its proportions and spectral fill; use the same SVG for the favicon.

Translucent optical instrument — **Investigate**Optical inspection

Glass architectural planes meeting at the center — **Decide**Converging planes

Translucent folded check through an aperture — **Implement**Folded check

Layered translucent archival sheets — **Check & document**Archival sheets

Expressive art, quiet interface

Keep the cyan → blue → lilac → rose → warm-white spectrum inside illustration. Reserve glows and glass for the loop and explanatory objects.

For new UI icons, follow the existing outline convention: 24-unit viewbox, 1.5px stroke, rounded caps. Pair them with labels; give icon-only controls an accessible name.

Keep the three visual contexts distinct.

Website: violet-black surfaces and purple actions. Process artwork: the spectral palette. Sample product UI: warm white and plum inside its own frame. The intentionally inconsistent “before” examples are not style references.

06 / Motion

Explain, then settle.

Motion reveals a relationship or a change. Visitors should be able to understand the page without waiting for a loop or moving a slider.

01Enter view

Begin only when the comparison introduction is visible.

02Hold · 1 second

Give the “before” state a moment to register.

03Reveal · 2.8 seconds

Sweep once, leave “after” visible, and offer replay.

Give control back

Pause playback offscreen and in hidden tabs. Manual input takes over immediately. Keep pause, replay, keyboard controls, and visible focus available. Never move the page or capture scrolling.

Respect reduced motion

Show the completed comparison and assembly immediately. Stop ambient movement and parallax. Keep content readable without JavaScript. The hero background’s three ellipses remain stationary.

The hero’s separate process sequence uses four 6-second stages. The assembly demo reveals four foundations over 5.7 seconds. Timings belong to each demonstration; they are not universal animation tokens.

07 / Using the language

Build from what is here.

Use this page as the visual reference. Read the relevant CSS and existing markup before adding another style or component.

Foundation: A shared visual decision: color roles, type, space, shape, or motion.
Component: A reusable interface part with a clear purpose and behavior, such as an action or disclosure.
Pattern: Components arranged to solve a recurring task, such as an introduction followed by evidence.
Illustration: An authored explanation. Its decorative colors and materials stay local.

Before adding a style

Find the closest existing example and reuse its classes.
Use a shared property when its role matches the need.
Keep a justified one-off treatment local and record why.
Check a narrow screen, keyboard focus, and reduced motion.
Update this reference when a shared decision changes.

Where it lives

styles.cssBase tokens, type, focus
theme.css + craft.cssViolet identity, compact actions
layout-frame.cssRails, rulers, responsive spacing
restored-loop.cssGlass and process artwork
product-specimens.cssSeparate sample-product language

This is the website’s working reference, not a universal DS Loop theme. New-work guidance reflects this project’s design judgment. The four process sculptures are original generated assets; Manrope is self-hosted under the SIL Open Font License. Asset provenance is recorded in site/assets/README.md. Source ownership and refresh instructions live in the repository’s README and DESIGN.md. The product guide explains how to use DS Loop itself.

One language.Room to build.

A warmer kind of energy.

Warm light. Dark ground.

A clear next step.

Violet orbit.

Page

Raised surface

Primary text

Secondary text

Quiet border

Control boundary

Accent

Focus

The primary action

Three voices. One hierarchy.

A frame, not a cage.

Space creates groups

Compact corners

Reuse the familiar parts.

Action pair

Copyable evidence

Progressive disclosure

Navigation & evidence links

Composed patterns

Light has a purpose.

The website mark

Expressive art, quiet interface

Explain, then settle.

Give control back

Respect reduced motion

Build from what is here.

Before adding a style

Where it lives

One language.
Room to build.