APEX / DESIGN SYSTEM / V1.1

A shared design language.

Foundations for the studio website, Apex OS and the future client experience. Real tokens, reusable components and working interaction patterns.

Brand manual · PDF ↓ Logo · SVG ↓ Dark logo · SVG ↓ Design tokens · JSON ↗

01 / Brand signature

Apex Design Studio

One outlined master: the symbol aligns to the optical center of the name. “design” sits above “studio”, both at the same type size. The small inner triangle is black on light surfaces and white on dark surfaces.

SVG ↓Brand kit ↓

02 / Semantic color

Color with a role.

canvas#F9F8F4

surface#F0EEE7

ink#20211F

muted#62635D

border#D9D8CF

brand#FF6A00

brandText#20211F

brandInk#AA3F0A

symbolInner#000000

success#3F623E

successSurface#E8F0E1

warning#865400

warningSurface#FFF0CD

danger#A52E35

dangerSurface#FCE7E8

focus#AD3C00

Use charcoal text on orange actions. Use brandInk for orange-toned text on light surfaces. Status always includes a label, not color alone.

03 / MANROPE

Clear at every scale.

Clear thinking.Design com intenção.A new perspective.Readable body text connects the visual system to the work people need to do.LABEL / 11 / SEMIBOLD

Weights 400, 500, 600, 700 and 800. Body copy uses a comfortable measure and generous leading; compact labels remain secondary.

04 / Rhythm and geometry

Space creates the hierarchy.

1 / 4px

2 / 8px

3 / 12px

4 / 16px

5 / 20px

6 / 24px

8 / 32px

10 / 40px

12 / 48px

16 / 64px

20 / 80px

24 / 96px

none / 0px

small / 4px

medium / 8px

large / 16px

device / 40px

pill / 999px

05 / Buttons and links

One clear next action.

Every action has hover, focus-visible and disabled states. Use explicit verbs. Destructive actions require a clear consequence and a confirmation pattern.

06 / Form controls

Keep the context visible.

Sample projectLocal component example. No submission.

Project stage

Validation exampleAdd a name to identify this sample.

Disabled field

Include this sample itemPreview option

07 / Status and feedback

Say what happened.

DraftReadyNeeds reviewBlockedIn progress

Saved in this example

Keep the result visible and explain the next step.

Review required

Explain which decision is needed before continuing.

Could not complete

Preserve the input and provide a recovery path.

Illustrative project progress64%

08 / Interaction patterns

Consider the whole interaction.

Make a decision in context.

Tabs support arrow keys, Home and End. Dialogs use the browser’s native focus management.

Accessible accordion pattern

A native disclosure keeps keyboard behavior and expanded state consistent. Use it for optional detail, not essential information.

09 / Product foundations

Ready for the next interface.

Sample delivery table
Deliverable	Stage	Status
Brand direction	Design	Review
Client portal	Prototype	Concept

The demos show project search, filters, detail dialogs, progress, a content queue, mobile navigation, file previews and reversible sample approval. They are frontend concepts, not a production client platform.

Apex OS ↗ Apex Portal ↗

10 / Motion laboratory

Movement with a purpose.

Three reusable behaviors: reveal relationships, communicate progress and make a state change legible. Nothing starts automatically. Your reduced-motion preference is respected.

Connected constellation

A staggered entrance reveals a system of relationships.

Evidence scan

A finite scan highlights an inspection, without implying a real background operation.

Focus stack

Layers open to expose depth, then return to a stable reading state.