Design21 Jan2026

Previews

No matching results.

Pages

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8">
  <!-- Introductory callout -->
  <div class="tw-callout">
    <p class="tw:mb-1 tw:text-sm tw:font-mono">
      <strong>STATUS TILE:</strong> A workflow stage, its current status, an optional count and corner badge<br>
      <strong>COMPOSES:</strong> Card (for the tone) | Progress | Badge
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Student records show three at once — Application, Enrolment, Offer. The tile is a
      <code>.tw-card</code>, so its tones are the card's own contrast-checked grounds rather than a
      second set of colours that would drift from them. <strong>The important part of this component is
        the fixed mapping from status to tone</strong> — a stage that is green on one screen and orange on
      another teaches staff that colour means nothing.
    </p>
  </div>
  <!-- The record strip -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">On a Student Record</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Three at once</strong>, in journey order — Application, then Enrolment, then Offer. Keep
        the order fixed across records so staff read position as meaning.
      </p>
    </div>
    <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-3 tw:gap-4">
      <div class="tw-card tw-card-positive tw-status-tile">
        <span class="tw-status-tile-label">Application</span>
        <span class="tw-status-tile-value">Submitted</span>
        <span class="tw-status-tile-meta">14 March 2026</span>
        <div class="tw-status-tile-progress">
          <div class="tw-progress tw:flex-1" data-controller="progress" data-progress-current-value="100">
            <div class="tw-progress-bar tw-progress-bar-success" data-progress-target="bar"></div>
          </div>
          <span class="tw-status-tile-count">5 of 5</span>
        </div>
      </div>
      <div class="tw-card tw-card-caution tw-status-tile">
        <span class="tw-badge tw-badge-warning-subtle tw-badge-sm tw-status-tile-badge">Action needed</span>
        <span class="tw-status-tile-label">Enrolment</span>
        <span class="tw-status-tile-value">Awaiting documents</span>
        <span class="tw-status-tile-meta">2 of 6 uploaded</span>
        <div class="tw-status-tile-progress">
          <div class="tw-progress tw:flex-1" data-controller="progress" data-progress-current-value="33">
            <div class="tw-progress-bar tw-progress-bar-warning" data-progress-target="bar"></div>
          </div>
          <span class="tw-status-tile-count">2 of 6</span>
        </div>
      </div>
      <div class="tw-card tw-card-highlight tw-status-tile">
        <span class="tw-status-tile-label">Offer</span>
        <span class="tw-status-tile-value">Offer made</span>
        <span class="tw-status-tile-meta">Response due 28 March</span>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="tw-card tw-card-positive tw-status-tile"><span class="tw-status-tile-label">Application</span><span class="tw-status-tile-value">Submitted</span>…</div></code>
    </div>
  </div>
  <!-- Tones -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">The Four Tones</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        Tone answers one question: <strong>does this stage need someone to do something?</strong> Green =
        done, nothing owed. Orange = the school or family owes an action. Red = blocked or refused.
        Blue = in progress, nothing owed yet. <strong>Never pick tone by stage</strong> — "Offer" is not
        inherently blue; it is blue while awaiting a response and green once accepted.
      </p>
    </div>
    <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-4 tw:gap-4">
      <div class="tw-card tw-card-positive tw-status-tile tw-status-tile-sm">
        <span class="tw-status-tile-label">Complete</span>
        <span class="tw-status-tile-value">Offer accepted</span>
        <span class="tw-status-tile-meta">Nothing owed</span>
      </div>
      <div class="tw-card tw-card-highlight tw-status-tile tw-status-tile-sm">
        <span class="tw-status-tile-label">In progress</span>
        <span class="tw-status-tile-value">Under review</span>
        <span class="tw-status-tile-meta">With admissions</span>
      </div>
      <div class="tw-card tw-card-caution tw-status-tile tw-status-tile-sm">
        <span class="tw-status-tile-label">Action needed</span>
        <span class="tw-status-tile-value">Awaiting documents</span>
        <span class="tw-status-tile-meta">Family to upload</span>
      </div>
      <div class="tw-card tw-card-negative tw-status-tile tw-status-tile-sm">
        <span class="tw-status-tile-label">Blocked</span>
        <span class="tw-status-tile-value">Offer declined</span>
        <span class="tw-status-tile-meta">Place released</span>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code>.tw-card-positive | .tw-card-highlight | .tw-card-caution | .tw-card-negative</code>
    </div>
  </div>
  <!-- Corner badge -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">Corner Badge</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        The badge marks something about the tile itself, not the status — "Demo" data, a "New" stage, a
        count of outstanding items. It is <strong>positioned, not floated</strong>, so a long status value
        wraps beneath it rather than colliding with it.
      </p>
    </div>
    <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-2 tw:gap-4 tw:max-w-2xl">
      <div class="tw-card tw-card-highlight tw-status-tile">
        <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm tw-status-tile-badge">Demo</span>
        <span class="tw-status-tile-label">Enrolment</span>
        <span class="tw-status-tile-value">Awaiting confirmation from the family</span>
        <span class="tw-status-tile-meta">Sent 2 April 2026</span>
      </div>
      <div class="tw-card tw-card-caution tw-status-tile">
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-rounded tw-status-tile-badge">3</span>
        <span class="tw-status-tile-label">Documents</span>
        <span class="tw-status-tile-value">3 still outstanding</span>
        <span class="tw-status-tile-meta">Passport, proof of address, report</span>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><span class="tw-badge tw-badge-secondary-subtle tw-badge-sm tw-status-tile-badge">Demo</span></code>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8">
  <!-- Introductory callout -->
  <div class="tw-callout">
    <p class="tw:mb-1 tw:text-sm tw:font-mono">
      <strong>STATUS TILE:</strong> A workflow stage, its current status, an optional count and corner badge<br>
      <strong>COMPOSES:</strong> Card (for the tone) | Progress | Badge
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Student records show three at once — Application, Enrolment, Offer. The tile is a
      <code>.tw-card</code>, so its tones are the card's own contrast-checked grounds rather than a
      second set of colours that would drift from them. <strong>The important part of this component is
      the fixed mapping from status to tone</strong> — a stage that is green on one screen and orange on
      another teaches staff that colour means nothing.
    </p>
  </div>
  <!-- The record strip -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">On a Student Record</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Three at once</strong>, in journey order — Application, then Enrolment, then Offer. Keep
        the order fixed across records so staff read position as meaning.
      </p>
    </div>
    <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-3 tw:gap-4">
      <div class="tw-card tw-card-positive tw-status-tile">
        <span class="tw-status-tile-label">Application</span>
        <span class="tw-status-tile-value">Submitted</span>
        <span class="tw-status-tile-meta">14 March 2026</span>
        <div class="tw-status-tile-progress">
          <div class="tw-progress tw:flex-1" data-controller="progress" data-progress-current-value="100">
            <div class="tw-progress-bar tw-progress-bar-success" data-progress-target="bar"></div>
          </div>
          <span class="tw-status-tile-count">5 of 5</span>
        </div>
      </div>
      <div class="tw-card tw-card-caution tw-status-tile">
        <span class="tw-badge tw-badge-warning-subtle tw-badge-sm tw-status-tile-badge">Action needed</span>
        <span class="tw-status-tile-label">Enrolment</span>
        <span class="tw-status-tile-value">Awaiting documents</span>
        <span class="tw-status-tile-meta">2 of 6 uploaded</span>
        <div class="tw-status-tile-progress">
          <div class="tw-progress tw:flex-1" data-controller="progress" data-progress-current-value="33">
            <div class="tw-progress-bar tw-progress-bar-warning" data-progress-target="bar"></div>
          </div>
          <span class="tw-status-tile-count">2 of 6</span>
        </div>
      </div>
      <div class="tw-card tw-card-highlight tw-status-tile">
        <span class="tw-status-tile-label">Offer</span>
        <span class="tw-status-tile-value">Offer made</span>
        <span class="tw-status-tile-meta">Response due 28 March</span>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="tw-card tw-card-positive tw-status-tile"><span class="tw-status-tile-label">Application</span><span class="tw-status-tile-value">Submitted</span>…</div></code>
    </div>
  </div>
  <!-- Tones -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">The Four Tones</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        Tone answers one question: <strong>does this stage need someone to do something?</strong> Green =
        done, nothing owed. Orange = the school or family owes an action. Red = blocked or refused.
        Blue = in progress, nothing owed yet. <strong>Never pick tone by stage</strong> — "Offer" is not
        inherently blue; it is blue while awaiting a response and green once accepted.
      </p>
    </div>
    <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-4 tw:gap-4">
      <div class="tw-card tw-card-positive tw-status-tile tw-status-tile-sm">
        <span class="tw-status-tile-label">Complete</span>
        <span class="tw-status-tile-value">Offer accepted</span>
        <span class="tw-status-tile-meta">Nothing owed</span>
      </div>
      <div class="tw-card tw-card-highlight tw-status-tile tw-status-tile-sm">
        <span class="tw-status-tile-label">In progress</span>
        <span class="tw-status-tile-value">Under review</span>
        <span class="tw-status-tile-meta">With admissions</span>
      </div>
      <div class="tw-card tw-card-caution tw-status-tile tw-status-tile-sm">
        <span class="tw-status-tile-label">Action needed</span>
        <span class="tw-status-tile-value">Awaiting documents</span>
        <span class="tw-status-tile-meta">Family to upload</span>
      </div>
      <div class="tw-card tw-card-negative tw-status-tile tw-status-tile-sm">
        <span class="tw-status-tile-label">Blocked</span>
        <span class="tw-status-tile-value">Offer declined</span>
        <span class="tw-status-tile-meta">Place released</span>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code>.tw-card-positive | .tw-card-highlight | .tw-card-caution | .tw-card-negative</code>
    </div>
  </div>
  <!-- Corner badge -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">Corner Badge</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        The badge marks something about the tile itself, not the status — "Demo" data, a "New" stage, a
        count of outstanding items. It is <strong>positioned, not floated</strong>, so a long status value
        wraps beneath it rather than colliding with it.
      </p>
    </div>
    <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-2 tw:gap-4 tw:max-w-2xl">
      <div class="tw-card tw-card-highlight tw-status-tile">
        <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm tw-status-tile-badge">Demo</span>
        <span class="tw-status-tile-label">Enrolment</span>
        <span class="tw-status-tile-value">Awaiting confirmation from the family</span>
        <span class="tw-status-tile-meta">Sent 2 April 2026</span>
      </div>
      <div class="tw-card tw-card-caution tw-status-tile">
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-rounded tw-status-tile-badge">3</span>
        <span class="tw-status-tile-label">Documents</span>
        <span class="tw-status-tile-value">3 still outstanding</span>
        <span class="tw-status-tile-meta">Passport, proof of address, report</span>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><span class="tw-badge tw-badge-secondary-subtle tw-badge-sm tw-status-tile-badge">Demo</span></code>
    </div>
  </div>
</div>

No notes provided.

No params configured.