Shape
Chamfered family
Oracle's major silhouettes are rectangles with small 45-degree clipped corners. For width W, height H and corner cut c, the contour vertices are:
(c,0), (W−c,0), (W,c), (W,H−c), (W−c,H), (c,H), (0,H−c), (0,c).
The cut is measured along each adjoining straight edge, not along the diagonal. The fill and outline share the contour. Align the stroke inside the logical bounds. A 2px join radius softens the direction change without turning the cut into a round corner.
| Shape token | Default | Purpose |
|---|---|---|
| Major panel cut | 12px | Cards, panels, dialogs and drawer frames |
| Small panel cut | 8px | Compact specimen, tightly bounded small panel, or collapsed drawer rail |
| Action cut | 8px | Standalone button |
| Chip cut | 6px | Compact status/tag |
| Tab/square-profile cut | 10px | Top-right corner only; other corners square |
| Header embellishment width | 40px | Small hexagonal recess or popout along the top frame |
| Header embellishment depth | 4px | Inward or outward excursion from the top edge |
| Header embellishment right inset | 24px | Distance from outer right edge to the motif's right end |
| Field corner | 4px radius | Text input, select and textarea |
| Join radius | 2px | Chamfer joins on graphical contours |
| Border stroke | 1px | Frame, field, button and separator |
| Focus stroke | 1px | Existing contour border, recolored cyan |
| Focus offset | 0px | No extra ring outside the control contour |
| Selected-tab top marker | 3px | Blue highlight along the actual top contour |
A collapsed drawer rail uses the existing small-panel 8px cut on its exposed corners and omits the decorative hex. This is the narrow-rail exception to the major-frame family; never reduce its cut to an invented size.
A major cut is a fixed size rather than a percentage of a responsive panel. If the short edge is under 48px, use the action/chip family rather than a major panel. Never let opposing cuts overlap.
🮣────────────────────🮢 │ Major panel │ 🮡────────────────────🮠 🮣──────────────────🮢 │ Small panel │ 🮡──────────────────🮠 Chip 6px Field (square) ● circular marker
Containers and density
Cards, dialogs and major framed panes use the major cut on four corners. Adjacent split panes may share a straight interior divider; only the exposed outer corners are chamfered. App chrome can join a shell frame with straight interior edges rather than becoming a series of floating capsules.
Segmented choices join square-profile options with a shared 1px separator and no gaps. Their persistent leading checkmark identifies selection independently of the contour. Switch tracks use 4px chamfers on the 32×20 control face, with a 16px thumb using 2px chamfers; do not use a pill.
Do not add a cut to every table cell, icon, scroll thumb or tiny toolbar segment. Informational pills use shallow chip cuts, not rounded lozenges. Radio dots, status dots, timeline markers and avatar photographs may remain circular; circles communicate a different function from panel frames.
List
Detail
Top-right frame embellishment
Major graphical frames include one subtle hexagonal detail near the top-right corner. Default to a shallow cutout integrated into the top outline. Its width is 40px, its depth is 4px, and its right end is 24px from the frame's outer right edge, leaving it clear of the 12px corner chamfer. It suggests one half of a 40×8px hexagon centered on the top edge; do not draw a separate floating badge or a second outline.
For a local origin at the motif's left end on the top edge, the recessed contour follows (0,0), (4,4), (36,4), (40,0) before rejoining the straight frame. The popout alternate follows (0,0), (4,−4), (36,−4), (40,0). Continue the same 1px outline through the detail. Cutouts expose the adjacent canvas; popouts use the frame's surface material. Use the existing quiet frame color, with no new color, glow or animation.
Use the popout only when 4px of unobstructed space outside the top edge is reserved. Neither variant moves the title anchor, reduces a hit target, clips focus or overlaps header actions. Preserve the physical top-right placement in both text directions. Omit the detail where the frame is too narrow, joins another region, or cannot provide clearance; do not squeeze it into a tab, tiny control or collapsed drawer rail. A terminal may simplify or omit it as described below.
Recess 🮣──────▁▁▁──🮢 Fallback 🮣───────v─────🮢 Omitted 🮣── narrow ───🮢
Square-profile controls
A control that must fit a rectangular grid or joined header uses square corners with only a top-right cutout. It is not necessarily square in aspect ratio. With cut c, its contour is (0,0), (W−c,0), (W,c), (W,H), (0,H). For tab headers use c = 10px. The top-left, bottom-left and bottom-right corners remain 90 degrees, without a corner radius or additional chamfer; the 2px softened-join allowance for major panels does not apply to this profile.
This single-corner cutout replaces the major panel's four-corner contour and separate hexagonal embellishment. Do not apply it to fields, chips or standalone buttons merely because they occupy a rectangular layout slot; those retain their named shape families.
┌──────🮢 │ Tab │ (one diagonal end) brackets Field square Chip
Buttons
A button's frame and blue face are chamfered together. Its text and optional icon sit inside a rectangular content inset, never inside the diagonal corners. Keep 16px horizontal padding for standard controls; the 8px cut fits within that padding.
Every edge, including each diagonal cutoff, carries one continuous shape-conforming outline: blue for a primary action, essential neutral for a secondary action, and the named semantic foreground for a semantic action. Keep face paint and the contour stroke on separate layers. The contour stroke must follow the chamfer as one uninterrupted path on a layer that does not clip the control or omit diagonal segments.
Keyboard focus replaces the existing border color with cyan along the same contour, including the diagonal cutoffs. Use the existing 1px contour at 0 offset; do not add an outer ring or external gap. Keep values independently visible. Only where an edge must retain on, checked, or invalid meaning, preserve that edge and replace the face with the opaque lighter surface.focus fill defined on surfaces; geometry and stroke thickness stay unchanged. Selected tabs retain their blue top marker independently of the cyan focus contour.
Primary Secondary Warning Danger Focus
Attached tabs
Horizontal tabs share a baseline with the content panel. Every tab header uses the square profile with only a 10px top-right cutout; all other corners remain square. The selected tab's bottom is open to the pane; do not draw a full bottom border across that opening. The strip's separator continues only beneath inactive tabs or empty space.
Tabs touch with no external gap. Use a 1px shared separator instead of doubling adjoining strokes. The blue top marker follows the top edge and diagonal termination. Inactive tabs retain a quiet outline and dark content face. Do not make each tab look like a standalone chamfered action button.
Vertical tabs join the pane along the adjoining side, while retaining the square profile and physical top-right cutout. Do not rotate or mirror the cut into another corner. Selection orientation changes; color roles do not.
┌──────────🮢 │ Overview │ Details ├──────────┴───────────────┐ │ Attached content │ └──────────────────────────┘ Inactive Details Selected | Overview \ Focus | Overview \
Rendering and focus
Paint contours on noninteractive background layers. Content, selection text and native focus must not be clipped by a decorative clip path. Prefer an SVG/native shape or inset contour layers that keep a real semantic control and generous hit area.
An internal inset path must be a true stroke/inset of the outer contour; subtracting 1px from every vertex without preserving diagonal distance can produce uneven joins. Check at 1× and 2× display scales. Avoid double strokes where regions meet.
Terminal shape
One corner occupies one display cell. With verified legacy computing glyph support, use 🮣 at top-left, 🮢 at top-right, 🮡 at bottom-left and 🮠 at bottom-right, with ─ horizontal and │ vertical rules. Without legacy corners, use light box-drawing joins from the glyph guide or omit the frame and lead with the panel title. This is the terminal chamfer equivalent, not a literal 12px cut.
Only major terminal panels/cards/dialogs need frames. Text actions use brackets, and tabs use short labels/endcaps. See terminal for spacing and capability fallbacks.
The optional terminal equivalent of the top-right ornament is ▁▁▁ within the top rule, ending at least two cells before the right corner. It uses the owning frame color, never occupies a body row, and is omitted when width or glyph support makes it distracting. Terminal tab/header blocks use square left and bottom joins with only a diagonal top-right endcap; do not use diagonals at both ends. Use blue action edges, cyan focused outlines, neutral pane borders and the semantic status foregrounds specified in terminal.